HTML知识点
1. 概念
HTML: 超文本标签语言，用来描述网页的一种语言
2. 语法格式
1 <HTML> 2 <head> 3 <title></title> 4 </head> 5 <body> 6 </body> 7 </HTML>
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
1) <html> </html>
作用所有HTML中标签的根节点，最大的标签
2) <head></head>
文档的头部标签，描述了文档的各种属性信息，包括文档的标题、样式等
3) <title></title>
文档的标题
4) <body></body>
文档的主体
3. 标签分类
3.1 双标签
<标签名>内容</标签名>
3.2 单标签
<标签名/>
4. 标签关系
4.1 嵌套关系
<head> <title> </title> </head>
4.2 并列关系
<head></head>
<body></body>
5. 文档类型<!DOCTYPE html>
1)<!DOCTYPE>标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范，必须在开头使用
2)<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析
6. 字符集
1) utf-8 : 目前最常用的字符集编码方式，包含全世界所有国家需要用到的字符
2) GBK : 包含全部中文字符（简体中文和繁体中文），是gb2312的扩展
3) gb2312 : 简体中文，包括6753个汉字
4)BIG5 : 繁体中文，港澳台等用
7. 常用快捷键
快捷键
8. 常用标签
8.1 标题标签
h1-h6 ： 六级标题，依据重要性递减
注意：h1标签很重要，一般一个页面只有一个h1标签
8.2 段落标签
<p>文本内容</p>
默认文本在一个段落中会根据浏览器窗口的大小自动换行
8.3 水平标签
<hr/> ： 在网页中显示默认样式的水平线
8.4 换行标签
<br /> ：文本格式化标签
8.5 文本格式化标签
1）加粗 ：<b></b>
<strong></strong>
2）斜体：<i></i>
<em></em>
3）加删除线：<s></s>
<del></del>
4）加下划线： <u></u>
<ins></ins>
5）上标 ：<sup></sup>
6）下标：<sub></sub>
8.6 图象标签
<img src="" />
1）src:图象的路径
2）alt：图象不能显示是的替换文本
3）title:鼠标悬停是显示的内容
4）width:设置图象的宽度（XHTML不支持%页面百分比）
5）height:设置图象的高度（XHTML不支持%页面百分比）
6）border:设置图象边框的宽度
8.7 标签属性
1）标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
2）属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
3）任何标签的属性都有默认值，省略该属性则取默认值
4）采用键值对的格式 key="value"
5）尽量不适用样式属性
8.8 链接标签
<a href=""转跳目标"" target=""目标窗口的弹出方式"" >文本或图象</a>
1）href:用于指定链接的目标的url地址
2）target:用于指定链接页面的打开方式
3）_self:在本窗口中打开
4）_blank:在新窗口中打开
注意：
1.外部链接需要添加http://
2.内部链接直接链接内部页面名称即可，比如：<a href=""index.html"">首页</a>
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”（即href=""#""）,表示该链接暂时为一个空链接
4.在网页中各种网页元素如图象、表格、音频、视频等都可以添加超链接
8.9 base标签
1）用来设置整个页面链接的打开方式
2）位于<head></head>之间
3）<base target=""_blank""/> 将所有链接默认打开方式均为在新窗口中打开
8.10 锚点定位
1）使用相应的id名标注专挑目标的位置，如<h3 id=""two"">第二集</h3>
2）使用 a href=""#id名"">链接文本</a>,如：<a href=""#two"">
8.11 特殊字符标签
8.12 注释标签
<!--注释语句-->
8.13 div和span标签
1）div标签
<div></div>： 没有语义，是网页布局的盒子，用来组合网页，独占一行
2）span标签
<span></span>：没有语义，是网页布局的盒子，多个span标签在一行显示
8.14 列表标签
8.14.1 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
......
</ul>
1.<ul></ul>中只能嵌套<li></li>,不可以直接在<ul></ul>标签中输入其他标签或者文字
2.<li></li>中可以使用所有标签
3.无序列表会带有自己的样式属性，可以用CSS更改样式
8.14.2 有序列表
<ol> <li>列表项1</li> <li>列表项2</li> ...... </ol>
8.14.3. 自定义列表
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ... </dl>
dt自定义列表的小标题，dd自定义列表的解释项
8.15 表格标签
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
注意：
1）table 用于定义一个表格
2）tr用于定义表格中的一行，必须嵌套在table标签中
3）td用于定义表格中的单元格，必须嵌套在tr中
4）tr中只能嵌套<td></td><th></th>
5）td标签可以容纳所有标签
6）th 为表头标签，只需用表头标签th代替相应的单元格标签td即可，一般位于表格的第一行或第一列
属性
1.border : 设置表格的边框默认为0
2.cellspacing ： 设置单元格与单元格边框之间的空白间距
3.cellpadding ：设置单元格内容与单元格边框之间的空白间距
4.width : 设置表格的宽度
5.height : 设置表格的高度
6.align ：设置表格在网页中的水平对齐方式 left | center | right
表格结构
1）<thead></thead> 用于定义表头，一般包含网页的logo和导航等头部信息
2）<tbody></tbody> 用于定义表格的主体，一般包含网页中除头部和底部之外的其他内容
表格标题
<caption>我是表格标题</caption> ： caption标签必须紧随table标签之后
合并单元格
1）rowspan 跨行合并（垂直方向的合并）
2）colspan 跨列合并（水平方向的合并）
注意：要将不需要的单元格注释掉
8.16 表单标签
8.16.1 input 输入标签
type属性：
1）text 单行文本输入框
a)maxlength 输入字符长度最大值
b）name 表单控件的名称
c）size 控制表单长度(几乎用不到 ,用css)
2）password 密码输入框
3）radio 单选按钮
a）想实现单选效果,必须把name值设为相同
b）checked=""checked"" 设置默认选项
4）checkbox 复选框
a）checked=""checked"" 设置默认选项
5）button 普通提交按钮，不能提交,配合js做特效
6）submit 提交按钮
7）reset 重置按钮，恢复到初始值
8）image 图象按钮，src=""图片路径"" 可以提交
9）file 文件域
8.16.2 textarea 文本域 ：多行文本输入框
1）rows 控制输入的行数
2）cols 控制一行可以输入的字符长度
8.16.3 select 下拉菜单
selected=""selected""设置下拉菜单默认选项
格式：
<select>
<option>1993</option>
<option>1994</option>
<option selected=""selected"">1995</option>
</select>
8.16.4 label标签
1）将label把后面input绑定起来，当点击label里文字时,绑定的表单元素会获取光标焦点
2） label的for值=input设置的id值
8.16.5 表单域
<form action=""url地址"" method=""提交方式"" name=""表单名称"">
各种表单控件
</form>
1）action : action属性用于指定接收并处理表单数据的服务器程序的url地址
2）method : 用于设置表单数据的提交方式，其取值为get(默认)或post。
3）name : 用于指定表单的名称，以区分同一个页面中的多个表单
9. 路径
9.1 相对路径
1）相对路径以当前文件的路径出发
2）当前文档和目标文档在同一个目录（文件夹），直接写文件名，如：<img src=""01.jpg"" alt="""">
3）目标文档在当前文档的下一级，文件夹名+/+文件名，如：<img src=""image/02.jpg"" alt="""">
4）目标文档在当前文档的下一级的下一集，文件夹名+/+文件夹名+/+文件名，如：<img src=""images/photo/03.jpg"" alt="""">
5）目标文档在当前文档的上一级，../+文件名，如：<img src=""../04.jpg"" alt="""">
6）目标文档在当前文档的上一级的上一级，../+../+文件名，如：<img src=""../../05.jpg"" alt="""">
9.2 绝对路径
1）从根目录出发
2）电脑的绝对路径 从盘符出发 绝对不能用
<img src=""E:\image\2.jpg"" alt="""">
3)互联网的绝对路径 从服务器出发
<img src=""http://www.baidu.cn/images/logo.gif"" alt="""">
