Html5介绍:
Html -----xhtml版本---w3c和whatwg(web应用技术工作组) ----html5
Html5广义 =html5+css3+javascript+api
Html5的特点:
代码更加简洁,标签具有语义化,新增了一些属性,代码更加的宽松。
Html5的发展史:
2004提出构想-----2008模拟第一份草案-----2012推广html5-----2020年正式的版本
当今的html5处于推广阶段,各个浏览器存在兼容性。
Ie9版本以上支持html5。
Html5的基本结构:
<!doctype html>
<html>
<head>
<meta charset=”UTF-8”>
<title>网站的标题</title>
</head>
<body>
</body>
</html>
Html5语法更加的宽松。
<meta …. /> 三种写法在html5中:
1.<meta charset=”UTF-8”>
2.<meta charset=”UTF-8” />
3.<meta charset=”UTF-8”></meta> (html可以把所有的标签都看成是双标签)
向下兼容----比html5版本低的版本语法都支持。
html5新增的标签:
<header> 网页文档的一个区域---网页的头部
<nav>代表网页的导航---链接的哪行文本
<section> 代表网页的一个块---div相似
<article> 网页中的文章内容
<aside> 网页文档的侧边栏
<footer>代表网页的页脚---版权
之前的xhtml结构是:
<div class=”header”></div>
<div class=”nav”></div>
<div class=”section”>
<div class=”section_left”></div>
<div class=”section_right”></div>
</div>
<div class=”footer”></div>
html的结构:
<header></header>
<nav></nav>
<section>
<article></article>
<aside></aside>
</section>
<footer></footer>
html、xhtml和html5的区别:
html:超文本标记语言 (Hyper Text Markup Language)
xhtml:可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严
html5:最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言,随后和W3C的xhtml2.0(标准)相结合,产生现在最新一代的超文本标记语言。可以简单点理解成:h5≈ HTML+CSS3+js+API。
html5新增的标签的属性值:
placeholder=”内容” 输入框的提示信息
aequired=”required” 必填项
qutofocus=”autofocus” 自动获取焦点---光标自动定位到输入框中
html5新增的表单type属性值:
视频:
.ogg .mp4 .webm
格式
1.<video src=”视频的路径” autoplay=”autoplay” controls>
2.<video autoplay=”autoplay” controls >
<source src=”XX.mp4” >
<source src=”XX.ogg” >
<source src=”XX.webm” >
</video>
音频:
.ogg mp3 wav
格式:
1.<audio src=”声音文件路径” autoplay=”autoplay” controls>
2.<audio autoplay=”autoplay” controls >
<source src=”XX.mp4” >
<source src=”XX.ogg” >
<source src=”XX.webm” >
</audio>
CSS3介绍:
css2+新语法,对css2进行扩充 删减 优化
CSS3中新增的选择器:
属性选择器:
E—element元素 data—属性
<标签 属性=”属性值” ></标签>—html元素
伪类结构:
E---element元素
伪元素:
设置文本的阴影:
text-shadow:水平 垂直 模糊强调 颜色;
水平: 正值:右侧 负值:左侧
垂直: 正值:下 负值:上
可以有多组值,之间用逗号相隔。
设置盒子的阴影:
box-shadow:水平 垂直 模糊强度 模糊尺寸 颜色 内外阴影inset;默认是外阴影但是如果是外阴影不加outset。
如果有多组值中间用逗号相隔
水平:正值是右侧,负值是左侧。
垂直:正值是下面,负值是上面。
盒子变成圆角:
border-radius:左上 右上 右下 左下
设置半透明颜色:
color:rgba(255,0,0,0.3)
background:rgba(0,0,0,0.6)
背景图片的尺寸:
background-size:宽度 高度;例如:background-size: 400px 500px;
background-size:cover;背景图片会把整个盒子(宽度和高度)都用背景覆盖上
background-size:contain;背景图片会把盒子的宽度或高度覆盖就停止