HTML5在近几年异常火热，因其功能强大、灵活多变等特点而被追捧。
这篇博客是我跟随老师学习所的到的知识，从入门到精通需要的是坚持和系统地学习。
让我们开始吧！
HTML5的基本结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
第一行为文件声明，每个文件都必须要有而且必须要在第一行。
文件由html标签组成，大部分标签成对出现且闭合，也有单独出现的标签。不同标签之间可以嵌套，但是不可交叉。
这里出现的标签有：head标签，body标签这些是基本标签。
head 用于表示网页的元数据，即描述网页的基本信息。
head标签中又有meta标签和title标签，他们又有各自的属性。
meta标签常用属性：
1、charset：设置文档的字符集编码格式HTML5中设置字符集编码：<meta charset="UTF-8">
HTML4.01之前的格式为:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
可以看到之前的代码十分繁琐，这也是H5中改进的内容。
>>>常见的字符集编码格式：
a.GB-2312：国标码，简体中文
b.GBK:扩展的国标码
c.UTF-8：万国码
其中，UTF-8为最常用的编码格式，为各国通用。
2、http-equiv:将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，
可选属性值：content-type(文档类型)refresh（网页定时刷新） set-cookie（设置浏览器cookie缓存）。
这个标签需要配合content属性使用（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）。
例如：
<meta http-equiv="content-type" content="text/html: charset=utf-8"/>
3、name：使用方法同“http-equiv”。name标签是将我们的信息写给搜索引擎看的。
常用且需要掌握的属性值：author（作者）
<meta name="author" content="http://www.jredu100.com" />
keywords（网页关键字）多个关键字用半角逗号分隔.
<meta name="keywords" content="HTML5,网页,web前端开发"/>
description（网页描述）搜索网站时，title下面的解释文字，至关重要。
<meta name="description" content="这是我在杰瑞教育开发的第一个网页"/>
后两个个属性设置，网页必不可少。
title标签：网页的标题，即网页选项卡上的文字。
一般网页选项卡中我们会看到标题前有小图标，这里就用到了link标签
link标签常用的属性：rel：声明链接文件的类型
type：图片的类型可以省略
href：表示图片的路径地址
事例：
<link rel="icon" type="image/x-icon" href="../img/icon.png">
怎样选择文件路径之后会进行详述。
基本结构之后就是一些常用的标签，这些标签便是用户访问网址时显示在页面上的东西，其中有些标签会让你的页面看起来比较丰富，还有一些标签的合理运用会使你的布局更加清晰。
常见的块级标签和行级标签
块级标签和行级标签的区分，部分书上会有不同。比较通用的区分方法是：该标签之后有无换行。有换行则为块级标签。
常见的块级标签：
1、h标签： 标题标签,自动加粗，h1最大h6最小
<h1>h1标题标签</h1>
2、hr标签：水平标签，一条水平线
<hr />
3、p标签：段落标签。
<p>第一段文字</p> <p>第二段文字</p>
4、br标签：回车标签。
<br />
5、blockquote标签：引用标签,cite属性，表明引用的来源，一般表明引用的网址。浏览器默认显示为首行缩进。
<blockquote cite="http://www.jredu100.com">
6、pre标签：预格式标签。浏览器默认显示样式:1、显示为等宽字体；2、代码中的换行、空格等元素可在浏览器直接显示。一般要在网页中输入代码就会使用这种标签。
<pre></pre>
基于布局的块级标签
1、ol标签：有序列表
<ol> <li>第一项</li> <li>第二项</li> </ol>
列表中li可以有N多项，下同。
2、ul标签：无序列表
<ul> <li>第一项</li> <li>第二项</li> </ul>
有序列表前有序号，无序列表前为圆点。
3、dl标签：定义描述列表
<dl> <dt>这是定义列表的标题</dt> <dd>描述1</dd> <dd>描述2</dd> </dl>
标题在页面中顶格显示，描述项相对标题首行缩进。
4、组合标签：用于显示图片及图片标题
<figure> <img src="../img/icon.png" /> <figcaption>这是图片标题</figcaption> </figure>
显示效果：图片下面一个标题，同时图片和标题前带缩进。
/5、div标签：极常用的标签，灵活多变，页面大多都大量使用此标签。其便于设置属性，而且还可以借助其他工具进行定义修改，之后会有相关内容。
<div style="width: 100px;height: 80px;background-color: aquamarine;">这是一个div</div>
实际开发中常用的4中块级结构：
div-ul-li：常用于分类导航或菜单等
div-dl-dt-dd(figure)：常用与图文混编
table-tr-td：常用于图文布局或显示数据
form-table-tr-td：常用于布局表单
常见的行级标签
行级标签从左往右逐一显示。
1、span标签：无实际意义，用于包裹某部分文字，修改特定样式。
<span>这是span中的标签</span>
2、em（强调）
3、i（倾斜）
4、strong（强调）
5、b（加粗）
strong、em、b、i标签的区别
①strong和em都表示强调，strong显示为粗体，em显示为斜体。而且，strong比em的强调程度更高。
②、strong和b都能加粗，em和i都能倾斜。但，strong和em多了一层强调的语义。HTML5语言要求标签尽可能的实现语义化。
6、q（短引用）：显示为“”中的文字
7、small（缩小字体）big（增大字体） 可以多层嵌套，直到字号极限。但是不常用。
8、img（图片）
有以下属性
1、src表示引用图片的地址。
路径地址的写法：
①相对路径:以当前文件为准，去寻找图片地址。
a、与当前文件处于同意层的图片，直接写图片名。
b、图片在当前文件下一层：文件名/图片名
c、图片在当前文件上一层：../图片名
②绝对路径：file:///盘符:/文件夹/图片.后缀名。但是严禁使用
③网络地址：网络上的图片链接。但是一般不用，网络上图片因由无法使用时链接会失效。
2、height=“”、width=“”图片的宽度和高度。可以使用css样式（style="width=; height=;"代替）
3、title：图片标题。当鼠标指上后显示的文字。
4、alt：当图片无法显示时显示的文字。
5、align：设置图片周围文字相对于图片的位置。 top center bottom
9、a（超链接）
1、href：超链接的路径，可以是网络连接，也可以是本地文件（路径确定同img）
2、target:超链接打开的位置，_self 当前页面打开（默认） _blank新页面打开
3、title：鼠标指上后显示的文字。
4、(了解) rel ： 用于表明被链接文档与当前文档的关系：rel="prev"（被链接文档时前一篇文档） 前一篇文档 rel="next"
rel=“icon”被链接图片时当前文档的图标
rel=“stylesheet”被链接文档时当前文档的样式表
rel=“prefetch”预加载：在当前文档加载完成后利用空余时间，预加载即将连接的文档。
5、锚链接：
①本页面锚链接：a.设置锚点：<a name="top"></a>
b.在超链接上，使用#name跳转到对应锚点。
<a href="#top" target="_self" >超链接</a>
②页面间锚链接：a.在积极跳转页面的指定位置，设置锚点
b.在超链接的href属性中，使用“页面地址.html”
<a href="t.html#weixin">跳转到新页面指定部分</a>
6、功能性链接：
mailto：用于给指定邮箱发送邮件
tencent://message/?uin=523291845 给指定QQ发送消息
file:///e:/aaa.png打开本地文件
<a href="mailto:123456789@qq.com">发邮件</a>
10、s：有误文本 。文本内容上会有一条删除线。
11、cite：浏览器显示为倾斜，常用于书、画作、作品的引用。
12、code：只表示计算机代码，不改变格式，需配合pre标签使用。
13、bdo:表示文本方向
<bdo dir="rtl">从右向左显示</bdo>
14、kbd：表示用户需要用键盘输入的内容。浏览器显示为等宽字体
15、sup：上标文本 sub：下标文本
16、©；版权符号。 空格
17、u：下划线
18、mark：高亮或标记文本，浏览器显示为黄色背景。
19、time：表示时间。
表格
表格十分的常用，用来布局或者做表单都很好用。但是要注意单元格的合并，否则可能会结构错乱。
表格 table
表格的行：tr 每行中的列：td
表头：<th></th>默认加粗，单元格居中
【常用属性】
1、border：给表格添加边框。当border属性增大时，只有外围框线增加，单元格的边框始终为1px
2、cellspacing:单元格与单元格时间的间隙距离。当我们使用cellspacing=0时，只会使单元格间隙为0但不会合并边框线
表格边框合并：style="border-collapse: collapse"，无需再写cellspacing=0
3、cellpadding:单元格中的内容与边框线的距离。
4、width、height：表格的宽高
5、align：在 屏幕 left center right 位置显示
>>> 注意：给表格加上align属性，相当于让表格浮动，会直接打破表格后面元素的原有排列方式。
6、bgcolor：背景色 等同于 style="backgroungd-color: ;"
7、background：背景图片等同于style="background-image",且背景图会覆盖背景色。
8、bordercolor:边框颜色
【tr和td的相关属性】
1、width/height：单元格宽高
2、bgcolor：单元格的背景颜色
3、align：left center right 单元格中的文字，水平对齐的方式
4、valign：top center bottom 单元格中的文字，垂直对齐的方式
5、nowrap：单元格中文字不换行
>>>注意：1、当表格属性与行列属性冲突时，以行列属性为准。（近者优先，离内容越近的优先级越高）
2、表格的align属性时控制表格自身在浏览器的显示位置。行和列的align属性是控制单元格中文字在单元格中的对齐方式
3、表格的align属性，并不影响表格内，问你的水平对齐方式
tr的align属性，可以控制一行中所有单元格的水平对齐方式
实例：
<table width="500" border="1" cellspacing="0" style="border-collapse: collapse;" cellpadding="10" align="center" bgcolor="red" background="../img/icon1.png" bordercolor="blue"> <caption>表格的标题</caption> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> <tr> <td align="right" width="10">1-111111111111111111111111111111111111111111111111</td> <td height="10" valign="center" nowrap="nowrap">1-22222222222222222222222222222222222</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> </table>
表格的跨行与跨列
colspan 跨列，当某个格跨N列时，其右边N-1个单元格需删除
rowspan 跨行，当某个格跨N行时，其下方N-1个单元格需删除
<td colspan="3" align="center" valign="center">杰瑞教育</td>
这行代码的实现的是当前单元格跨3列，文字水平居中且垂直居中。
表格的结构化
完整表格结构 thead tbody tfoot
无论本部分在表格什么位置，显示时，caption在表格外上方，thead在表格上方
tfoot在最下方
表格的直列化
<col align="center" style="background-color: red;" /> <colgroup style="background-color: green;" >后两列为一组 <col /> <col /> </colgroup>
表单
我们在网页中进行的注册、登录等都是通过表单来实现的。
【form表单】
<form action="" method="post"> <table border="" cellspacing="" cellpadding=""> <tr> <td> <input type="text" name="" id="" value="" /> </td> </tr> <tr><td></td></tr> </table> <input type="submit" value=""/> </form>
这是一个表单的基本格式。
1、两个重要属性：action-表单提交的服务器地址
method-表单提交数据的方法（get/post）
2、get和post的区别：
①get：使用URL传参：http://服务器地址？name1=value1&name2=value2
(?表示传递参数，？后面采用name=value的形式传递，多个参数之间用&连接)
所以，URL传参不安全，所有信息可在地址栏看到,并且可以通过地址栏随意传递其他数据
URL传递数据量有限，只能传递少量数据。但是传参速度快。
②POST：使用http请求传递数据。URL地址栏不可见，比较安全。且传递数据量没有限制。
综上所述：常用post传递数据
3、【input标签及属性】
①type：表示input输入框的类型。可选值有：
②name：input输入框的别名。一般情况下，必填。因为，传递数据时，使用name=value的形式传递
③value：input输入框的默认值
④placeholder：input的提示内容，当输入框用value时，提示内容消失
⑤tabindex="1"控制点击tab键的跳转顺序，从最小的开始，逐个往大的数值跳转获得焦点
4、【input-type属性详解】
①text：文本输入框
②password：密码输入框
③radio：单选按钮。
checkbox：复选选项
name和value属性需同时存在，提交时，提交的value的属性值
例如：<input type="radio" name="sex" value="男" />男 提交时 sex=男
radio凭借name属性区分是否为同一组。name相同，为同组，只能选择一个
checked="checked"默认选中（radio可以选一个，checkbox可以选多个）
④file：文件上传按钮。
⑤submit：提交按钮。提交表单数据
⑥reset：重置按钮。将表单重置为初始状态
⑦image：图形提交按钮。功能同submit 可以提交数据
⑧button：普通按钮。没有任何功能。
【input特殊属性值】
①checked="checked"默认选中
②disabled="disabled"设置控制不能使用。用在按钮上不能点击，用在输入框上不能修改。‘
而且，输入框disabled，则输入框信息不能往后台传递。
③hidden="hidden" 隐藏。等同于type="hidden".常配合disabled，或根据其他需要使用隐藏域传递数据
5、【下拉选择控件 select】
①写法：<select>
<option></option>//可以有N多个
</select>
②name属性，应该写在select上，所有选项只有一个name
③multiple="multiple"：设置select控件为多选，可在界面使用Ctrl+鼠标单击进行单项
④option常用属性：
value=""：当option没有value属性时，往后台传送的时<option></option>标签中的文字；
当option有value属性时，往后台传递的时value的值
title=""：鼠标指上后显示的文字
selected="selected"：默认选中
⑤<optroup label="山东省"></optroup> :用于将option标签进行分组，label属性表示分组名
6、【文本域 textarea】
①写法：<textarea></textarea>
②设置宽高style="width= ;height=;"自身有cols=""rows=""两个属性，但不常用
③readonly="readonly"设置为只读模式，不允许编辑
④style="resize:none"设置为宽高不允许修改
⑤style="overflow:;"设置当文字超出区域时，如何处理。
也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式
常用属性值：hidden超出区域的文字，隐藏无法显示
scroll 无论文字多少，均会显示滚动
auto 自动，根据文字多少自动决定是否显示滚动条(默认样式)
7、【表单的边框与标题】
<fieldset>//表单边框
<legend>联系方式</legend>表单标题
</fieldset>
如果想要让标题嵌入到边框中，需将标题标签写到边框标签里面
一个表单，可以有多组边框+标题的组合
8、【html5 智能表单】
①、H5新增input的form属性，用于指向特定form表单的id，
实现input无需放在form标签之中，即可通过表单进行提交。
<form id="foo">
</form>
<input ... form="foo">
②type新增属性
email week month time URL range color
③ input元素的新增属性：
Autocomplete：自动完成功能：记录用户之前输入的内容并在下次输入时自动提示
完成输入
属性值：on/off
可以在form表单上使用，对整张表单的所有控件进行自动完成的开关
也可以在input上使用，对特定输入框进行修改
绝大部分浏览器默认开启
Autofocus：自动获得焦点.autofocus="autofocus",只能设置input元素自动获得焦点
Form：所属表单：通过form表单的id，确定此input输入哪张表单
Required：必填，required="required"设置input必填，否则阻止提交
Pattern：使用正则表达式验证input的模式
Placeholder：提示内容，当有value时，取消提示
<html> <head> <meta charset="UTF-8"> <title>用户注册表单练习</title> </head> <body> <div style="background-color: #EEEEEE;width: 1013px;"> <img src="img/icon1.png" /><b>用户注册</b> </div> <form action="" method="post"> <table> <tr> <td>用户名：</td> <td colspan="3"> <input type="text" name="username" id="username" value="" style="width: 200px;"/> <span style="color: red;">*</span> <a href="t.html">检查是否有相同的用户名</a> </td> </tr> <tr> <td>密码：</td> <td> <input type="password" name="password" id="password" value="" style="width: 200px;"/> <span style="color: red;">*</span> <span style="color: gray;">（至少六位）</span> </td> <td>真实姓名：</td> <td> <input type="text" name="name" id="name" value="" style="width: 200px;"/> <span style="color: red;">*</span> </td> </tr> <tr> <td>确认密码：</td> <td> <input type="text" name="pass" id="pass" value="" style="width: 200px;"/> <span style="color: red;">*</span> </td> <td>性别：</td> <td> <select > <option>男</option> <option>女</option> </select> <span style="color: red;">*</span> </td> </tr> <tr> <td>证件类型：</td> <td> <select style="width: 204.8px;"> <option>各种证</option> <option selected="selected">身份证</option> <option>学生证</option> </select> <span style="color: red;">*</span> </td> <td>出生日期：</td> <td> <input type="text" name="birthday" id="birthday" value="" style="width: 200px;"/> <span style="color: red;">*</span> <span style="color: gray;">（格式为2010-02-05）</span> </td> </tr> <tr> <td>证件号码：</td> <td> <input type="text" name="idnumber" id="idnumber" value="" style="width: 200px;"/> </td> <td>国家：</td> <td> <input type="text" name="country" id="country" value="" style="width: 200px;"/> </td> </tr> <tr> <td>联系号码：</td> <td> <input type="text" name="phone2" id="phone2" value="" style="width: 200px;"/> </td> <td>城市：</td> <td> <input type="text" name="city" value="" style="width: 200px;"/> </td> </tr> <tr> <td>手机号码：</td> <td> <input type="text" name="phone" value="" style="width: 200px;"/> <span style="color: gray;">（建议填写，以便进行短信通知）</span> </td> </tr> <tr> <td>E-mail：</td> <td> <input type="text" name="email" value="" style="width: 200px;"/> <span style="color: red;">*</span> </td> <td>邮编：</td> <td> <input type="text" name="post" value="" style="width: 200px;"/> </td> </tr> <tr> <td>联系地址：</td> <td colspan="3"> <input type="text" name="address" value="" style="width:738px ;"/> <span style="color: red;">*</span> </td> </tr> <tr> <td></td> <td align="center"> <img src="img/reset.png" type="reset" value="" style="width: 49px;height: 24px;"/> <input type="submit" value="注册"/> </td> </tr> </table> <div > <img src="img/sl.png" style="width: 22px;height: 22px;"/>广告| <a href="http://baidu.com">伙伴与sjaijiejfaijjafssfsaf</a> </div> </form> </body> </html>
这是一个填写注册信息的表单，几乎涵括了上述标签及属性，供参考。
- 还没有人评论，欢迎说说您的想法！
客服
