HTML
网页，是网站中的一个页面，通常网页是构成网站的基本元素，是承载各种网站应用的平台，通俗的说，网站就是由网页组成的。通常我们看到的网页都是以html或html后缀结尾的文件，俗称HTML文件。
一、HTML简介
1.1 什么是HTML
Hyper Text Markup Language（超文本标记语言）
- 超文本：页面内可以包含图片、链接、因为、程序等非文字元素
- 标记：标签，不同的标签下实现不同的功能
- 语言：人与计算机的交互工具
1.2 HTML能做什么
HTML使用标记标签来描述网页，展示信息给用户。
1.3 HTML书写规范
- HTML标签是以尖括号包围的关键字
- HTML标签通常是成对出现的，又开始就有结束
- HTML通常都有属性，格式：属性='属性值'（多个属性之间用空格隔开）
- HTML标签不区分大小写，建议全小写
二、HTML基本标签
2.1 结构标签
<!-- 根标签 -->
<html>
<!-- 网页头标签 -->
<head>
<!-- 页面的标题 -->
<title></title>
</head>
<!-- 网页正文 -->
<body></body>
</html>
| 属性名 | 代码 | 描述 |
|---|---|---|
| text | < body text="#f00" >< /body > | 设置网页正文中所有文字的颜色 |
| bgcolor | < body bgcolor="#f00" >< /body > | 设置网页的背景色 |
| background | < body background="1.jpg" >< /body > | 设置网页的背景图 |
颜色的表达方式：
- 用表示颜色的英文单词。例：red、green、blue
- 用16进制表示颜色。例：#fff000
2.2 排版标签
可用于实现简单的页面布局
注释标签：< !--注释-- >
换行标签：< br >
-
段落标签：< p >文本文字< /p >
特点：段落之间有空行 属性：
- align：对齐方式（left、center、right）
-
水平线标签： < hr/ >
属性：- width：水平线的长度（两种：像素表示、百分比表示）
- size：水平线的粗细（像素表示，例如：10px）
- color：水平线的颜色
- align：水平线的对齐方式
2.3 块标签（容器）
使用CSS+DIV是现下最流行的一种布局方式
| 标签 | 代码 | 描述 |
|---|---|---|
| div | < div >< /div > | 行级代码块标签，独占一行，换行 |
| span | < span >< /span> | 行内块标签，所有内容都在同一行 |
2.4 基本文字标签
< font>< /font>，处理网页中文字的显示方式
| 属性名 | 代码 | 描述 |
|---|---|---|
| size | < font size="7">< /font> | 用于设置字体的大小，最小1号，最大7号 |
| color | < font color="red">< /font> | 用于设置字体的颜色 |
| face | < font face="宋体">< /font> | 用于设置字体的样式 |
2.5 文本格式化标签
使用标签实现标签的样式处理
| 标签 | 代码 | 描述 |
|---|---|---|
| b | < b>< /b> | 粗体标签 |
| strong | < strong>< /strong> | 加粗 |
| em | < em>< /em> | 强调字体 |
| i | < i>< /i> | 斜体 |
| small | < small>< /small> | 小号字体 |
| big | < big>< /big> | 大号字体 |
| sub | < sub>< /sub> | 上标标签 |
| sup | < sup>< /sup> | 下标标签 |
| del | < del>< /del> | 删除线 |
2.6 标题标签
随着数组增大文字逐渐变小，字体是加粗的，内置字号，默认独占一行
| 标签 | 代码 | 描述 |
|---|---|---|
| h1 | < h1>< /h1> | 1号标题，最大字号 |
| ... | ... | ... |
| h6 | < h6>< /h6> | 6号标题，最小字号 |
2.7 列表标签
无序列表：使用一组无序的符号定义， < ul>< /ul>
<ul type="circle">
<li></li>
</ul>
| 属性值 | 代码 | 描述 |
|---|---|---|
| circle | < ul type="circle"> < /ul> | 空心圆 |
| dis | < ul type="dis"> < /ul> | 实心圆 |
| square | < ul type="square"> < /ul> | 黑色方块 |
有序列表：使用一组有序的符号定义，< ol>< /ol>
<ol type="a" start="1">
<li></li>
</ol>
| 属性值 | 代码 | 描述 |
|---|---|---|
| 1 | < ol type="1"> < /ol> | 数字类型 |
| A | < ol type="A"> < /ol> | 大写字母类型 |
| a | < ol type="a"> < /ol> | 小写字母类型 |
| I | < ol type="I"> < /ol> | 大写罗马数字类型 |
| i | < ol type="i"> < /ol> | 小写罗马数字类型 |
2.8 图形标签
在页面指定位置处引入一张图片，< imag/>
| 属性名 | 描述 |
|---|---|
| src | 引入图片的地址 |
| width | 图片的宽度 |
| height | 图片的高度 |
| border | 图片的边框 |
| align | 与图片对齐显示方式 |
| alt | 图片加载失败后提示的文字 |
| title | 鼠标指到图片时的提示文字 |
| hspace | 在图片左右设定空白 |
| vspace | 在图片上下设定空白 |
2.9 链接标签
在页面中使用链接标签跳转到另一页面
标签：< a href="xxxx">< /a>
-
属性：
href：跳转页面的地址（跳转到外网需要添加协议） target：设置跳转页面时的页面打开方式
_blank 在新窗口打开
_self在原窗口打开
-
指向同一页面中指定位置：
定义位置：< a name="hello">< /a> 指向：< a href="#hello">< /a>
2.10 表格标签
普通表格：（table：声明表格、tr：声明行、td：声明列）
<table>
<tr>
<td></td>
</tr>
</table>
表格的列标签：（th：内容有加粗和居中的效果，多用于表头）
<table>
<tr>
<th></th>
</tr>
</table>
表格的合并属性：（colspan：在同一行内合并多个列、rowspan：在同一列内合并多个行）
<table>
<tr>
<!-- 表示该单元格独占7列 -->
<th colspan="7"></th>
</tr>
<tr>
<!-- 表示该单元格独占3行 -->
<th colspan="7"></th>
</tr>
<tr>
</tr>
</table>
三、HTML表单标签
HTML表单标签用于收集不同类型的用户输入数据
3.1 form元素常用属性
action：表示动作，值为服务器地址，把表单的数据提交到该地址上去处理
method：请求方式（get或post）
-
enctype：表示表单是提交类型
默认值：application/x-www-form-urlencoded 普通表单 multipart/form-data 多部分表单（一般用于文件上传）
3.2 input元素
作为表单中的重要元素，可根据不同的type值呈现为不同的状态
| 属性值 | 代码 | 描述 |
|---|---|---|
| text | < input type="text">< /input> | 单行文本框 |
| password | < input type="password">< /input> | 密码框 |
| radio | < input type="radio">< /input> | 单选按钮 |
| checkbox | < input type="checkbox">< /input> | 复选框 |
| date | input type="date">< /input> | 日期框 |
| time | < input type="time">< /input> | 时间框 |
| datetime | < input type="datetime">< /input> | 日期和时间框 |
| < input type="email">< /input> | 电子邮件输入 | |
| number | < input type="number">< /input> | 数值输入 |
| file | < input type="file">< /input> | 文件上传 |
| hidden | < input type="hidden">< /input> | 隐藏域 |
| range | < input type="range">< /input> | 取值范围 |
| color | < input type="color">< /input> | 取色按钮 |
| submit | < input type="submit">< /input> | 提交按钮 |
3.3 select按钮（下拉列表）
- 单选下拉列表：< select>< /select>
- 默认选中属性：selected="selected"
<select>
<option selected="selected">内容</option>
</select>
- 多选下拉列表：< select>< /select>
- 多选列表属性：multiple="multiple"
<select multiple="multiple">
<option>内容</option>
</select>
3.4 textarea元素（文本域）
多行文本框：可以输入多行数据的文本框
<!-- cols和rows表示该文本框的宽度和高度 -->
<textarea cols="10" rows="5"></textarea>
四、HTML框架标签
- 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面，每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
- 使用框架的缺点：
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
4.1 框架解构标签frameset
- 框架结构标签（< frameset>< /frameset>）用于定义如何将窗口分割为框架
- 每个frameset定义了被划分为几行/列展示网页
- < frameset rows="">< /frameset>（rows为划分为N行，cols为划分为N列）
4.2 框架标签frame
每个frame引入一个html页面
<!-- cols="*,*"表示将一个浏览器页面划分为2列显示 -->
<frameset cols="*,*">
<frame src="info1.html"/>
<frame src="info2.html">
</frameset>
4.3 基本注意事项
- 不能将< body>< /body>标签与< frameset>< /framset>标签同时使用
