html5网格怎么写html5一篇足矣

序言：万物之始，大道至简，蜕变至繁。
水点不染尘世浮华，方能纯净如冰川灵动如丝绒。
落红不逐春日残酷，方有一年春尽一年春。

一、html5的先容

1.1先容

html号称超文本标记措辞，代表着浏览器技能发展的一个阶段。
html版本1到版本5的更新迭代都是由组织W3C管理的。
当时到html4.1的时候，W3C组织就声称不再更新版本了。
而改用XHTML。
但是由于浏览器的各种不兼容的问题，于是乎W3C这个组织就和其他的浏览器产商一起联合起来将这门措辞再次更新到html5

比喻：

html5 >机器人的骨骼

css3 >机器人的外在润色

js > 机器人的行为如行走、抬腿

Jquery > 封装好的掌握行为的库，可以提高效率

1.2上风

易用性

支持视频和音频

互动性高

支持移动设备

未来的趋势

1.3开拓工具

HBuild、WebStrom、sublime Text

二、代码规范

2.1代码规范

新建一个Web项目

比较html4来说，html5的语法更加简洁并且在规定上也更加宽松。

单标签不用写关闭符号

双标签省略结束标签

html、head、body、colgroup、tbody可以完备省略

删除个中一些，打开浏览器的检讨元素功能，也不会报错

三、各种标签

3.1文本标签

b标签：表示关键字和产品名称。
<b>html</b>实在它的实际浸染便是将一段笔墨加粗。
但是并不是特殊强调它的主要性。
比如说：在一段笔墨当中涌现的某些关键字或者产品的名称就可以用b标签

strong标签：表示比较主要的笔墨<strong>html</strong>它的浸染也是加粗，只是它在强调一段比较主要的文本

br单标签：换行

wbr标签：安全换行you've no idea how worried <wbr> i was当用户对网页进行缩放的时候可能会有一些单词被挤到下一行。
如果弗成某个单词被分离的话，可以利用安全换行标签

i标签：倾斜。
em标签语义一样，但em表示强调<i>倾斜标签</i>它用于表示外文词汇或科技能语

s标签：删除线。
del标签表示强调。
<s>html</s>删除线

u标签：给笔墨加下划线。
ins标签表示强调<u>html</u>下划线

small标签：添加小号字体<small>放小一号</small>将文本放小一号。
常日用于免责声明和澄清声明。

sub和sup标签：添加上标和下标X₅和Y²（sub和sup长差不多，这个要如何去影象呢？大家可以看到b的肚子不才面，以是呢它是下标，而p的头部在上方，以是记录是上标。
那这样一来是不是就觉得清晰了许多呢）

q标签：引用来自其它出处的内容<q>有朋自远方来</q>

ruby标签：措辞元素。
常用于帮助读者精确发音。
<ruby>夔<rp>（</rp><rt>kui</rt><rp>）</rp></ruby><rp><rt>用来帮助读者节制表意措辞笔墨的精确发音。
比如说汉语拼音在笔墨的上方。

bdo标签：设置笔墨方向<bdo dir=\公众rtl\"大众>设置笔墨方向</bdo>dbo必须利用属性dir才可以设置，一共两个值：rtl从右到左和ltr从左到右。
一样平常默认是ltr。
还有一个bdi元素也是处理方向的，由于是分外措辞的效果，并且主流浏览器有些不支持，以是可以忽略。

mark标签：突出显示文本<mark>突出显示文本</mark>加上一个黄色的背景，玄色的字。
从语义上来看，与高下文干系而突出的文本，用于暗号。

a标签：超链接a元素属于文本元素，有一些私有属性。

href属性 <a href=\"大众http://www.baidu.com\"大众>百度</a> 这个属性是必须的，否则a元素就变得毫无意义。
它的属性值意味着点击跳转到指定的外部网站去。

target属性<a href=\"大众http://www.baidu.com\公众 target=\"大众_blank\"大众>百度</a> 这个属性见告浏览器希望打开的新窗口显示在哪里。
_blank表示在新窗口中打开文档。
_self表示在当前窗口打开文档。
默认_self。
(_parent和_top这些要结合框架来利用，但是基本上用得已经很少了。
)

锚点设置：用于将同一个文档中的另一个元素移入视野。
说普通一点便是通过点击这个锚点定位到页面中的某个位置。

<a href=\"大众#1\"大众>第一节</a>

<a href=\公众#2\公众>第二节</a>

<a href=\"大众#3\"大众>第三节</a>

</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

<a name=\"大众1\"大众>第一节的内容 我☝该当说点啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

&hellip;&hellip;以上省略一万行&hellip;&hellip;

==========以下全都是分隔符============</br>

<a name=\"大众2\公众>第二节的内容 我☝该当说点啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

3.2分组标签

顾名思义，分组元素便是用来组织干系内容的html元素，对它们进行清晰有效的分类。

p标签：表示段落<p>这是一个段落</p> <p>这是一个段落</p>p标签便是将内部包含的文本形成一个段落。
它们可以自动换行，而且段落与段落之间保持一定量的空隙。

div标签：通用分组<div>这是一个块标签</div> <div>这是另一个块标签</div>在早期的版本中常常用到，用div将其他数据或标签包裹起来，进而进行布局。
但是在html5中，逐渐被其他元素替代。
（它与p标签的差异便是两段文本间没有空隙。
空隙间隔和br标签换行一样）

blockquite标签：引用大段其他地方的内容<blockquote>引用别人的内容的辅导费丁宁丁宁可以换行哦他也有首尾缩进的效果</blockquote>有段落空隙的功能，还包含了首尾缩进的功能。

pre标签：按照原格式展示数据<pre> 我便是 长这样的 参差不齐 </pre>（有时候某些笔墨就想要按照原来的格式显示出来就要用到pre标签。
它便是将数据原封不动的显示出来）

hr标签：单标签。
添加一条分割线。

ul和li标签：添加无限列表

<ul>

<li>貂蝉</li>

<li>大乔</li>

<li>小乔</li>

<li>孙尚喷鼻香</li>

</ul>

ul标签表示无序列表（就像咱们平时说的无符号整形，在前面也是加了一个u），而li标签则表示内部的列表项

ol和li：表示有序列表

start属性：表示从第几个序列开始统计。
<ol start=\公众2\"大众>

reversed属性：是否倒序排列。
<ol reversed>（不过这个属性有很多的浏览器不支持，以是要谨慎利用）

type属性：表示列表的编号的类型 <ol type=\"大众A\公众>

value属性：这是属于li的属性。
表示强行设置某个项目的编号。
<li value=\"大众7\公众>安琪拉</li>

dl、dt、dd：列表标签

<dl>

<dt>第一份内容</dt>

<dd>第一行详细内容</dd>

<dd>第二行详细内容</dd>

<dl>

虽然说这三个标签是一个整体，但是dt和dd标签并非都必须涌现

figure和figcaption标签：利用插图的意思。
一样平常用于图片的布局。

<figure>

<figcaption>这里有一张图哦</figcaption>

<img src=\公众img.png\公众>

</figure>

3.3表格标签

表格的用场因此网格的形式显示二维数据。
开拓者可以对表格中的元素标签设置不同的属性如边框宽度、颜色等使表格呈现出不同的效果。

3.3.1 标签

table：表示表格标签

tr：代表某一行

td：代表一个单元格。

<table border=\"大众1\"大众 style=\"大众width:300px;\"大众>

<tr> <!--相称于行-->

<td>王昭君</td> <!--相称于每行中的每一列-->

<td>沉鱼落雁</td>

<td>法师</td>

</tr>

<tr> <!--相称于行-->

<td>貂蝉</td> <!--相称于每行中的每一列-->

<td>羞花闭月</td>

<td>刺客</td>

</tr>

</table>

th：代表标题单元格。
代表标题，浸染是将内部笔墨居中且加粗。

<tr>

<th>姓名</th>

<th>特色</th>

<th>职业</th>

</tr>

thead：代表表头。
（某些时候，网页上的表头是由js动态天生的。
有可能没按照先后的顺序排列，如此一来表头就有可能显示到第二行、第三行乃至是表尾。
用thead将tr括起来可以让数据永久显示在第一行）

<thead>

<tr>

<th>姓名</th>

<th>特色</th>

<th>职业</th>

</tr>

tfoot:表示表尾：与表头相反

tbody:表示表格的主体部分

(这里非常建议用分主体、表头、表尾的办法写。
由于到后期利用CSS样式的时候只要拿到某个标签就可以设置总体的样式了，这样就会非常方便)

caption:添加表格的标题

colgroup:群组。
用于设置列的属性。
默认设置第一个（有的时候须要设置单独列的属性，如果说我只想设置第二列的属性，则须要把第一列的设置成白色）

<!--<table border=\公众1\"大众 style=\"大众width:300px;\公众>-->

<colgroup style=\"大众background:white;\公众 span=\公众1\公众></colgroup> <!--设置第一个颜色为白-->

<colgroup style=\"大众background:red;\"大众 span=\"大众1\"大众></colgroup> <!--设置第二个颜色为红 span代表一列-->

col：群组的子标签。
更加灵巧的设置列属性。
通过占位符设置不须要的属性。

<colgroup>

<col> <!--占位，表示第一列不设置-->

<col style=\"大众background: pink;\"大众>

</colgroup>

3.3.2属性

border:表示边框的宽度 <table border=\"大众1\"大众></table>

style:通用属性。
在css中做详解。

colspan：合并列 <td colspan=\公众3\"大众>统计</td>这句代码表示共占三个单元格

rowspan:合并行

<tr>

<th rowspan=\"大众4\"大众>学员</th>

<th>姓名</th>

<th>特色</th>

<th>职业</th>

</tr>

3.3文档元素

文档元素的紧张浸染是划分各个不同的内容，让全体布局更加清晰。
进入代替div。
让全体布局元素都具有语义。

header标签：表示页面头部。
常日包括标题或导航等内容。
下面内容会换行（在页面中一样平常会用样式将它设置到居中）

footer标签:表示页面的尾部，一样平常用于版权声明、交情链接等。

h1-h6标签：标题标签，有字体加粗的效果。
从1-6字号依次减小

<h1>这里是一个大标题</h1> <h3>这里是一个副标题</h3>

hgroup:组合标题。
hgroup的浸染便是当多个标题涌现，滋扰到一对或多个本身须要整合的标题。

<header>

<hgroup>

<h1>这里是一个大标题</h1>

<h3>这里是一个副标题</h3>

</hgroup>

</header>

<footer>

<h4>这里是尾部的副标题</h4>

这里存放页面的尾部：如版权声明，交情链接

</footer>

如上面那段代码，头部的h4标题就能与h1绑定起来，从而和尾部的h4分离。

section标签: 定义一个文档的主题内容

nav标签: 给文档页面添加一个导航

aritcle标签：添加一个独立成篇的文档（像平常看到的论坛，贴吧，评论都有自己的头、尾和内容等）

<article>

<header>

<nav>&hellip;&hellip;</nav>

</header>

</article>

aside标签：天生注释栏。

<aside>这是一个注释栏</aside>

address表示文档或者是article元素的联系信息

<address>联系信息</address>

本身有倾斜的效果。
如果是在article元素下表示其下的联系信息，如果是在body元素下表示全体文档的联系信息

3.4嵌入元素

嵌入元素紧张功能是把外部的一些资源插入到html中。

img标签：用于显示图片

src：嵌入图像的url

alt：（如果图片能正常显示则没有任何效果。
若图片加载不堪利会涌现备用内容）

width/height:定义图片的宽度和高度,单位是像素<img src=\"大众img.png\公众 alt=\"大众风景图\"大众 width=\"大众320\公众 height=\"大众400\"大众/>

ismap:获取到图片区域的像素点加入了ismap属性之后，点击图片在浏览器中就会得到图片被点击的地方的像素点。
（把文件在目录中打开，讲文件拷贝到谷歌浏览器打开就能瞥见）

<a href=\公众index.html\"大众>

<img ismap src=\公众img_5.jpg\公众 alt=\"大众风景图\"大众>

</a>

usemap:创建分区的相应图。
比如说点击图片的某一部分，可以跳转到某一个网页。
（当点击了coords这块区域时，跳转到指定的网页）

<img src=\"大众img_5.jpg\"大众 usemap=\"大众#Map\公众 />

<map name=\"大众Map\公众>

<area shape=\"大众circle\"大众 coords=\"大众31,28,112,100\"大众 href=\"大众http://www.baidu.com\"大众 target=\"大众_blank\"大众 alt=\公众方形\"大众>

</map>

iframe标签：嵌入另一个文档。
表示在一个页面内建立一个区域引入另一个页面。

<a href=\公众index.html\"大众 >index</a>

<a href=\"大众http://www.baidu.com\"大众 target=\"大众in\"大众>百度</a>

<iframe src=\"大众http://www.baidu.com\公众 width=\公众300\"大众 heigth=\"大众300\公众 name=\公众in\"大众></iframe>

progress标签：用于显示进度

该标签会产生一个进度条，一样平常我们会用js代码来掌握其内部的值。
(当前值用value来表示，而最大值用max来表示)

<progress value=\"大众30\"大众 max=\"大众100\"大众></progress>

meter标签：显示范围里的值（类似于进度条,可以规定最大值和最小值max/min。
low值规定它的值过低，high表示值过高。
而optimun表示最佳值，但是这个属性是呈现不出效果的）

<meter value=\"大众90\"大众 min=\"大众10\"大众 max=\"大众100\公众 low=\"大众40\"大众 high=\"大众80\"大众 optimum=\"大众60\"大众></meter>

3.5音频和视频标签

音频和视频文件实在都只是一个容器文件。
视频文件包含了音频轨道、视频轨道和其他一些元数据。
视频播放时，音频轨道和视频轨道是绑定在一起的。
元数据包含了视频的封面、标题字幕等信息。
在网页实现中，有很多的浏览器厂商都有自己的标准，以是html5规范也没有逼迫指定编解码器了。
以是在网页上嵌入视频和音频时，最好供应mp4格式和webM格式的视频。
否则有可能由于浏览器不兼容的问题导致视频不能播放。

video标签: 视频标签属性：

src:视频资源的url

width：视频宽度

height:视频高度

<video src=\公众test.mp4\公众 width=\"大众320\公众 height=\"大众400\"大众></video>

controls:设置后显示播放控件（未设置这个属性时，视频就像一张图片，设置controls之后才能显示视频播放控件）

<video src=\"大众test.mp4\公众 width=\"大众320\公众 height=\公众400\"大众 controls></video>

autoplay:表示立即播放视频

loop:反复播放视频（也便是说在播放结束之后会重新播放视频）

muted:设置之后，视频会处于静音状态

poster:指定视频数据载入时显示的图片。
（相称于视频的一个封面）

<video src=\"大众test.mp4\"大众 width=\"大众320\"大众 height=\"大众400\"大众 controls

poster=\"大众img_5.jpg\公众></video>

preload:预加载。
不设置会在第一次播放自动缓存。
如果值为none会直到用户点击时再加载视频。
如果值为metadata表示播放之前只加载第一帧。
auto是默认的，表示哀求浏览器尽快的加载视频。

兼容多个浏览器 source标签

<video src=\公众test.mp4\"大众 width=\"大众320\公众 height=\"大众400\"大众 controls poster=\"大众img_5.jpg\"大众>

<source src=\公众test.webm\公众/>

<source src=\"大众test.mp4\"大众/>

</video>

audio标签：用于嵌套音频内容。
属性与视频元素类似。
只是没有宽高设置和图片。

<audio src=\公众test.mp3\公众 controls></audio>

3.6表单标签

表单标签是用于获取用户的输入数据的。

form标签：表示定义html表单。
用该标签包含的标签具有提交功能。
也便是说，在浏览器的地址栏里面能获取到用户的信息。
(如果不定义表单，那么它是无法提交数据的)

<form>

用户名：<input name=\"大众user\"大众>

<button>提交</button>

</form>

属性

action:表示表单提交到的页面(也便是要把数据传入到哪个页面中)

method:表示表单的提交办法。
默认是get。
而get和post要求的差异便是post后面不跟要求体。
也便是用户信息。
相对来说更加的安全。
（一样平常来说，get是用于超链接提交居多，post用作表单提交居多）

<form method=\公众post\"大众 action=\"大众http://www.haosou.com\"大众></from>

enctype:表示浏览器对发送给做事器的数据采取的编码格式。
有三种格式。
默认是不能将文件上传到做事器&rdquo;application/x-www-form-urlencoded&ldquo;、multipart/form-data用于将文件上传到做事器、text/plain不建议利用

name:设置表单名称，以便程序调用

target:提交的目标，与超链接无异

autocomplete:设置浏览器记录用户输入的信息。
分为on和off两个值。
默认为on。

novalidate：设置是否实行客户端数据有效性检讨

input标签：表示用来网络用户输入数据的控件。
它默认会涌现一个单行的文本框。

type:文本框的类型。
值为text时表示单行文本框；值为password表示密码框；值为search时，除了火狐浏览器的其他浏览器外，会显示一个叉来取消搜索内容，值为number时，表示只限于数字输入；值为range时，天生一个数值范围文本框；当type为date系列时，可以获取日期和韶光的值，有六种形态date、month、time、week、datetime、datetime-local；当值为color代表可以获取不同的颜色；当值为checkbox、radio时表示复选框和单选。
单选的name值必须一样。
checked表示默认勾选状态值为img是表示产生一张图片按钮，后面可以接src,alt,width等熟习值为email,tel,url时表示输入电子邮件、电话和网址格式值为hidden时，天生一个隐蔽控件（看不见，但提交的时候会显示，一样平常用于关联主键id提交）值为file的时候，表示上传文件。
accept属性表示限定文件<input type=\公众text\公众>

音乐<input type=\公众checkbox\公众 checked>

体育<input type=\公众checkbox\"大众>

<input type=\公众radio\"大众 name=\"大众sex\"大众 value=\公众男\"大众 checked>男

<input type=\"大众radio\"大众 name=\公众sex\公众 value=\公众女\"大众>女

<input type=\"大众hidden\"大众 value=\公众1\"大众 name=\"大众id\"大众>

<input type=\"大众file\"大众 accept=\公众image/gif\"大众>

maxlength:设置文本框最大字符长度

readonly:设置文本框为只读状态。
可以提交但是不能修正文本框的值。

placeholder:占位符

size:设置文本框的宽度

required:表明用户必须输入一个值，否则无法通过输入验证

<input type=\公众text\"大众 list=\"大众abc\"大众 required>

autofocus:让光标聚焦在某个input元素上，方便用户直接输入。
<input name=\"大众user\"大众 autofocus>

disabled:禁止input元素 （连点击都不能）

list：为文本框供应建议值

<form>

<input type=\公众text\"大众 list=\公众abc\公众>

<button>提交</button>

</form>

<datalist id=\"大众abc\"大众>

<option value=\公众1\"大众>湖南</option>

<option value=\"大众2\公众>海南</option>

</datalist>

value:默认在输入框内涌现的值

form：与表单外的数据挂钩一遍提交

<form id=\"大众register\"大众 name=\公众reg\"大众 action=\"大众index.html\"大众>

用户名：<input name=\"大众user\公众>

<button>提交</button>

</form>

年事：<input name=\公众age\"大众 form=\公众register\公众>

label标签:把笔墨和input标签包裹起来可以方便设置样式，并且当用户点击笔墨的时候，光标会自动移入到对应的input框。
（如果只是设置了笔墨用label包裹，又想点击笔墨将标签自动移入对应的框，可以将label的属性for的值设置成与input的id设置成一样）

<label for=\"大众user\"大众> 用户名：</label>

<input id=\"大众user\"大众 name=\公众user\"大众>

fieldset标签:对表单进行编组。
三个属性name、form、disabled

legend标签：添加分组解释的标签（也便是说给分组加上一个标题）

<fieldset>

<legend>注册分组</legend>

<label for=\"大众user\"大众> 用户名：</label>

<input id=\"大众user\"大众 name=\公众user\"大众>

<button>提交</button>

</fieldset>

button标签:创建一个按钮。
type属性有三个值，submit表示提交，reset表示重置，也便是把input的值变成初始值。
button表示一个普通的按钮。

select标签：下拉列表。
须要和option标签合营利用。

name属性：设定提交时的名称

disabled属性：将下拉列表禁用

form属性：将表单外部与内部挂钩

size属性：下拉列表的个数

multiple属性：设置是否可以多选

required:选择验证，必须选择后才能通过

<select name=\公众fruit\公众 size=\"大众5\"大众 multiple >

<!--value值是真正要提交上去的值，而后面的是显示到页面的值-->

<option value=\"大众1\"大众>花花菇凉</option>

<option value=\"大众2\公众>文小喵</option>

</select>

optgroup标签:对列表进行分组选择。

<form action=\"大众http://www.baidu.com\公众>

<select name=\公众fruit\"大众 multiple size=\"大众5\"大众>

<optgroup label=\公众表情包\公众>

<option value=\"大众1\"大众>花花菇凉</option>

<option value=\"大众2\公众>文小喵</option>

</optgroup>

<optgroup label=\"大众书\"大众>

<option value=\"大众4\"大众 selected>微微一笑很倾城</option>

<option value=\公众5\"大众>神雕侠侣</option>

</optgroup>

</select>

<button>提交</button>

</form>

textarea标签:天生一个可变大小的多行文本框

<!--wrap表示是否插入换行符 有soft和hard两种。
hard提交之后在地址栏可以瞥见%插入的隐蔽换行符-->

<textarea name=\公众content\"大众 rows=\"大众20\公众 cols=\"大众30\公众 wrap=\"大众hard\公众></textarea>

pattern：正则表达式。
开头和结尾用^和$ novalidate属性表示不要验证该表单

<input type=\"大众text\"大众 placeholder=\公众请输入区号和座机\公众 pattern=\公众^[\d]{2,4}\-[\d]{6,8}$\公众>

html对网页页面的布局或者是表单验证等功能都相对简陋，并且不同的浏览器支持的成熟度是不尽相同的。
因此在大部分情形下，还是要借助js或jqury等前端库，来呈现丰富多彩的验证效果。