HTML基础
W3C 万维网联盟组织用来制定 web 标准的机构（组织）
WEB 标准：制作网页要遵循的规范
WEB 标准规范的分类： 结构标准 (HTML) 表现标准 (CSS) 行为标准 (javascript)
# 浏览器介绍
浏览器是网页运行的平台，常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari 和 Opera 等
浏览器内核：也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
浏览器内核：
| IE | 谷歌 | 火狐 | 苹果 |
|---|---|---|---|
| trident | blink | gecko | webkit |
# HTML 简介
HTML (Hyper Text Markup Language ) 中文译为“超文本标记语言”，主要是通过 html 标记对网页中的文本，图片，声音等内容进行描述
HTML 之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”，通过超链接可以实现网页的跳转。从而构成了丰富多彩的 Web 页面。
# HTML 结构
# 基本的文档格式
学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTML 标记语言也不例外，同样需要遵从一定的规范。
<!doctype html>
<!-- 根标记 lang 该标记的属性 简体中文 zh-cn zh-cmn-Hans（推荐）-->
<html lang="zh-cmn-Hans">
<!--head 该标记内一般存放的是当前网页的说明信息 -->
<head>
<meta name="keywords" content="乐于分享编程知识，热爱编程，热爱生活！" />
<!-- 编码声明，仅仅是告诉浏览器以那种编码解析当前页面 -->
<meta charset="UTF-8" />
<!-- 浏览器选项卡上显示 logo 图标 -->
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<!-- 网页在浏览器中显示的标题 -->
<title>百度一下，你就知道</title>
</head>
<!-- 网站的主体内容全部编写在 body 标签内 -->
<body>
乐于分享编程知识，热爱编程，热爱生活！
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# <html> 标记
<html>称为根标记，用于告知浏览器其自身是一个 HTML 文档， <html>标记标志着 HTML 文档的开始，</html>标记标志着 HTML 文档的结束，在他们之间的是文档的头部和主体内容。
<html lang="en"> 向搜索引擎表示该页面是 html 语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示 english
这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对 html 页面本身不会有影响
# <head> 标记
<head>标记用于定义 HTML 文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记。
一个 HTML 文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
# <title>标记
<title>标记用于定义 HTML 页面的标题，即给网页取一个名字，必须位于<head>标记之内。一个 HTML 文档只能含有一对<title></title>标记，
<title></title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：
<title>网页名称</title>
2
3
# <body> 标记
<body>标记用于定义 HTML 文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。
一个 HTML 文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后
# 标签关系
- 嵌套关系：类似父亲和儿子之间的关系
<html>
<head></head>
<body></body>
</html>
2
3
4
5
6
- 并列关系：类似与兄弟之间的关系
<head></head>
<body></body>
2
3
4
# 标签分类
# 双标记
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式：<标记名></ 标记名>
该语法中《标记名》表示该标记的作用开始，一般称为“开始标记（start tag）”，</ 标记名> 表示该标记的作用结束，一般称为“结束标记（end tag）”。和开始标记相比，结束标记只是在前面加了一个关闭符“/”
# 单标记
单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：
<标记名 />
# 单标记详解
# 水平线标记<hr />
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr />就是创建横跨网页水平线的标记。其基本语法格式如下：
<hr />是单标记，在网页中输入一个<hr />，就添加了一条默认样式的水平线。
# 注释标记
在 HTML 中还有一种特殊的标记——注释标记。如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下：
<!-- 注释语句 -->
注释内容不会显示在浏览器窗口中，但是作为 HTML 文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。
# 换行标记<br />
在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记<br />，这时如果还像在 word 中直接敲回车键换行就不起作用了。
# 图像标记<img />
HTML 网页中任何元素的实现都要依靠 HTML 标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记<img />以及和他相关的属性。其基本语法格式如下：
<img src="图像 URL" />
2
3
该语法中 src 属性用于指定图像文件的路径和文件名，他是 img 标记的必需属性。
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
# 相对路径
相对路径不带有盘符，通常是以 HTML 网页文件为起点，通过层级关系描述目标图像的位置。
例如：<img src="img/logo.gif" alt="我一般不显示" />
相对路径设置分为以下三种
图像文件和 html 文件位于同一文件夹：只需输入图像文件的名称即可，如：
<img src="logo.gif" />图像文件位于 html 文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如：
<img src="img/img01/logo.gif" />图像文件位于 html 文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如：
<img src="../logo.gif" />
# 绝对路径
绝对路径一般是指带有盘符的路径。例如：
“D:\HTML+CSS 网页制作、chapter02\img\logo.gif”
完整的网络地址，例如“http://www.coder163.com/images/logo.gif”。
# 双标记详解
# 段落标记
在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。
<p>是 HTML 文档中最常见的标记，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
# 标题标记
为了使网页更具有语义化，我们经常会在页面中用到标题标记，HTML 提供了 6 个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>重要性递减。其基本语法格式如下：
<hn>标题文本</hn>
2
3
# 文本样式标记
多种多样的文字效果可以使网页变得更加绚丽，为此 HTML 提供了文本样式标记，用来控制网页中文本的字体、字号和颜色。其基本语法格式如下：
<font>文本内容</font>
2
3
# 文本格式化标记
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到 HTML 中的文本格式化标记，使文字以特殊的方式显示。
文本格式化常用标记
| 标记 | 显示效果 |
|---|---|
<b></b>和<strong></strong> | 文字以粗体方式显示（XHTML 推荐使用 strong） |
<i></i>和<em></em> | 文字以斜体方式显示（XHTML 推荐使用 em） |
<s></s>和<del></del> | 文字以加删除线方式显示（XHTML 推荐使用 del） |
<u></u>和<ins></ins> | 文字以加下划线方式显示（XHTML 不赞成使用 u） |
# 换行标记<br />
在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记<br />，这时如果还像在 word 中直接敲回车键换行就不起作用了。
# 图像标记<img />
HTML 网页中任何元素的实现都要依靠 HTML 标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记<img />以及和他相关的属性。其基本语法格式如下：
<img src="图像 URL" />
2
3
该语法中 src 属性用于指定图像文件的路径和文件名，他是 img 标记的必需属性。
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
# 列表
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
2
3
4
5
6
7
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
2
3
4
5
6
7
自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
2
3
4
5
6
7
# 表格
展示数据。 是对网页重构的一个有益补充。
<table border="1" width="500" height="300" cellspacing="0" cellpadding="0" align="center" bgcolor="yellow">
<tr align="center">
<td>张三</td>
<td>18</td>
<td>挖掘机</td>
</tr>
</table>
2
3
4
5
6
7
8
9
- border=”1” 边框
- width=”500” 宽度
- height=”300” 高
- cellspacing=”2” 单元格与单元格的距离
- cellpadding=”2” 内容距边框的距离
- align=”left | right | center"
- bgcolor=”red” 背景颜色。
PS: 如果直接给表格用 align=”center” 表格居中，如果给 tr 或者 td 使用 ，tr 或者 td 内容居中。
# 表格的标准结构
<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 表头和单元格合并
表头 <caption></caption>
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格
# 表单
表单的作用是收集信息。
# 表单控件
# 表单域
<form action="1.action" method="post">
2
3
- action: 处理信息
- Method="get | post"
- get 通过地址栏提供（传输）信息，安全性差。
- post 通过 1.php 来处理信息，安全性高。
# 文本输入框
- maxlength="6" 限制输入字符长度
- readonly=”readonly” 将输入框设置为只读状态（不能编辑）
- disabled="disabled" 输入框未激活状态
- name="username" 输入框的名称
- value="大前端" 将输入框的内容传给处理文件
用户名：<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="大前端">
# 密码输入框
密码：<input type="password" name="pwd">
2
3
PS: 文本输入框的所有属性对密码输入框都有效
# 单选框
<input type="radio" name="gender" checked>
PS: 只有将 name 的值设置相同的时候，才能实现单选效果。checked=”checked” 设置默认选择项。
# 下拉列表
<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
</select>
2
3
4
# 多选框
<input type="checkbox" checked >吃饭
<input type="checkbox" checked >睡觉
<input type="checkbox" checked >打豆豆
2
3
checked=”checked” 设置默认选中项
# 多行文本框
<textarea cols="19" rows="22"></textarea>
- cols 控制输入字符的长度。
- rows 控制输入的行数
# 文件上传控件
<input type="file" >
# 文件提交按钮
<input type="submit" >
PS 可以实现信息提交功能
# 普通按钮
<input type="button" value="普通按钮" >
PS: 不能提交信息，配合 JS 使用。
# 图片按钮
<input type="image" src="./anniu.png" >
PS: 图片按钮可实现信息提交功能
# 重置按钮
<input type="reset" >
PS: 将信息重置到默认状态
# H5 补充表单控件
# 标签语义化
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
标签语义化意义：
网页结构合理
有利于 seo: 和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
便于团队开发和维护
尽可能少的使用无语义的标签 div 和 span；
在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u 等，改用 css 设置。
需要强调的文本，可以包含在 strong 或者 em 标签中 strong 默认样式是加粗（不要用 b），em 是斜体（不用 i）；
# 综合案例
