Html常用标签和属性(包含Html5)

常用标签和属性

基本标签

<title></title> 标签用于定义文档中的标题，是在所有 HTML 文档中必需的。里面的标题内容会出现在浏览器的标签页，是影响搜索引擎排名的重要内容。
<style></style> 是定义 HTML 文档样式的标签。用于为页面书写内部样式表。一个文档可以包含多个 style 标签，并且可以书写在任意位置（一般书写在 head 标签内）。
<script></script> 标签既可以直接包含 javascript 语句，也可以通过 src 属性指向外部 js 文件，但是不能混合着使用（使用 src 属性的 script 标签必须是空的）。script 标签可以放在 html 文件的任何位置。
<link /> 标签用于链接外部样式表，只能在 head 标签内使用。href 属性用来指定 css 样式文件的位置。

<h1>~<h6> 标题标签，会影响页面在搜索引擎的排名。使用时避免跳过某些级别，例如从 h3 直接跳到 h5。但是允许跳到高的级别。
<p></p> 标签用于定义段落。
<a /> 标签用于定义超链接。最重要的属性是 href 属性（必需属性），用于指定链接目标。target 属性用于规定打开新页面的位置属性值可为 _blank、_parent、_self、_top、framename。
<img /> 标签用于定义 html 页面中的图像。src 属性指明显示图像的 URL，alt 属性规定图像的替换文本（当图像加载错误时出现的文本）。
<em></em> 标签定义强调文本，表现为斜体。
<strong></strong> 也是应用于定义语气更强的强调文本，表现为粗体。
<del></del> 定义删除的文本。
<ins></ins> 定义插入文档的文本。
<span></span> 标签用于组合文档内的行内元素。
<div></div> 可以用于定义文档中的分区或节，是一个没有语义的块级元素。
<ul></ul> 定义无序列表，列表项使用 li 元素包含。
<ol></ol> 定义有序列表，列表项使用 li 元素包含。
<dl></dl> 定义自定义列表，结合<dt></dt>（定义列表项目）和<dd></dd>（描述列表项目）使用。

表格标签

<table></table> 标签用于定义表格。
<tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中。
<td></td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
表头单元格标签 <th></th> 表示 html 表格的表头部分（table head 的缩写）一般位于表格的第一行或者第一列，里面的文本内容相对于 tr 标签的差异是会加粗居中显示。
表格结构标签：当表格很长时，为了更好的表示表格的语义，可以将表格分为表格头部和表格主体两大部分；在表格标签中，分别使用 <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: 用于指定表单的名称，以区分同一个页面中的多个表单域。

表单控件

<input></input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

type的属性值	描述
button	定义可点击按钮（多数情况下用于通过javascript启动脚本)
checkbox	定义复选框
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清楚表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
image	定义图像形式的提交按钮
file	定义输入字段和 "浏览"按钮，供文件上传。
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

<select></select> 在页面中，如果有多个选项让用户选择，并且要节约页面空间时，我们可以使用 <select> 标签控件定义下拉列表。
```
 <select>
 	<option value="city1" name="option1">选项1</option>
 	<option value="city2" name="option2">选项2</option>
 	...
 </select>
```

<lable></lable> 标签用于绑定一个表单元素，当点击 <lable> 标签内的文本时，浏览器就会自动将光标转到或者选择对应的表单元素来提高用户体验。

<lable for="man">男</lable>
<!--for属性指向对应控件的id属性的值-->
<input type="radio" name="sex" id="man" value="man"/>
<lable for="woman">女</lable>
<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新增常用标签

视频标签 <video></video> : 可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

常用属性
- poster = “imgurl”：加载时等待的画面图片。
- src = “url”：视频地址。
- loop = “loop”：循环播放属性。
- muted = “muted”：静音播放属性。
- controls = “controls”：播放控件属性。
- autoplay = “autoplay”：自动播放属性。

音频标签 <audio></audio> : 可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

常用属性
- src = “url”：音频地址
- loop = “loop”：循环播放属性
- muted = “muted”：静音播放属性
- controls = “controls”：播放控件属性
- autoplay = “autoplay”：自动播放属性

<header></header>: 定义网页中某部分的头部（在页面中可以有多个 header 标签）。
<section></section>：定义文档某个区域，section 元素代表文档或者应用的一个一般的区块。里面通常是具有相似主题的一组内容，通常包含一个主题。
<nav></nav>：导航标签，对文档中重要的链接群使用。在页面中插入一组链接并非意味着一定要将他们包含在 nav 标签中，是否对一组链接添加 nav 标签取决于内容的组织情况。至少应该将网站全局导航（让用户跳至网站的各个主要部分的导航）标记为 nav。
<article></article>：内容标签; article 元素表设计文档、页面、应用或者网站中的一个独立的容器，原则上是可以独立分配或可再用的。它可以是一篇论坛帖子、杂志文章、用户提交的评论、博客条目、一个交互式的小部件或者小工具、或者其他任何独立的内容项。
<footer></footer>：定义网页中某部分的尾部（在页面中可以有多个 footer 标签）。
<asider></asider>：侧边栏标签，可以用来标记与主体内容相关性没有那么强，可以独立存在的一部分内容（侧边栏、广告、博客友情链接、重要引述或像新闻网站相关文章的一组链接等）。
<main></main>: 定义页面的主要区域。将代表页面主要内容的内容包含在 main 标签中，一个页面只能出现一次。
<figure></figure>: 用于规定独立的流内容（图像、图标、照片、代码等），该元素内的内容应该和主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
<figcaption></figcaption>: 用于为 figure 元素定义标题，应该被置于第一个或最后一个子元素的位置。例如题表的标题。

<address></address>: 用于定义文档作者/所有者的联系信息，如果位于 body 标签内则表示该文档作者/所有者的联系信息；位于 article 标签内则是该文章的作者/所有者的联系信息。
例如使用 html 可以对整个页面做如下布局：

	<body>
			<header>
				<nav>&lt;nav&gt;</nav>
				&lt;header&gt;	
			</header>		<!--头部标签一般都有整个页面的主导航栏-->
			<article>
				&lt;article&gt;
				<section>
					&lt;section&gt;
				</section>
			</article>
			<aside>
				&lt;aside&gt;
			</aside>
			<footer>
				&lt;footer&gt;
				<address>
					&lt;address&gt;
				</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”	可以选择多文件提交。

#扬尘/2020/12/18/