HTML简介
HTML（Hyper Text Markup Language)，是一种标记语言并非编程语言。
HTML文档（也叫web页面）=HTML标签+文本内容
↓
由尖括号包围的关键字，如<html>
开始标签和结束标签成对存在，如<head>和</head>
严格来讲HTML元素包含开始标签和结束标签，如<p>这是一个段落</p>。
web浏览器用于读取HTML文件并将其作为网页显示。
<!DOCTYPE>声明
- HTML 4.01 Transitional
该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素（比如font)。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC ":-//W3C//DTD HTML4.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.3w.org/TR/html4/frameset.dtd">
- 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 5
<!DOCTYPE html>
- <!DOCTYPE>声明有助于在浏览器中正确显示网页。
- （doctype声明是不区分大小写的）
中文编码
大部分浏览器中直接输入中文会出现中文乱码，
需要在头部将字符声明为UTF-8或GBK。
//以下为HTML5写法介绍
页面显示语言
如 <html lang="en">
<html lang="zh-cn">
其中lang意为language表示该网站显示语言
如果浏览器默认语言与所设置的lang的value值一致，则打开页面时不会出现是否要翻译页面的提醒选项，一般选择写为受众较多使用的语言即中文网站或者英文网站等。
关于HTML5固定结构的一些解释
1、<meta name="viewport" content="width=device-width, initial-scale=1.0">
[在某未知作者的文章中有详细解释（十分抱歉未找到原作者），该文章经zhangyang33转载后链接如下]
(https://blog.csdn.net/u012402190/article/details/70172371)
2、<meta http-equiv="X-UA-Compatible" content="ie=edge">
[在ccfxue转载的如下链接文章中有详细解释]
(https://blog.csdn.net/ccfxue/article/details/70739646)
HTML5常用标签
一、页面构架
1<html></html> 是HTML中最大的标签，称为根标签
2<head></head>文档的头部
3<title></title>文档的标题，位于head标签内部
4<body></body>文档的主体，包含文档所有内容
<html>
<head>
<title>网页题目</title>
</head>
<body>
</body>
</html>
二、标题标签
共有六级标题，依据重要性递减，有自带样式
特点:
1、加了标题的标签字体加粗且字号变大
2、一个标题独占一行
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
三、段落标签
将网页分为若干个段落(HTML中回车不起作用)
特点：
1、文本在一个段落标签中会根据浏览器的窗口大小自动换行
2、段落和段落之间留有较大空隙
<p>这是一个段落</p>
四、换行标签
在HTML中一个段落中的文字会从左到右依次排序，直到到达浏览器窗口右端自动换行，本标签使文本强制换行。
特点：
1、<br />是一个单标签
2、<br />标签只是简单的开始新的一行，与段落不同，段落之间会插入一些垂直问题，且与上一行间距也与行距一致。
3、单标签一般情况下后面+一个空格+一个反斜杠来表示单标签<br />也可表示为<br>
五、文本的格式化标签
<strong></strong>或<b></b> 加粗
<em></em>或<i></i> 倾斜
<del></del>或<s></s> 删除线
<ins></ins>或<u></u> 下划线
六、盒子标签
这两个标签没有语义，作为盒子装入内容
<div>标签用来布局时，一行只能放一个<div>，大盒子
<span>标签用来布局使时，一行可以放多个 <span>，小盒子
<div>独占一行</div>
<span>一行可以有很多</span>
七、图像标签和路径
图像标签的注意点:
1、图像标签可以有多个属性，必须写在标签名的后面
2、属性之间不分先后顺序，标签名与属性，属性与属性之间用空格隔开
3、属性采用键值对的格式，即key=“value”的格式，属性=“属性值”
图像标签的属性
src 图片路径 必须属性
alt 文本 替换文本，图形不能显示时显示的文字
title 文本 提示文本，鼠标放在图片上时所显示的文字
width 像素 设置图像宽度
height 像素 设置图像高度
border 像素 设置图像边框粗细
width和height属性实际使用时只调一个使图片等比例缩放，免于失真
<img src="url" title="提示文本" />
路径
目录文件夹：即为普通文件夹，里面存放了做页面所需的材料
根目录：打开目录文件夹的第一层即为根目录
相对路径：以图片相对于HTML页面的位置为参考基础
绝对路径：目录下的绝对位置，通常为从盘符开始的路径
1、相对路径分类 符号 说明
同一级路径 图像位于HTML文件同一级，如<img src="photo.gif" />
下一级路径 / 如<img src="images/photo.gif />
上一级路径 ../ 如<img src="../photo.gif />
(上n级则n个../)
2、绝对路径
如："D:\web\img\logo.gif"或完整网络地址
七、超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 作用
href 必须属性，用于指定链接目标的url地址
target 用于指定链接页面的打开方式，-srlf为默认值再次页面打开
-blank为在新窗口中打开
链接分类
1、外部链接，如<a href="http://www.baidu.com">百度</a>
2、内部链接，网站内部页面之间相互链接，直接链接内部页面名称即可，如<a href="index.html">首页</a>
3、空链接，当未确定链接目标时，<a href="#">首页</a>
4、下载链接，href里的地址是一个文件或者压缩包时点击即下载
5、网页元素链接，在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6、锚点链接，点击链接即可快速定位到页面中的某个位置
①在目标地址标签中添一个id属性=某个名字，如two<h3 id="two">第二季</h3>
②在链接文本的href属性中，设置值属性值为#名字，即#two，如<a href="#two">第二季介绍</a>
八、注释标签
在HTML文档中添加一些便于阅读和理解而又不需要显示在页面的注释文字
<!--注释语句--> 快捷键：CTRL+/
九、特殊字符
特殊字符 描述 字符的代码
空格  ；
< 小于号 <；
> 大于号 >；
& 和号 &；
￥ 人民币 ¥；
© 版权 ©；
℃ 摄氏度 °；
± 正负号 ±；
× 乘号 ×；
÷ 除号 ÷；
² 平方 ²；
³ 立方 ³；
十、表格标签
用于显示、展示数据，使条理清晰
1、<table></table>用于定义表格的标签
2、<tr></tr>标签用来定义表格中的行，必须嵌套在<table></table>标签中
3、<td></td>标签用来定义表格中的单元格，必须嵌套在<tr></tr>标签中
表格标签基本语法
<table>
<tr>
<td>单元格内文字</td>
<td>单元格内文字</td>
......
</tr>
<tr>
<td>单元格内文字</td>
<td>单元格内文字</td>
......
</tr>
......
</table>
表头单元格的基本语法（表头内容加粗居中显示）
<table>
<tr>
<th>姓名<th>
<th>性别<th>
......
</tr>
<tr>
<td>单元格内文字</td>
<td>单元格内文字</td>
......
</tr>
......
</table>
表格属性（不常用，一般用CSS设置）
属性名 属性值 描述
align left、center、right 规定表格在页面的对齐方式
border 1或"" 规定单元格是否拥有边框，默认为""表示没有边框
cellpadding 像素值 规定单元格边沿与文本内容之间空白大小
cellspacing 像素值 规定单元格之间的空白，默认像素为2px
width 像素值或百分比 规定表格的宽度
height 像素值或百分比 规定表格的高度
<table align="center" border="1'>
为了更好的表示表格的语义，将表格分为表格头部和表格主题两大部分
<table>
<thead></thead>标签，表示表格的头部区域，内部必有<tr>标签，一般位于第一行
<tbody></tbody>标签，表示表格的主体区域
</table>
合并单元格
①跨行合并：rowspan="合并单元格的个数"
目标单元格为上侧单元格，写合并代码
②跨列合并：colspan="合并单元格的个数"
目标单元格为左侧单元格，写合并代码，如<td colspan="2"></td>
三步骤 1、决定跨行或跨列
2、找到目标单元格，写上合并方式=合并单元格数量
3、删除多余单元格
十一、列表标签
列表可分为三大类 ①无序列表
②有序列表
③自定义列表
①无序列表
<ul></ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li></li>标签
特点：
1、无序列表的各个列表之间没有顺序级别之分，是并列的
2、<ul></ul>标签中只能嵌套<li></li>标签，别的标签和文字是不被允许的
3、<li></li>标签之间可以容纳所有元素
4、无序列表有自己的样式属性，但实际使用时用CSS来设置
<ul>
<li></li>
<li></li>
......
</ul>
②有序列表
在HTML标签中，<ol></ol>标签用于定义有序列表，列表排序以数字显示，并用 <li></li>标签定义列表项
特点：
1、<ol></ol>标签中只能嵌套<li></li>标签，别的标签和文字是不被允许的
2、<li></li>标签之间可以容纳所有元素
3、有序列表有自己的样式属性，但实际使用时用CSS来设置
<ol>
<li>列表项1</li>
<li>列表项2</li>
......
</ol>
③自定义列表
在HTML标签中，<dl>标签用于定义描述列表，该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用
特点：
1、<dl></dl>标签中只能包含<dt></dt>标签和<dd></dd>标签
2、<dt></dt>标签和<dd></dd>标签个数没有限制，经常是一个<dt>标签对应多个<dd>标签
3、<dt></dt>标签和<dd></dd>标签为并列关
<dl>
<dt>名词1</dt>
<dd>名词1解释一</dd>
<dd>名词1解释二</dd>
......
</dl>
十二、表单标签
在HTML中，一个完整的表单通常由表单域、表单控件（也称表单元素）和提示信息组成。
使用表单是为了收集用户信息，与用户交互，收集用户资料，常见于用户注册页面
1、表单域：一个包含表单元素的区域
在HTML中，<from>标签用于定义表单域，以实现用户信息的收集和传递，<from>标签会把它范围内的表单元素信息提交给服务器
属性 属性值 作用
action url地址 用于指定接受并处理表单数据的服务器程序的url地址
method get/post 用于设置表单数据的提交方式，其取值为get或post
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域
<from action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</from>
2、表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择内容控件
①input输入表单元素
（<input>标签用于收集用户信息,为单标签）
在<input>标签中，包含一个type属性，根据不同的type属性，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文
本控件、单选按钮、按钮等）
type属性的属性值及其描述：
属性 描述
button 定义可点击按钮（一般多数情况下，用于通过JavaScript启动脚本）
checkbox 定义复选框（可多选也可单选，有相同名字）
file 定义输入字段和“浏览”按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮，重置按钮会清除表单中的所有数据
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
text 定义单行的输入字段，用户可在其中输入文本，默认长度为20个字符
<input type="属性值" />
<input>标签的其他属性：
属性 属性值 描述
name 由用户自定义 定义input元素的名称（单选复选名字一样）
value 由用户自定义 规定input元素的值
checked checked 规定此input元素的首次加载时默认被选中
maxlength 正整数 规定输入字段中的字符的最大长度
注意：
name和value是每个表单元素都应有属性值，主要给后台人员使用，name是表单元素的名字，要求单选按钮和复选按钮要有相同
的value值。
<label>标签
<label>标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器会自动将焦点（光标）转到或选择对应的表单元素上，
用来增加用户体验
<label for="sex" ></label>
<input type="radio" name="sex" ia="sex" />
<lable>标签的for属性应当与相关元素的id属性相同。
②<select>表单元素
在页面中如果有多个选项让用户选择，并且想要节约页面空间时，定义下拉列表，必有name属性
特点：
1、<select>中至死有一对<option></option>
2、在<option>中定义select="selected"时，当前即为默认选项
<select>
<option>选项一</option>
<option>选项二</option>
......
</select>
③<textarea>表单元素
用户需输入文本较多时使用，用于定义多行文本输入的空间，必有name属性
col="每行中的字符数"，row="显示的行数"，实际开发时使用CSS改变大小
<textarea row="3" cols="2">
文本内容
</textarea>
HTML5新特性（有兼容性问题IE9+）
一、HTML5新增语义化标签
<div></div>标签对于搜索引擎来说没有语义
<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签
注意：
1、这种语义化标准主要是针对搜索引擎的
2、这些新标签页面中可使用多次
3、在IE9中，需要把这些元素转化为块级元素
4、移动端更经常使用这种标签
二、HTML5新增的多媒体标签
1、视频<video>
当前<video>元素支持三种视频格式：MP4、WebM、Ogg
浏览器 MP4 WebM Ogg
Internet √ × ×
Chrome √ × ×
Firefox 除Linux从Firefix30后支持， √ √
其余从Firefox21版本后支持
Safari √ × ×
Opera 从Opera25版本开始支持 √ √
<video src="文件地址" controls="controls"> </video>
若考虑兼容性时
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
您的浏览器不支持<video>标签播放视频
</video>
371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
