html5和css3新特性

1易用簡潔

腳本和連接無需type

html5新增加的一些標籤和特性如下:

<span style="font-size:24px;">1.無需寫type,腳本和連接
2.新增加標籤<header/><footer/> <hgroup/> 標記元素mark<mark>高亮顯示</mark>
audio video 
<video preload>
<video prelod controls>
如下figure:
<figure>
            <img src="1.jpg" alt="關於" width="100" height="300">
            <figcaption>
                <p>這是一些有圖片</p>
            </figcaption>
        </figure>
input新增屬性：placeholder required autofocus
新增正則表達式在input中
<form action="" method="post">
   <input type="text" name="username" id="username" placeholder="4<>10" pattern="[A-Za-z]{4,10}">
   <button type="submit">提交</button>
</form>

</span>

2.css新增屬性選擇器和僞類選擇器

E[att^="val"]{}  E[att$="val"]{} E[att*="val"]  ^值以val開頭  
結構性僞類E:nth-child(n)等等
UI元素僞類選擇器：E:enabled  E:disabled E:checked  E:selected
<style type="text/css">
    table{
        table-layout: fixed;
        empty-cells: show;
        border-collapse: collapse;
        
    
    }
        tr:nth-child(even){
            background-color: #FF9900;
        }
        tr:nth-child(odd){
            background-color: #0099FF;
        }
    </style>

3.

text-shadow: 5px 5px 5px #FF0000; 文本陰影 水平、垂直、模糊的距離、陰影的顏色
{font: font-style font-variant font-weight font-size font-family}
font-variant是字體的變形
font-style:normal oblique italic
text-decoration 下劃線 等
letter-spacing:1ex  字符間距
text-align: left;//文本對齊方式
list-style-type:disc;//列表樣式
text-indent: 2em;//段落首行縮進

實現省略
p{
            width:30px;
            white-space: nowrap;//禁止換行
            overflow: hidden; //禁止文本益處
            text-overflow: ellipsis;
        }