html的基础知识点

大闸蟹~

已于 2022-08-19 14:10:02 修改

阅读量350

点赞数

分类专栏： html 文章标签： html

于 2021-04-30 11:50:17 首次发布

本文链接：https://blog.csdn.net/YCHH1/article/details/116297065

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基础知识的总结

问答

前端页面的三个组成部分

结构 HTML 表现 CSS 行为 JavaScript

文件后缀

文本文件 .txt
world 文件 .doc/.docx
excel 文件 .xls/.xlsx
演示文件 .ppt/.pptx
音频文件 .map3/.wma
视频文件 .avi/.mp4/.flv/.mkv/.ogg/.wmv 等等
图片文件 .png/.jpg/.gif/.ico/.bmp/.psd等等
压缩文件 .rar/.zip
可执行文件 .exe
网页文件 .html/.htm
样式文件 .css
javascript .js

一、浏览器内核的知识

(1) 五大浏览器

Chrome(谷歌) 浏览器:之前使用的是苹果的Webkit内核，2013年以后使用的是谷歌自己的Blink内核。
Safari(苹果)浏览器，使用的是Webkit浏览器内核。
Flrefox(火狐)浏览器，使用Gecko浏览器内核。
Opera浏览器:最新的是谷歌的Blink 内核。
IE浏览器，使用Trident浏览器内核，又称为IE内核.
IE dge 浏览器:斯巴达内核。

（2）五大浏览器做兼容简写的前缀

Chrome -webkit-
Safari -webkit-
Flrefox -moz-
Opera -o-
IE -ms-
IE dge 斯巴达

（3）浏览器控制台介绍

Elements 查看html基本结构，html标签和html属性
- Styles css样式所在
- Computed 计算后的样式
Console 控制台，是用来调试 javaScript 代码的
Sources 查看资源文件，如 html、css、js、图片文件等等
NetWork 网络请求

（4）字符串编码

万国码 utf-8(unicode 编码拓展)
中文编码 GBK、GB2312、big5 等
美国标准协会编码 ANSI
西欧编码 ISO8859-1

(5) 前端页面的组成部分

解构:HTML 表现 CSS 行为 JavaScript

以人为例:人的骨骼可以看作是解构HTML、我们的外貌可以看作是表现 CSS 、吃饭睡觉等等可以看作是行为 JavaScript

二、DTD版本

html4.01版本，结构和样式做了分离。

Xhtml1.0版本，规范做了拓展升级。

代码必须用小写字母，属性必须用双引号包裹，结束标签必须写关闭符号/等等。

html4.01 和 Xhtml1.0这两个规范分别包含了3个小规范：

Strict 严格版：不能使用font/b/u/i等废弃标签，不能使用框架集（Framesets）。
Transitional 过渡版（通用版）：可以使用font等废弃标签，不能使用框架集（Framesets）
Frameset 框架集版：可以使用框架集
严格程度：XHTML1.0 Strict > HTML4.01 Strict > XHTML1.0 transitionl > HTML4.01 transitionl

html5 不基于 SGML规范，不再区分3个小规范，所以不需要引用 DTD。

三、HTML 的介绍

(1) 什么是 HTML

html: 全拼 Hyper Text Markup Language 翻译: 超文本标记型语言

超文本:超出文本的范畴,可以通过标签去添加图片、超链接、表单、表格等等除了文本和字符串之外的其他信息
标记:其实就是标签,他是 W3C 阻止所规定的一些英文关键字,这些关键字使用尖括号<> 进行包裹,如:网页起始标记和结束标记元信息标签.
浏览器去识别时,识别的就是这些标记,根据这些标记的规定,在页面上呈现出对应的效果

(2) HTML 的基本骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>p标签中的内容</p>
</body>
</html>

文档的声明 Doctype 作用:
告知浏览器此文档使用的是哪种 html 或 xhtml 规范,浏览器识别到,就会通过指定的规范去解析代码.
网页的标记 html
这是一对标签,结束标签使用 “/” 进行结束
告知浏览器网页的起始和结束位置
网页头部标记 head
网页头部标签中，用来配置当前文档相关的信息，如下：
titile标签：用来给网页文档设置一个标题。使用它设置标题后，可以提高 SEO(搜索引擎优化)
meta标签：元信息标签，可以用来配置字符编码、定向刷新、开发人员、校对人员、搜索关键字和描述信息。
这里通过 charsets 属性设置了字符编码，常见的字符编码如下：
万国码 utf-8(unicode编码拓展)
中文编码 GBK、GB2312、big5等
美国标准协会编码 ANSI
西欧编码 ISO8859-1
可以通过style添加样式
可以通过script添加和引入js代码
可以通过link标签引入外部的css样式和设置网页标题的图标（favicon在线制作：https://tool.lu/favicon/）
网页主体标记 body
所有给用户呈现的信息,都写在这里面
信息: 文字、图片、视频、音频等等所有能看到的都是信息

(3) 注释标签

添加注释的目的是为了帮助大家更好、更快速的去读取模块的功能,添加的注释不会呈现到页面上.

(4) HTML 属性

语法格式
注: 如果有多个 html 属性,中间请使用空格隔开
HTML 属性分类:
可选属性: 一些标签有,一些标签没有如: h1-h6 和 p 标签等具有 align 属性,但是像 span、div标签就不具备
必须属性: 在某些特定标签中,想要呈现效果必须有的属性如:img 标签的src 和 alt 属性,a 标签 href 属性
标准属性: 也叫全局属性,在 html 中所有标签都可以添加的属性,如: id 属性 lang 语言属性
事件属性: 用户通过某种条件触发效果如:onmouseover 鼠标悬停 onclick 点击

(5) HTML 中的标签

双标签:成对出现的标签,有开始标签,有结束标签

 标题标签  h1- h6
 给文本添加标题语义
 特点: 默认加粗、字体从 h1-h6 逐渐变小,独立占有一行
 属性: align  用来设置文本的水平对齐方式,属性值 默认是 left 左对齐、设置为 center 是居中对齐、设置 right  右对齐
 
 段落标签 p 
 用来给文本添加段落语义
 特点: 独占一行,有多少对p标签,就有几个段落
 属性:align  用来设置文本的水平对齐方式,
 属性值  默认是 left 左对齐,设置 center  居中对齐、设置 right 为右对齐

单标签: 只有一个标签,在标签内结束
图片标签 img

<img src="图片路径" width="图片的宽度" height="图片的高度" border="图片 的边框" title="文本提示信息" alt="图片加载失败的文字提示"/>

 路径的问题
 	(1) 绝对路径:文件所在的完整路径(一般情况下指的是带盘符的路径或者是网络资源路径)

file:///D:/厦门/素材/其他/1.jpg

	(2) 相对路径:  目标文件相对于源(当前) 文件所在的目录
	当前源文件和目标文件所在的文件夹在同一个目录下,直接进入这个文件夹引入文件
	当前源文件和目标文件在同一个目录下,直接引用即可:
	当前文件所在的文件夹和目标文件所在的文件夹,在同一个目录下;需要退出源文件的目录,然后进入到目录文件所在的目录,引用目标文件:

(6) HTMl 中的标签分类

容器级标签:容器级标签内部可以盛放任何标签和文本.如: div、 h1-h6 等
文本级标签:文本级标签内部只能盛放文本内容.如: 文字、图片、表单元素、span, 以及一些废弃标签等.
注意: h1-h6 标签之间不能互相嵌套;
p 标签不能嵌套 p 标签;
div 作为容器,可以嵌套任何标签,甚至包括它自己;
除了 p 以外,几乎所有具有独立有一行特点的元素,都可以看作是容器级标签

(7) HTML 语法

标签之间的空格、换行、缩进不敏感.存在的目的是为了提高代码的可读性.
注:对嵌套关系敏感.具有嵌套关系的元素,被嵌套的元素要进行缩进处理. 目的是为了便于开发者查看和修改.
空白折叠现象:文本之间的多个空格、换行、缩进,在浏览器中渲染,只会渲染一个空格,这个现象叫空白折叠现象.
标签元素必须写在一对尖括号中"". tag 是符合 W3C 标准的关键字.结束标签要有结束符 “/”;
html 中标签不区分大小写

四、a标签超链接的及锚点用法：

a标签的作用:

可以链接到外部的任意一个页面上
可以链接到本站中的任意一个页面
可以链接到当前页面或其它页面的指定部分（锚点）
锚点可以通过 a 标签的 name 或者 id属性进行设置，或者给其它标签设置 id 属性,需要关联的 a 标签通过 href 设置对应的锚点name 或 id值.
一个网站中有很多的页面，页面之间通过超链接进行跳转，超链接可以看做是网页的灵魂。
a 标签是一个双标签，有开始标记和结束标记 <a href="#">点我跳转</a>

a 标签的属性：

href 设置超链接的地址 #代表链接到当前页面或页面的某个位置
title 文本提示信息
rel 规定当前文档与被链接文档之间的关系
download 规定被下载的超链接目标
media 规定被链接文档是为何种媒介/设备优化的。
type 规定被链接文档的的 MIME 类型。
target 页面的打开方式属性值

_self 当前页面中打开新的页面（新页面覆盖当前页面）

_blank 在新的页面中打开（会创建一个新的窗口来打开新页面）

_parent 页面的父窗口或父框架中打开

_top 将页面在整个浏览器窗口打开

framename 在指定的框架中打开页面

五、其它标签介绍

(1) 废弃标签（了解）

font标签字体标签属性介绍

color 设置字体的颜色
size 设置字体的大小，属性值 1-7 1 是最小号 7 是最大号
face 设置字体

 <font size="5" color="blue" face="楷体">字体标签</font>

b 标签加粗标签
u 标签下划线标签
i 标签斜体字标签
s 标签删除线标签
center标签居中标签

(2) 强调标签

strong标签强调语气，加粗效果
em标签强调语气，斜体字效果
ins标签下划线效果
del标签删除线效果

(3) 辅助标签

sup/sub 上标/下标
br 换行标签
time :用来标记时间，具体的时间不需要datetime属性，非具体时间则需要使用datetime属性指明具体的时间
mark: 标记文档的细节
abbr 定义缩写
address 定义地址
iframe 内联框架
hr 水平线标签，属性如下
- width 设置水平线宽度
- size 设置水平线厚度，属性值是大于0的自然数即可
- align 设置水平线对齐方式，属性值 left水平居左 center默认水平居中 right水平居右
- color 设置水平线颜色

<hr width="600" size="10" color="red" align="left"/>

-code 修饰一掉段代码

<code>console.log("html其实很简单！");</code>

pre 原样输出；预格式化；多用来修饰多行代码

<pre>
        function fn(){
            console.log("html其实很简单！");
         }
     </pre>
     <pre>
         <font size='4'><strong>静夜思</strong></font>
         <em>唐 李白</em>
        床前明月光,
        疑是地上霜。
     </pre>

(4) 实体字符

描述：使用 & 开头，使用；结束的一些英文字母缩写，

常用的有如下几个：

&nbsp;  空格
&emsp;   全角空格
&copy;  版权符号
&yen;   人民币符号
&gt;  大于号
&lt;  小于号
&times;  叉号X

查看更多实体字符，请参考如下网址：https://www.w3school.com.cn/tags/html_ref_entities.html

(5) 拓展MDN

https://developer.mozilla.org/zh-CN/
marquee 滚动标签，属性如下：

behavior

设置如何在选取框内滚动文本。可能的值是scroll，slide和alternate。如果未指定任何值，则默认值为scroll。
bgcolor

通过颜色名称或十六进制值设置背景颜色。
direction

设置选框内滚动的方向。可能的值是left，right，up和down。如果未指定任何值，则默认值为left。
height

以像素或百分比值设置高度。
hspace

设置水平边距
loop

设置选取框滚动的次数。如果未指定任何值，则默认值为-1，这意味着选取框将连续滚动。
scrollamount

设置每个间隔的滚动量（以像素为单位）。预设值为6。
scrolldelay

设置每次滚动移动之间的间隔（以毫秒为单位）。默认值为85。请注意，任何小于60的值都将被忽略，除非truespeed指定，否则将使用值60 。
truespeed

默认情况下，scrolldelay小于60的值将被忽略。如果truespeed存在，则不会忽略这些值。
vspace

以像素或百分比值设置垂直边距。
width

设置宽度（以像素为单位）或百分比值。
onmouseove =“this.stop()”

设置鼠标悬停事件
onmouseout = “this.start()”

设置鼠标离开事件

<marquee width='400' height='200' hspace="180" vspace="200" behavior="alternate" bgcolor='pink' direction="up" loop="-1" onmouseover="this.stop();" onmouseout="this.start();"><center>滚动文本</center></marquee>

六、路径

（1）绝对路径：目标文件所在的完整路径（带盘符）

本地文件的绝对路径 D:\素材\其他\a.jpg

服务器的绝对路径：https://www.icketang.com/demo.jpg

(2) 相对路径：目标文件相对于引用文件所在的位置

/ 根目录（绝对路径）

./ 当前目录（相对路径）

…/ 退出当前目录（相对路径）

七、有序无序列表的介绍

（1）无序列表

描述: 无序列表就是没有顺序的列表
type 设置无序列表的项目符号类型，属性值有且只有三个：
- disc 默认。实心圆
- circle 空心圆
- square 实心方块

(2) 有序列表

描述: 按照指定的规则,进行先后顺序书写的列表叫做有序列表
type 设置有序列表的项目符号类型，属性值有且只有五个：
- 1 阿拉伯数字，1,2,3…
- a 小写英文字母，a,b,c…
- A 大写英文字母，A,B,C…
- i 小写罗马数字，i,ii,iii,iv…
- I 大写罗马数字，I,II,III…
start 设置有序列表的项目符号，从第几个开始进行排序，属性值只能是阿拉伯数字
reversed 设置有序列表的倒叙排列。这是一个布尔型属性，常见用法如下：

reversed

reversed = reversed

(3) 自定义列表

描述: 自定义列表其实描述的是总-分-总-分-总-分… 的关系,里面会有一些定义项信息,然后针对这些定义项展开描述
语法格式

<dl>
    <dt>定义项1</dt>
    <dd>描述项11</dd>
    <dd>描述项12</dd>
    <dd>描述项1N</dd>
    <dt>定义项m</dt>
    <dd>描述项m1</dd>
    <dd>描述项m2</dd>
    <dd>描述项mN</dd>
</dl>

特点: 定义项 dt 内容顶头,描述项 dd 默认具有缩进效果

(4) 列表之间的嵌套问题

ol 和 ul 中一般情况下,只建议嵌套 li 标签
dl 中一般只建议嵌套 dt 和 dd 标签,dt 和 dd 是同级关系
li 标签、dd 标签中可以像div 那样作为容器,嵌套任何标签,哪怕是它们的父元素(ol ul dl 都可以)

(5）关于有序、无序可以共用的css 样式

list-style-type 设置列表项目符号类型，属性值如下
- none 不设置任何项目符号类型
- disc 默认实心圆
- circle 设置为空心圆
- square 设置为实心方块
- decimal-leading-zero 呈现效果 01,02,03…
- decimal 呈现效果 1，2，3，4
- upper-alpha/lower-alpha 大小写英文字母
- upper-roman/lower-roman 大小写罗马数字
- lower-greek 小写希腊
list-style-images 设置列表项目符号为图片
llist-style-position 设置列表项目符号位置，默认是outside(外面的) 还可以设置为inside(里面的）
listy-style 上面所有属性的简写方式，一般用来清除列表项目符号

八、表格中属性的介绍

(1) 语义化标签

tabel 表格的语义化标签
tr 行语义化标签
td 单元格语义化标签
注:
1. 在一个页面中,有几对 table 标签,就代表这个页面中,有几个表格
2. 在一个表格中,有几对 tr 标签,就代表这个表格中,有几行.
3. 在一行中,有几对 td 标签,就达标这一行有几个单元格
4. 一般在表头、脚注部分,单元格使用 th 代替;th 这个单元格中的文字,默认加粗、水平居中效果;
5. 在表格中的内容,默认垂直居中效果
6. 在一个表格中,修改一个单元格的宽度时,会产生联动当前单元格所在列会整体发生改变;同理当修改单元格高度时,当前单元格所在行内的所有单元格也会跟着发生改变;
7. 表格有自动拓展的特点,当设置的表格宽度,不足以放下所有内容时,表格会自动撑大

(2) 划分区域的语义化标签

thead 表头
tfoot 脚注
tbody 主体部分
注:
1. 上面三个的书写顺序 thead > tfoot > tbody
2. 一个表格中,只能有一个 thead 和 tfoot,但是可以有多个 tbody
3. 浏览器渲染表格时,如果识别到 thead 和 tfoot,那么它们这两个部分,所占空间很小
4. 假设我们在书写表格代码时,不去添加 thead、tfoot 、 tbody ,浏览器在渲染时,会将表格中所有的内容使用 tbody 进行包裹.

(3) 给表格添加标题的方式

使用标题标签 h1-h6 给表格添加标题
使用 W3C 中规定的语义化标签 caption 给表格添加标题,caption 标签在使用时需要注意以下几点:
caption 标签的位置: 紧跟在 table 表格开始标签的后面
w3c 规定,一个表格中,只允许添加一个 caption 标签;但是浏览器会有差异性,如果不小心给了多个 caption 标签,在部分浏览器中也可以都呈现出来.

(4） table 表格中的属性

width/height 设置表的宽高
border 设置表格的边框，属性值是大于0 的数字,用来用来设置边框的厚度
bordercolor 设置表格的颜色
align 设置表格的水平对齐方式，属性值有 left center right
cellspacing 设置单元格与单元格边框之间的距离
cellpadding 设置单元格中内容距离边框的距离（俗称内填充距离）
bgcolor 设置背景颜色
background 设置背景图片
summary 表格隐藏信息，用来提高 SEO

(5) tr 中的属性

align 设置当前行中所有单元格内容的水平对齐方式，属性值有 left 、center 、right
valign 设置当前行中所有单元格内容的垂直对齐方式，属性值有 top 、middle 、 bottom
height 设置行高
bgcolor 设置背景颜色
background 设置背景图片

(6) td/th 中共有的属性

align 设置当前单元格内容的水平对齐方式，属性值 left 、center 、 right
valign 设置当前单元格内容的垂直对齐方式，属性值 top 、middle 、bottom
width/height 设置当前单元格的宽度和高度
colspan 设置列合并；同一行内相邻的左右单元格合并
rowspan 设置行合并；同一列内相邻的上下单元格合并
bgcolor 设置beijingyanse
background 设置背景图片

(7) 表格的css 属性

border-collapse:collapse; 边框折叠

(8) 表格中嵌套的内容

表格 table>tr>td 这是固定的嵌套,但是 td/th 标签可以像 div、li 标签那样,作为容器,嵌套任何内容和元素(不包括tr 和 td 本身)

九、表单

(1) 表单三剑客

表格中的控件有三个： 输入框 input 、文本域 textarea 、下拉列表 select

(2) 表单的概念

表单是用来收集用户数据,并将其提交给指定的服务器或页面
表单负责的其实就是一个采集的工作.

十、表单中的语义化标签

(1) form 表单的语义化标签

属性介绍:

action 属性用来指定数据提交的地址
target 属性用来指定，页面打开方式，属性值有 _self （当前页面打开）, _blank(新的页面打开）
method 属性用来指定数据的提交方式，属性值有两个： get 和 post ，区别如下:
（1） get 提交

地址栏：[file:///D:/ychh/第三课堂/20200317HTML第四天/demos/think.php?username=Jack&passid=123123&sex=0&lang=zh&lang=en]

地址栏分析：服务器地址+提交的数据，服务器地址和数据之间的使用?隔开；数据之间使用 & 符号链接
get 提交缺点：get提交所有的表单数据，都呈现在地址栏中，数据不安全。
get 提交的数据比较小，
get提交的链接可分享

（2） post 提交

地址栏：file:///D:/ychh/第三课堂/20200317HTML第四天/demos/think.php

地址栏分析：只有提交地址，可以保证数据的安全性
post 提交的好处：post 提交的数据量很大，几乎没有限制；
post 提交的链接不可分享

（2）input 输入框的语义化标签

通过设置不同的类型呈现出不同的页面效果，也就具有不同的功能
属性type 用来指定输入框的类型，它的值介绍如下：

html5 之前输入框的类型

type = text 设置文本输入框，默认就是文本输入框
type = password 设置密码输入框，密码输入框中输入内容时，呈现的是小圆点，保证安全性
- 属性有
- placeholder 用来设置输入框中的提示信息
- required 用来设置必填项，如果设置了此属性，在提交时输入框为空，那么表单将不能被提交
- redonly 只读：可以看但是不可以修改
  注：只读和禁用都不能操作输入框，但是只读的数据可以提交，禁用的数据不能被提交
- value 属性给输入框设置默认值
type =radio 设置单选框，默认渲染的样式为一个圆
type = checkbox 设置复选框（多选框），默认渲染的样式为一个正方形
- 注：想要实现单选的效果，必须设置 name 值一致。name 值，其实就是用来设置题干用的。设置后选项就知道自己属于哪个题干下面的选项了，同理多选也需要通过同样的方式设置题干。
- 布尔值属性:checkbox 可以设置默认被选中的选项；
- 单选框中设置多个checkbox 后面的覆盖前面的；
- 复选框设置多个 checkbox 默认设置的都被选中
type=image 图像域，添加一张图片；点击这个图片，可以提交表单
- 属性：
- width/height 设置图像域中图片的宽高
- src 通过这个属性指定图像的路径
- 注：图像域具有和 submit 同样的提交表单的功能
type = file 文件域可以添加文件
- 注：文件域在不同的浏览器中呈现不同的效果
- 布尔型属性： multiple 属性设置后可以选择多个文件
type = hidden 隐藏文件，内置表单提交时的附带数据
type = button 普通按钮；点击无效果
type = submit 提交按钮；点击后可以提交表单
type = reset 重置按钮，点击后清空输入框信息

html5 新增的输入框类型

type = search 搜索输入框；执行搜索的任务
- search 搜索选中时默认是蓝色边框线在样式中设置 outline:none; (代表取消外轮廓线）
type = email 邮箱；具有自动验证的功能，含有 @ 符号
type = url ；具有自动验证的功能，以 http:// 或者 https:// 开头
type = color 颜色域
type = range 滚动条
type = progress 进度条
type = number 数字
- 属性
- step 设置数字每次变化的值
- max 最大的数字
- min 最小的数字
type = date 日期：年月日
- 属性:
- max 设置最近的时间
- min 设置最远的时间
type = month 日期：年月
type = week 日期：年周
type = time 时间：时:分
type=datetime-local 日期和时间
type = tel 电话号码
- 属性
- maxlength 设置最大长度
- size 设置输入框在页面上呈现的汉字字符个数，书写长度不限制

(3) textarea 多行文本输入框;文本域

属性

cols 设置输入框的列宽
rows 设置输入框的行高

(4) select 下拉列表

固定用法 select>option * n
属性:

multiple 设置多选
size 设置下拉列表在页面上呈现的选项的数量
selected 布尔型属性;设置默认被选中的选项

(5) label 标签

用来和表单控件进行关联,获取焦点用,关联方式有两种:

label 标签中的for 属性和关联的控件的id属性设置为同样的属性值

<!-- 第一种方式 -->
<input type="radio" name="sex" id="male" checked="checked">
<label for="male"></label>
<!-- 第二种方式 -->
<tr>
    <td align="right"><label for="username">姓名:</label></td>
    <td><input type="text" placeholder="请输入您的姓名" id="username"></td>
</tr>

label 标签直接包裹控件,自动关联

<label>
    <input type="checkbox" name="lan">国语
</label>

(6) 控件和表单 form 的关联方式

form 标签将所有的表单控件进行包裹,包裹过控件自动关联当前表单
如果控件在form 标签外,利用控件的 form 属性设置属性值和要关联的表单 form 的 id 属性值一致

十、 HTMl5 简介

(1) 概述

HTML5 是 HTML 标准的最新演进版本.这个术语代表了两个不同的概念:
① 它是一个新的 HTML 语言版本包含了新的元素,属性和行为(html、css、js)
② 同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术

语义: 能够让你更恰当的描述你的内容是什么.(seo优化,搜索引擎)
连通性:能够让你和服务器之间通过创新的新技术方法进行通信
离线 & 存储:能够让网页在客户端本地存储数据以及更高效的离线运行.(localStorage、sessionStorage、websql)
多媒体:使video 和 audio 成为了在所有 Web 中的一等公民(视频和音频 flash)
2D/3D 绘图 & 效果: 提供了一个更加分化范围的呈现选择
性能 & 集成:提供了非常显著的性能优化和更有效的计算机硬件使用
设备访问 Device Access:能够处理各种输入和输出设备
样式设计:让作者们来创作更加复杂的主题
HTML5 的改变,涵盖了 CSS3 和 JS 的一些新特性,这些东西统称 HTML5 技术

(2) 兼容性

官方 HTML5 浏览器性能评分: http://html5test.com/
满分555分，1个特性就是1分，一共555个新特性。
哆啦A梦测试,这是测试 CSS3 的
http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/
所以 CSS3 现在已经在手机网页上应用了,但是电脑页面上还不敢大范围使用

(3) html5 骨架

HTML 5 的 doctype 非常简单.表明你的 HTML 内容使用 HTML5,只需要简单的使用;

DTD(文档类型声明头). 需要注意的是,现在的 HTML5 没有 XHTML 系列了
这样做会让目前还不支持的 HTML5 的浏览器采用标准模式解析,这意味着他们会解析那些 HTML5 中兼容的旧的 HTML的标签部分,而忽略他们不支持HTML5的新特性

在一个页面上做的第一件事通常是声明使用的字符集,在以前版本的 HTML,他是一个非常复杂的元素,现在变得非常简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

(4) HTML5新的语言特性

所有自封闭标签,现在不写反斜杠合法
所有的 type 都不用写了
标签名大小写都合法
现在不写引号合法

(5) HTML5 语义化标签

HTML 就是负责页面语义的,HTML4.01 中, div 负责的任务太多,具体的语义没有拆分
HTML5 中,就是把 div 拆分为了更多的标签
<section>,<article>,<nav>,<header>,<footer>,<aside>

这些标签都和 div 一样,是容器级标签,可以互相嵌套,放什么都行,放自己也行. 都是block-level,标准流中是块级元素
以前的语义化标签: ul,dl,ol,table,p,h,span,a,img,em,u,b,i等等. HTML5 增加了一堆语义化标签.
figure 和 figcaption (一般用于图片介绍)
time
mark
details 和 summary
<details> 标签用于描述文档或文档某个部分的细节,<summary> 元素包含 details 元素的标题
<details> 元素用于描述有关文档或文档片段的更多详情

(6) HTML5 中的特性

form 标签不一定包裹所有控件
控件可以放在 form 的外面,用 form 属性指定我自己是哪个 form 的控件;
label 现在不用 label for 了
label 包裹单选按钮、复选框、就表示是自己的 label
新的 input 输入元素
搜索框: search
输入手机号码: tel
输入 URL:
输入电子邮箱: email
输入数字: number,min,max

(7) 新的 input 控件

拖拽条: range
颜色: color
日期控件(也可以选择第几个星期: week) date
placeholder 属性
提示文本,占位符号.place 就是位置的意思,holder 持有人
autofocus 属性自动获取焦点
required 属性
表示必填,不能为空.required 表示需要的,必须的.当 submit 的时候,会进行必填验证
datalist 智能感应
任何的文本框都可以用 list 属性和一个 datalist 标签产生绑定,表示智能感应;

(8) HTMl5 video 标签

HTML5 中,现在不需要借助 Flash 了,直接用 video 标签即可
支持的格式是 mp4 格式
属性值:
controls 显示控件
autoplay 自动播放
loop 自动循环
video 标签内部,可以用 source 标签

(9) HTML5 的 audio标签

HTML4.01 要插入音频,同样的,要借助酷狗、qq音乐、酷我音乐盒,都能提供免费的页面插入音乐的功能.本质上是借助 Flash
HTML5 要插入音频就是用 audio 标签.支持的格式是 ogg 和 mp3
属性值: autoplay,controls,loop
autoplay 表示自动播放.如果不写 controls ,页面上不会显示任何控件,相当于页面的背景音乐
同样的,audio 里面也可以罗列source