第1部分 html常用标签 / 憋错料

一、HTML常用标签

<!DOCTYPE html>第一行的 DOCTYPE 表示文档类型，这是HTML5的标准格式
<html lang="zh-CN"></html> 在 html 标签中要设置语言，英语是：en，中文是：zh-CN
<meta charset="UTF-8"> 在 meta 标签中一定要设置字符集，是文档存储时用的字符集，还可以设置 GBK

1、排版标签

<h1></h1> h 标签用于设置标题，h1 标签最大，h6标签最小
<p></p> p 标签用于生成段落
<hr /> 标签用于生成一条横线，该标签是一个单标签
<br /> 强制换行标签，p 标签也可以换行，但是p标签表示的是段落，所以行距会很大。
div span 标签是没有语义的，都用来布局的。但是一行只能有一个 div 标签。对于 span 标签一行可以有多个。

2、文本格式化标签

<b></b>，<strong></strong>，都是将文字以粗体方式显示。XHTML 推荐使用 strong 标签
<i></i>，<em></em>，都是让文字以斜体显示，同样推荐使用 em 标签
<s></s>，<del></del>，文字以加删除线方式显示，推荐使用 del 标签
<u></u>，<ins></ins>，文字以加下划线方式显示，推荐使用 ins 标签

3、img 标签

img 标签必须要有一个 src 属性，该属性的值是图片的URL地址或者存储地址，属性如下：

属性	属性值	描述
src	文本	图片路径
alt	文本	图片不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面）	设置图片宽度
height	像素（XHTML不支持%页面）	设置图片高度
border	数字	设置图片边框的宽度

通常 width 和 height 属性只设置一个一即可。

4、链接标签，也就是 a 标签，重点

a 标签有两个属性 href 和 target。其中 href 属性是必须的。href 属性可以指向外部链接、内部链接、空链接。例如：

<a href="https://www.baidu.com">百度一下</a>，这个是指向外部链接
<a href="01-html骨架标签.html">内部链接</a>，这个是指向本地一个 html 文件就是内部连接
<a href="#">空链接</a>，这个 href="#" 表示是一个空链接

a 标签的另一个属性 target 的属性值是 _self 和 _blank 两种，默认是 _self。使用 _blank 时表示在新的空白页打开链接。

a 标签不仅可以对文字创建链接，对图像、表格、音频等都可以创建链接。

5、注释标签

html 的注释标签是：

注释内容在程序运行时是不会执行的。
在 sublime 中注释的快捷方式是同时按下 Ctrl + / 键。

6、路径

路径分为：相对路径和绝对路径。
相对路径，是从代码所在的这个文件出发，去寻找目标文件，通常所说的上一级、下一级、同一级，简单来说是相对于文件位于 HTML 的页面的位置。

如：src="images/xx.jpg"，这里的就是同一级目录下的下一级目录中的 xx.jpg 文件。
如：src="../images/xx.jpg"，这里是指上一级目录下的images目录下的 xx.jpg 文件

绝对路径：绝对路径使用较少，并且要注意绝对的写法，在windows中绝对路径符号是，而不是相对路径的 / 符号。当然绝对路径可以使用网页的地址。

7、锚点

锚点通常用在同一个页面中跳转，被锚的点是标签的 id 属性的值。例如在页面开始部分的 a 标签中，a 标签内容如下：
<a href="#one">第一集</a>
前面说过，href="#" 是指向空白页，这里是 href="#one" 表示指向本页面的一个标签的 id 属性值是 one 的位置，例如在本页的后面标签中，某一个 h 标签的 id 属性是 one，h 标签内容如下：
<h2 id="one">第一集<h2/>
这时在页面的开始部分点击第一集就会跳转到本页的 h2 标签的第一集位置。这就是锚点。

8、base 标签

这个标签可以设置整体连接的打开的状态。语法如下：
<base target="_blank" />
该标签一定要写在<head></head>之间。添加这个标签及 target="_blank" 属性值后，在后面的 <body></body> 标签中的所有 a 标签都拥有这个属性，就是在新的页面打开链接。避免对每个 a 标签设置这个属性。

9、预格式化文本标签 pre

语法如下：

<pre>

  此例演示如何使用 pre 标签

  对空行和 空格

  进行控制

</pre>

在这个标签内书写的文字会按照书写的模式显式，不需要换行和段落标签。由于不好整体控制，使用较少。

10、特殊字符

在 html 中有些特殊符号不能直接使用，例如空格、换行、大于、小于等，这时就要用特殊符号来做。

是以运算符 & 开头，以分号运算符（;）结尾。
他们不是标签，而是符号。
HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体。

几个常用的特殊字符是：空格：?，小于号（<）：<，大于号（>）：>。还有其它一些特殊符号就不全部列出。

11、XHTML 是更严格更纯净的 HTML 代码。

XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。
XHTML 与 HTML 4.01 几乎是相同的。
XHTML 是更严格更纯净的 HTML 版本。
XHTML 是作为一种 XML 应用被重新定义的 HTML。
XHTML 是一个 W3C 标准。

12、 HTML和 XHTML之间有

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持
XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。

二、表格标签

表格标签用于在页面中显示表格。表格有表格标题、有行和列。表格不是用来布局的。常用于显示、展示表格数据。表格使用熟练可以将繁杂的数据表现得有条有理。

1、创建表格

创建表格的基本的三对标签 table、tr、td。

table用于定义一个表格标签
tr标签定义表格中的行，必须嵌套在 table 标签中
td标签定义表格中的单元格，必须嵌套在 tr 标签中
字母 td 是指表格数据（table data），即数据单元格的内容。表格最合适用来存储数据的。

2、表格属性

表格的重点属性是 cellspacing、cellpadding。具体属性如下，这里属性都是在 table 标签内：

border：像素值，设置表格的边框（默认border="0"无边框）
cellspacing：默认为2像素，设置单元格与单元格之间的空白间距
cellpadding：默认为1像素，设置单元格内容与单元格边框的空白距离
width：像素值，设置表格的宽度
height：像素值，设置表格的高度
align：设置表格在页面中的水平对齐方式，有三个值：left、center、right。

3、表格单元格标签th

用于表格的第一行或第一列，并且文本加粗居中显示。
th 标签也是一个单元格，与普通的 td 标签不一样，th 标签会让在里面的文字居中并加粗显示。

4、表格标题caption标签

用法：

<table>
   <caption>我是表格标题</caption>
</table>

caption 标签定义表格标题，这个标题会居中且显示于表格之上。
caption 标签必须紧跟在 table 标签之后。这个标签只有在表格里面才有意义。

5、合并单元格

合并单元格的两种方式：跨行合并和跨列合并

跨行合并：rowspan="n"，n 是合并单元格的个数
跨列合并：colspan="n"，n 是合并单元格的个数
合并单元的顺序：先上后下，先左后右。

合并单元格三步曲：
先确定是跨行还是跨列合并。
根据先上后下，先左后右的原则找到目标单元格，然后写上合并方式及要合并的单元格数量，比如：
<td colsapn="3"></td>
删除多余的单元格。

6、表格总结

标签名	定义	说明
`<table></table>`	表格标签	就是一个四方的盒子
`<tr></tr>`	表格行标签	行标签在table标签内部才有意义
`<td></td>`	单元格标签	单元格标签是个容器级元素，可以放任何东西
`<th></th>`	表头单元格标签	它还是一个单元格，但是里面的文字会居中且加粗
`<caption></caption>`	表格标题标签	表格的标题，跟着表格一起走，和表格居中对齐
clospan 和 rowspan	合并属性	用来合并单元格的

表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS 的作用。
表格的学习要求：能手写表格结构，并且能简单合并单元格。

7、表格拓展

表格可分为三个部分：表头、正文和脚注。分别用：thead、tbody、tfoot来表示。

<thead></thead>：用于定义表格的头部。用来放标题之类的东西。
内部必须拥有
标签！
<tbody></tbody>：用于定义表格的主体。放数据本体。
<tfoot></tfoot>放表格的脚注之类。
以上标签都是放到table标签中。

三、列表标签

概念：容器里面装载着结构、样式一致的文字或图表的一种形式，叫列表。
特点：最大特点是整齐、整洁、有序，跟表格类似，但可自由组成度更高。
列表分为：无序列表（ul）、有序列表（ol）、自定义列表（dl）。

1、无序列表 ul

无序列表的各个列表之间没有顺序级别之分，是并列的，默认在每一项前面有一个提示点，基本语法如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己样式属性，放下那个样式，让CSS来！

2、有序列表 ol

有顺序排列的列表，各个列表项按照一定的顺序排列定义，默认在每一项前面有一个数字，语法如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

基本语法与无序列表一致，在实际中有序列表使用较少。

3、自定义列表 dl

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

自定义列表标签在实际中很常用。该标签内部还有dt、dd两个标签，一定要注意。

4、列表总结

标签名	定义	说明
`<ul></ul>`	无序标签	里面只能包含li，没有顺序，在以后布局中最常用的列表
`<ol></ol>`	有序标签	里面只能包含li，有顺序，使用情况较少
`<dl></dl>`	自定义列表	里面有2个兄弟，dt 和 dd

现在还没有学布局，只要注意下面3点：

学会什么时候用无序列表，学会什么时候用自定义列表
无序列表和自定义列表代码怎么写？
具体的布局，等学了css 在来全面布局。

四、表单标签

作用：收集用户信息。在页面中与用户进行交互，收集用户资料时需要用到表单。

在html 中，一个完整的表单由表单控件（也叫表单元素）、提示信息、表单域 3 个部分组成。
表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：一个表单中通常还需包含一些说明性文字，提示用户进行填写和操作。
表单域：相当于一个容器。用来容纳所有的表单控件和提示信息。可以通过他定义处理表单数据所用程序的 url 地址，以及数据提交到
服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

1、input 标签及控件（重点）

语法：
<input type="属性值" value="值">

input 为单标签
type 属性设置不同的属性值用来指定不同的控件类型。
除了 type 属性，还有其它属性。

常用属性如下：

（1）、type 属性
通过改变这个属性值，可以决定使用哪种 input 表单。比如 type="text" 表示文本框；type="password" 表示密码框，输入密码时不可见，例如：
用户名: <input type="text" />
密码：<input type="password" />

（2）、value属性
该属性值可在表单显示默认的文字，可以提示用户，例如：
用户名:<input type="text" name="username" value="请输入用户名">

（3）、name属性
用法：
用户名:<input type="text" name=“username” />

name是表单的名字，后台通过这个 name 属性找到这个表单。name 还可以用来区别不同的表单。
name 属性的值可以自定义，如果与 radio（单选按钮）是一组，必须命名相同的名字 name，可在多个选项只选择一个。例如：
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
在 ajax 和后台获取值时，必须要用这个 name属性。

（4）、checked属性
表示默认选中状态。常与单选按钮和复选按钮一起组合使用。例如单选按钮组合使用，默认选中男：

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

（5）、checkbox 复选框
用于选择多个选项，可使用 checked="checked" 表示默认选项。例如：

爱好:
    睡觉 <input type="checkbox" name="hobby" checked="checked" />
    爬山 <input type="checkbox" name="hobby" />
    篮球 <input type="checkbox" name="hobby" />
    足球 <input type="checkbox" name="hobby" /> <br />

（6）、按钮表单 button属性
<input type="button" value="获取短信验证码" />

（7）、提交表单 submit属性
要与 form 表单组合使用才有效，value 属性值可以不写。
<input type="submit" value="提交所填" />

（8）、重置表单 reset属性
<input type="reset" value="重置所填" />

（9）、图像形式提交 image属性
图片提交按钮里面必须包含 src 属性值。例如：
<input type="image" src="images/btn.png" /> <br />

（10）、文件域 file 属性
用于上传文件等，要与 form 表单一起使用才起作用。示例：
<input type="file" />

（11）、input 属性小结

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了

2、label标签

目的：label 标签是为了提高用户体验的，为用户提供最优秀的服务。
概念：label 标签为 input 元素定义标注（标签）。
作用：用于绑定一个表单元素，当点击 label 标签的时候，被绑定的表单元素就会获得输入焦点。
有两种方式绑定元素：

（1）、第一种用法就是用 label 直接包括 input 表单，适合单个表单选择。如下：
<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>

（2）、用 for 属性规定 label 与哪个表单元素绑定。如下：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
这里 label 标签的 for="sex" 与 input 标签的 id="sex" 对应，这样 label 标签就与 input 标签绑定。现在用鼠标点击 label 标签里面的文字时，光标会定位到指定的表单里面。

3、textarea控件（文本域）

常用于评论区，可以输入多行文字。语法如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

通过 textarea 控件可以创建多行文本输入框。cols 属性和 rows 属性在实际开发中不常用，可用 js 控制。

文本框和文本域区别

表单	名称	区别	默认值显示	用于场景
input type="text"	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
textarea	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

4、select 下拉列表

目的：在有多个选项可供选择的时候，为了节约空间，可使用 select 控件定义下拉列表。语法如下：

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意：

注意1. <select> 中至少包含一对 option 标签。
注意2. 在option 中定义selected =" selected "时，当前项即为默认选中项。
注意3. 在实际开发会用的比较少，有替代可选，做出来也美观。

五、form 表单域

收集的信息是通过 form 表单域传递给后台服务器端。

目的：在HTML中，form 标签被用于定义表单域，以实现用户信息的收集和传递，form 中的所有内容都会被提交给服务器。语法如下：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>