HTML5

VS Code工具的使用

下载

vs code的下载----直接去官方下载即可；https://code.visualstudio.com/

设置颜色和字体

安装插件

HTML

HTML5是什么

HTML5是万维网的核心语言，标准通用的标记语言的下一个应用超文本标记语言（html） 的第五次重大修改；最新的HTML语言；具有新的标签元素和属性行为

• html—超文本标记语言；他可以大小写不区分；对浏览器的兼容性不好；
• xhtml— 更加严格的html ；他必须使用小写； 并且对浏览更好的兼容性；
• html5— 就是html 的第5次修改；有了更多的功能和标签；

扩展内容

• 语义化标签
• 本地存储
• 兼容特征
• 2D、3D
• 动画、过渡
• CSS3特征
• 性能和集成

现状

• 绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性
• 总的来说：HTML5 已经是大势所趋

语义标签

什么是语义化

其实就是通过标签就知道他是用来干嘛的

新增语义化标签

• header 头部标签
• nav 导航标签
• article 内容标签
• section 块级标签
• aside 侧边栏标签
• footer 尾部标签
  
  

多媒体标签

• 音频 — audio
• 视频 — video

audio 标签

标签说明

• 可以在不使用插件的情况下，也能够原生的支持音频格式文件的播放
• 但是，播放格式是有限的

支持格式

• 目前支持三种格式：MP3 WAV OGG
• 根据浏览器支持也不一样

参数

video 标签

支持格式

• – 目前支持三种格式 MP4 WebM Ogg:

参数

总结

• 音频标签和视频标签的使用基本一致
• 多媒体标签在不同浏览器下情况不同，存在兼容性问题
• 谷歌浏览器把音频和视频的自动播放都禁止了
• 谷歌浏览器中视频加muted标签可以自动播放，但是音频不行

表单标签

表单元素

表单属性

CSS3

简介

• CSS 用于控制网页的样式和布局。
• CSS3 是最新的 CSS 标准
• 一些老式浏览器并不支持，主要还是使用 CSS2

区别

• CSS3 是 CSS2 的升级版本，在 CSS2 的基础上增加了一些新的属性；
• CSS2 推荐的是一套内容和表现效果分离的方式，CSS3 语言开发的是朝着模块化发展的

主要内容

• CSS3 属性选择器
• CSS3 结构伪类选择器
• CSS3 伪元素选择器
• CSS3 的 2D 转换
• CSS3 动画
• CSS3 的 3D 转换
• 浏览器私有前缀

属性选择器

子元素可以继承父元素的的样式
基本选择器

• 通用选择器 *{} 0.5
• 标签选择器 p{} 1
• 类选择器 .class{} 10
• ID选择器 #id{} 100

组合选择器

• 多元素选择器 div,p{}
• 后代选择器 div p{}
• 子选择器 div>p{}
• 相邻兄弟选择器 div+p{}
• 普通兄弟选择器 div~p{}

不管是相邻兄弟选择器还是普通兄弟选择器都只能匹配到后面的兄弟

属性选择器(id表示属性值)

• 存在选择器 p[id]{}
• 相等选择器 p[id=value]{}
• 包含选择器 p[id~=value]{} 指的是多个属性值的情况 例:name=“na name password”;
• 连字符选择器 p[id|=value]{} 匹配属性值 1.等于value 2.等于value-的形式 3.属性多值时必须全部等于
• 前缀选择器 p[id^=value]{} 多值时必须是第一个值前缀才能被匹配
• 子串选择器 p[id*=value]{}
• 后缀选择器 p[id$=value]{}

结构伪类选择器