HTML5新特性与CSS基础
2017-07-11 17:19
543 查看
一.HTML5特性
1.<video>,<audio>
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="xxx.mp3" type="audio/mpeg"></source>
</audio>
<video width="800" height="" controls="controls" autoplay="autoplay">
<source src="mmm.mp4" type="video/mp4"></source>
</video>
autoplay:自动播放
loop:循环播放
视频:type:video/mp4 video/ogg
音频:type:audio/ogg audio/mpeg
controls=”controls” 控制组件
2.<input>
a) Email: <input type="email" name="" id="" value="" />在form表单下自动校验。
b) date: <input type="date" step="1" min="2015-02-01" max="2017-07-11"/> min为最小值,max为最大值,step为每次的跨度。
c) time: <input type="time" name="" id="" value="" />
d) datetime: <input type="datetime" name="" id="" value="" />
e) datetime-local:<input type="datetime-local" name="" id="" value="" />
f) month: <input type="month" name="" id="" value="" />
g) week: <input type="week" name="" id="" value="" />
h) file: <input type="file" name="" id="" value="" />
i) hidden:<input type="hidden" name="" id="" value="" />(用户看不到,传递 value中指定的值)
j) image: <input type="image" src="img/1.jpg" width="50" height="50" name="" id="" value="" /> 使用image做按钮时,后台传值会额外传
出x,y的值,即点击时的横纵坐标,有一些项目接收方会进行MD5 校验,传递参数过多不能通过校验,如支付宝。
k) number:<input type="number" step="2" min="2" max="100" id="" value="" />输
入值只能为数字,min为最小值,max为最大值,step为每次的跨度。
l) range: <input type="range" min="2" max="8" id="" value="" /> 随机数,min
为最小值,max为最大值,step为每次的跨度。
m) <input type="reset" name="" id="" value="重置" />为充值按钮,重置当前表单内的内容。
Input标签中的一些共有属性:
(I).required属性,required=”required”,意为必填项。
(II).maxlength属性,可以设置输入的最大长度。
(III).placeholder属性,可以设置提示信息(输入内容后,这个提 示信息不存在)。
4.问号传参:浏览器中地址栏的最后“?”后接的是前后台传递的参数,传 递的是name=value 的形式。
二.CSS
在选择更改指定元素的样式时,有以下四种选择器可选:
(1)标签选择器,如body{}
(2)#id选择器,使用#id{}的形式;
(3)class选择器,使用.class{}的形式。
(4)拓展选择器:
a.关联选择器,主要用于想要单独修改某个标签内的某个元素的 样式,如:
<style type="text/css">
p{
color: red;
}
div p{
color:yellow;
}
</style>
<div><p>uuuuuuuuuuuuuuuuu</p></div>
<p>iiiiiiiiiiiiiiiii</p>
效果如下:
b.组合选择器,多个选择器一起使用,中间用“,”分隔,如: #span1,p,.div{}
c.伪元素选择器,元素有4种状态,link初始状态,visited 点击后的 状态,hover鼠标悬停状态,active鼠标点击状 态,语法格式如:
a:link{} a:visited{} a:hover{} a:active{} 这里a为 超链接标签,也可以 换成其他标签名,如div:link{} 等。
d.属性选择器,通过[属性名]:找到有相应属性名的标签,然后 设置样式如:
[href]{
color: red;
font-size: 50pt;
}
也可以指定属性值为特定值的标签进行修改,如:
[href="###"]{
color: red;
font-size: 50pt;
}
若在等号左端加“^”则表示包含某些值,如:
[href^="#"]{
color: red;
font-size: 50pt;
}
上例表示选择所有拥有href属性且href中包含#的元素。
1.html与css的结合方式:
i. 在标签内,加属性style=“”,引号内添加要修改的样式,如:
<div style="color: gold;size: 8;border: 3px solid navy;width: 200px;height: 100px;">
CSS样式第一种结合方式;<br />
每一个样式之间用分号间隔。
</div>
ii.将CSS样式写在头标签中:
<style type="text/css">
#div2{
background-color: mediumvioletred;
font-family: "楷体";
color: white;
font-size: 40pt;
width: 300px;
height: 300px;
border: 5px double cadetblue ;
}
</style>
<div id="div2">
第二种结合方法:写在头标签中
</div>
iii.外部引入CSS文件,首先单独写一个CSS文件,
可以在style标签中引入,格式如:
<style type="text/css">
@import url("css/css1.css");
</style>
或者使用link标签(常用):
<link rel="stylesheet" type="text/css" href="css/css1.css" />
这里rel="stylesheet"为引入一个样式表单;
type="text/css"类型是一个CSS文件;
href="css/css1.css"是要引入的CSS文件的路径。
以上三种方式中优先级顺序与加载顺序有关。
1.<video>,<audio>
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="xxx.mp3" type="audio/mpeg"></source>
</audio>
<video width="800" height="" controls="controls" autoplay="autoplay">
<source src="mmm.mp4" type="video/mp4"></source>
</video>
autoplay:自动播放
loop:循环播放
视频:type:video/mp4 video/ogg
音频:type:audio/ogg audio/mpeg
controls=”controls” 控制组件
2.<input>
a) Email: <input type="email" name="" id="" value="" />在form表单下自动校验。
b) date: <input type="date" step="1" min="2015-02-01" max="2017-07-11"/> min为最小值,max为最大值,step为每次的跨度。
c) time: <input type="time" name="" id="" value="" />
d) datetime: <input type="datetime" name="" id="" value="" />
e) datetime-local:<input type="datetime-local" name="" id="" value="" />
f) month: <input type="month" name="" id="" value="" />
g) week: <input type="week" name="" id="" value="" />
h) file: <input type="file" name="" id="" value="" />
i) hidden:<input type="hidden" name="" id="" value="" />(用户看不到,传递 value中指定的值)
j) image: <input type="image" src="img/1.jpg" width="50" height="50" name="" id="" value="" /> 使用image做按钮时,后台传值会额外传
出x,y的值,即点击时的横纵坐标,有一些项目接收方会进行MD5 校验,传递参数过多不能通过校验,如支付宝。
k) number:<input type="number" step="2" min="2" max="100" id="" value="" />输
入值只能为数字,min为最小值,max为最大值,step为每次的跨度。
l) range: <input type="range" min="2" max="8" id="" value="" /> 随机数,min
为最小值,max为最大值,step为每次的跨度。
m) <input type="reset" name="" id="" value="重置" />为充值按钮,重置当前表单内的内容。
Input标签中的一些共有属性:
(I).required属性,required=”required”,意为必填项。
(II).maxlength属性,可以设置输入的最大长度。
(III).placeholder属性,可以设置提示信息(输入内容后,这个提 示信息不存在)。
4.问号传参:浏览器中地址栏的最后“?”后接的是前后台传递的参数,传 递的是name=value 的形式。
二.CSS
在选择更改指定元素的样式时,有以下四种选择器可选:
(1)标签选择器,如body{}
(2)#id选择器,使用#id{}的形式;
(3)class选择器,使用.class{}的形式。
(4)拓展选择器:
a.关联选择器,主要用于想要单独修改某个标签内的某个元素的 样式,如:
<style type="text/css">
p{
color: red;
}
div p{
color:yellow;
}
</style>
<div><p>uuuuuuuuuuuuuuuuu</p></div>
<p>iiiiiiiiiiiiiiiii</p>
效果如下:
b.组合选择器,多个选择器一起使用,中间用“,”分隔,如: #span1,p,.div{}
c.伪元素选择器,元素有4种状态,link初始状态,visited 点击后的 状态,hover鼠标悬停状态,active鼠标点击状 态,语法格式如:
a:link{} a:visited{} a:hover{} a:active{} 这里a为 超链接标签,也可以 换成其他标签名,如div:link{} 等。
d.属性选择器,通过[属性名]:找到有相应属性名的标签,然后 设置样式如:
[href]{
color: red;
font-size: 50pt;
}
也可以指定属性值为特定值的标签进行修改,如:
[href="###"]{
color: red;
font-size: 50pt;
}
若在等号左端加“^”则表示包含某些值,如:
[href^="#"]{
color: red;
font-size: 50pt;
}
上例表示选择所有拥有href属性且href中包含#的元素。
1.html与css的结合方式:
i. 在标签内,加属性style=“”,引号内添加要修改的样式,如:
<div style="color: gold;size: 8;border: 3px solid navy;width: 200px;height: 100px;">
CSS样式第一种结合方式;<br />
每一个样式之间用分号间隔。
</div>
ii.将CSS样式写在头标签中:
<style type="text/css">
#div2{
background-color: mediumvioletred;
font-family: "楷体";
color: white;
font-size: 40pt;
width: 300px;
height: 300px;
border: 5px double cadetblue ;
}
</style>
<div id="div2">
第二种结合方法:写在头标签中
</div>
iii.外部引入CSS文件,首先单独写一个CSS文件,
可以在style标签中引入,格式如:
<style type="text/css">
@import url("css/css1.css");
</style>
或者使用link标签(常用):
<link rel="stylesheet" type="text/css" href="css/css1.css" />
这里rel="stylesheet"为引入一个样式表单;
type="text/css"类型是一个CSS文件;
href="css/css1.css"是要引入的CSS文件的路径。
以上三种方式中优先级顺序与加载顺序有关。
相关文章推荐
- HTML5特性 > Canvas >基础绘图
- HTML5新特性之CSS+HTML5实例
- 蓝鸥零基础学习HTML5第四讲 CSS的基础样式
- [HTML5教程] 零基础学习HTML5之HTML+CSS基础【完结】
- 蓝鸥零基础学习HTML5第六讲 CSS的常见样式
- AIR 2.5中的新HTML、HTML5、CSS和JavaScript特性
- css基础特性
- 零基础学习HTML5—html+css基础【蓝鸥出品】
- 蓝鸥零基础学习HTML5—html+css基础
- 蓝鸥零基础学习HTML5之CSS的基础样式一
- Android 4.4 WebView重大改动:由Chromium驱动 支持HTML5和CSS新特性
- HTML5基础知识汇总_(2)自定义属性及表单新特性
- HTML5基础知识汇总_(2)自定义属性及表单新特性
- HTML5编程(任务五 零基础HTML及CSS编码(二))(20160912-0043)
- HTML5基础知识一、新特性解读
- HTML5新特性之CSS+HTML5实例
- HTML5开发笔记_2、HTML5基础_1.HTML5特性简介
- 简单html5小活动开发——CSS基础之padding
- 蓝鸥零基础学习HTML5第四讲 CSS的基础样式
- 蓝鸥零基础学习HTML5之CSS的基础样式二