html5 基本布局+新标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
header{background:#abcdef; height:150px;}
nav{height:30px; background: #ff9900; margin-top: 100px;}
nav li{float:left; width:100px; list-style: none; height:30px; line-height: 30px;}
div{margin-top:10px;}
section{width:70%;background:#abcdef;float:left;}
article{background:#f90; width:500px; margin:0 auto; text-align:center;}
aside{width:28%;float:right; background: #abcdef;}
footer{background: #abcdef; height:100px; margin-top:20px; clear:both;}
</style>
</head>
<body>
<header>
<p>this is header</p>
<nav>
<ul>
<li>首页</li><li>文章</li><li>帮助中心</li>
</ul>
</nav>
</header>
<div>
<!--主要部分-->
<section>
<p>this is section</p>
<article>
<h2>春晓</h2>
<p>春眠不觉晓，<br/>
处处蚊子咬，<br/>
打上敌敌畏,<br/>
不知死多少。<br/>
</p>
</article>
<hr/>
<article>
<h2>上学歌</h2>
<p>春眠不觉晓，<br/>
处处蚊子咬，<br/>
打上敌敌畏,<br/>
不知死多少。<br/>
</p>
</article>
<hr/>
<figure>
<figcaption>UFO</figcaption>
<p>不明飞行物</p>
</figure> <figure>
<dt>DDS</dt>
<dd>大吊死</dd>
</figure>
<hr/>
<dialog>
<dt>今天几号？</dt>
<dd>母鸡</dd>
<dt>问你几号啊？</dt>
<dd>19</dd>
</dialog>
<hr/>
<menu>
<li>点击</li>
<li>右键单击</li>
</menu>
<hr/>
<!--firefox 才有右键菜单效果-->
<span contextmenu="caidan">右键单击</span>
<menu type="context" id="caidan">
<menuitem label="菜单一" onclick="alert('这是菜单一')" icon="../img/logo.png"></menuitem>
</menu>
<hr/>
<!--温度计,有一个效果提示-->
<meter min="0" max="100" value="20" low="3" high="25"></meter>
<!--调透明度等 -->
<input type="range" />
<!--进度条-->
<progress max="100" value="50" id="pro"></progress>
<script type="text/javascript"> var pro=document.getElementById('pro');
var jidu= setInterval(function(){
var value=parseInt(pro.value);
if(value>=parseInt(pro.max)){
value=0;
// clearInterval(jidu);
}
pro.value+=1;
},100);
</script> <hr/>
<!--展开折叠效果-->
<details>
<dt>这是一个问题？</dt>
<dd>to be or not to be?</dd>
<dt>这是一个问题？</dt>
<dd>to be or not to be?</dd>
<dt>这是一个问题？</dt>
<dd>to be or not to be?</dd>
</details>
<hr/>
<p>偏僻字注意功能，浏览器firefox不支持时,加（），支持者是拼音状态</p>
<ruby>狂<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<hr/>
<p> mark 是标记重点突出的效果</p>
<mark>男生最喜欢</mark>玩游戏
</section>
<aside>
<p>this is aside</p>
<hgroup>
<h3>股票有风险？</h3>
<h3>投资股票吗？</h3>
</hgroup> </aside>
</div>
<footer>
<p>this is footer</p>
<hr/>
<small>联系我们</small>
<small>商户合作</small> </footer> </body>
</html>
新标签 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--单击文字，可输入-->
<label for="a">名称</label><input type="text" id="a"/>
<!--为控件分组，指定标题-->
<fieldset>
<legend>main</legend>
name: <input type="text">
user:<input type="text">
</fieldset>
<!--摘要与细节，只有 chrome 支持-->
<details>
<summary>三国志</summary>
<p>this is content.</p>
</details>
<!--进度条-->
<meter min="0" max="100" value="20" title="20%">进度条</meter><br/>
<!--时间元素 日期与时间之间用 T 分割 利于seo-->
<!--mark高亮文本显示-->
欢迎<mark>大家</mark>光临<time datetime="1995-05-15">我的生日</time>聚会，明天<time datetime="2015-02-04T18:00:00">下班后</time>准时开始 <!--select分组-->
<select name="location">
<optgroup label="北京市">
<option value="dcq">东城区</option>
<option value="hdq">海淀区</option>
</optgroup>
<optgroup label="上海市">
<option value="pdq" selected="true">浦东区</option>
<option value="pxq">浦西区</option>
</optgroup>
</select><br/>
工作地点<select name="workplace" size="6" multiple="true">
<optgroup label="北京市">
<option value="dcq">东城区</option>
<option value="hdq">海淀区</option>
</optgroup>
</select>
<hr/>
<style type="text/css">
input:focus{
outline: red solid 1px; /*外线，不占空间*/
}
</style>
<input />
<!--box-shadow border-image css多列 看 w3c-->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" min="0" max="50" name="a" />+
<input type="text" name="b" value="50" />=
<output name="result"></output>
</form>
</body>
</html>
新选择器
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>新选择器</title>
<style>
h1{font-size:16px;}
li:first-child{color:#f00;}
/*
<h1>注意是li:first-child，而不是ul:first-child</h1>
<ul>
<li>结构性伪类选择符 E:first-child</li>
<li>结构性伪类选择符 E:first-child</li>
</ul>
*/
.a [type=text]{
color:red;
}
/*
<div class="a">
<input type="text" name="name" />
</div>
*/
p:before{
content:'子曰：';
}
p:after{
content:'——摘自《论语》';
}
li:before{
content: url(../img/logo.png);
}
/*
<p>学而时习之，不亦说乎。</p>
<p>三人行，必有我师焉。</p>
<p>人不知而不晕，不亦君子乎。</p>
<br/>
<ul>
<li>宫保鸡丁</li>
<li>酱爆鸡丁</li>
<li>鱼香鸡丁</li>
</ul>
*/
</style>
</head>
<body> </body>
</html>
线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景线性渐变</title>
<style>
div{height:250px;
/*background-image: linear-gradient(180deg,#f00 0%,#ff0 70%,#fff 100%);*/
/*background-image: linear-gradient(180deg,#f00 ,#ff0 ,#fff);*/
/*径向渐变 第一个为半径 at 圆心坐标 ，后面为颜色*/
background-image: radial-gradient(250px at 0 0,#f00,#ff0,#fff);
/*background-image: radial-gradient(500px at 100px 100px,#f00,#ff0,#fff);*/
background-repeat: no-repeat;}
.div2{background-image: linear-gradient(to top ,#E13335 0%, pink 100%); height: 20px;}
</style>
</head>
<body>
<p>background-image:linear-gradient; 背景线性渐变 向上0度 向右90度 向下180度 向左270度
radial-gradient; 径向渐变
repeating-linear-gradient 重复线性渐变
重复径向渐变</p>
<div></div>
<div class="div2">漂亮的导航 漂亮的线性渐变</div>
</body>
</html>