第一章 HTML引入
一, web标准介绍
web标准:
- w3c：万维网联盟组织，制定web标准的机构（组织）
- web标准：制作网页遵循的规范
- web标准规范的分类：结构标准、表现标准、行为标准
- 结构：html ;表现：css;行为：Javascript
总结说明：
- 结构标准：相当于人的骨架。html就是用来制作网页的
- 表现标准： 相当于人的衣服。css就是对网页进行美化的
- 行为标准： 相当于人的动作。JS就是让网页动起来，具有生命力的
二, 浏览器介绍
| 浏览 | 内核 |
|---|---|
| chrome | blink |
| 火狐 | gecko |
| Safari | webkit |
| IE | trident |
- 浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
- 渲染引擎是浏览器兼容性问题出现的根本原因
三, html介绍
- html全称HyperText Markup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。
- 超文本：音频，视频，图片称为超文本。
- 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
- 作用：HTML是负责描述文档语义的语言。
- 注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。
- HTML只是负责描述文档语义的语言,在html中，除了语义，其他什么都没有。html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。
第二章 HTML规范
一, html的网络术语
- 网页 ：由各种标记组成的一个页面就叫网页
- 主页(首页) : 一个网站的起始页面或者导航页面
- 标记：
<p>称为开始标记 ，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义 - 元素：
<p>内容</p>称为元素 - 属性：给每一个标签所做的辅助信息
二, html的规范
- html是一个弱势语言
- 区分大小写
- 页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
- html的结构:
- 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准(html5)
- head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
- body部分：我们所写的需要显示出来的代码必须放在此标签內。
三, 编写html的规范
- 所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：
<h1><font></font></h1> - 所有的标记都必须小写
- 所有的标记都必须关闭
- 双边标记：
<span></span> - 单边标记：
<br>转成<br /><hr>转成<hr />，还有<img src=“URL” />
- 双边标记：
- 所有的属性值必须加引号。
<h1 id="head"></h1> - 所有的属性必须有值。
<input type="radio" checked="checked" />
四, html的基本语法特征
-
HTML对换行不敏感，对tab不敏感
HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，有良好的缩进，代码更易读。
-
空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
-
标签要严格封闭
<html></html><meta/>
第三章 HTML结构
使用pycharm新建html文件,输入'!'或'html:5'按tab键后,自动生成的代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
一, 文档声明头
任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE html>开头的这一行，就是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
常见声明格式:
-
HTML5:
<!DOCTYPE html> -
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -
HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
二, 头标签(head)
head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>
<title>：指定整个网页的标题，在浏览器最上方显示<meta>：提供有关页面的基本信息<link>：定义文档与外部资源的关系<style>：定义内部样式表与网页的关系
一, meta标签
元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
-
http-equiv属性
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址，注意分号--> <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge"> -
name属性
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
<meta name=viewport content="width=device-width, initial-scale=1">上面这个标签，是让我们网页支持移动端，移动设备优先
二, title标签
主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。
<title>怀心抱素的个人空间</title>
第四章 HTML标签
html标签又叫做html元素，它分为块级元素和内联元素（也可以叫做行内元素），都是html规范中的概念。
一, 块级元素
块级元素是指本身属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建。
独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
可以直接控制宽度、高度以及盒子模型的相关css属性
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下，块级元素的高度是它本身内容的高度
| 标签类型 | ||||||
|---|---|---|---|---|---|---|
| 标题 | h1 | h2 | h3 | h4 | h5 | h6 |
| 列表 | ol | ul | li | dl | dt | dd |
| 排版标签 | p | div | hr | center | pre | |
| 表格 | table | |||||
| 表单 | form |
一, h1-h6
标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
二, 列表
列表又分为三种，有序列表ol，无序列表ul和定义列表dl。其中ol和ul必须结合li标签使用，而dl则必须结合dt,dd使用。
| ol | order list | 有序列表 | li list item | 列表项 | ||
| ul | unoedered list | 无序列表 | li list item | 列表项 | ||
| dl | definiton list | 定义列表 | <dt>：definition title |
列表的标题，这个标签是必须的 | <dd>：definition description |
列表的列表项，如果不需要它，可以不加 |
需要注意的是：
- li不能单独存在，必须包裹在ul或者ol里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
- 再次强调，ul或者ol的作用，并不是给文字增加小圆点的，而是增加列表是否有序的“语义”的，因此不能省略。
一, ol列表（ordered list，即有序列表）
代码示例:
<body>
<ol>
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
</ol>
</body>
属性:
-
type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始
属性type:1(默认)a(小写字母)A(大写字母)I(罗马数字) 属性start:开始位置 <!--默认显示1,2,3序号,可以指定开始的值--> <ol> <li>长头发</li> <li>旧家电</li> <li>破剪刀</li> </ol> <!--设置根据a,b,c显示,可以指定开始的值--> <ol type="a" start="2"> <li>长头发</li> <li>旧家电</li> <li>破剪刀</li> </ol> <!--设置根据A,B,C显示,可以指定开始的值--> <ol type="A" start="26"> <li>长头发</li> <li>旧家电</li> <li>破剪刀</li> </ol> <!--设置根据罗马数字,可以指定开始的值--> <ol type="I"> <li>长头发</li> <li>旧家电</li> <li>破剪刀</li> </ol> -
有序列表也可以进行嵌套
<body> <ol type="a"> <li>我是有序列表</li> <ol type="1"> <li>我是子列表</li> <li>我是子列表</li> <li>我是子列表</li> </ol> <li>我是有序列表</li> </ol> </body>
二, ul列表（unordered list，即无序列表）
代码示例:
<body>
<ul>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
</body>
属性:
-
type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆),none(不显示样式)
<!--设置不显示任何样式--> <ul type="none"> <li>手机</li> <li>电脑</li> <li>其他电器</li> </ul> <!--设置显示实心方块--> <ul type="square"> <li>旧电脑</li> <li>旧家具</li> <li>旧手机</li> </ul> <!--设置显示空心圆--> <ul type="circle"> <li>旧电脑</li> <li>旧家具</li> <li>旧手机</li> </ul> <!--默认显示实心圆 disc--> <ul> <li>旧电脑</li> <li>旧家具</li> <li>旧手机</li> </ul>三, dl列表（definition list，即定义列表）
实例代码:
<body> <dL> <dt>第一个标题</dt> <dd>第一个内容</dd> <dd>第二个内容</dd> <dd>第三个内容</dd> <dt>第二个标题</dt> <dd>第一个内容</dd> <dd>第二个内容</dd> <dd>第三个内容</dd> </dL> </body>定义列表表达的语义是两层：
<dt>是一个列表，列出了几个<dd>项目- 每一个词儿都有自己的描述项
- dd是描述dt的
- 定义列表用法非常灵活，可以一个dt配很多dd
- dt、dd都是容器级标签，想放什么都可以
用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）
三, 排版标签
一, p
段落标签<p>
段落：是英文paragraph的缩写
属性:
-
align='属性值'：对齐方式。属性值包括：left、center、right
<body> <p>这是一个段落</p> <p align="left">这是左对齐的段落</p> <p align="right">这是右对齐的段落</p> <p align="center">这是居中的段落</p> </body>
p标签是一个文本级标签，p里面只能放文字、图片、表单元素,内部不能再嵌套块级标签
二, div
div和span是非常重要的标签，div的语义是division“分割”
div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行
div标签的属性:
- align="属性值"：设置块儿的位置。属性值可选择：left、right、 center
代码示例:
<body>
<div>我是div标签</div>
<div>又是一个div标签</div>
</body>
div在浏览器中，除了换行以外，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
三, hr
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分
代码示例:
<body>
<div>我是div标签</div>
<hr>
<div>又是一个div标签</div>
</body>
四, 内容居中标签(center)
此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。
<body>
<!--已废弃-->
<center>
<div>我是div标签</div>
<div>又是一个div标签</div>
</center>
</body>
五, 预定义（预格式化）标签：<pre>
含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
说明：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。
代码示例:
<body>
<pre>
咏鹅
作者:骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
</pre>
</body>
四, table表格
表格标签用<table>表示
标准表格:thead tbody的内容
tr表示每一行
th表示thead中的每一个元素
td表示tbody中的每一个元素
<table border="1" cellpadding="10px" cellspacing="5px">
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">第一个值</td>
<td>qqxing</td>
</tr>
<tr>
<td>第二个值</td>
<td>wahaha</td>
<td rowspan="2">ab钙</td>
</tr>
<tr>
<td>第二个值</td>
<td>wahaha</td>
</tr>
</tbody>
</table>
不写thead只写tbody 就没有表头样式
<table border="1" cellpadding="10px" cellspacing="5px">
<tbody>
<tr>
<td colspan="2">第一个值</td>
<td>qqxing</td>
</tr>
<tr>
<td>第二个值</td>
<td>wahaha</td>
<td rowspan="2">ab钙</td>
</tr>
<tr>
<td>第二个值</td>
<td>wahaha</td>
</tr>
</tbody>
</table>
<table>的属性:
border：边框。像素为单位。style="border-collapse:collapse;"：单元格的线和表格的边框线合并width：宽度。像素为单位。height：高度。像素为单位。bordercolor：表格的边框颜色。align：表格的水平对齐方式。属性值可以填：left right center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
注意不是单元格内容到四条边的距离，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0bgcolor="#99cc66"：表格的背景颜色background="路径src/..."：背景图片。
背景图片的优先级大于背景颜色。
<tr>: 行
- 一个表格就是一行一行组成的
属性:
-
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left） -
bgcolor：设置这一行的单元格的背景色
注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现 -
height：一行的高度 -
align="center"：一行的内容水平居中显示，取值：left、center、right -
valign="center"：一行的内容垂直居中，取值：top、middle、bottom
<td>:单元格
属性:
align：内容的横向对齐方式。属性值可以填：left right centervalign：内容的纵向对齐方式。属性值可以填：top middle bottomwidth：绝对值或者相对值(%)height：单元格的高度bgcolor：设置这个单元格的背景色background：设置这个单元格的背景图片
单元格的合并:
如果要将两个单元格合并，那肯定就要删掉一个单元格。
单元格的属性：
-
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置 -
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置
<th>: <thead>标题单元格 属性同<td>标签
<caption>：表格的标题。使用时和tr标签并列
五, form表单
功能：
- 表单用于向服务器传输数据，从而实现用户与Web服务器的交互
- 表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等
- 表单还可以包含textarea、select、fieldset和 label标签
表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
表单元素:
-
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
-
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。 服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
属性：
name：表单的名称，用于JS来操作或控制表单时使用；id：表单的名称，用于JS来操作或控制表单时使用；action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”method：表单数据的提交方式，一般取值：get(默认)和postaction属性就是表示，表单将提交到哪里。method属性表示用什么HTTP方法提交，有get、post两种- GET方式：
将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。 - POST方式：
将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。
- GET方式：
- Enctype：
表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。- Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
- Multipart/form-data：上传附件时，必须使用这种编码方式.
一, <input>：输入标签（文本框）（内联标签）
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框（不显示明文） | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" name='x' /> |
| radio | 单选框 | <input type="radio" name='x' /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> 发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新 |
| reset | 重置按钮 | <input type="reset" value="重置" /> 页面不会刷新，将所有输入的内容清空 |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
代码示例:
<body>
<form action="http://192.168.13.19:9000">
用户名: <input type="text" name="username" value="孙悟空">
<br>
密码: <input type="password" name="psw">
<br>
生日: <input type="date" value="1888-08-08">
<br>
性别:
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="2"> 女
<input type="radio" name="sex" value="3" checked> 不详
<br>
爱好:
<input type="checkbox" name="hobby" value="1">唱跳
<input type="checkbox" name="hobby" value="2">ROP
<input type="checkbox" name="hobby" value="3">篮球
<br>
<input type="hidden">
<input type="file" name="文件">
<br>
<input type="reset" value="重置">
<input type="submit" value="提交">
<input type="button" value="普通按钮">
<button>按钮</button>
</body>
属性:
- type="属性值",文本类型。属性值可以是：
text（默认）password：密码类型radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。checkbox：多选按钮，名字相同的按钮作为一组进行选择。checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。hidden：隐藏框，在表单中包含不希望用户看见的信息button：普通按钮，结合js代码进行使用。submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。reset：重置按钮，清空当前表单的内容，并设置为最初的默认值image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。file：文件选择框。如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
- value="内容"：文本框里的默认内容（已经被填好了的）
size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素。readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。可以提交.
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。不能提交placeholder: 文本框的背景提示语
四种按钮的举例:
<body>
<form>
<input type="button" value="普通按钮"><br>
<input type="submit" value="提交按钮"><br>
<input type="reset" value="重置按钮"><br>
<input type="image" src="images/ceshi.jpeg" width="400" value="图片按钮2"><br>
<input type="file" value="文件选择框">
</form>
</body>
二, <select>：下拉列表标签（内联标签）
<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签。
<select>标签的属性：
multiple：可以对下拉列表中的选项进行多选。没有属性值size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图
<option>标签的属性：
selected：预选中。没有属性值
代码示例:
<body>
<form action="http://192.168.13.19:9000">
<select name="学历" id="123" multiple size="1">
<option value="1">小学</option>
<option value="2">初中</option>
<option value="3">高中</option>
<option value="4">大学</option>
<option value="5">研究生</option>
<option value="6" selected>博士</option>
</select>
<button>按钮</button>
</body>
三, <textarea>标签：多行文本输入框（内联标签）
代码示例:
<body>
<form action="http://192.168.13.19:9000">
<textarea name="txtinfo" id="1" cols="30" rows="10">请输入评论:</textarea>
<button>按钮</button>
</form>
</body>
属性：
value：提交给服务器的值。rows="4"：指定文本区域的行数。cols="20"：指定文本区域的列数。readonly：只读。
四, 表单的语义化
在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。
<body>
<form>
<fieldset>
<legend>账号信息</legend>
姓名：<input value="呵呵" ><br>
密码：<input type="password" value="pwd" size="50"><br>
</fieldset>
<fieldset>
<legend>其他信息</legend>
性别：<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</fieldset>
</form>
</body>
五, <label>标签（内联标签）
先看代码:
<input type="radio" name="sex" id="1"> 男
<input type="radio" name="sex" id="2"> 女
对于上面这样的单选框，只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。
本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。可以通过label把input和汉字包裹起来作为整体。
代码示例:
<input type="radio" name="sex" id="1"> <label for="1">男</label>
<input type="radio" name="sex" id="2"> <label for="2">女</label>
上方代码中，input元素要有一个id，然后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了。
任何表单元素都可以使用label:
会自动获得聚焦
代码示例:
<label for="5">请输入账号:</label>
<input type="text" name="username" id="5">
二, 内联标签(行内元素)
内联标签是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用内联标签来进行文字、小图标（小结构）的搭建
内联标签的特性:
和其他内联元素从左到右在一行显示
不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
内联元素的宽高是由本身内容的大小决定（文字、图片等）
内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
| 字体 | 粗体 | 斜体 | 上下标 | 划线 |
| 字体 | b | em | sup | del |
| 字体 | strong | i | sub | u |
| 排版 | span | br | ||
| 超链接 | a | |||
| 图片 | img |
一, 字体标签
粗体标签<b>或<strong>(已废弃)
代码示例:
<body>
乳娃娃
<b>乳娃娃</b>
<strong>乳娃娃</strong>
</body>
斜体标记 <i>或<em>（已废弃）
代码示例:
<body>
哇哈哈
<i>哇哈哈</i>
<em>哇哈哈</em>
</body>
上标<sup> 下标<sub>
代码示例:
<body>
5<sup>2</sup>
8<sub>2</sub>
</body>
下划线标记<u>中划线标记<s>（已废弃）和<del>
代码示例:
<body>
<u>哇哈哈</u>
<s>哇哈哈</s>
<del>哇哈哈</del>
</body>
二, 排版标签
一, span
div和span是非常重要的标签，div的语义是division“分割”;span的语义就是span“范围、跨度”。这两个东西，都是最最重要的“盒子”。
<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。
代码示例:
<body>
<div>导航栏</div>
<div>横幅</div>
<span>这里是span</span>
</body>
span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
代码示例:
<body>
商品简介:
<span>
<a href="">详细信息</a>
<a href="">生产日期</a>
</span>
</body>
二, 换行标签<br>
打算结束一行，而又不想开始一个新段落时，<br>标签就派上用场了。无论将它置于何处，<br>标签都会产生一个强制的换行
代码示例:
<body>
<span>br标签老厉害了</br>能让我们换行</span>
</body>
<p>标签和<br>标签的区别：<p>标签会在段落的前后自动插入一个空行，而<br>标签没有空行；而且<br>标签没有属性
三, 超链接<a>
超链接有三种形式:
-
外部链接：链接到外部文件。举例：
<body> <a href="https://www.baidu.com">百度一下</a> </body>a是英语
anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。href是英语
hypertext reference超文本地址的缩写。 -
锚链接:
指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。首先要创建一个锚点，也就是说，使用
name属性或者id属性给那个特定的位置起个名字代码示例:
<body> <h1>我是一个h1</h1> <h2>我是一个h2</h2> <h3>我是一个h3</h3> <h4>我是一个h4</h4> <h5>我是一个h5</h5> <h6>我是一个h6</h6> <h1>我是一个h1</h1> <h2>我是一个h2</h2> <h3>我是一个h3</h3> <h4>我是一个h4</h4> <h5>我是一个h5</h5> <h6>我是一个h6</h6> <h1>我是一个h1</h1> <h2>我是一个h2</h2> <h3>我是一个h3</h3> <a name="xx">a标记的位置</a> <h4>我是一个h4</h4> <h5>我是一个h5</h5> <h6>我是一个h6</h6> <h1>我是一个h1</h1> <h2>我是一个h2</h2> <h3>我是一个h3</h3> <h4>我是一个h4</h4> <h5>我是一个h5</h5> <h6>我是一个h6</h6> <h1>我是一个h1</h1> <h2 id="xxx">我是一个h2</h2> <h3>我是一个h3</h3> <h4>我是一个h4</h4> <h5>我是一个h5</h5> <h6>我是一个h6</h6> <!--注意:如果href这里只写#表示跳转到网页的最上面--> <a href="#">回到顶部</a> <a href="#xx">回到a标识的位置</a> <a href="#xxx">回到h2位置</a> </body> -
邮件链接:
代码示例:
<body> <a href="383838@qq.com">联系我</a> </body> -
特殊的链接:
返回页面顶部的位置:
<a href="#">跳转到顶部</a> -
超链接的属性:
href：目标urltitle：鼠标悬停显示的文本name：主要用于设置一个锚点的名称target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：_self：在同一个网页中显示（默认值）_blank：在新的窗口中打开_parent：在父窗口中显示_top：在顶级窗口中显示
三, 图片标签<img>
img: 代表的就是一张图片。是单边标记
img是自封闭标签，也称为单标签
能插入的图片类型：
- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp
- 不能往网页中插入的图片格式是：psd、ai
src属性: 图片的相对路径和绝对路径
-
相对路径
相对当前页面所在的路径。两个标记
.和..分表代表当前目录和父路径<!-- 当前目录中的图片 --> <img src="2.jpg"> <img src=".2.jpg"> <!-- 上一级目录中的图片 --> <img src="..2.jpg"> -
绝对路径
-
以盘符开始的绝对路径
<img src="C:UsersaaaDesktophtml-01images1.jpg"> -
网络路径
<img src="http://www.baidu.com/2016040102.jpg">
-
img标签常用的其他属性:
- width：宽度,单位px
- height：高度,单位px
- title：提示性文本。公有属性。也就是鼠标悬停时出现的文本
- align：指图片的水平对齐方式，属性值可以是：left、center、right
- alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）
注意事项:
- 如果要想保证图片等比例缩放，只设置width和height中其中一个
- 如果想实现图文混排的效果，使用align属性，取值为left或right
第五章 补充
一, 文本级和容器级
除此之外，从HTML的角度来讲，标签还可以分为文本级和容器级：
- 文本级标签：p、span、a、b、i、u、em
- 容器级标签：div、h系列、li、dt、dd
- 文本级标签的意思是标签中只可以放文本，不可以放其他内容。除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素
二, html中的特殊字符
| 代码 | 特殊字符 |
|---|---|
|
空格 （non-breaking spacing，不断打空格） |
< |
小于号（less than） |
> |
大于号（greater than） |
& |
符号& |
" |
双引号 |
' |
单引号 |
© |
版权© |
™ |
商标™ |
三, html颜色表示
颜色表示:
- 纯单词表示：red、green、blue、orange、gray等
- 10进制表示：rgb(255,0,0)
- 16进制表示：#FF0000、#0000FF、#00FF00等
RGB色彩模式:
- 自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。
- RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青
- 在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
- RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。