这篇博客写给所有HTML的初学者，希望这篇博客可以对初学者有所帮助，同时也希望大家在学习HTML的道路上不怕艰险，不畏困难。
HTML是HyperText Markup Language的缩写，翻译成中文是超文本标记语言，用于网页的创建。
二、HTML的基本结构主要包括<！DOCTYPE html>文档类型、<head>头部和<body>主体三部分。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
1、meta标签
1.1charset 设置文档的字符集编码格式
<meta charset="UTF-8">
常见的几种字符集编码格式：
a.UTF-8 ：万国码（最常用）。
b.GB-2312 ：国标码。
c.GBK ：扩展的国标码。
1.2name 将该网页的信息写给搜索引擎看
<meta name="keywords" content="这是搜索网页的关键字"/>
<meta name="description" content="这是网页的介绍"/>
第一行是网页的关键字，用于搜索该网页。第二行是网页的介绍。
常用的name属性值有：author（作者）keywords（关键字）description（网页描述）。
2、title标签——网页的标题
<title>这是网页的标题</title>
1、标签的分类：块级标签和行级标签
1.1块级标签：显示为块状，前后隔一行（自动换行）
a.标题标签 <h1>到<h6>，h1最大，h6最小。
<h1>111111111111</h1> <h2>111111111111</h2> <h3>111111111111</h3> <hr /> <!--水平线--> <h4>111111111111</h4> <h5>111111111111</h5> <h6>111111111111</h6> <hr />
<pre>这是预格式标签 可以换行</pre> <!--预格式标签，可以保留代码的排版格式-->
f.<blockquote></blockquote>引用标签
g.有序列表ol和无序列表ul
<ol> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol>
<ul> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul>
h.定义描述列表dl
<dl> <dt>定义列表标题</dt> <dd>描述项第一项</dd> <dd>描述项第二项</dd> </dl>
i.分区标签
<div></div> 可以包裹任何标签，也可以被包裹进任何标签。
<span style="color: red;font-size: 33px;background-color: blue;">姜浩是我大哥</span> <!--color 字体颜色 font-size 字体大小 background-color 背景颜色 font-weight 加粗--> <em>表示为强调，字体倾斜</em> <strong>表示强调，字体加粗</strong> <i>表示切斜，没有强调效果</i> <b>表示加粗，没有强调效果</b> <q>表示短引用，自带双引号</q> <small>字体比正常字体小一号，可以多重嵌套</small> <big>字体大一号</big> <s>表为倾斜</cite> <code>表示计算机代码，但不会保留格式，需要配合示有误文本，删除线</s> <cite>表示引用，浏览器表示pre标签使用</code> <bdo dir="ltr">表示文本方向，ltr：从左往右 rtl:从右往左</bdo> X<sup>2</sup> <!--sup：上标文本 sub：下标文本--> <!--版权符号 空格--> © © 空格 <u>这是下划线标签</u> <mark>高亮或标记文本 浏览器显示为黄色背景</mark>
b.超链接 <a href="" target=""></a>
<a href="https://www.baidu.com/" target="_blank" title="打开百度">表示超链接</a> <!--href表示跳转的地址； target表示页面打开的位置：self自身页面打开（默认），blank新页面打开； title表示超链接的标题，也就是鼠标指上去显示的东西--> <a href="练习.html#bottom">打开超链接</a> <!--相对路径的三种情况： 如果在同一文件夹，直接写“文件名.后缀” 如果在下一层文件夹，写“文件夹名/文件名.后缀” 如果在上层文件夹，写“../文件夹名/文件名.后缀” ..的意思是上一层文件夹，类似后退-->
c.锚链接
自身页面锚链接：先定义锚点<a name=name1>、设置超链接跳转到锚点<a href="#name1">
页面间锚链接：先在另一个页面设置锚点<a name=name2></a>，然后在本页面跳转链接，<a href="链接地址#name2">
d.功能性连接：mailto 用于给指定邮箱发送邮件 http file ftp
<a href="mailto：j.com" target="_self">点击就送</a>
2、table表格
2.1表格的结构
用tr表示行，td表示列；th表示表头，字体加粗居中；caption表示标题
<table border="2" cellspacing="1" cellpadding="10" bordercolor="blue" style="border-collapse: collapse;"> <caption>表格的标题</caption> <tr> <td rowspan="2">1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-2</td> <td>2-3</td> </tr> <tr> <td colspan="2">3-1</td> <td>3-2</td> </tr> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </table>
2.2表格的各种属性
a.border=1 表示边框，1是宽度 当border属性增大时，只有外围边框增大；
b.cellspacing：单元格之间的间隔；
c.cellpadding：单元格中的文字与边框的距离
d.style=“border-collapse：collapse；”，合并边框
e.width、height表示宽度和高度
f.bgcolor：背景颜色 可以用style=“background-color：”代替；bordercolor：边框颜色 background：背景图片
g.colspan=“2”表示该内容跨两列，rowspan=“2”表示该内容跨两行
h.align：表格在页面中的位置 left center right
2.3tr和td的相关属性
a.width、height 单元格的宽和高 bgcolor单元格的背景颜色
b.align：left center right 单元格中的文字，水平对齐方式
c.valign：top center bottom 单元格中的文字，垂直对齐方式
d.nowrap=“nowrap”单元格中的文字不换行
注意：当表格属性与行列属性冲突时，行列属性为准。（作用范围越小，优先级越高）
2.4表格的结构化 caption thead tbody tfoot
无论各部分写在表格的什么位置 caption会在表格外最上方， thead会在表格内最上方，tfoot会在最下方
3、form表单
<fieldset> <legend>用户注册</legend> <form action="" method="get" autocomplete="on"> <table> <tr> <td>用户名：</td> <td><input type="text" name="username" id="username" value="111" /></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="mima" placeholder="请输入密码" autofocus="autofocus"/></td> <!--placeholder：提示属性--> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td> 喜欢的城市： </td> <td> <select name="city"> <optgroup label="山东"> <option selected="selected">烟台</option> <option>青岛</option> <option>济南</option> <option>济宁</option> </optgroup> <optgroup label="北京"> <option>海淀</option> <option>朝阳</option> </optgroup> </select> </td> </tr> <tr> <td>爱好：</td> <td> <input type="checkbox" name="hobby" value="玩" checked="checked"/>玩 <input type="checkbox" name="hobby" value="吃"/>吃 </td> </tr> <tr> <td>头像：</td> <td><input type="file" name="head"/></td> </tr> <tr> <td> <input type="image" src="img/捕获.PNG" value="提交" /> </td> <td> <input type="reset" value="重置" /> <input type="button" value="点我" /> </td> </tr> <tr> <td>服务条款：</td> </tr> <tr> <td colspan="2"> <textarea readonly="readonly" style="width: 200px; height: 120px;">这是服务条款；这是服务条款； 这是服务条款；这是服务条款；这是服务条款；这是服务条款。</textarea> </td> </tr> </table> </form> </fieldset>
3.1 两个重要属性action和method
action 表单提交的地址，不填的话默认为自身页面。
method 表单提交的方式：有get和post。
a.get通过URL地址栏传参、不安全、所有信息可在地址栏看到、传递数据量有限。
http：//服务器地址？name1=value1&name2=value2；(?表示传递参数，？后面采用name=value的形式传递，多个参数之间用&隔开)
b.post通过后台传参、安全、传递数据量没有限制。
使用http请求传递数据，URL地址栏不可见。多使用post传递数据。
3.2 input标签及属性
a.type：表示input输入框的类型，可选值有：
text 文本； password 密码，输入内容时显示小黑点；
radio 单选框（同一组name必须相同，value不能省，凭借name属性区分是否为同一组，同组只能选一个）； checkbox 复选框；
file 文件上传； bottom 按钮，没有功能；image 图片提交按钮，功能同submit，可以提交数据；
submit 提交表单数据；reset 重置按钮，将表单数据重置为初始状态。
b.name：input输入框的别名，一般情况下必填。因为传递数据时使用name=value的形式传递。
c.value：input输入框的默认值。
d.placeholder：input的提示内容，当输入框有value时，提示内容消失。
3.3 input特殊属性值
a.checked="checked" 默认选中（radio只能选一个，checkbox可以选多个。）
b.disabled=“disabled” 不能被选中，用在按钮上不能点击，用在输入框上不能修改
c.hidden=“hidden” 隐藏，等同于<input type="hidden"/>，常用于配合disabled，使用隐藏域传递数据。
3.4下拉选择控件select：
a.写法：<select>
<option></option> (可以有多个)
</select>
b.属性：name属性写在<select>上。
multiple="multiple"：设置select为多选，一般不用
c.option常用属性：
value：有value时，name=value；没有时，name=option里边包含的值。
title：鼠标指上后显示的文字。
selected="selected"，默认选中。
d.doptgroup lable=“”：用于对option标签进行分组，lable为分组名
3.5文本域textarea
a.写法：<tr>
<td colspan="2">
<textarea></textarea>
</td>
</tr>
b.属性：style=“resize：none；” 设置为宽高不允许修改。
readonly=“readonly” 设置为只读模式，不允许编辑。
style="width: 180px; height: 250px；”设置宽高。
style=“overflow：；”设置当文字超出区域时，如何处理：
hidden：超出区域的文字，隐藏无法显示
scroll：无论多少文字，均会显示滚动
auto：自动，根据文字多少自动决定是否显示滚动。
3.6边框和标题
<fieldset> 这是表单边框
<legend>联系方式</legend> 这是表单标题
</fieldset>
3.7 HTML5智能表单
作用：用于指向特定的form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。
<form id=foo>
......
</form>
<input...form="foo">
3.8 input元素的新增属性：
Autocomplete：自动完成功能 记录用户之前输入的内容，并在下次输入时自动提示完成输入,
属性值只有on和off两种，可以在form上使用完成对整张表单的操作，也可以在input上使用。
Autofocus：自动获得焦点 只能设置input元素自动获得焦点。
Form：所属表单 通过form表单的id，确定此input输入哪张表单。
Required：必填
Pattern：验证input的模式
Placeholder：提示
H5的基本结构和基本标签的内容就写到这里，更加深层次的问题请大家继续关注我的博客，接下来的时间里我会继续发出。谢谢大家的阅读。
tips：我所用的软件均是HBuilder。
1862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
