第一部分 认识HTML
一、认识HTML
1、HTML
HTML：超文本标签语言Hyper Text Markup Language
HTML：网页源代码。
浏览器：“解释和执行”HTML源码的工具。
2、HTML的结构组成：
<!DOCTYPE html>
//文档类型声明：声明当前文件是一个HTML5文件.
文档类型声明在一个html文件中必不可少！而且必须在网页的第一行！
<html>
<head>
<title>这是一个网页</title> //标题，即网页选项卡上的文字
</head>
<body>
Hello world!
</body>
</html>
第二部分 HTML的基本标签
一、HTML的基本标签
1、 HTML标签：<></>
HTML标签属性：
是标签的一部分，用于包含额外的信息
可多个属性 属性和属性值成对出现
例如：<img scr=""></img>
HTML注释快捷键：ctrl+/
2、link标签
① <head></head>双标签
形如<link/>这样的标签，叫做自闭合标签，也叫空标签。
这样的空标签只有一个标签，标签在最后用/表示结束。
<head> //链接css标签
② <link />
link标签用于将网页和其他文件进行连接。
rel="icon"rel属性表示即将连接的文件，与当前网页的关系。属性值选择icon表示即将连接的文件，是当前网页的图标。
rel 是标签的属性 "icon"是标签的属性值，属性值必须用引号引起来。href=""表示所要连接的图片地址。
<link rel="icon" href="image/icon.PNG" /> //添加图标
3、meta标签
（1） 声明当前网页所采用的字符集编码格式。
（2）常见的中文编码格式：
gb-2312：国标码，简体中文的编码格式。
GBK：扩展的国标码，也是简体中文，但是比GB2312多了更多的编码格式。
utf-8：Unicode编码，万国码，基本兼容各国语言编码。常用！！！
例如：<meta charset="utf-8" />
（3）name="keywords"表示这一行meta语句是要设置网页的关键字。
content="" 设置当前网页的关键字内容，多个关键字用英文逗号隔开。
name属性和content属性必须同时设置，name表示需要设置的项目，content表示设置的具体内容。
<meta name="keywords" content="HTML5.web前端,网页开发,杰瑞教育"/>
（4）设置网页的描述，网页描述在网页中非常重要，在搜索引擎中搜索网页时，网页标题下面显示的一段文字，就使网页的描述。
<meta name="description" content="这是我在杰瑞教育开发的第一个网页">
二、块级标签
1、各类标签
① 标题标签 <h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6> 自动加粗！！h1最大，h6最小。
② 水平线标签 <hr />
③ 段落标签 <p></p> 没有特殊含义，仅仅表示当前文字是一个段落。
④ 引用标签 <blockquote></blockquote> 表明当前文字引用自其他地方.浏览器会默认向右缩进显示，但可以通过css进行调整。
⑤ 预格式标签 <pre></pre> 会保留代码中的回车、缩进、空格等，并在网页中显示。
2、用于布局的块级标签：
a、无序列表
<ul></ul> ul: unorder list
type表示符号类型 circle：小圆圈 square：正方形
代码示例：
<ul type="square">
<li>第一项
<ul> //默认符号类型为 circle
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</li>
<li>第二项</li>
<li>第三项</li>
</ul>
b、有序列表
<ol></ol> ol: order list
有序列表中的每一项用list表示
type属性表示序号的类型：1 表示数字，a/A表示字母，i/I表示罗马数字
代码示例：
<ol type="a">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
3、定义描述列表
<dl>
<dt>这是定义列表的标题</dt> //使用dt 表示标题
<dd>这是描述项1</dd> //使用dd 表示描述项
<dd>这是描述项2</dd>
<dd>这是描述项3</dd>
</dl>
注意： 标题一般只有一个，描述项可以有多个。
标题顶格显示，描述项相对于标题向右显示。
4、其他块级标签
① 图片组合标签 figure
用于将图片与下方的标题进行包裹，图片使用img表示，标题使用figcaption表示。
代码示例：
<figure>
<img src="img/icon.PNG" />
<figcaption>这是图片的标题</figcaption>
</figure>
② 分区标签 div
是网页开发过程中最常用的标签，div标签可以包裹任何标签，通常配合css使用。
代码示例：
<div style=" 750px;height: 200px;">
这是一个div标签。
</div>
三、行级标签
1、主要行级标签
⑴ span（文本）
⑵ img（图片）
1.scr属性：表示图片的所在路径。
[路径的表示方法]
① 网络图片地址，但不建议使用。
<img src="http://timgsa.baidu.com" />
② 使用图片在本机的绝对路径，但是严禁使用。因为，使用file://协议引入的图片，由于网页使用的是http://协议，所以无无法使用file://协议引入的文件。
<img src="file:///c:/logo.png" /> (//协议、/回到根目录)
③ 使用相对路径，推荐使用的唯一方式。
a.当图片在当前文件的下一层时，使用“文件夹名/图片名”表示。
<img src="img/icon.PNG" />
b.当图片与当前文件在同一层时，直接用“图片名”表示。
<img src="icon.PNG" />
C.当图片在当前文件的上一层时，使用“../图片名”表示。
<img src="../icon.PNG" />
注意：图片必须包含在项目目录里面，不能退出项目根目录。
2.width/height：图片的高度、宽度。
3.title：当鼠标指上后显示的文字。
4.alt：当图片无法加载时显示的文字，如果省略alt属性，则图片无法加载时将显示title的文字。
5.align：图片两边的文字相对于图片的排列方式；
top 文字居上；center 文字居中：bottom 文字居底（默认）。
(3) em（强调）
(4) strong（强调）
(5) i（倾斜）
(6) b（加粗）
(7) small（小一号字体）
(8) big（大一号字体）
(9) q（短引用）
(10) blockquote(块引用)
（11） cite（标题引用）
（12） a（超链接）
1.href属性：超链接即将要跳转的页面，可以是网络地址，也可以是本地的html文件。
2.target属性：设置新页面打开的位置。
_self 当前页面打开（默认）；_blank 在新页面打开。
3.title：当鼠标指上后显示的文字。
【功能性链接】
1.mailto：给指定邮箱发邮件。
<a href="mailto://jianghao@jerei.com">给XX发邮件！！</a>
2.tencent：与指定QQ聊天。
<a href="tencent://message/?uni=2831705549">跟XXQQ聊天！！</a>
3.锚链接：点击超链接，跳转到页面的指定位置（锚点）。
① 在页面的指定位置，定义一个锚点：
<a name="top"></a> （锚点名称最好不用数字开头，用字母）
<a href="#top">点击我回到顶部</a>
③ 跳转到其他页面指定位置的方式 ：
<a href="02-HTML基本块级标签.html#div_top">跳转到另一个页面中间</a>
2、其他行级标签
⑴ <s>删除线</s>
⑵ <u>下划线</u>
第三部分 表格
一、表格
1、格式
<table>
<tr> //行
<th></th> //表格标题，表头
</tr>
<tr>
<td></td> //单元格
</tr>
二、表格的各种属性
【表格的各种属性】
1. border：给表格的每个td和整个table添加标签。如果border>1，则只有最外层边框会加粗，td上的边框不会变化。
2. width/height：表格的宽度、高度。
3. cellspacing：设置单元格与单元格之间的间距。
如果cellspacing="0"，则单元格之间的间距为0，但是相邻的边框不会合并，而是显示两条边框的宽度。
[设置表格边框合并]
可以CSS设置：style="border-collapse: collapse;"
设置边框合并后，cellspacing属性将会失效，因为两条边框已经合并到一起，不能再产生间距。
4. cellpadding：设置单元格内边距，单元格中的文字与边框之间的距离。
5. align：设置表格在父容器中居左、居中、居右。
align属性相当于使表格浮动，会影响表格后面内容的布局。
6. bgcolor：表格背景色。
background：表格背景图。背景色与背景图同时存在时，背景图生效。
bordercolor：边框颜色。
三、表格的跨行跨列
1、表格跨列：colspan 如果一个单元格跨n列，则其右方n-1个单元格需删掉；
<th colspan="3">1</th>
2、表格跨行：rowspan 如果一个单元格跨n行，则其下方n-1个单元格需删掉。
<td rowspan="2">1-1</td>
四、表格的结构化与直列化
1、表格的结构化：
完整的表格应该包括以下几部分：
caption：表格的标题，永远在表格最上方居中。
thead：表格的表头部分，无论thead放在表格的什么地方，显示时永远在表格的最上方。
tbody：表格的主体部分，在thead之下，tfoot之上，一个表格根据需要可以有多个tbody。
tfoot：表格的尾部，无论tfoot放在表格的什么地方，显示时永远在表格的最下方。
2、 表格的直列化：
表格有几列，就可以在表格的最上方写几个<col/>标签，每个<col/>标签就对应着表格的每一列，这就是表格的直列化。
如果要同时修改多列，可以将多个<col/>标签，使用<colgroup><colgroup/>进行包裹，统一修改。
第四部分 表单
1、表单有两个重要属性：
action：表示表单提交的后台服务器地址：
method：表单提交数据的方法，可选值有get和post两种。
【get和post的区别】
① get使用URL地址栏进行传递数据，所有地址在地址栏可见，不安全；
post传递数据在地址栏无法显示，比较安全。
② get传递的数据量有限，而且只能传递纯文字数据；
post可以传递大量数据，而且可以传递图片、视频、文件等。
③ get传递数据的速度要比post快。
2、input的常用属性：
① type：表示当前输入框是什么类型；
② name：给输入框起名称，向后台传递数据时，name属性必不可少。
③ value：给input赋默认值。
④ placeholder：输入框的提示内容。当输入框存在value时，提示内容消失。
⑤ disabled="disabled"（disabled） 禁用当前输入框。可以显示，不能编辑。
被disabled禁用的输入框，数据将不再向后台传递。
⑥ hidden="hidden" 隐藏输入框。隐藏的数据框中的数据，依然可以向后台传递。
3、input的type类型：
① text：文本输入框
② password：密码输入框，输入的内容显示为小黑点。
③ radio：单选框。
单选按钮的value不能省略，这个value需要向后台传递。
radio凭借name是否相同，区分是否同一组，同一组中name必须相同，而且只能选一个。
checked="checked"设置单选按钮的默认选中项。
④ checkbox：多选框。其他与radio相同。
⑤ file：文件上传框。
multiple="multiple" 设置可以上传多个文件。
accept="" 设置可以上传的文件类型，"*"表示所有文件，"image/*"表示所有图片
⑥ submit：表单提交按钮。
⑦ reset：表单重置按钮，将表单恢复到最初状态。
⑧ image：图形提交按钮。src属性用于导入图片，功能与submit相同。
⑨ button：显示为按钮形状，但是没有任何功能。
⑩ hidden：作用与普通输入框加hidden="hidden"属性的效果相同。