HTML5=HTML+CSS3+Javascript+API
一、H5新增标签
(块状元素) 有意义的div
<article>标记定义一篇文章
<header>标记定义一个页面或一个区域的头部
<nav>标记定义导航链接
<section>标记定义一个区域
<aside>标记定义页面内容部分的侧边栏
<hgroup>标记定义文件中一个区块的相关信息
<figure>标记定义一组媒体内容以及它们的标题
<dialog>标记定义一个对话框(会话框)类似微信
<progress>进度条标签
<details> 标记定义一个元素的详细内容 ，配合dt、dd
<datalist> 为input标记定义一个下拉列表,配合option
<menu>命令列表
二、视频与音频
1、视频（video）
HTML5支持的视频格式：
Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件支持的浏览器:F、C、O
MPEG4=带有H.264视频编码+AAC音频编码的MPEG4文件支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式支持的浏览器: I、F、C、O
属性：autoplay视频打开之后自动播放
loop:视频循环播放
muted:视频静音
poster(图片) 视频第一个页面
preload="auto/metadata/none"视频是否加载完再播放
使用方法：
<video src="文件地址" controls="controls"></video>
< video src="文件地址" controls="controls">
您的浏览器暂不支持video标签。播放视频
</ video >
< video controls="controls" width="300“ >
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >
2、音频（audio）
HTML5支持的音频格式：
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
使用方法与video相同
三、表单
HTML5中为了方便排版，可以使form中的表单标签脱离form的嵌套。
方法:form指定ID，所有表单标签均添加form=id属性
<form action="" method="post" id="register" >
</form>
<input type="text" name="user" form="register" />
<select name="year" form="register" >
<option value="1999"></option>
</select>
<textarea name="ext" form="register" ></textarea>
<button type="submit" form="register" >提交</button>
Type="email"限制用户输入必须为Email类型
Type="url"限制用户输入必须为URL类型
Type="date"限制用户输入必须为日期类型
Type="time"限制用户输入必须为时间类型 O
Type="month"限制用户输入必须为月类型O
Type="week"限制用户输入必须为周类型O
Type="number"限制用户输入必须为数字类型
Type="range"产生一个滑动条的表单
Type="search"产生一个搜索意义的表单 配合results="n"属性 C
Type="color"生成一个颜色选择表单
autocomplete自动完成功能(autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。)
autofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
placeholder表单的提示信息，存在默认值将不显示
<head lang="en">
<meta charset="UTF-8">
<style>
p:empty{
height:20px;
background: yellow;
}
</style>
</head>
<body>
<form action="" id="inform"></form>
<input type="text" form="inform" required autofocus placeholder="请输入信息" name="username"/>
<input type="submit" form="inform"/>
<p>邮箱：<input type="email" form="inform" required/></p>
<p>网站：<input type="url" form="inform" required/></p>
<p>日期：<input type="date" form="inform"/></p>
<p>月份：<input type="month" form="inform"/></p>
<p>周：<input type="week" form="inform"/></p>
<p>数字：<input type="number" form="inform"/></p>
<p>滑动条：<input type="range" form="inform"/></p>
<p>搜索：<input type="search" form="inform"/></p>
<p>颜色：<input type="color" form="inform"/></p>
<p> 颜色：<input id="myCar" list="color" />
<datalist id="color">
<option value="red">
<option value="green">
<option value="blue">
</datalist>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi in labore libero mollitia, nihil quasi vero! Animi beatae consequuntur esse in, iste neque nesciunt officia, officiis provident, recusandae vero voluptates.</p>
<p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda corporis dolor dolores, dolorum eaque illum ipsam iusto laboriosam molestiae natus, pariatur porro quod voluptas! Eum modi quia repudiandae sit veritatis?</p>
</body>
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
注册表
<fieldset>
<legend>用户登录</legend>
<p>用户名：<input type="text"/></p>
<p>密码：<input type="text"/></p>
<p>性别：<input type="text"/></p>
<p>爱好：<input type="text"/></p>
</fieldset>
三、CSS3新增选择器
关系选择器
伪类选择器
结构性伪类选择器
UI元素状态伪类选择器
属性选择器
百度文库文件下载类型选择
<style>
a{
text-decoration: none;
color:#5783c2;
}
a[href$=".doc"]::before{
content:url(img/word.jpg);
}
a[href$=".txt"]::before{
content:url(img/txt.jpg);
}
a[href$=".ppt"]::before{
content:url(img/ppt.jpg);
}
</style>
<body>
<p><a href="aa.ppt">演讲稿写作格式及范例</a></p>
<p><a href="aa.doc">演讲稿的基本写作方法</a></p>
<p><a href="aa.ppt">演讲稿的写作课件</a></p>
<p><a href="aa.doc">演讲的系统分析</a></p>
<p><a href="aa.txt">秘书公文写作知识：演讲稿...</a></p>
</body>
伪对象选择器
<style>
p::first-line{color:red}
p::first-letter{color:green;font-size:25px}
a::before{content:url(qvod.jpg)}
a::after{content:url(qvod.jpg)}
span::selection{background:#F0F}
</style>
四、CSS3
1、边框
border-radius圆角边框
使用方法与padding一致
2、阴影
box-shadow盒子的阴影
box-shadow:h-shadow v-shadow blur spread color inset
阴影：水平阴影距离 垂直阴影距离 模糊距离 模糊大小 颜色 外阴影
text-shadow文本阴影
用法与盒子阴影用法一致
3、边界
border-image边界图片
border-image: source slice width outset repeat;
边界图片：图片路径 向内偏移 边界宽度 边框外部 repeat;
repeat:round(平铺)strech(拉伸)
4、多层背景设置
background：url(图片地址1) no-repeat left,
url(图片地址21) no-repeat left;
每层背景用逗号隔开
5、背景图片大小调整
background-size：length（定义宽和高）|percentage（百分比）|cover（最大程度放大）|contain（最小大程度放大）;
与background一一对应使用，用逗号隔开
6、背景图片的定位
background-origin规定背景图片的定位区域
background-origin：padding-box（背景图像填充框的相对位置）
border-box(背景图像边界框的相对位置)
content-box(背景图像的相对位置的内容框)
7、指定背景绘制区域
background-clip属性指定背景绘制区域
background-clip：border-box|padding-box|content-box;
8、背景图像滚动
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment:scroll背景图片随页面的其余部分滚动。这是默认
fixed背景图像是固定的
inherit指定设置应该从父元素继承
local背景图片随滚动元素滚动
9、渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background: linear-gradient(direction, color1,color2);
从上到下： background: linear-gradient(red, blue);
从左到右：background: linear-gradient(to right, red , blue);
对角:background: linear-gradient(to bottom right,red,blue);
角度:background: linear-gradient(angle, color1, color2); /*angle:90deg*/
径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(center, shape size, start-color, ..., last-color);
background: radial-gradient(red, green, blue);
颜色结点不均匀分布:background: radial-gradient(red 5%, green 15%, blue 60%);
设置形状:background: radial-gradient(circle, red, yellow, green);
1299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
