HTML5新特性与CSS基础

一．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文件的路径。

以上三种方式中优先级顺序与加载顺序有关。