HTML基本标签（一）
使用title标签
title标签：网页的标题，即网页选项卡上的文字。
<head>
<title>******</title>
</head>
使用link标签
链接网页图标，title前的小logo
rel属性：声明链接文件的类型，此处选icon
type属性：可以省略
href属性：表示图片的路径地址
<link rel="icon" href="img/icon.png"/>
使用meta标签
描述文档类型和编码
描述搜索关键字和描述
<head>
<meta charset="urf-8">
</head>
meta标签常用属性：
1、charset：设置文档的字符集编码格式
HTML5中设置字符集编码：<meta charset="UTF-8">
HTML4.01之前...: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
>>>常见的字符集编码格式：
a.GB-2312:国标码。简体中文
b.GBK:扩展的国标码
c.UTF-8：万国码 Unicode 常用
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"，将我们的信息写给搜索引擎看的。
常用且需要掌握的属性值：author（作者） keyword（网页关键字）
description（网页描述）这两个属性设置，网页必不可少。
例如：
<!--作者-->↓↓↓
<meta name="author" content="http://www.********.com" />
<!--网页关键字：多个关键字用英文（半角）逗号分隔-->
<meta name="keywords" content="HTML5，网页，Web前端开发" />
<!--网页描述：搜索网站时，title下面的解释文字。至关重要！！！-->
<meta name="description" content="*******************" />
下面是一些比较常用的行级以及块级标签
1、标签分类
块级标签：显示为块，
前后隔一行（自动换行）
行级标签：按行从左往右逐一显示。
2、常见块级标签
<h1></h1>......<h6></h6>:标题标签
h标签：标题标签，自动加粗，h1最大，h6最小
水平线标签：<hr/>
<p></p>：段落标签
<br/>:换行标签
<blockquote>……</blockquote>:引用标签
<pre></pre>:预格式标签（一般用来承载代码）
浏览器默认显示样式：1、显示为等宽字体 2、代码中的换行、空格等元素可在浏览器直接显示。
3、基于布局的块级标签
有序列表标签：<ol></ol>
列表项：<li></li>
无序列表标签：<ul></ul>
定义描述列表（使用定义列表实现图文混编效果）：<dl></dl>
列表标题：<dt>一般只有一项</dt> 标题顶格显示
列表描述项：<dd>可以有N多项</dd> 描述项相对标题进行缩进显示
组合标签<figure></figure> 用于显示图片及图片标题
分区标签（可以包裹任何标签也可以被任何标签包裹）<div></div>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常见的块级标签</title> </head> <body> <!--h标签：标题标签，自动加粗，h1最大，h6最小--> <h1>h1标题标签</h1> <h2>h2标题标签</h2> <h3>h3标题标签</h3> <h4>h4标题标签</h4> <h5>h5标题标签</h5> <h6>h6标题标签</h6> <!--<hr/>:水平线标签--> <hr /> <!--<p></p>：段落标签--> <!--<br/>:换行标签--> <p>p标签是段落标签，这里是一段文字</p> <p>p标签是段落标签，<br />这里是第二段文字</p> <!--引用标签.cite属性表明引用来源，一般表明引用网址，浏览器默认显示为首行缩进--> <blockquote cite="http://www.jredu100.com"> 横眉冷对千夫指，俯首甘为孺子牛。 </blockquote> <!--<pre></pre>:预格式标签 浏览器默认显示样式：1、显示为等宽字体 2、代码中的换行、空格等元素可在浏览器直接显示。 --> <pre>哈哈哈哈哈哈哈哈哈哈 啊哈哈哈哈哈哈</pre> <!-- 有序列表：<ol></ol> order list 列表项：<li>可以有N多个</li> --> <ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol> <!-- 无序列表： <ul></ul> unorder list 列表项：<li></li> --> <ul> <li>无序第一项</li> <li>无序第二项</li> <li>无序第三项</li> </ul> <!-- 定义描述列表：<dl></dl> 列表标题：<dt>一般只有一项</dt> 标题顶格显示 列表描述项：<dd>可以有N多项</dd> 描述项相对标题进行缩进显示 --> <dl> <dt>这是定义列表的标题</dt> <dd>描述项第一项</dd> <dd>描述项第二项</dd> <dd>描述项第三项</dd> </dl> <!-- 组合标签：<figure></figure> 用于显示图片及图片标题 两个子标签：<img />图片 <figcaption></figcaption> 图片标题 显示效果：图片下面一个标题，同时图片和标题前带缩进。 --> <figure> <img src="img/icon.png"/> <figcaption>这是图片标题</figcaption> </figure> <!-- 分区标签：<div></div> --> <div style="width: 100px;height: 80px;background-color: chartreuse;">这是一个div</div> </body> </html>
4、常见的行级标签
span（文本）：：无实际意义，用于包裹某部分文字修改特定样式
em（强调）
strong（强调）
i（倾斜）
b（加粗）
【Strong、em、b、i标签的区别】
1、strong和em都表示强调，strong显示为粗体，em显示为倾斜。而且，strong的强调成都比em更高。
2、strong和b都能加粗，em和i都能倾斜。但是，strong和em多了一层强调的语义。HTML5语言，要求标签尽可能的实现语义化。
q（短引用）：显示为文字用“”引起来
small（缩小字体）small（缩小字体）big（放大字体）
small标签和big标签可以多层嵌套，直到字号达到上限或下限为止。
img（图片）
1、src：表示引用图片的地址。
路径地址的写法：
① 相对路径：以当前文件为准，去寻找图片地址。
a、与当前文件处于同一层的图片，直接写图片名
b、图片在当前文件下一层：文件夹名/图片名
c、图片在当前文件上一层：../图片名
② 绝对路径：file：///盘符：/文件夹/图片.后缀名 但是，严禁使用。
③ 网络地址：网络上的图片链接，但是，一般不使用，因为当原地址网站删除图片时，自己的网站图片同样会消失。
2、height=""width=""图片的宽度高度。可以用css样式（style="wi在·dth: ;height: ;"）代替
3、title：图片标题。当鼠标指上后显示的文字。
4、alt：当图片无法显示的时候，显示的文字。
补充img属性
align：设置图片周围文字相对于图片的位置。top、center、bottom
a（超链接）
1、href：超链接的路径,可以是网络链接，也可以是本地文件（路径确定同img）
2、target：超链接打开的位置。_self在自身页面打开（默认）_blank新页面打开
3、title：鼠标指上后显示的文字。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常见的行级标签</title> </head> <body> <a name="#top"></a> <!--span（文本）：无实际意义，用于包裹某部分文字修改特定样式--> 这是<span style="color: red;font-size: 36px;">span</span>中的文字 <br /> <!--em（强调）--> <em>这是em中的标签</em> <br /> <!--strong（强调）--> <strong>这是strong中的文字</strong> <br /> <!--i（倾斜）--> <i>这是i标签中的文字</i> <br /> <!--b（加粗）--> <b>这是b标签中的文字</b> <br /> <!--q（短引用）：显示为文字用“”引起来--> <q cite="www.jredu100.com">这是短引用标签q中的文字</q> <br /> <!--small（缩小字体）big（放大字体） small标签和big标签可以多层嵌套，直到字号达到上限或下限为止。 --> <small>我被small缩小了一号。</small> <big>我是big标签</big> <br /> <a name="weixin"></a> <img src="img/icon.png" height="" width="" title="鼠标指上后显示的文字" alt="图片没有加载成功时显示的文字"/> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <a href="tencent://message/?uin=982283757" target="_self" >这是一个超链接</a> <img src="img/computer.jpg" align="center"/>************* <!--S有误文本：删除线--> <s>这是s标签中的文字</s> <!--cite标签：浏览器显示为倾斜。常用与书、画作、作品的引用--> <cite>这是cite标签</cite> <!--code：只是表示计算机代码，但是浏览器只会显示等宽字体，不会保留代码格式，需配合pre标签使用--> <pre><code> function h(obj){ obj.style.behavior='url(#default#homepage)'; var a = obj.setHomePage('//www.baidu.com/'); } </code></pre> <!--bdo：表示文本方向，dir="lte"从左往右 dir="rtl"从右往左--> <bdo dir="ltr">1234567</bdo> <bdo dir="rtl">1234567</bdo> <!--kbd：表示需要用户用键盘输入的内容，浏览器显示为等宽字体--> 请输入"<kbd>Esc</kbd>"退出系统 <!--sup:上标文本 sub：下标文本--> X<sup>2</sup> X<sub>2</sub> <!--版权符号--> © © <!--u：下划线--> <u>这是u标签</u> <!--mark：高亮或标记文本，浏览器显示为黄色背景--> <mark>这是mark标签中的内容</mark> </body> </html>
锚点语法
锚链接：
① 本页面锚链接：a.设置锚点：<a name="top"></a>
b. 在超链接上，使用#name 跳转到对应锚点。
② 页面间锚链接：a.在即将跳转页面的指定位置，设置锚点
b.在超链接的href属性中使用"页面地址.html#name"
<a href="text.html#name">跳转到新页面指定部分</a>
功能性链接：mailto://********* @qq.com用于给指定邮箱发送邮件
tencent://message/?uin=********* 给指定QQ发送消息
file:///e:/aaa.png 打开本地文件
表格
表格 table（表格的标题：<captipon></caption>)
表格的行：<tr></tr> 每行中的列：<td></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="background-color:;"
7、Background：背景图片 等同于style="background-image:;"且背景图会覆盖背景色
8、Bordercolor：边框颜色
行及单元格标签的属性
【tr和td相关的属性（td同样好使）】
1、width/height：单元格的宽高
2、bgcolor：单元格的背景颜色
3、align：left center right 单元格中的文字水平对齐方式
4、valign：top center bottom 单元格中的文字垂直对齐方式
5、nowrap：nowarp="nowrap" 单元格中文字不换行
注意：
1、当表格属性与行列属性冲突时，以行列属性为准；（近者优先）
2、表格的align属性，是控制表格自身在浏览的的显示位置，行和列的algin属性，是控制 单元格中文字在单元格中的对齐方式；
3、表格的align属性，并不影响表格内文字的水平对齐方式
tr的align属性，可以控制一行中所有单元格的水平对其方式
【表格的跨行跨列】
colspan 跨列，当某个格跨N列时，其右边N-1个单元格需删除
rowspan 跨行，当某个格跨N行时，其下方N-1个单元格需删除
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>table表格</title> </head> <body> <table width="500" border="1" cellspacing="0" style="border-collapse: collapse;" cellpadding="10" align="right" bgcolor="hotpink" background="img/computer.jpg" bordercolor="blue"> <caption>我是表格的标题</caption> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> </table> <table border="1"> <tr> <td>111</td> <td colspan="3">111</td> </tr> <tr> <td rowspan="3">222</td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td>333</td> <td>333</td> <td>333</td> </tr> <tr> <td>444</td> <td>444</td> <td>444</td> </tr> </table> </body> </html>
表单（一般与table配合使用）<form></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键时的跳转顺序，从最小的开始，逐个往大的数值跳转，获得焦点。
【input特殊属性值】
① checked="checked" 默认选中
② disabled="disabled" 设置控件不能使用。用在按钮上不能点击，用在输入框中不能修改。 而且，如果输入框disabled，则输入框信息不能往后台传递。
③ hidden="hidden"隐藏。等同于
<input type="hidden" name="username" value="1234" />。
常用于配合disabled，或根据其他需要，使其隐藏域传递数据。
（border：hidden 消除边框）
4、【input-type属性详解】
① text：文本输入框
② password：密码输入框，输入内容时显示为"·"
③ radio：单选按钮。（value必写）
checkbox：复选按钮。
>>>name和value属性需同时存在，提交时，提交的是value中的属性值。
例如：<input type="radio" name="sex" value="男"/> 提交时，显示"sex=男"
>>>radio凭借name属性区分是否为同一组。name相同为同组，且同组中只能选择一个。
>>>checked="checked"默认选中。（radio只能选一个，checkbox可以选多个）
④ file：文件上传按钮。
⑤ submit：提交按钮，提交表单数据。（这里以注册功能为例）
⑥ reset：重置按钮，将表单数据重置为初始状态。
⑦ image：图形提交按钮。功能同submit，可以提交数据。
⑧ button：普通按钮，没有任何功能。
5、【下拉选择控件select】
（补充：当用name标签取名时，只能包含数字、字母、下划线，且不能以数字开头）
① 写法：<select>
<option></option> //可以有N多个
</select>
② name属性，应该写在<select>上，所有选项只有一个name
③ multiple="multiple"设置select控件为多选，可在界面使用ctrl+鼠标，进行多选。
④ option常用属性：
value=""：当option没有value属性时，往后台传递的是<option></option>标签中间的文字；
当option有value属性时，往后台传递的是value属性的值。
title：鼠标指上后显示的文字
selected="selected"：默认选中。
⑤ <optgroup label="山东省"></optgroup>：用于将option标签进行分组，label属性表示分组名。
6、【文本域textarea】
① 写法：<textarea></textarea>
② 设置宽高 style="width: 200px; height: 150px;" 自身有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新增属性：（详见表格）
③ input元素的新增属性：
Autocomplete：自动完成功能：记录用户之前输入的内容，并在下次输入时自动提示完成输入。
>>> 属性值：on/off
>>> 可以在form表单上使用，对整张表单的所有控件进行自动完成的开关
也可以在input上使用，完成对特定输入框进行修改。
>>> 绝大部分浏览器，默认开启。
Autofocus：自动获得焦点。autofocus="autofocus"，只能设置input元素自动获得焦点。
Form：所属表单。通过form表单的id，确定此input属于哪个表单。
Required：必填。required=“required” 设置input必填，否则阻止提交。
Pattern：使用正则表达式验证input的模式（后续讲解）
Placeholder：提示内容，当有value时取消提示。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单form</title> </head> <body> <input type="text" name="test" form="form1"/> <form action="测试.html" method="method" id="form1"> <fieldset> <legend>用户注册</legend> <table> <tr> <td>用户名</td> <td> <input type="text" name="username" placeholder="请输入用户名" disabled="disabled"/> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="password" /> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td>兴趣</td> <td> <input type="checkbox" name="hobby" value="吃" />吃 <input type="checkbox" name="hobby" value="喝" />喝 <input type="checkbox" name="hobby" value="玩" />玩 <input type="checkbox" name="hobby" value="乐" />乐 </td> </tr> <tr> <td>头像</td> <td> <input type="file" value="头像" /> </td> </tr> <tr> <td>城市</td> <td> <select name="city"> <option selected="selected">请选择</option> <optgroup label="山东省"> <option title="这里是title">青岛</option> <option <!--selected="selected"-->烟台</option> <option value="1">济南</option> </optgroup> <optgroup label="北京市"> <option>海淀区</option> <option>朝阳区</option> </optgroup> </select> </td> </tr> <tr> <td> <input type="submit" value="注册"/> </td> <td> <input type="reset" value="重置" /> </td> </tr> <tr> <td>服务协议</td> </tr> <tr> <td colspan="2"> <textarea style="width: 230px; height: 100px;resize: none;overflow: scroll;" readonly="readonly">这里是服务协议！</textarea> </td> </tr> <tr> <td> <input type="image" src="img/icon.png" title="这就是个图片提交按钮"/> </td> <td> <input type="button" value="然而并没有什么卵用" disabled="disabled"/> </td> </tr> <tr> <td> <input type="datetime-local" name="color"/> </td> </tr> </table> </fieldset> </form> </body> </html>