关于HTML+CSS3的一些笔记

支持HTML5的浏览器

IE浏览器 Safari浏览器 Chrome浏览器 Firefox浏览器 Opera浏览器

 

一、可省略的元素

1.不允许写结束标记的：br hr img input link meta base param area col command embed keygen source track wbr

2.可省略结束标记的 li dt dd p option thead tbody tr td th rt rp optgroup colgroup tfoot

3.可省略全部标记的 html head body colgroup tbody

 

二、新增加的属性

1.required属性定义了是否允许文本框的输入内容为空

<input type="text" name="" required />
<input type="text" name="" required=”true” />

2.vedio标签

<video width="" height="" controls="controls" preload="preload">
    <source src="" type="">
</video>

3.正则表达式

<input type="" name="" pattern="[A-Za-z]{4,10}">

<input type=”tel” name=”” pattern=”^\d{o}$”>  //必须是10个数字

//电话号码正则表达式

pattern=”^((\+86)|(86))?(13)\d(9)$”  //实现手机号+86的

4.mark元素 可以在页面中高亮显示一段文本

<p>Hello<mark>World</mark></p>

5.用Range Input来创建滑块。它接受min,max,step和value属性。可以使用CSS的:before和:after来显示min和max的值。

<input type="range" name="">
input[type=range]:before{
        content: attr(min);
        padding-right: 5px: 
    }

6.新增结构元素

article元素，header元素，nav元素，aside元素，section元素，footer元素

7.新增页面元素

audio，figure，，video，canvas（表示图形）

<hgroup></hgroup>用于多个标题

<mark></mark>

<embed src=""></embed>嵌入多种媒体文件

<time datetime=""></time>使用多种格式表示一个时间或时间

 <wbr>软换行

8.页面交互

summary昨晚details的子元素，用于定义默认显示的内容，单击该单元元素将会展开或者收缩details内的其他元素。

<details>
    <summary></summary>
    <menu>
        <li>1</li>
        <li>1</li>
    </menu>
</details>

 

9.页面节点

section元素 nav元素 address元素等

10.公共属性

graggable属性用于设置是否允许用户拖动元素（true false）

hidden属性

<button type="button" onclick="test(1)" value="1">show</button>
<button type="button" onclick="test(0)" value="0">hidden</button>
<p id="art">hasdhuqwhbf</p>
<script type="text/javascript">
    function test(obj){
        var show = (obj)?false:true;
        var str =document.getElementById('art').hidden=show;
        }
</script>

contenteditation属性 使文本变得可编辑

<p contenteditable="true" id='p1'>使元素可编辑</p>
<input type="button" value="submit" onclick="save" name="">
<p id="p2"></p>
<script type="text/javascript">
    function save(){
        var str1 =document.getElementById(p1).innerHTML;
        document.getElementById("p2").innerHTML=str1;
    }
</script>