一、HTML概述
1．超文本标记语言
2．文件都是以.html或者.htm结尾
3．HTML不区分大小写
4．HTML的标记大多数都是成对出现的<标记></标记>
5．HTML是一个弱语法规则语言
6．HTML写完之后可以直接使用浏览器运行
7．HTML中的标记也被称之为节点（Node）
8．节点之间的关系：父节点、子节点、相邻节点
9．节点按照类型分为：元素节点（Element）、属性节点（Attribute）、文本节点（TextNode）和空节点（Null）
10．如果标记中没有子内容，可以使用缩写，例: ‘<p/>’
11．HTML中的基本结构如下：
<html><!--这个代表HTML的开始-->
<head><!--head是对HTML的头部定义部分-->
<meta charset=”utf-8”>
<title>我是标题</title>
</head>
<body><!--body是HTML的正文部分-->
</body>
</html><!--这个代表HTML结束-->
<html>
<head>
<meta charset="utf-8">
<title>第一个HTML</title>
</head>
<body>
我是第一个HTML
</body>
</html>
二、HTML中的文字
1．font标记，可以设置颜色和大小
2．b,i,u,tt,sup,sub等标记，代表的分别是加粗、倾斜、下划线、打字机字体、上浮，下浮等
3．label和span标记代表文字
4．h1-h6的标题（大小依次减小）
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<font id="f1" color="#faf" size="5">文字</font>
文字2
<label id="l1">文字3</label> <!--label和span可以起名字，找的更快-->
<span id="l2">文字4</span>
<b>文字5</b>
<br/>
<i>文字6</i>
<br/>
<u>文字7</u>
<br/>
<tt>文字8</tt>
<sup>文字9</sup>
<sub>文字10</sub>
<h1>标题1</h1>
<h2>标题1</h2>
<h3>标题1</h3>
<h4>标题1</h4>
<h5>标题1</h5>
<h6>标题1</h6>
</body>
</html>
三、HTML中的特殊标记
1．换行<br/>
2．段落<p>
3．特殊字符： 空格
&取地址符
<小于号
>大于号
4．分隔符：<hr/>
四、HTML中的图片
1．<img src=”路径” width=”宽” height=”高”>
2．如果没有书写宽和高，则使用图片的原始尺寸
3．路径可以是绝对路径，也可以是相对路径
路径可以是URL（网址），也可以是磁盘中的某个图片
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
a<br/>
b<br>
c<br />
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<font color='red'>abc</font>
<font color='red'>abc</font>
<br/>
a a
<br />
&
<hr color="#087" size="8"/>
<img src="../img/timg.jpg" width="300" height="220" />
</body>
</html>
五、HTML中的表格
1．table代表表格
2．thead，tbody和tfoot分别代表表格的头身尾
<!--
border:边框，如果值为0代表无边框，默认为0
width：宽 影响table和th、td
height：高 影响table和tr 行管高列管宽
align：对齐方式 left|right,如果在tr或者td中使用，代表文字对齐方式
bgcolor:背景色
-->
<!--
colspan:合并列，值为整型，代表被合并的列数
rowspan：合并行，值为整型，代表被合并的行数
注意：HTML的表格必须行列一致
-->
3．tr代表行，td和th代表列 th标题列加粗居中，
4．caption代表表格标题
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!--完整写法-->
<!--border:0表示无边框 默认为0 1表示有边框，数字增大，边框加大变深-->
<table border="1" width="600">
<caption>我是表格</caption>
<thead>
<tr>
<!--标题列，加粗，居中-->
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
<td>删除</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
<td>删除</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
<td>添加</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tfoot>
</table>
<hr color="aqua" size="5" />
<!--缩写写法-->
<table border="1" width="600">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
<td>删除</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
<td>添加</td>
</tr>
</table>
<hr color="aqua"/>
<!--table中的常见属性1-->
<!--
border:边框,如果值为0代表无边框,默认为0
width:宽 影响table和th,td
height:高 影响table和tr
align:对齐方式 left|center|right,如果在tr或者td中使用,代表文字对齐方式
bgcolor:背景颜色
-->
<table border="1" width="400" height="300" align="center"
bgcolor="aqua">
<tr align="center" height="100">
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr height="10%">
<td align="right">c</td>
<td>c</td>
<td>c</td>
<td>c</td>
</tr>
<tr><!--当上面使用原有规格的10%后，这一行将加上其本有的高度，变长-->
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
</tr>
</table>
<hr color="aqua" size="5"/>
<!--table中的常见属性2-->
<!--
colspan:合并列，值为整型，代表被合并的列数
rowspan:合并行，值为整型，代表被合并的行数
注意：HTML的表格必须行列一致
-->
<table border="1" width="600">
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<hr color="aqua" size="5"/>
<!--练习合并行和列-->
<table border="1" width="600" height="400" bgcolor="antiquewhite">
<caption>表5</caption>
<tr>
<td> </td>
<td> </td>
<td colspan="4"> </td>
<td> </td>
<td> </td>
<td rowspan="5"> </td>
</tr>
<tr>
<td> </td>
<td rowspan="4"> </td>
<td> </td>
<td> </td>
<td colspan="3" rowspan="3"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="4"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
六、滚动字幕
欢迎来到bbbyxxx的博客
<html>
<head>
<meta charset="UTF-8">
<title>滚动字幕</title>
</head>
<body>
<!--
behavior:alternate(来回滚动)|scroll(依次滚动)|slide(滚动一次)
scrollamount:步伐
scrolldelay:步率
direction:up|down|left(默认)|right
loop:循环次数
-->
<marquee width="999" height="666" bgcolor="antiquewhite"
behavior="scroll" scrollamount="100" scrolldelay="10"
direction="down"
>
欢迎来到bbbyxxx的博客
</marquee>
</body>
</html>
七、表单
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!--
form:表单，负责将表单内的数据发送到指定位置
action:去哪里.收件人地址
method:方式 post(加密)|get
enctype:表单类型application/x-www-form-urlencoded(普通默认表单)|multipart/form-data(上传表单)
-->
<form action="a.html" method="post" enctype="application/x-www-form-urlencoded">
<!--
type:input类型，默认是文本框
name:表单中的控件名称,必须有,否则不予发送
value:值
checked:是否选中,在类型为选择框中使用
name和id都是给控件起名字:
1.name可以重名,id不行
2.name一般是给Java等后台语言发送的,而id是给JavaScript等前端语言使用
-->
文本框:<input type="text" name="name" value=""/>
<br/>
密码框:<input type="password" name="pass" value="">
<br/>
单选按钮：
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
<br/>
复选按钮：
<input type="checkbox" name="love" value="足球" checked/>足球
<input type="checkbox" name="love" value="篮球">篮球
<input type="checkbox" name="love" value="排球" checked/>排球
<br/>
电话框：<input type="tel" name="love" value=""/>
<br/>
邮件框:<input type="email" name="email"/>
<br/>
日期框:<input type="date" name="date"/>
<input type="datetime-local" name="datetime"/>
<br/>
搜索框:<input type="search" name="search"/>
<br/>
颜色框:<input type="color" name="color">
<br/>
文件框:<input type="file" name="file">
<br/>
隐藏域:<input type="hidden" name="hidden" value="111">
<br/>
下拉菜单:
<!--
size:显示行数,默认一行
multiple:是否复选,默认不复选
selected:是否选中
-->
<select name="address">
<option value="a1">1</option>
<option value="a2" selected>2<option>
<option value="a3">3</option>
<option value="a4">4<option>
</select>
<br/>
<!--
rows:行数(高)
cols:列数(宽)
-->
文本域:<textarea name="desc" rows="" cols="">aaasdsd
</textarea>
<br/>
数字框:<input type="number" name="age" max="10" min="1"/>
<br/>
<button>我是Button</button>
<input type="submit" value="我是submit"/>
<input type="reset" value="我是reset"/>
<input type="image" src="../img/9413594_115127395000_2.jpg"width="200" height="100"/>
</form>
</body>
</html>
八、正则表达式
1．[abc] a或b或c
2．[^abc] 任何字符除了a，b和c
3．[a-zA-Z] 匹配一个字符，不区分大小写
4．[a-d[m-p]] 匹配一个字符，a到d或者m到p
5．[a-z&&[def] def
6．[a-z&&[^bc]] 除了bc
7．[a-z&&[^m-p]] 除了m到p
. 任意一个字符
\d 数字
\D 非数字
\w 字母、数字、下划线
^ 代表正则表达式的开始，可以省略
$ 代表正则表达式的结束
<html>
<head>
<meta charset="utf-8">
<title>表单其他属性</title>
</head>
<body>
<!--
placeholder:水印字
required:必填项
-->
<form action="a.html" method="post">
<input name="name"
pattern="[a-z]{6,10}"
maxlength="16"
placeholder="请输入账号" required="required"/>
<button >百度一下</button>
</form>
<hr color="aqua" size="5"/>
<form action="f.html" method="get">
<table border="1" width="80%">
<tr>
<th>账号</th>
<td>
<input name="name" pattern="[a-zA-Z][a-zA-Z0-9]{5,11}"/>
</td>
</tr>
<tr>
<th>密码</th>
<td>
<input type="password" name="pass" pattern=
"[a-zA-Z][a-zA-Z0-9]{5,11}"/>
</td>
</tr>
<tr>
<th>身份证号</th>
<td>
<input type="card" pattern="[1-9][0-9]{5}[1-2][0-9]{7}[0-9]{3}[0-9X]"/>
<td>
</tr>
<tr>
<th>手机号</th>
<td>
<input type="tel" pattern=
"[1-9][3-9][0-9]{9}"/>
</td>
</tr>
<tr>
<th><button>注册</button><th>
</tr>
</table>
</form>
<body>
</html>
九、超链接
1．内部链接：锚点，书签 书签
括起来的内容
<html>
<head>
<meta charset="utf-8">
<title>内部链接</title>
</head>
<body>
<a href="#sql1">书签1</a>
<a href="#sql2">书签2</a>
<!--
pre:这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来
-->
<pre>
中共中央政治局召开会议
<a name="sql1">决定</a>
嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻寻寻寻
<a name="sql2">文章指出。</a>嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻
嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻寻寻寻寻寻
</pre>
</body>
</html>
2．外部链接：外部跳转链接（重点）
<html>
<head>
<meta charset="utf-8">
<title>外部链接</title>
</head>
<body alink="blue" link="pink" vlink="oracle">
<!--
URL:统一资源定位符
协议、IP地址、端口号、主目录名、具体资源目录
http:超文本传输协议
IP:确定到那台电脑
端口号:确定应用
alink:没有点击过的链接（获得点击、悬停时变色）
link:表示网页链接文字在未点击之前所显示的颜色
vlink:访问过的链接
-->
<a href="http://www.goole.com">超链接1</a>
<a href="www.baidu.com">超链接2</a><!--错误，没有协议-->
<a href="c.html">超链接3</a><!--同目录下可以直接访问-->
</body>
</html>
3．邮件链接：调用windows的邮件协议
<html>
<head>
<meta charset="utf-8">
<title>邮件链接</title>
</head>
<body>
<a href="mailto:admin@qq.com">发邮件</a>
</body>
</html>
十、有序、无序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有序无序</title>
</head>
<body>
<ul><!--ul:定义无序列表。-->
<li>陕西省</li><!--li:定义列表项目。可用在有序列表 (<ol>) 和无序列表 (<ul>) 中-->
<li>山西省</li>
<li>福建省</li>
<li>广东省</li>
<li>辽宁省</li>
</ul>
<ol type="A"><!--有序 a A i I 罗马数字1（默认）-->
<li>陕西省</li>
<li>山西省</li>
<li>福建省</li>
<li>广东省</li>
<li>辽宁省</li>
</ol>
<dl><!--
<dl> 标签定义了自定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。
-->
<dt>陕西省</dt>
<dd>西安市</dd>
<dd>宝鸡市</dd>
<dd>榆林市</dd>
<dt>福建省</dt>
<dt>广东省</dt>
<dt>辽宁省</dt>
</dd>
</body>
</html>```
十一、框架集
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架集</title><!--框架集：多个页面组成的一个页面-->
</head>
<!--框架集的大窗体中不能出现body-->
<frameset cols="30%,40%,30%"><!--框架集里面嵌了三个页面-->
<frame src="b1.html"/>
<frame src="b2.html"/>
<frame src="b3.html"/>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
b1
</body>
</html>
b2、b3类似
```
```
//frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
//<frame> 标签定义 frameset 中的一个特定的窗口（框架）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架集</title><!--框架集：多个页面组成的一个页面-->
</head>
<!--框架集的大窗体中不能出现body-->
<frameset cols="30%,*"><!--框架集里面嵌了三个页面-->
<frame src="b1.html"/>
<frameset rows="15%,*">
<frame src="b2.html"/>
<frame src="b3.html" name="main"/><!--1.起名字-->
</frameset>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
_blank:浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self:这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。
这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent:这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。(在父窗体中显示，在框架集中使用，下同)
_top:这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。(也就是整个窗体中显示)
自定义：1.在要打开的页面处起一个名字
2.然后在超链接上链接
提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
-->
<a href="http://www.qq.com" target="_blank">腾讯</a></br><!--target 属性规定在何处打开链接文档-->
<a href="http://www.baidu.com" target="_parent">百度</a></br>
<a href="http://www.163.com" target="main">网易</a></br><!--2.链接-->
</body>
</html>
```
十二、画中画
```
//iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画中画</title>
</head>
<body>
<iframe src="a.html" width="400" height="300"
frameborder="1"></iframe>
</body>
</html>
```
38万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
