您的位置:首页 > Web前端 > HTML5

html5和css3新特性

2016-01-15 15:35 585 查看
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;
        }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: