HTML
超文本标记语言 （HyperText Markup Language）
超文本
是一种组织信息的方式，通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容。
HTML发展史
- 1997 - HTML 4.0
- 1999 - HTML 4.0.1
- 2014 - HTML 5
HTML标签
- 标签 又称 元素，是 HTML 的基本组成单位
- 分为 双标签 与 单标签
- 不区分大小写，但推荐小写
- 标签间的关系：并列关系、嵌套关系，可以使用 tab 键进行缩进
HTML 标签属性
-
用于给标签提供附加信息
-
可以写在 起始标签 或单标签中
-
有些特殊的属性，没有属性名，只有属性值，例如
<input disabled />
HTML 基本结构
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>
HTML注释
<!-- html注释 -->
HTML文档声明
<!doctype html>
HTML设置语言
<html lang="zh-CN"></html>
- 主要作用：
- 让浏览器显示对应的翻译提示
- 有利于搜索引擎优化
HTML标准结构
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>...</title>
</head>
<body>
...
</body>
</html>
HTML 排版标签
- 标题标签 : h1~h5
- h1 最好只有一个
- 不能互相嵌套
- 段落标签 : p
- 不能有 h1~h6、p、div
- 块级标签 : div
HTML 语义化标签
概念：用特定的标签去表达特定的含义
原则：标签默认效果不重要，重要的是语义
优势：
- 代码可读性强
- 有利于 SEO （搜索引擎优化）爬虫 代码 机器人
- 方便设备解析
块级元素与行内元素
块级元素
特点：
- 独占一行
- 其中几乎什么都可以写
- h1~h6 不能嵌套
- p 中不能有块级元素
行内元素
特点：
- 不独占一行
- 其中不能写块级元素
常用的文本标签
- 用于包裹：词汇、短语等
- 通常写在排版标签里面
- 通常都是行内元素
em：着重阅读的内容
strong：十分重要的内容
span：没有语义，用于包裹短语的通用容器
不常用文本标签
- code：一段代码
- small：附属细则
- sub/sup：下标文字、上标文字
- …
图片标签
<img src="" alt="" width="" height=""/>
- src：路径
- alt：图片描述
- width：图片宽度
- height：图片高度
相对路径和绝对路径
相对路径
- 以当前位置作为参考点，去建立路径
- ./ / …/
绝对路径
- 以根位置作为参考点，去建立路径
- 分为本地绝对路径和网络绝对路径
- 本地：E:/a/b/c/…
- 网络：http://…
常见图片格式
- jpg：支持的颜色丰富、占用空间小，不支持透明背景，不支持动态图
- png：支持的颜色丰富、占用空间略大、支持透明背景，不支持动态图
- bmp：支持的颜色丰富、保留的细节更多、占用空间极大，不支持透明背景，不支持动态图
- gif：支持的颜色较少、支持简单透明背景，支持动态图
- webp：具备几种格式的优点，但兼容性不太好
- base64：将图片进行base64编码，形成一串特殊的文本，要通过浏览器打开
超链接
<a href="" target="" />
作用：用于当前页面进行跳转
href：要跳转的具体位置
target：跳转时如何打开页面
跳转到锚点
锚点：网页中的一个标记点
<a name="test"></a>
<a href="#test" />
具有name属性的 a 标签为锚点
唤起指定应用
<a href="tel:10010">电话联系</a>
<a href="mailto:[email protected]">邮件联系</a>
<a href="sms:10086">短信联系</a>
列表
- 有序列表：ul-li
- 无序列表：ol-li
- 定义列表：dl-dt-dd
表格
基本结构
一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。
<table border="1" width="400px" height="300px" cellspacing="0">
<caption>表格标题</caption>
<thead align="center" valign="middle">
<tr>
<th>表头</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚注</td>
</tr>
</tfoot>
</table>
- table：表格
- caption：表格标题
- thead：表头
- tbody：表格主体
- tfoot：表格脚注
- tr：行
- th：表头单元格
- td：普通单元格
- width：宽度
- heigth：高度
- align：水平对齐方式
- valign：垂直对齐方式
- rowspan：指定要跨的行数
- colspan：指定要跨的列数
其他常用标签
- 换行标签：
<br/> - 分割线：
<hr/> - 按原文显示：
<pre></pre>
表单
基本结构
<form action="" target="" method="">
<fieldset>
<legend>主要信息</legend>
</fieldset>
<input type="text" name="文本输入框" disabled/>
<label for="pwd">
xxx:
<input id="pwd" type="password" name="密码输入框"/>
</label>
<input type="radio" name="单选框" value=""/>
<input type="checkbox" name="多选框" value=""/>
<input type="hidden" name="隐藏域"/>
<textarea name="" cols="20" rows="10">文本框</textarea>
<select name="下拉框">
<option value="1">选项一</option>
<option value="2">选项二</option>
</select>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
- label：可与表单控件相关联，关联后点击文字，与之对应的表单控件就会获取焦点
框架标签
<iframe></iframe>
字符实体
- 空格： 
- 小于号：<
- 大于号：>
- 元：¥
- 版权：©
- …
HTML全局属性
- id
- class
- style
- dir
- title
- lang
- …
meta 元信息
<!-- 配置字符编码 -->
<meta charset="utf-8">
<!-- 配置网页关键字 -->
<meta name="keywords" content="...">
<!-- 配置网页描述信息 -->
<meta name="description" content="...">
...
HTML5
简介
HTML5 是新一代的 HTML 标准，2014年10月由万维网联盟完成标准制定
优势
- 针对JavaScript，新增了更多可操作的接口
- 新增了语义化标签、全局属性
- 新增了多媒体标签，替代了flash
- 更加侧重语义化，对于SEO更友好
- 可移植性好，可以应用在移动设备上
H5 新增布局标签
H5 新增布局标签
- 页面头部：header
- 页面底部：footer
- 导航：nav
- 文章、帖子、评论…：article
- 页面中的某段文字：section
- 侧边栏：aside
- 文档的主要内容：main
- 包裹连续的标题：hgroup
关于 article 和 section：
- article 里可以有多个 section
- section 强调分段或分块
- article 比 section 更强调独立性
H5 新增状态标签
meter标签
- 语义：定义已知范围内的标量测量
- 常用属性：
- high
- low
- max
- min
- optimum
- value
progress标签
- 语义：显示某个任务完成的进度的指示器，一般用于表示进度条
- 常用属性：
- max
- value
H5 新增列表标签
- datalist：用于搜索框关键字提示
- details：用于展示问题和答案，或对专有名词进行解释
- summary：写在details里，用于指定问题或专有名词
H5 新增文本标签
- ruby：包裹需要注音的文字
- rt：写注音，写在ruby中
- mark：文本标记
H5 新增表单控件属性
- placeholder：提示文字
- required：表示该输入项必填
- autofocus：自动获取焦点
- autocomplete：自动完成
- pattern：填写正则表达式
H5 input新增type属性
- email：邮箱类型
- url：url类型
- number：数字类型
- search：搜索类型
- tel：电话类型
- range：范围类型
- color：颜色选择框
- date：日期选择框
- month：月份选择框
- week：周选择框
- time：事件选择框
- datetime-local：日期+时间选择框
H5 form标签新增属性
- novalidate：表单提交时不再进行验证
H5 新增音视频标签
- video：定义视频
- src
- width
- height
- controls：显示视频控件
- muted：视频静音
- autoplay：自动播放
- loop：循环播放
- poster：视频封面
- preload：视频预加载
- none
- metadata
- auto
- audio：定义音频
- src
- control：显示音频控件
- autoplay：自动播放
- muted：静音
- loop：循环播放
- preload：音频预加载
- auto
- metadata
- none
H5 新增全局属性（了解）
- contenteditable：表示元素是否可被用户编辑
- draggable：表示元素可以被拖动
- hidden：隐藏元素
- spellcheck：规定是否对元素进行拼写及语法检查
- contextmenu：规定元素的上下文菜单
- data-* ：用于存储页面的私有定制数据
H5 兼容性处理
-
添加元信息，让浏览器处于最优渲染模式
<!-- 设置IE总是使用最新的文档模式进行渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!-- 优先使用 webkit 内核进行渲染 --> <meta name="renderer" content="webkit"> -
使用 html5shiv 让低版本浏览器认识 H5 的语义化标签
<!--[if lt ie 9]> <script src="../sources/js/html5shiv.js"></script> <![endif]--> -
扩展
<!--[if IE 8]>仅IE8可见<![endif]--> <!--[if gt IE 8]>仅IE8以上可见<![endif]--> <!--[if lt IE 8]>仅IE8以下可见<![endif]--> <!--[if gte IE 8]>IE8及以上可见<![endif]--> <!--[if lte IE 8]>IE8以下可见<![endif]--> <!--[if !IE 8]>非IE8的IE可见<![endif]-->