浅谈HTML5+css3新标签和特性
HTML5新标签与特性
什么是H5
-
H5并不是新的语言，而是html语言的第五次重大修改–版本
-
支持：所有的主流浏览器都支持h5.（chrome,firefox,safari。。。）。IE9及以上支持h5(有选择的支持，并不会全部支持),但是ie8及以下不支持h5.
-
改变了用户与文档的交互方式：多媒体：video audio canvas
-
增加了其它的新特性：语义特性，本地存储特性，网页多媒体，二维三维，特效（过渡，动画）
-
相对于h4:
1.进步：抛弃了一些不合理不常用的标记和属性
2.新增了一些标记和属性–表单
3.从代码角度而言，h5的网页结构代码更简洁。
文档类型设定
- document
- HTML: sublime 输入 html:4s
- XHTML: sublime 输入 html:xt
- HTML5 sublime 输入 html:5
字符设定
- ：HTML与XHTML中建议这样去写
- ：HTML5的标签中建议这样去写
常用新标签
w3c 手册中文官网 : http://w3school.com.cn/
-
header：定义文档的页眉 头部
-
nav：定义导航链接的部分
-
footer：定义文档或节的页脚 底部
-
article：定义文章。
-
section：定义文档中的节（section、区段）
-
aside：定义其所处内容之外的内容 侧边
<header> 语义 :定义页面的头部 页眉header> <nav> 语义 :定义导航栏 nav> <footer> 语义: 定义 页面底部 页脚footer> <article> 语义: 定义文章article> <section> 语义： 定义区域section> <aside> 语义： 定义其所处内容之外的内容 侧边aside>
-
datalist 标签定义选项列表。请与 input 元素配合使用该元素
<input type="text" value="请输入明星" list="star"/> <datalist id="star"> <option value="刘德华">刘德华option> <option value="刘若英">刘若英option> <option value="刘晓庆">刘晓庆option> <option value="戚薇">戚薇option> <option value="戚继光">戚继光option> datalist>
-
fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用
新增的input type属性值：
| 类型 | 使用示例 | 含义 |
|---|---|---|
|
输入邮箱格式 | |
| tel | |
输入手机号码格式 |
| url | |
输入url格式 |
| number | |
输入数字格式 |
| search | |
搜索框（体现语义化） |
| range | |
自由拖动滑块 |
| time | |
小时分钟 |
| date | |
年月日 |
| datetime | |
时间 |
| month | |
月年 |
| week | |
星期 年 |
常用新属性
| 属性 | 用法 | 含义 |
|---|---|---|
| placeholder | |
占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回 |
| autofocus | |
规定当页面加载时 input 元素应该自动获得焦点 |
| multiple | |
多文件上传 |
| autocomplete | |
规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字 |
| required | |
必填项 内容不能为空 |
| accesskey | |
规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式 |
综合案例
<form action="">
<fieldset>
<legend>学生档案legend>
<label for="userName">姓名:label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
<label for="userPhone">手机号码:label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">邮箱地址:label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所属学院:label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="前端与移动开发学院">option>
<option value="java学院">option>
<option value="c++学院">option>
datalist><br>
<label for="score">入学成绩:label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<form action="">
<fieldset>
<legend>学生档案思密达legend>
<label>姓名: <input type="text" placeholder="请输入学生名字"/>label> <br /><br />
<label>手机号: <input type="tel" />label> <br /><br />
<label>邮箱: <input type="email" />label> <br /><br />
<label>所属学院: <input type="text" placeholder="请选择学院" list="xueyuan"/>
<datalist id="xueyuan">
<option>java学院option>
<option>前端学院option>
<option>php学院option>
<option>设计学院option>
datalist>
<br /><br />
<label>出生日期: <input type="date" />label> <br /><br />
<label>成绩: <input type="number" />label> <br /><br />
<label>毕业时间: <input type="date" />label> <br /><br />
<input type="submit" /> <input type="reset" />
fieldset>
form>
<label for="inTime">入学日期:label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">毕业日期:label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
fieldset>
form>
多媒体标签
- embed：标签定义嵌入的内容
- audio：播放音频
- video：播放视频
多媒体 embed（会使用）
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多媒体。
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash">embed>
多媒体 audio
HTML5通过标签来解决音频播放的问题。
并且可以通过附加属性可以更友好控制音频的播放，如：
-
autoplay 自动播放
-
controls 是否显不默认播放控件
-
loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环
多媒体 video
-
autoplay 自动播放
-
controls 是否显示默认播放控件
-
loop 循环播放
-
width 设置播放窗口宽度
-
height 设置播放窗口的高度
CSS3 新增选择器
结构(位置)伪类选择器（CSS3)
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式 -
li:first-child { /* 选择第一个孩子 */
color: pink;
}
li:last-child { /* 最后一个孩子 */
color: purple;
}
li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue;
}
属性选择器
选取标签带有某些特殊属性的选择器 我们成为属性选择器
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
<div class="font12">属性选择器div>
<div class="font12">属性选择器div>
<div class="font24">属性选择器div>
<div class="font24">属性选择器div>
<div class="font24">属性选择器div>
<div class="24font">属性选择器123div>
<div class="sub-footer">属性选择器footerdiv>
<div class="jd-footer">属性选择器footerdiv>
<div class="news-tao-nav">属性选择器div>
<div class="news-tao-header">属性选择器div>
<div class="tao-header">属性选择器div>
伪元素选择器（CSS3)
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line 文本第一行；
- E::selection 可改变选中文本的样式；
p::first-letter {
font-size: 20px;
color: hotpink;
}
/* 首行特殊样式 */
p::first-line {
color: skyblue;
}
p::selection {
/* font-size: 50px; */
color: orange;
}
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
div::befor {
content:"开始";
}
div::after {
content:"结束";
}
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
“:” 与 “::” 区别在于区分伪类和伪元素
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查
注意
伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
CSS3盒模型
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。
div:first-child {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: content-box; /* 就是以前的标准盒模型 w3c */
padding: 10px;
border: 15px solid red;
/* 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box; /* padding border 不撑开盒子 */
border: 15px solid red;
/* margin: 10px; */
/* 盒子大小为 width 就是说 padding 和 border 是包含到width里面的 */
}
一个使用字体图标的案例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hrstq9');
src: url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hrstq9') format('truetype'),
url('fonts/icomoon.woff?hrstq9') format('woff'),
url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
div {
width: 200px;
height: 30px;
border: 1px solid #ccc;
margin: 100px auto;
font-family: "icomoon";
position: relative;
}
div::before { /*是一个能插入元素的选择器*/
content: "\ea51";
position: absolute;
right: 10px;
top: 5px;
}
div:hover {
border: 1px solid red;
}
div:hover::before {
color: red;
}
style>
head>
<body>
<div>
div>
body>
html>
效果如下所示：
鼠标经过前：
鼠标经过后：
