写在前面：这是一篇HTML知识点整理笔记！
HTML
㈠HTML入门
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
HTML 编辑器
- Sublime Text 3
- WebStorm
㈡ HTML文档结构
HTML文档基本结构
DTD(Document Type Definition) -------------- 文档定义类型
<html> -------------- 文本描述网页
<head> -------------- 文档头部标记：含脚本，样式表等等。
<meta /> -------------- 定义文档字符集、使用语言、作者等基本信息
<title>标题</title> -------------- 定义文档的标题
</head>
<body> -------------- 网页主体,是可见的页面内容
<h1>Hello world</h1> -----------标题
</body>
</html>
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <head>与</head>头部元素的容器：
- <head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。
- <head> 定义关于文档的信息。
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作我的第一个网页</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
HTML 文档类型
-
<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 <html> 标签之前。 - 作用：指示浏览器关于页面使用哪个 HTML 版本进行编写的指令。
//HTML 5
<!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
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
//XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 标记标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签分为单标记和双标记：
- 单标记：<标记名称 属性名称="属性值" ... />，比如
- 双标记：<标记名称 属性名称="属性值" ... ></标记名称>，比如 <b> 和 </b>；第一个标签是开始标签，第二个标签是结束标签。
- 单标记：<标记名称 属性名称="属性值" ... />，比如
HTML 属性
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
-
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
属性 值&描述 class 规定元素的类名（classname） id 规定元素的唯一 id name 名称，一般也是唯一的 style 规定元素的行内样式（inline style） title 规定元素的额外信息（可在工具提示中显示） ...注意：实际中很少用到，都通过css和js来设置！
注释
//注释:<!--注释-->
<a href="www.baidu.com">百度一下 你不知道</a> <!--注释写在这里-->
//注释一行代码
<!-- 此刻不显示图片：
[站外图片上传中……(3)]
-->
//条件注释
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
㈢ 元素(标签+属性+文本)
HTML 元素：
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容;某些 HTML 元素具有空内容（empty content）
- 大多数 HTML 元素可以嵌套。
1. 文字
<b>字体加粗</b>
<i>斜体字体</i>
<u>下划线</u>
<s>删除线</s>
上标：X<sup>2</sup>
下标：Y<sub>3</sub>
//字体相关属性：
<font size="5" color="red" face="黑体">字体，添加属性值</font>
<font size="3" color="#333333" face="黑体">size的值是1~7；color的表达方式：英语单词 RGB 十六进制</font>
2. 标题 段落 换行 水平线
//标题:
<h1 align="center">1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
//段落：<p></p>
<p>第一段</p>
<p align="left">第二段</p>
<p align="center">第三段</p>
<p align="right">第四段</p>
//换行：<br />
<br /> //换行
//水平线:<hr />
<hr />
<hr size="10" width="800"/>
<hr size="10" width="800" noshade="noshade"/>
<hr size="30%" width="80%" /> //随屏幕百分比变化
3. 图片 超链接 锚点链接
/* 相对路径和绝对路径
绝对路径：协议+主机+路径+文档
相对路径：./ 当前目录 ../ 父级目录 / 根目录 ../../父目录的父目录
URL：scheme://host.domain:port/path/filename
*/
//图像:<img src="" />
[站外图片上传中……(4)]
属性：
scr //source 图像的URL地址
title //鼠标悬停显示的图片描述
alt //在浏览器无法载入图像时展示给读者提示的信息
width
height
broder //边框
//超链接：<a href=""></a>
<a href="http://www.baidu.com" target="_blank"></a>
href: 链接地址
target: 定义被链接的文档在何处显示 _blank(新标签打开)
_self (当前标签打开)
_parent
_top
//锚点链接:定义一个唯一的'id' 赋给href 实现跳转
<a href="#p1">点击前往第七段</a>
<p id="p1">第七段</p>
4. HTML的实体
在 HTML 中，某些字符是预留的：小于号（<）和 大于号（>），会误认为是标签。
因此，在 HTML 源代码中使用字符实体（character entities）来显示预留字符。
//空格
&quto; //引号
¥ //￥
×
&divede;
HTML的实体.png
5. 列表: ol ul li
分为：
有序列表:<ol></ol>
&
无序列表:<ul></ul>
1）有序列表： 用于显示具有统一特征的有序数据
<ol type="i" start="3">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
</ol>
属性 值 描述
type 1 数字(默认) 排序
a 字母
A 大写字母A
i 小写罗马
I 大写罗马
start 数字 起始数字
2）无序列表：用于显示同一特征的无限数据
<ul type="circle">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
属性 值
type disc 实心圆(默认)
circle 空心圆
square 实心矩形
none 无
6. 表格: table
- 用途：table元素的作用是显示表格化的数据！
- table元素可以嵌套。
//用途：table元素的作用是显示表格化的数据！
<table> ---------表格
<tr> ---------行
<th>内容</th> ---------单元格(字体加粗)
<td>内容</td> ---------单元格
<td>内容</td>
</tr>
</table>
table属性 值
width
height
bgcolor 背景颜色（英语颜色；RGB；十六进制）
background 背景图片
border
bordercolor
cellpadding 单元格与内容之间的间距
cellspacing 单元格与单元格的边距
align
tr属性 值
align (left|center|right)
bgcolor (英文颜色|rgb（255，255，255）|十六进制)
valign 垂直对齐方式（top|middle|bottom）
th td属性 值
align (left|center|right)
bgcolor (英文颜色|rgb（255，255，255）|十六进制)
valign 垂直对齐方式（top|middle|bottom）
rowspan 行合并
clospan 列合并
<table border="1" bordercolor="red" cellpadding="0" cellspacing="0" bgcolor="pink" align="center">
<tr>
<th colspan="3">表格的表头：合并3列</th>
<td rowspan="5">合并5行</td>
</tr>
<tr bgcolor="blank" align="left" valign="top">
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
//表格的嵌套
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>[站外图片上传中……(5)]</th>
<td align="center" valign="top">
<table>
<tr>
<th rowspan="6">JEEP 牧马人</th>
</tr>
<tr>
<td>姓名</td>
<td>CwLife</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
7. 表单: form
作用：用于收集用户输入;
-
表单元素:
<input type=""/> 根据不同的 type 属性，可以变化为多种形态。
<select></select> 定义下拉列表。
<textarea></textarea> 定义多行输入字段（文本域）。
<button></button> 定义可点击的按钮。
作用：用于收集用户输入;
表单元素: 指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等
<form action="action_page.php" method="POST" name="">
表单元素...
</form>
属性
name 表单的名字
method 规定在提交表单时所用的方法：get/post
action 定义在提交表单时执行的动作
常用的表单元素:
<input type=""/> 根据不同的 type 属性，可以变化为多种形态。
<select></select> 定义下拉列表。
<textarea></textarea> 定义多行输入字段（文本域）。
<button></button> 定义可点击的按钮。
文本框：<input type="text"> 定义供文本输入的单行输入字段。
<input type="text" name="控件名字" value="值" maxlength="最大输入字符长度" size="控件宽度" readonly="readonly"（只读） />
密码框：<input type="password"> 定义密码字段。
<input type="password" name="控件名字" value="值" maxlength="最大输入字符长度" size="控件宽度" readonly="readonly"（只读） />
多选勾选控件：<input type="checkbox"> 定义复选框
<input type="checkbox" name="控件名字" value="值" checked="checked"(已选中) disabled = "disabled"(禁用控件) />
单选勾选控件：<input type="radio"> 定义单选按钮。
<input type="radio" name="控件名字" value="值" checked="checked"(已选中) disabled = "disabled"(禁用控件) />
提交表单按钮：<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
<input type="submit" value="按钮字样" />
重置表单按钮：
<input type="reset" value="按钮字样" />
上传文件按钮：
<input type="file" name="文件名称">
隐藏域:
<input type="hidden" name="控件名字" value="值" />
按钮：<input type="button> 定义按钮。
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
<!--
HTML5 增加了多个新的输入类型：（老式浏览器不支持的输入类型，会被视为输入类型 text）
• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
<input type="number"> 用于应该包含数字值的输入字段。
<input type="number" name="quantity" min="1" max="5">
<input type="color"> 用于应该包含颜色的输入字段。
<input type="color" name="favcolor">
<input type="range"> 用于应该包含一定范围内的值的输入字段。
<input type="range" name="points" min="0" max="10">
<input type="date"> 用于应该包含日期的输入字段。
<input type="date" name="bday" max="1979-12-31"><br>
<input type="month"> 允许用户选择月份和年份。
<input type="month" name="bdaymonth">
<input type="week"> 允许用户选择周和年。
<input type="week" name="week_year">
<input type="time"> 允许用户选择时间（无时区）。
<input type="time" name="usr_time">
<input type="datetime"> 允许用户选择日期和时间（有时区）。
<input type="datetime" name="bdaytime">
<input type="datetime-local"> 允许用户选择日期和时间（无时区）。
<input type="datetime-local" name="bdaytime">
<input type="email"> 用于应该包含电子邮件地址的输入字段。
<input type="email" name="email">
<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。
<input type="search" name="googlesearch">
<input type="tel"> 用于应该包含电话号码的输入字段。
<input type="tel" name="usrtel">
<input type="url"> 用于应该包含 URL 地址的输入字段。
<input type="url" name="homepage">
-->
多行文本控件：
<textarea name="控件名称" cols="设置长度" rows="设置宽度">
文本内容
</textarea>
下拉框控件：
<select name="控件名字">
<option value="值" selected="selected"(已选中)>选择内容</option>
<option value="值" >选择内容</option>
<option value="值" >选择内容</option>
</select>
下拉选项的分组：
<optgroup label="分组标签01">
<option value="值" selected="selected"(已选中)>选择内容</option>
<option value="值" >选择内容</option>
<option value="值" >选择内容</option>
</optgroup>
//e.g.
<select name="请选择">
<optgroup label="分组一">
<option value="值" selected="selected">选择内容1</option> <!--默认选中-->
<option value="值" >选择内容2</option>
<option value="值" >选择内容3</option>
</optgroup>
<optgroup label="分组二">
<option value="值" selected="selected">选择内容1</option> <!--默认选中-->
<option value="值" >选择内容2</option>
<option value="值" >选择内容3</option>
</optgroup>
<optgroup label="分组三">
<option value="值" selected="selected">选择内容1</option> <!--默认选中-->
<option value="值" >选择内容2</option>
<option value="值" >选择内容3</option>
</optgroup>
</select>
按钮：
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
实例：
<form name="" method="" action="">
用户名：<input type="text" name="控件名字" value="" maxlength="" size="" readonly="readonly" />
<br />
密 码：<input type="password" name="控件名字" value="" maxlength="6" />
<hr />
多选一<input type="checkbox" name="控件名字" value="值" />
多选二<input type="checkbox" name="控件名字" value="值" />
多选三<input type="checkbox" name="控件名字" value="值" />
<hr />
男<input type="radio" name="控件名字" value="值" checked="checked" /> <!--默认选项；-->
女<input type="radio" name="控件名字" value="值" /> <!--关联要同名字-->
<hr/>
<select name="请选择">
<optgroup label="分组一">
<option value="值" selected="selected">选择内容1</option> <!--默认选中-->
<option value="值" >选择内容2</option>
<option value="值" >选择内容3</option>
</optgroup>
<optgroup label="分组二">
<option value="值" selected="selected">选择内容1</option> <!--默认选中-->
<option value="值" >选择内容2</option>
<option value="值" >选择内容3</option>
</optgroup>
<optgroup label="分组三">
<option value="值" selected="selected">选择内容1</option> <!--默认选中-->
<option value="值" >选择内容2</option>
<option value="值" >选择内容3</option>
</optgroup>
</select>
<hr/>
<input type="submit" value="登录" />
<input type="reset" value="重置按钮" />
<button>按钮标题</button>
<hr />
<input type="file" name="filename">
</form>
实践：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>用户注册例子</title>
</head>
<body>
<form name="" method="" action="">
<table align="center" width="500" cellspacing="0" cellpadding="10" border="1" bgcolor="cyan">
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<th>用户名:</th>
<td>
<input type="text" name="inputyourname" value="" maxlength="20" \>
</td>
</tr>
<tr>
<th>密 码:</th>
<td>
<input type="text" name="inputyourpsw" value="" maxlength="20" \>
</td>
</tr>
<tr>
<th>性 别:</th>
<td>
男<input type="radio" name="sex" value="" \>
女<input type="radio" name="sex" value="" \>
保密<input type="radio" name="sex" value="" checked="checked"\>
</td>
</tr>
<tr>
<th>爱 好:</th>
<td>
<input type="checkbox" name="love" value="" checked="checked" \>唱歌
<input type="checkbox" name="love" value="" \>跳舞
<input type="checkbox" name="love" value="" \>绘画
<input type="checkbox" name="love" value="" \>书法
<input type="checkbox" name="love" value="" \>篮球
<br \>
<input type="checkbox" name="love" value="" \>足球
<input type="checkbox" name="love" value="" \>乒乓球
<input type="checkbox" name="love" value="" \>游泳
<input type="checkbox" name="love" value="" \>溜冰
</td>
</tr>
<tr>
<th>家 乡:</th>
<td>
<select name="">
<optgroup label="第一选区">
<option value="" selected="selected">选项11</option>
<option value="">选项12</option>
<option value="">选项13</option>
</optgroup>
<optgroup label="第二选区">
<option value="">选项21</option>
<option value="">选项22</option>
<option value="">选项23</option>
</optgroup>
<optgroup label="第三选区">
<option value="">选项31</option>
<option value="">选项32</option>
<option value="">选项33</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<th>自我介绍:</th>
<td>
<textarea cols="50" rows="10" >
请输入自我介绍:
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button>我要注册</button>
</td>
</tr>
</table>
</form>
</body>
</html>
实例结果：
8. 框架: frameset
//通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
1. 框架结构标签：<frameset></frameset>
作用：定义如何将窗口分割
属性名 值
rows 横向分割（固定值px|百分比|*）有三种写法:（200，300，500）（20%，30%,*）（20%,*,*）
cols 纵向分割（固定值px|百分比|*）
border 边框宽度（px）
frameborder 是否显示边框（0|1） 0-不显示 1-显示
2.框架标签：<frame />
作用：定义了放置在每个框架中的HTML文档。
属性
scr URL链接
name 窗口名称
scrolling 滚动条，默认显示（no）
noresize 边框是否可以被拖动（noresize）
//e.g.:设置一个两列的框架集: 第一列占据浏览器窗口的 25%。第二列占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
3.内联框架：<iframe src=""></iframe>
作用：用于在网页内显示网页
<iframe src="demo_iframe.html" width="200" height="200" frameborder="0"></iframe>
4. noframes标签: <noframes></noframes>
用于为不支持框架集的浏览器显示文本
e.g.
<noframes>对比起，您的浏览器不支持框架集类型</noframes>
框架集练习：后台管理系统
//home.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang = "EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>框架集练习--后台管理系统</title>
</head>
<frameset rows="150,*" border = "1" frameborder ="1" > <!--切割成上下两部分（150，*）-->
<frame src="head.html" noresize="noresize" /> <!--顶部head.html-->
<frameset cols ="200,*" border ="3" frameborder = "1"> <!--切割左右两部分（150，*）-->
<frame src="leftnavi.html" noresize="noresize" /> <!--左边导航栏leftnavi.html-->
<frame src="right1.html" noresize="noresize" name="body" /> <!--右侧是主题：right1.html-->
</frameset>
</frameset>
</html>
//.head.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作我的第一个网页</title>
</head>
<body>
<h1 align="center">后台管理系统</h1>
</body>
</html>
//leftnavi.html
<body>
<ul type="none">
<li><h3><a href="right1.html" target="body">选择一</a></h3></li>
<li><h3><a href="http://www.163.com" target="body">网页首页</a></h3></li>
<li><h3><a href="http://www.baidu.com" target="body">百度主页</a></h3></li>
<li><h3><a href="http://www.sina.com.cn" target="body">新浪中国</a></h3></li>
<li><h3><a href="">选择一</a></h3></li>
<li><h3><a href="">选择一</a></h3></li>
<li><h3><a href="">选择一</a></h3></li>
<li><h3><a href="">选择一</a></h3></li>
</ul>
</body>
//right.html
9 样式和脚本
//样式标签：<style></style>
//脚本标签：<script></script>
10. 块: div span
HTML 元素被定义为块级元素或内联元素。
- 块级元素：以新行来显示。
- 内联元素：不会以新行来显示。
//div和span标签
<div> 元素是块级元素，常用于组合其他 HTML 元素的容器，进行文档布局。---
<span> 元素是内联元素，常用作文本的容器。
块级元素：
<body></body>
<div></div> //常用的布局元素
<h1></h1>...<h6></h6>
<ol></ol>
<ul></ul>
<li></li>
<p></p>
<table></table>
<tr></tr>
<td></td>
内联元素：
<a href=""></a>
<i></i>
<u></u>
<b></b>
<span></span> //文本标签
<font></font>
