HTML总结

HTML

html的本质
• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• 由一套标记标签组成 (markup tag)，使用标记标签来描述网页

文本标签

标签名	描述
hn	标题
span	普通文本标签
p	段落标签
article	文章标签
section	文章中的节标签

标题

HTML中标题(heading)分为6级，分别是：h1~h6
h1~h6标签具有和p标签一样的特征：占满整行，上下换行

    <h1>一号标题</h1>
    <h2>二号标题</h2>
    <h3>三号标题</h3>
    <h4>四号标题</h4>
    <h5>五号标题</h5>
    <h6>六号标题</h6>

普通文本标签

在HTML用于显示文本的基本标签对span
虽然不编写任何标签，将文字直接写于body标签对内也能正常显示，但是这样我们对此文本的控制力会极度的减弱

<span>我是普通文本标签</span>

段落标签

如果我们想如同现实中写文章一样，将文章达到分段效果，那么我们就可以使用段落标签p

<p>段落标签</p>

文章标签

article标签定义外部的内容，外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自博客的文本，或者是来自论坛的文本。亦或是来自其他外部源内容，该标签的内容独立于文档的其余部分
该标签从目前浏览器版本来看仍还不属于功能性标签，即不具有明显的特殊效果。仅仅对标签中的字体有细微的效果影响。现在国外很多新闻信息类网站是根据其英文译意“文章、条目"之接将其作为每一篇文章的“容器"来使用

<span>文章标签</span>

文章中的节标签

section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
和article一样，该标签从目前浏览器版本来看仍还不属于功能性标签，即不具有明显的特殊效果。仅仅对标签中的字体有细微的效果影响。
与article不同的是，该标签具有一个属性“cite"该属性的值为一个“url"，用于指出该段话摘自于哪一个网站，不过现在版本的浏览器并不支持该属性，但现在至少也可作为版权纠纷时的一个说明凭证。

布局标签

可以这样说，div标签是目前为止，HTML中最具代表性的标签，内业很多开发者在谈到“HTML+CSS"都会说成“DIV+CSS"
div标签是一个“块级标签"，而且只是一个“块级标签"

标签名	描述
div	块级标签

图片显示

要在HTML显示图片是通过img引入外部图片实现的

常用属性

属性名	描述
src	“src"是图片的必要属性，通过将该属性的值设置为 【硬盘或服务器地址上图片的绝对路径】 或 【HTML页面和图片间的相对路径】即可显示指定图片
alt	由于网络的不稳定、部分用户的带宽较小或图片体积较大等原因，有的时候网页上的图片不能马上显示出来（路径错误会导致图片不能显示），这个时候一个比较稳妥的做法，就是给予一定的文字说明，这个时候就需要用到img标签内的“alt"属性，只需将“alt"的属性值设为需要提示的文本信息即可
title	在对于需要进行说明的图片，或者单纯是为了提升用户体验，我有的时候需要为图片进行一定的简单描述，在特定的条件下，在图片旁边写上一串文本，既影响了布局，又显得突兀，这个时候我们就需要用到img标签内的“title"属性

<img src="../../../img/content/example/exam-001.jpg" 
	alt="图片加载中..." 
	title="碧空下的原野">

在这里需要说明的是，“title"这个属性，是一个全局属性，最常用的地方虽然是标签，但它在其它几乎任何标签上都可以使用，包括文本标签。

超链接标签

具有使当前页面跳转到一个新的页面的功能的标签-------超链接标签（a标签）
超链接默认情况是一个“行内标签"，即在他不会独占一行,且默认情况无法设置宽高。

 <a href="https://www.baidu.com/" > 打开百度 </a>
 //这句代码标签当用户点击这个标签后，打开百度站点

常用属性

属性名	描述
Href	决定此标签被点击后将跳转到那个文件，必须给出此属性。如果没有这个属性，a标签会类似于一个span一样的文本标签，且不会给文字设置颜色和下划线。
Target	target属性决定以何种方式行进跳转或打开新的文件（是在当前窗口还是新窗口打开？）
download	定义一个文件的下载，并设置下载文件的名字

href的值，大体而言就只有两种情况：

当前浏览器能识别的类型【比如网站地址，图片地址，txt文档地址】就正常显示
当前浏览器不能识别的类型【比如: zip,doc,excel,ppt…】 就直接下载

target可以为以下值：

_blank ： 在一个新的浏览器窗口或标签页中打开页面或文件
_self ： 在当前浏览器窗口打开页面或文件
_parent ：表示在框架的父级打开页面或文件
__top ：在框架的最顶层打开新的页面或文件（若包含多个框架的嵌套）

锚点链接

即通过a标签跳转到网页中指定的位置
如果将a标签的href属性值设置为#+当前页面中指定元素的ID值后，
该超链接将不再是进行页面间的跳转或是文件的打开了，而是实现在当前页面的跳转【如果一些百科网页】

<a href="#zl"> 跳转到zl处 </a> 
 //此标签点击后将跳转到zl处

文件下载

要具有这个功能，我们需给它加上“download"属性，并指定一个文件下载后的名称

<a href="要下载的文件的地址" download=“下载后的文件的名称"></a>
<a href="./sunny_A.png" download="SunnyProw">下载文件</a>

回到顶部

我们在一个内容很多的网页中加上a标签，并且他的href属性赋值为#top，那么当我们点击这个超链接时可以让当前网页回到最顶部
<a href="#top">回到顶部</a>

href的值为特殊值时

<a href="https://www.baidu.com/" target="_blank">href为正常百度地址 </a> <br />
<a>没有href，如同一个span标签，表示普通文本 </a><br/>
<a href="#"> #号(描点链接相关) </a><br/>
<a href=""> 空格(会刷新) </a><br/>
<a href="javascript:void()"> void(会执行js代码，返回空，什么都不做) </a><br/>
<a href="javascript:alert(666)"> alert(666),(会执行js代码，弹框) </a><br/>

 a标签的几种状态
 未点击：  颜色为蓝色，表示未访问此链接
 点击中：  颜色为红色，表示即将访问此链接
 点击后：  颜色为紫色，表示已访问此链接
 对于已访问后的链接，就会变为紫色，然后会把当前情况存储在浏览器中，即便你从新运行此网页颜色仍然是紫色，甚至很多浏览关掉后在打开还是显示的已访问状态。

 注意：如果我们使用css设置了一个颜色，那么他会强行覆盖上面的三种状态颜色。

框架标签

iframe 元素会创建包含另外一个网页文档的内联框架（即行内框架），所有浏览器都支持 iframe 标签。

//基本使用
<iframe src="https://www.baidu.com/"></iframe>

常用属性

属性	值	描述
src	URL	规定在 iframe 中显示的文档的 URL
height	pixels%	规定 iframe 的高度
width	pixels%	定义 iframe 的宽度
name	frame_name	规定 iframe 的名称
frameborder	1或0	规定是否显示框架周围的边框
scrolling	yes或no或auto	规定是否在 iframe 中显示滚动条

提示

您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的超低版本的特殊浏览器

<iframe src="https://www.baidu.com/">
抱歉，你的浏览器不支持iframe标签
</iframe>

a标签与iframe标签的混合使用

通过将<a>标签的target属性设为页面中一个嵌入式框架<iframe>的“name"属性的值，使文件内容在这个<iframe>内打开

<a href="https://www.baidu.com/" target="ifr"> 百度</a>
<a href="http://www.blogzl.com/" target="ifr"> blogzl</a>
<a href="http://www.hao123.com/" target="ifr"> hao123</a>
<br/>
<br/>
<iframe name="ifr"></iframe>

列表标签

列表为对某件事物进行步骤的描述，
或者一系列有关联的事项的描述的标签
或者对某些名词进行定义

列表标签为双标签，写法如下：

<ol></ol>
<ul></ul>
<dl></dl>

列表默认情况是一个“块级标签"，占据整行。
列表类型：“无序列表<ul>" 和  “有序列表<ol>" 和 “定义列表<dl>" 【注意：他们的子li,dt,dd标签也是块级标签】

无序列表

无序列表可以通过“type"属性来设置“列表项目符号"的类型

type属性	效果
disc	项目符号以实心圆“●"表示，默认值
circle	项目符号以空心圆“○"表示
square	项目符号以实心方块“■"表示

列表嵌套
以用于对列表项内的内容进行更为精细的结构划分和内容说明

有序列表

有序列表项前不再是用“●"表示，而是“阿拉伯数字的表现形式

常用属性

属性名	描述
reversed	规定有序列表的顺序为“倒序"。
start	规定有序列表的起始值【以阿拉伯数字表示各种类型】
type	规定有序列表的序号显示类型有以下值： “1"，默认，以阿拉伯数字作为列表符号 “A"以大写英文字母作为列表符号 “a"，以小写英文字母作为列表符号“I"，以大写罗马数字作为列表符号 “i"，以小写罗马数字作为列表符号

注意:有序列表嵌套时，它的“type"属性需要手动设置后才能显示为不同的项目符号，否则全部都为以默认的“阿拉伯数字"显示。

定义列表

定义列表适用于对名词进行描述,
形式

说明
类似于ul、ol，定义列表的最外层为<dl>，然后还有dt,dd两个标签
<dt>用于定义列表中的项目，
<dd>用于描述定义的项目，
在写代码时，dt和dd没有包含关系，他们是同级的。
然后它们的显示类型都为“块级元素（block）

表格标签

表格标签（table）概述
具有使网页展示表格形式内容的标签-------table标签
表格标签默认情况是一个“类似于块级标签的table类型"，即在他会占据整行。（虽然有点特殊，给上一个边框他没法完全占据一行，显示的加上display:block，又能独占一行）
表格标签为双标签，写法如下：

<table>的基本格式
简写格式可以不要tbody

<table></table>

完整的表格格式为：表头+表体+表尾

<table border="1">
	<thead>
		//表头：这里一般写表格和表头th标签
	</thead>
	<tbody>
		//表体：写表格的具体内容
	</tbody>
	<tfoot>
		//表脚：放表格的脚注之类
	</tfoot>
</table>

注意： 一般表头表尾都只有一个，但是表体tbody可以写多个

通过标签属性对表格进行控制

属性名	描述
border	给表格加上边框，其值为一个边框大小，默认单位为像素
cellspacing与cellpadding	单元格与单元格之间的距离(cellspacing) 单元格与内容之间的距离 (cellpadding)
width与height	Width与height用于设置表格的宽度(width),高度(height)
background与 bgcolor	background设置表格背景图片
align	align设置表格对齐方式或单元格内容的对齐方式
rowspan 与 colspan	“表格跨行"和“表格跨列"

注意：
如果两个属性都给了的话，一般而言，背景图片会覆盖背景颜色
当align设置在单元格里面时，会起作用的是单元格内容
当align设置在表格中时，起作用的是整个表格

跨行时，将rowspan属性写在要跨行的列上，其值为要跨的行数：
<td rowspan="2">张三</td>
跨列时，将colspan属性写在要跨列的列上，其值为要跨的列数：
<td colspan="2">李四</td>

表单标签

表单标签概述
form标签为具有接收用户输入并提交的功能的标签
form默认情况是一个“块级标签"，他会占据整行空间，它里面的input,button等标签是行内块元素

form标签为双标签，写法如下：

<form>
	//这里是表单元素
	<input>
	<input type="submit">
	<button>登陆</button>
</form>

基本表单 == 外层的form标签 + 在form里面的表单元素标签
其中，表单元素一般要放置于表单标签<form>中，不然某些表单元素将会失效，如：“提交"按钮和“重置"按钮。

常用属性

属性名	描述
action	规定当提交表单时向何处发送表单数据，它的属性值应该是一个“URL" 这样当我们点击提交按钮后，网页就会跳转到url所代表的站点或页面处
method	规定用于发送表单数据的方法，值为 : get / post , 默认为get方式

注意： 发送数据时，input标签的name属性一定要加上，否则数据就无法发送出去。

get / post 的比较

可见性
get方式发送的数据会直接附加到表单的action属性所指的URL的后面，用户可见！
post方式发送的数据会放置在header里发送到action属性所指的URL地址处。用户不可见
数据量
get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制
安全与效率
get安全性低于post，但效率高于post
作用
一般而言：get 用于查询居多，post用于更新居多

target：规定在何处打开“action"中设定的URL，和a标签一样，具有以下值：

属性值	作用
_blank	【在新窗口打开】
_self	【就在当前窗口打开】
_parent	【在父窗口打开】
_top	【在顶层窗口打开】
iframe的“name"	【在某个iframe中打开】

位于form内的一些标签

label标签

用于显示一些说明/提示信息，行内元素，不会占据整行
就显示效果上而言，加了和没加并没什么区别，但是对搜索引擎会更加的友好

For属性可以和对应的input绑到一起

<label for="inp1">用户名：</label> 
<input id="inp1" placeholder="请输入你的用户名..." name="username" />

input标签

用于接收用户输入，为行内块元素。他不仅仅是接收文本的输入，通过type属性的设置我们还可以接收不同类型值的输入

input标签的type属性的一些常用可选值：

type属性	作用
text	普通文本
search	搜索框
password	密码
radio	单选按钮
checkbox	复选框
file	文件上传
image	定义图像作为提交按钮
button	按钮类型
submit	普通提交按钮
reset	重置按钮
hidden	隐藏输入域

Value属性

设置“文本类型"的输入框中默认显示的值内容

常用属性

属性名	描述
Maxlength	规定输入字段中的字符的最大长度。
Readonly	使表单元素成为“只读"状态，在这个状态下只能读取元素内容，而不能进行编辑。
Disabled	使表单元素成为“禁用"状态，表单元素将“失效"
Size	规定文本框可见字符显示的宽度，但不同浏览器对此的支持有所不同，我们现在基本都是使用CSS去控制
placeholder	提示文本
autofocus	自动聚焦

多行文本域textarea标签

用于输入多行文本的标签对，行内块元素，不会占据整行
它显示文本内容是通过标签的内容，而非“value"属性
它可以通过“cols"和“rows"属性来设置显示的尺寸

<textarea>标签是双标签，它拥有闭合标签

<textarea>文本</textarea>

下拉框select标签

用于显示单选和多选的下拉菜单，option是它必须的子菜单，否则将不能提供任何可选项
形式如下：

可以通过“size"属性设置该标签在一个选项菜单中可见的选项个数，当它的值设为“1"时，将显示为默认的select下拉菜单的样式

常用属性

属性名	描述
multiple	允许选中多个option
selected	设置默认选中的option

按钮<button>标签对
<button>标签对和其它表单元素一样，为行内（块）标签
Button它是一个双标签
通过type属性可以设置其类型 【button/submit/reset】

<input type="button" value="">与<button>的区别
	<button>按钮文本是放置于该标签的内容上，而<input>是将按钮文本设置于它的“value"属性上
	<button>标签对内可以同时显示文本、图片、表格甚至是多媒体，而<input>标签显示内容要单调很多。
	<button>标签的“type"属性不进行设置的话，在“IE浏览器"中将默认设为“button"，而在其它浏览器中（包括 W3C 规范）都会默认设为“submit"所以，为了统一浏览器的行为，我们通常都会为<button>的属性“type"设置一个初始值

H5表单相关

input的type属性新增的值

属性名	描述
email	用于应该包含“e-mail"地址的输入框
url	用于应该包含“URL"地址的输入框
search	用于应该“搜索内容"的输入框
number	用于应该包含“数值"的输入控件
tel	规定显示的类型为“电话号码"的输入框
range	规定显示的类型为“数值选择范围"选择控件
color	规定显示的类型为“颜色"选择控件

日期相关

属性名	描述
date	规定显示的类型为“日期"选择控件
month	规定显示的类型为“月份"选择控件
week	规定显示的类型为“周"选择控件
time	规定显示的类型为“时间"选择控件
datetime	规定显示的类型为“日期时间"选择控件
datetime-local	规定显示的类型为“本地日期时间"选择控件

由于在制定HTML5标准时，无论移动端的Web浏览还是移动端的应用都已经开始逐渐的成为一种新的主流浏览方式了，所以以上这些属性大多在移动端有比在PC端更好的表现。

email

email 让input接收一个邮箱地址

基本形式如下：

<input type="email" name="eamil"  />

注意：
1.只要当你输入的内容不为空时才会进行验证，
2.只验证如下形式的值：【任意字符+@+任意字符】

url

url 让input接收一个url地址（网站地址）

基本形式如下：

<input type="url"  name="url" />

注意：
1. 只要当你输入的内容不为空时才会进行验证
2. 一般只验证如下形式的值：【 任意字符 + : 】

number

number 让input只接受数字的输入

基本形式如下：

<input type="number" name="myNumber" />

注意：
1. 只要当你输入的内容不为空时才会进行验证，
2. 你只能输入数字，输入非数字类型会被拒绝。（可输入和数字相关的正负号，小数点，e）
3. 在输入框右侧会提供自动加减的符号，默认值为0.
4. 如果输入的值太大，那么会转换为一个科学计数法表示.
可通过以下属性对值进行限定：max,min,step,value
一旦给了最大最小值等范围，和step间隔，那么所有的数都等于是已经被定义了

range

range 让input变为一个滑动条

基本形式如下：

<input type="range"  name="myRange" />

注意：
1. 默认值为50，范围为0--100.
2. 我们可以通过一个默认的get请求看到他的值
可通过以下属性对值进行限定：max,min,step,value

color

color 颜色选择器

基本形式如下：

<input type="color" name="myColor" />

注意： Color 类型显示为一个颜色选择器

日期选择器

日期选择器, type的值为下面之一

属性值	作用
date	年、月、日
month	年、月
week	年、周
time	小时、分钟
datetime	年、月、日、时间（UTC 时间–浏览器支持程度较弱）
datetime-local -	选取：年、月、日、时间（本地时间）

基本形式如下：

<input type="date" name="myDate" />

扩展：
 UTC时间  : 通用协调时
 GMT时间：格林威治平均时
 UTC时间==GMT时间==英国伦敦的本地时间
 UTC+8小时==北京时间

Input上新增的属性

required

required 要求input的值为必填

基本形式如下：

<input type="text"name="username" required =“required "  />
 或者
<input type="text"  name="username" required  />

注意：
1.   placeholder能用于text,password,eamil,url,number,search等类型
2.   placeholder不能用于range,color，date等非文本框类型

pattern

pattern 用于验证 input输入值是否合法
适用于以下类型的 input 标签：
text, search, url, telephone, email 以及 password。

基本形式如下：

<input type="text" name="test" pattern="[0-9]{6,12}" title="你应该输入6到12位的数字" />

form

规定输入域所属的表单，适用于所有 input 标签的类型

基本形式如下：

<form id="formId">表单内容 </form>
<input type="text" name="myname" form="formId" />

Width & height

height 和 width 、规定用于 image 类型的 input 标签的图像高度和宽度

基本形式如下：

<input type="image" src="img_submit.gif" width="99" height="99" />

重写属性

表单重写属性适用于以下类型的 input 标签：submit 和 image
formaction - 重写表单的 action 属性
formmethod - 重写表单的 method 属性
formtarget - 重写表单的 target 属性
还能重写enctype与novalidate等

基本形式如下:

<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
这些属性对于创建不同的提交按钮很有帮助

Form上新增的属性

autocomplete

规定是否启用表单的自动完成功能，其值如下：
on //开启自动完成功能【默认为on,开启状态】
off //关闭自动完成功能

novalidate

如果使用该属性，则提交表单时不进行html5自带的验证。
基本写法

表单新增标签

datalist 标签

datalist规定输入域的选项列表，类似于select标签.

注意：
datalist的一定要有id属性，并且此属性还必须要和某一个文本域input的list属性值一样才能渲染出来。

output 标签

output 元素用于不同类型的输出，比如计算或脚本输出

<form oninput="c.value=Number(a.value) + Number(b.value)">
<input name="a" value="0" />
+
<input name="b" value="0" />
=
<output name="c">0</output>
</form>

注意：
就现在的浏览器支持程度而言，如果我们要获取input的实时改变，我们需要通过oninput属性获取。oninput属性既可以写在form表单上也可以写在input的输入域上。