HTML标签用法

Posted kiko0o0

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML标签用法相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <!--页面编码-->
 5     <meta charset="UTF-8">
 6     <!--刷新和跳转-->
 7     <!--<meta http-equiv="Refresh" content="1">-->
 8     <meta http-equiv="Refresh" content="3;Url=http://www.baidu.com" />
 9     <!--搜索引擎里的关键字和相关描述信息-->
10     <meta name="keywords" content="关键字" />
11     <meta name="description" content="相关表述信息" />
12     <!--标头兼容模式-->
13     <meta http-equiv="X-UA-Compatible" content="IE=IE10;IE=IE9" />
14     <!--标题-->
15     <title>测试</title>
16     <!--图标-->
17     <link rel="stortcut icon" href="image/图片">
18     
19 </head>
20 <body>
21     <!--所有标签分类:-->
22         <!--块级标签:H系列(加大加粗),P标签(段落和段落之间有间距),div (白板)-->
23         <!--行内标签:span(白板)a-->
24 
25     <!--h标签 标题1-6 大小 由大到小-->
26     <h1 style = ‘background-color:red;‘>@@@<h1>
27     <!--p标签 段落   br标签 换行-->
28     <b>段落段落段落<br />换行 段落段落</b>
29     <div>123</div>
30     <a href="http://www.oldboyedu.com">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
31         <table border="1">
32         <tr>
33             <td>1</td>
34             <td>2</td>
35             <td>3</td>
36         </tr>
37         </table>
38 </body>
39 </html>
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <body>
  8     <!--POST和GET的区别 GET 把递交数据拼接到url里 但是post不是-->
  9     <form action="http://localhost:80000/index" method="GET" enctype="multipart/form-data">
 10         <!--label可以让点击用户名也进入编辑 必须用input里的ID 和自身的for进行关联-->
 11         <!--fieldset 框框-->
 12         <fieldset>
 13             <legend>登陆</legend>
 14             <label for="username">用户名:</label>
 15             <input id="username" type="text" name="user"/>
 16             <label for="emnailname">邮箱:</label>
 17             <input id="emnailname" type="text" name="email"/>
 18             <label for="pawd">密码:</label>
 19             <input id="pawd" type="password" name="pwd"/>
 20         </fieldset>
 21 
 22         <p>请选择性别:</p>
 23         <!--单选框radio 同name就互斥  checked默认选中-->
 24         <span>男:</span><input type="radio" name="gender" value="1" checked="checked">
 25         <span>女:</span><input type="radio" name="gender" value="2">
 26 
 27         <p>请选择爱好:</p>
 28         <!--多选框 checkbox默认选中-->
 29         <span>篮球:</span><input type="checkbox" name="favor" value="1">
 30         <span>皮球:</span><input type="checkbox" name="favor" value="2">
 31         <span>排球:</span><input type="checkbox" name="favor" value="3">
 32         <span>羽毛球:</span><input type="checkbox" name="favor" value="4">
 33         <input type="button" value="按钮"/>
 34 
 35         <p>上传文件</p>
 36         <!--要上传文件必须在所在form里添加enctype="multipart/form-data">-->
 37         <input type="file" name="fname">
 38         <!--多文本输入框-->
 39         <textarea name="meno" >多文本输入框</textarea>
 40 
 41         <!--下拉框 默认selected="selected" 多选multiple="multiple"-->
 42         <select name="city" size="4" multiple="multiple">
 43             <option value="1">西安</option>
 44             <option value="2">北京</option>
 45             <option value="3">上海</option>
 46             <option value="4" selected="selected">苏州</option>
 47         </select>
 48          <!--下拉框 默认selected="selected" 多选multiple="multiple"-->
 49         <select name="city2"  >
 50             <option value="1">西安</option>
 51             <option value="2">北京</option>
 52             <option value="3">上海</option>
 53             <option value="4" selected="selected">苏州</option>
 54         </select>
 55         <!--submit 递交数据用-->
 56         <input type="submit" value="登陆"/>
 57         <!--重置-->
 58         <input type="reset" value="重置">
 59     </form>
 60     <br/>
 61     <form>
 62         <!--ul li 配合使用 列表-->
 63         <!--dl配合dt,dd使用 用来分组的-->
 64         <ul>
 65             <li>列表</li>
 66             <li>ul和li是一起配合用</li>
 67             <li>ul和li是一起配合用</li>
 68             <li>ul和li是一起配合用</li>
 69         </ul>
 70         <ol>
 71             <li>列表</li>
 72             <li>ul和li是一起配合用</li>
 73             <li>ul和li是一起配合用</li>
 74             <li>ul和li是一起配合用</li>
 75         </ol>
 76         <dl>
 77             <dt>列表</dt>
 78             <dd>dl和dd/dt是一起配合用</dd>
 79             <dd>dl和dddt是一起配合用</dd>
 80             <dd>dl和dddt是一起配合用</dd>
 81             <dt>分组</dt>
 82             <dd>dl和dd/dt是一起配合用</dd>
 83             <dd>dl和dddt是一起配合用</dd>
 84             <dd>dl和dddt是一起配合用</dd>
 85         </dl>
 86         <!--table表格 tr行 td列 border=1 表格自带边框-->
 87         <table border="1">
 88             <tr>
 89                 <td>主机</td>
 90                 <td>端口</td>
 91                 <td>操作</td>
 92             </tr>
 93             <tr>
 94                 <td>10.11.125.81</td>
 95                 <td>8080</td>
 96                 <td>
 97                     <a href="http://www.baidu.com">查看</a>
 98                     <a>修改</a>
 99                 </td>
100             </tr>
101         </table>
102         <!--table里thead 是表头 行用tr 列用th-->
103         <!--tboby 表身 合并列 colspan 合并行 rowspan-->
104         <table border="1">
105             <thead>
106             <tr>
107                 <th>表头</th>
108                 <th>表头</th>
109                 <th>表头</th>
110                 <th>表头</th>
111             </tr>
112             </thead>
113             <tbody>
114             <tr>
115                 <td>1</td>
116                 <td colspan="2">1</td>
117                 <td rowspan="2">1</td>
118             </tr>
119             <tr>
120                 <td>1</td>
121                 <td>1</td>
122                 <td>1</td>
123 
124             </tr>
125             </tbody>
126         </table>
127 
128         <!--a 超链接   target="_blank"重新打开一个页面进行跳转-->
129         <!--a href 可以进行茅跳转 具体跳转某个id-->
130         <a href="http://www.baidu.com" target="_blank">超链接</a><br>
131         <a href="#1">第一章</a>
132         <a href="#2">第二章</a>
133         <a href="#3">第三章</a>
134         <!--img图片 title 鼠标放在图片上的提示 alt 如果图片未找到 进行的提示 src图片的路径名称-->
135         <img src="1.jpg" title="图片测试" style="height:200px; width:200px;" alt="图片">
136         <div id="1" style="height: 600px;">第一章内容</div>
137         <div id="2" style="height: 600px;">第二章内容</div>
138         <div id="3" style="height: 600px;">第三章内容</div>
139     </form>
140 </body>
141 </html>

 

以上是关于HTML标签用法的主要内容,如果未能解决你的问题,请参考以下文章

HTML无序列表ul标签用法

HTML基础学习

HTML基础学习

HTML a 标签的基本用法和常用属性

HTML中Progress标签的定义及用法总结!

4.常用的HTML标签及用法