基础知识的总结
问答
前端页面的三个组成部分
- 结构 HTML 表现 CSS 行为 JavaScript
相关的快捷键介绍
- Ctrl + A 全选
- Ctrl + C 复制
- Ctrl + X 剪切
- Ctrl + V 粘贴
- Ctrl + Z 撤销
- Ctrl + W 关闭当前文件
- Ctrl + O 打开
- Ctrl + N 新建
- Ctrl + P 打印
文件后缀
- 文本文件 .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) 实体字符
描述:使用 & 开头, 使用 ;结束的一些英文字母缩写,
常用的有如下几个:
空格
  全角空格
© 版权符号
¥ 人民币符号
> 大于号
< 小于号
× 叉号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