这是一篇讲解web前端HTML的内容。HTML：（标签固定的XML）超文本标记语言，一种纯文本类型的语言。它是用来设计网页的标记语言，用该语言编写的文件，以.html或者.htm为后缀，由浏览器解释执行。在HTML页面上，可以嵌套用脚本语言编写的程序段，如JavaScript。。
HTML基本标签
- Html介绍
- 文件标签
- 排版标签
- 块标签
- 字体标签
- 清单标签
- 图形标签
- 链接标签
- 表格标签
HTML表单标签
- Form标签
- Input种类
- Select与option标签
- Textarea标签
HTML框架及特殊字符
- 框架标签
- 其它标签与特殊字符
【学习目标】
- 了解html常用标签
- 掌握html中的表格标签
- 理解综合案例
- 掌握超链接标签
【内容：html基本标签】
一、Html介绍
1、什么是html?
Html是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
重点解析：超文本标记 语言
语言：人与计算机交互的工具
超文本：
(1)普通文本不能实现的，超文本可以实现，能实现普通文本不能实现的功能
(2)包括超链接的文本
标记：就是标签，不同的标签能实现不同的功能
2、Html的作用？
Web浏览器的作用是读取html文档，并以网页的形式显示它们。浏览器不会显示html标签，而是使用标签来解释页面上的内容.
简单说，html就是用于展示信息的。
3、Html书写规范
a). Html标签
HTML 标记标签通常被称为 HTML 标签(HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 < html>
HTML 标签通常是成对出现的，比如 < b> 和 < /b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
绝大多数的标签都具有属性,建议属性值使用引号引起。例如:< body text=”red”>
大多数标签是可以嵌套的
b). Html创建
Html文件可以直接使用文本编辑器来创建，保存时，后缀名为html或htm
整个文件是在< html>与< /html>标签之间在< html>标签间有< head>与< body>子标签。
例如:
1 | <html> |
c). 空的html标签
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
空标签：功能比较单一 ，例如：
1
<br></br> === <br/>
< br> 就是没有关闭标签的空元素（< br> 标签定义换行）。
在开始标签中添加斜杠，比如 < br/>，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 < br> 在所有浏览器中都是有效的，但使用 < br /> 其实是更长远的保障。
d). Html大小写不敏感
HTML 标签对大小写不敏感：< P> 等同于< p>。许多网站都使用大写的 HTML 标签。
W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写
e). html结构
1 | <html> |
二、文件标签
1、html标签
整个文件都处于< html >标签中.
< HTML>用以声明这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。
在HTML文件有两部分< head>与< body>
2、head标签
< head>用于加载一些重要的资讯
它的内容不会被显示，只有< body>的内容才会被显示
3.title标签
< title>只能出现于< head>中。
它代表的是标题
4、body标签
< body>中的内容会被显示。
常用属性:
- text:用于设定文字颜色
- background：用于设定背景图片
- bgcolor:用于设定背景色
5、关于html中颜色取值
颜色由红色、绿色、蓝色混合而成
有三种取取值方式:
1、rgb(0,0,0) 值是在0-255之间
2、 #000000 #ff0000 #00ff00 #0000ff #ffffff
3、red green blue
三、排版标签
1、注释
在html中注释是
1 | <!--注释 --> |
在html中使用注释的目的与java中一样。
2、p标签
< p>标签是段落标签，可以将html文档分割为若干段落。浏览器会自动在段落前后添加空格。
< p>标签常用属性
- align:属性用于设定对齐方式 可选值 left right center 默认值是left.
3、br标签
< br>标签是换行标签。
因为浏览器会自动的忽略空白与换行，因此< br>标签成为了我们最常用的标签。
4、hr标签
< hr>标签会生成一条水平线。
常用属性:
- align:设置水平线对齐方式 可选值 left right center
- size:设置水平线厚度 以像素为单位。默认为2
- width:设置水平线长度.可以是绝对值或相对值。默认为100%
- color:设置水平线颜色.默认为黑色
5、关于html中数值单位
Html的数值默认单位为像素(px).
在有些位置可以使用百分比来设置。
例如:
1 | <hr size=’3’>这个就代表水平线厚席为3px. |
四、块标签
1、div标签
用于在文档中设定一个块区域。
常用属性：align:left center right
2、pan标签
用于在行内设定一个块区域。
Html中绝大多数元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始。例如 div p等
内联元素在浏览器显示时，通常不会以新行来开始。span
五、字体标签
1、font
< font>标签用于规定文本的字体，大小，颜色。
常用属性:
- face:规定文本的字体
- size:规定文本的大小
- color:规定文本的颜色
2、h1-h6
< h1>-< h6>标签用于定义标题.
< h1>最大标题
< h6>最小标题
六、列表标签
1、ul
< ul>标签表示的是一个无序列表。
常用属性:
- type:规定列表的项目符号类型,可取值 disc,square,circle.默认值为disc
2、li
< li>标签表示的是一个列表项
常用属性:
- type:这个属性只适用于无序列表，用于设定项目符号，默认值为disc
- value:这个属性只适用于有序列表，用于设定列表的项目数字
3、ol
< ol>表示的是一个有序列表。
常用属性:
type:这个属性规定列表中使用的标记类型。可取值1、A、a、I、i 等等.
start:这个属性规定列表的起始值
七、图形标签
1、img
< img>是一个图片标签，用于在页面上引入图片.
常用属性：
- src:用于设定要引入的图片的url
- alt:用于设定图像的替代文字
- width:用于设定图片的宽度
- height:用于设定图片的高度
- border：图片边框厚度
- align:用于设定图片的文字的对齐方式
八、链接标签
1、a
< a>标签用于定义超连接，用于从一个页面链接到另一个页面。
常用属性:
- href:用于设定链接指向页面的url.
- name:用于设定锚的名称
- target:用于设定在何处打开链接页面。
九、表格标签
1、table
< table>标签用于定义表格
常用属性:
- align:用于设定表格的对齐方式
- bgcolor:用于设定表格的背景颜色。
- border:用于设定表格边框的宽度
- width:用于规定表格的宽度。
2、tr
< tr>标签用于定义表格的行,包含一个或多个th或td元素。
< tr>常用属性:
align:用于设定表格中行的内容对齐方式。
bgcolor:用于设定表格中行的背景颜色。
3、td
< td>标签用于定义表格单元
td元素中的文本一般显示为正常字体且左对齐。
< td>常用属性:
- align:用于设定单元格内容的对齐方式。
- bgcolor:用于设定单元格背景颜色。
- height:用于设定单元格的高度。
- width:用于设定单元格的宽度。
- colspan:用于设定列合并
- rowspan:用于设定行合并。
4、caption
< caption>用于定义表格标题
< caption>标签必须紧随< table>标签之后，一个表格只能有一个标题。通常这个标题会被居中于表格之上。
5、th
< th>标签用于定义表格的表头，< th>内部的文本通常呈现为居中加粗文本。
Html表格中有两种类型的单元格：
表头单元格th:包含表头信息。
标准单元格td:包含数据。
6、thead
< thead>标签用于定义表格的页眉
< thead>标签用于组合HTML表格的表头内容。
< thead>元素应该与< tbody>和< tfoot>元素结合起来使用。
注意:< thead>内部必须有< tr>标签。
7、tbody
< tbody>标签用于定义表格的主体
< tbody>标签用于组合HTML表格的主体内容。
8、tfoot
< tfoot>标签用于定义表格的页脚
< tfoot>标签用于组合HTML表格中的表注内容。