Html常⽤标签和属性（包含Html5）
常⽤标签和属性
基本标签
1. <title></title> 标签⽤于定义⽂档中的标题，是在所有 HTML ⽂档中必需的。⾥⾯的标题内容会出现在浏览器的标签页，是影响搜索
引擎排名的重要内容。
2. <style></style> 是定义 HTML ⽂档样式的标签。⽤于为页⾯书写内部样式表。⼀个⽂档可以包含多个 style 标签，并且可以书写在任
意位置（⼀般书写在 head 标签内）。
3. <script></script>标签既可以直接包含 javascript 语句，也可以通过 src 属性指向外部 js ⽂件，但是不能混合着使⽤（使⽤ src 属
性的 script 标签必须是空的）。script 标签可以放在 html ⽂件的任何位置。
4. <link /> 标签⽤于链接外部样式表，只能在 head 标签内使⽤。href 属性⽤来指定 css 样式⽂件的位置。
5. <h1>~<h6> 标题标签，会影响页⾯在搜索引擎的排名。使⽤时避免跳过某些级别，例如从 h3 直接跳到 h5。但是允许跳到⾼的级
别。
6. <p></p> 标签⽤于定义段落。
7. <a /> 标签⽤于定义超链接。最重要的属性是 href 属性（必需属性），⽤于指定链接⽬标。target 属性⽤于规定打开新页⾯的位置属
性值可为 _blank、_parent、_self、_top、framename。
8. <img /> 标签⽤于定义 html 页⾯中的图像。src 属性指明显⽰图像的 URL，alt 属性规定图像的替换⽂本（当图像加载错误时出现的
⽂本）。
9. <em></em> 标签定义强调⽂本，表现为斜体。
10. <strong></strong> 也是应⽤于定义语⽓更强的强调⽂本，表现为粗体。
11. <del></del> 定义删除的⽂本。
12. <ins></ins> 定义插⼊⽂档的⽂本。
13. <span></span> 标签⽤于组合⽂档内的⾏内元素。
14. <div></div> 可以⽤于定义⽂档中的分区或节，是⼀个没有语义的块级元素。
15. <ul></ul> 定义⽆序列表，列表项使⽤ li 元素包含。
16. <ol></ol> 定义有序列表，列表项使⽤ li 元素包含。
17. <dl></dl> 定义⾃定义列表，结合<dt></dt>（定义列表项⽬）和<dd></dd>（描述列表项⽬）使⽤。
表格标签
1. <table></table> 标签⽤于定义表格。
2. <tr></tr> 标签⽤于定义表格中的⾏，必须嵌套在<table></table>标签中。
3. <td></td> ⽤于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4. 表头单元格标签 <th></th> 表⽰ html 表格的表头部分（table head 的缩写）⼀般位于表格的第⼀⾏或者第⼀列，⾥⾯的⽂本内容相
对于 td 标签的差异是会加粗居中显⽰。
5. 表格结构标签：当表格很长时，为了更好的表⽰表格的语义，可以将表格分为表格头部和表格主体两⼤部分；在表格标签中，分别使
⽤ <thead> 标签表⽰表格的头部区域， <tbody> 标签表⽰表格的主体区域。
表格的常⽤属性
border: 规定表格的单元格是否具有边框，默认没有。
cellspacing: 设置单元格之间的空⽩，默认2px。
cellpadding: 规定单元边沿与其内容之间的空⽩，默认1px。
rowspan: 跨⾏合并单元格(上下合并单元格）。
colspan: 跨列合并单元格(左右合并单元格)。
<table border="5px"cellpadding="10px"cellspacing="20px">
<tr>
<td rowspan="2">上下合并</td>
<td colspan="2">左右合并</td>
<!--左右单元格合并后需要将(1,3)这个单元格去掉 -->
</tr>
<tr>
<!--上下单元格合并后需要将(2,1)这个单元格去掉 -->
<td>（2，2）</td>
<td>（2，3）</td>
</tr>
</table>
表单标签
表单域
⼀个完整的表单通常由表单域、表单控件（即各种表单元素）和提⽰信息三个部分构成。在 html 中 <form></form> 标签⽤于定义表单域，以实现⽤户信息的收集和传递，该标签会把它范围内的表单元素信息提交给服务器。在表单域中可以定义各种表单元素，这些表单元素就是允许⽤户在表单中输⼊或选择内容的控件。
<form></form> 标签的属性：
action: ⽤于指定接收并处理表单数据的服务器程序的url地址（必需属性）。
method: ⽤于设置表单数据的提交⽅式，其取值为 get 或 post（必需属性）。
name: ⽤于指定表单的名称，以区分同⼀个页⾯中的多个表单域。
表单控件
1. <input></input> 标签⽤于搜集⽤户信息。根据不同的 type 属性值，输⼊字段拥有很多种形式。输⼊字段可以是⽂本字段、复选框、
掩码后的⽂本控件、单选按钮、按钮等等。
type的属性值描述
button定义可点击按钮（多数情况下⽤于通过javascript启动脚本)
checkbox定义复选框
password定义密码字段，该字段中的字符被掩码
radio定义单选按钮
reset定义重置按钮，重置按钮会清楚表单中的所有数据
submit定义提交按钮，提交按钮会把表单数据发送到服务器
image定义图像形式的提交按钮
file定义输⼊字段和 "浏览"按钮，供⽂件上传。
text定义单⾏的输⼊字段，⽤户可在其中输⼊⽂本，默认宽度为20个字符
2. <select></select> 在页⾯中，如果有多个选项让⽤户选择，并且要节约页⾯空间时，我们可以使⽤ <select> 标签控件定义下拉列表。
<select>
<option value="city1">选项1</option>
<option value="city2">选项2</option>
...
</select>
3. <label></label> 标签⽤于绑定⼀个表单元素，当点击 <label> 标签内的⽂本时，浏览器就会⾃动将光标转到或者选择对应的表单元素
来提⾼⽤户体验。
<label for="man">男</label>
<!--for属性指向对应控件的id属性的值-->
<input type="radio"name="sex"id="man"value="man"/>
<label for="woman">⼥</label>
<input type="radio"name="sex"id="woman"value="woman"/>
4. <textarea></textarea> 标签⽤于定义多⾏的⽂本输⼊控件。
表单元素的属性
1. name 属性表⽰表单元素的名字，要求单选按钮和复选框要有相同的 name 值。
2. value 属性规定 input 元素的值。
3. checked 属性规定此 input 元素⾸次加载时应被选中（复选框、单选按钮）。
4. selected属性规定下拉单选菜单加载时默认选中的选项。
nane 和 value 是每个表单元素都必须有的属性值，主要给后台⼈员使⽤。
三个常⽤的全局属性
1. id 属性：⽤于规定 HTML 元素的唯⼀ id；id 属性可⽤于链接锚（link anchor），通过 js 或 css 为指定 id 的元素改变或添加
样式。
2. class 属性：⽤于定义元素的类名；可以为⼀个元素设置多个类名（之间⽤空格隔开），也可以为⼏个元素设置同⼀个类名。
3. title 属性：⽤于规定元素的⼯具提⽰⽂本（⿏标移⼊时会显⽰出来）。
H5新增常⽤标签
1. 视频标签 <video></video> : 可以在开始标签和结束标签之间放置⽂本内容，这样⽼的浏览器就可以显⽰出不⽀持该标签的信息。
常⽤属性
poster = “imgurl”：加载时等待的画⾯图⽚。
src = “url”：视频地址。
loop = “loop”：循环播放属性。
muted = “muted”：静⾳播放属性。html href属性
controls = “controls”：播放控件属性。
autoplay = “autoplay”：⾃动播放属性。
2. ⾳频标签 <audio></audio> : 可以在开始标签和结束标签之间放置⽂本内容，这样⽼的浏览器就可以显⽰出不⽀持该标签的信息。
常⽤属性
src = “url”：⾳频地址
loop = “loop”：循环播放属性
muted = “muted”：静⾳播放属性
controls = “controls”：播放控件属性
autoplay = “autoplay”：⾃动播放属性
3. <header></header>: 定义⽹页中某部分的头部（在页⾯中可以有多个 header 标签）。
4. <section></section>：定义⽂档某个区域，section 元素代表⽂档或者应⽤的⼀个⼀般的区块。⾥⾯通常是具有相似主题的⼀组内
容，通常包含⼀个主题。
5. <nav></nav>：导航标签，对⽂档中重要的链接使⽤。在页⾯中插⼊⼀组链接并⾮意味着⼀定要将他们包含在 nav 标签中，是否对
⼀组链接添加 nav 标签取决于内容的组织情况。⾄少应该将⽹站全局导航（让⽤户跳⾄⽹站的各个主要部分的导航）标记为 nav。
6. <article></article>：内容标签; article 元素表设计⽂档、页⾯、应⽤或者⽹站中的⼀个独⽴的容器，原则上是可以独⽴分配或可再⽤
的。它可以是⼀篇论坛帖⼦、杂志⽂章、⽤户提交的评论、博客条⽬、⼀个交互式的⼩部件或者⼩⼯具、或者其他任何独⽴的内容项。
7. <footer></footer>：定义⽹页中某部分的尾部（在页⾯中可以有多个 footer 标签）。
8. <asider></asider>：侧边栏标签，可以⽤来标记与主体内容相关性没有那么强，可以独⽴存在的⼀部分内容（侧边栏、⼴告、博客友
情链接、重要引述或像新闻⽹站相关⽂章的⼀组链接等）。
9. <main></main>: 定义页⾯的主要区域。将代表页⾯主要内容的内容包含在 main 标签中，⼀个页⾯只能出现⼀次。
10. <figure></figure>: ⽤于规定独⽴的流内容（图像、图标、照⽚、代码等），该元素内的内容应该和主内容相关，同时元素的位置相
同时元素的位置相对于主内容是独⽴的。如果被删除，则不应对⽂档流产⽣影响。
对于主内容是独⽴的
11. <figcaption></figcaption>: ⽤于为 figure 元素定义标题，应该被置于第⼀个或最后⼀个⼦元素的位置。例如题表的标题。
12. <address></address>: ⽤于定义⽂档作者/所有者的联系信息，如果位于 body 标签内则表⽰该⽂档作者/所有者的联系信息；位于
article 标签内则是该⽂章的作者/所有者的联系信息。
例如使⽤ html 可以对整个页⾯做如下布局：
<body>
<header>
<nav><nav></nav>
<header>
</header><!--头部标签⼀般都有整个页⾯的主导航栏-->
<article>
<article>
<section>
<section>
</section>
</article>
<aside>
<aside>
</aside>
<footer>
<footer>
<address>
<address>
</address>
</footer>
</body>
注意：新增的这些语义化标签主要是针对搜索引擎设计的。div 应该作为最后⼀个备⽤容器，因为它没有任何语义价值，⼤多数时候，使⽤ header、footer、main(仅使⽤⼀次)、article、section、aside 和 nav 代替 div会更加合适。但是如果语义上不合适，也不必为了避开使⽤ div ⽽使⽤上述元素。
H5新增的input表单项的类型和新增属性
type属性值描述
email⽤户的输⼊内容必须是email格式。
tel⽤户输⼊必须是⼿机号码。
search定义⽤于输⼊搜索字符串的⽂本字段。
number定义⽤于输⼊数字的字段。
date定义 date 控件（包括年、⽉、⽇，不包括时间）。
新增常⽤属性描述
required = "required"定义表单项内容不能为空 。
placeholder = "提⽰⽂本"表单的提⽰信息，存在默认值将不显⽰。
autofocus = 'autofocus"⾃动聚焦属性 。
autocomplete = “off/on”历史键⼊记录，默认打开，需要放在表单域同时加上name属性。
multiple = “multiple”可以选择多⽂件提交。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。