Html5和CSS3补充_html email一种将表示样式应用的标记的系统-CSDN博客

本文链接：https://blog.csdn.net/wang544831183/article/details/76527636

Html5介绍

H tml -----xhtml版本---w3c和whatwg（web应用技术工作组） ----html5

H tml5广义 =html5+css3+javascript+api

代码更加简洁、标签具有语义化、新增了一些属性、代码更加的宽松

Html5的发展史

2004提出构想-----2008模拟第一份草案-----2012 推广 html5-----2020年正式的版本

当今的html5处于推广阶段----各个浏览器存在兼容性，可以容纳

那些浏览器支持html5

I e9版本以上支持html5，其他浏览器基本都支持。

Html5的结构

<!doctype html>

<html>

<head>

<title>网站的标题</title>

</head>

<body>

</body>

</html>

H tml5语法更加的宽松---

1 <meta charset= ” UTF-8 ” >

2<meta charset= ” UTF-8 ” />

3<meta charset= ” UTF-8 ” ></meta> html5可以把所有的标签都看成是双标签

向下兼容----比html5版本低的版本语法都支持

Html5新增的标签

<header> 网页文档的一个区域---网页的头部

<nav>代表网页的导航---链接的哪行文本

<section> 代表网页的一个块---div相似

<article> 网页中的文章内容

<aside> 网页文档的测边栏

<footer>代表网页的页脚---版权

之前的xhtml结构是

</div>

H tml5的结构

Html5新增的type属性值

P laceholder= ” 内容 ” 输入框的默认提示信息

R equired= ” required ” 必填项(不填无法提交网页)

A utofocus= ” autofocus ” 自动获取焦点---光标自动定位到输入框中

Html5新增的表单属性

email	限定用户输入的必须是email类型
url	限定用户输入的必须是URL类型（网络地址）
D ate	限定用户输入的必须是日期类型
month	限定用户输入的必须是月类型
time	限定用户输入的必须是时间类型
W eek	限定用户输入的必须是周类型
N umber	限定用户输入的必须是数字类型
S earch	用户输入的必须是一个搜索框
C olor	产生一个颜色选项
Range	产生一个滑块

http://www.w3school.com.cn/ 去查找一些内容

视频和音频

格式

1<video src= ” 视频的路径 ” autoplay= ” autoplay ” controls>

2<video autoplay= ” autoplay ” controls >

</video>

格式：

1<audio src= ” 声音文件路径 ” autoplay= ” autoplay ” controls>

2<audio autoplay= ” autoplay ” controls >

</ audio >

Css3

C ss2+新语法！对css2进行扩充删减优化

选择器

类选择器 id选择器标签选择器

属性选择器

E---element元素 data -----属性

<标签属性= ” 属性值 ” ></标签> ----html元素

E[data]	选择带有data属性的元素对象，给该元素对象加样式
E[data= ” one ” ]	选择带有data属性的元素对象，并且属性值等于one的加样式
E[data^= ” o ” ]	选择器带有data属性的元素对象，并且属性值以o开头的 ^开头
E[data$= ” e ” ]	选择器带有data属性的元素对象，并且属性值以e结尾的 $结尾
E[data*= ” n ” ]	择器带有data属性的元素对象，并且属性值包含 n，*包含

伪类结构

E---element元素

E:first-child{ }	第一个孩子
E:last-child{ }	最后一个孩子
E:only-child{ }	只有一个孩子
E:nth-child(n){ }	第n个孩子 n=1 2 3 4 5 … li:nth-child(3){ }
E:nth-child(2n+1) E:nth-child(odd)	获得奇数孩子，n=1 3 5 7 …
E:nth-child(2n){ } E:nth-child(even){ }	获得偶数孩子 n=2 4 6 8

伪元素

E:first-letter	设置第一个文字
E:first-line	第一行文字
E::after	在盒子的里面的最后面插入内容
E::before	在盒子的里面的最前面插入内容