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:10010@qq.com">邮件联系</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]-->