HTML5新特性之CSS+HTML5实例
1、新的DOCTYPE和字符集
HTML5的一项准则就是化繁为简，Web页面的DOCTYPE被极大的简化。
<!DOCTYPE html>
同时字符集声明也被简化了：
<meta charset="utf-8">
2、新元素和旧元素
HTML5引入了很多新的标签，根据内容和类型的不同，被分为7大类。
3、语义化标签
语义化标签可以简化HTML页面设计，并且将来搜索引擎在抓取和索引网页的时候，也会利用这些元素的优势。
HTML5的宗旨之一就是存在即合理。Google分析了上百万的页面，发现DIV标签的通用ID名称重复量很大。例如，很多开发人员喜欢使用DIV id="footer"来标记页脚内容，
所以HTML5 引入了一组新的片段类元素。
4、HTML5代码样例
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>HTML5</title>
<link rel="stylesheet" href="html5.css">
</head> <body>
<header>
<h1>My first web</h1>
<h2>learn html5</h2>
<h4>HTML5 Rocks!</h4>
</header> <div id="container">
<nav>
<h3>导 航 链 接</h3>
<a href="http://www.baidu.com">百 度</a>
<a href="http://www.google.com">谷 歌</a>
<a href="http://www.sina.com">新 浪</a>
</nav> <section>
<article>
<header>
<h1>什么是 HTML5</h1>
</header>
<p> HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。</p>
<p> HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</p>
<p> HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</p>
<footer>
<h2>what is html5</h2>
</footer>
</article> <article>
<header>
<h1>HTML5 新特性</h1>
</header>
<ul>
<li>用于绘画的 canvas 元素
<li>用于媒介回放的 video 和 audio 元素
<li>对本地离线存储的更好的支持
<li>新的特殊内容元素，比如 article、footer、header、nav、section
<li>新的表单控件，比如 calendar、date、time、email、url、search
</ul>
<footer>
<h2>new feature of html5</h2>
</footer>
</article>
</section> <aside>
<div>
SEARCH:<input type="text"></input>
<button>Go</button>
</div> <p>HTML5:Lorem ipsum dolor HTML5 nunc ant nunquam sit amet, consectetur adipiscing
elit. Vivamus at est eros, vel frinailla urna.</p>
<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula
pellentesque, turpis lorem dictum nunc.</p>
</aside>
<footer>
<h2>Copyright:Caijinping</h2>
</footer>
</div>
</body> </html>
效果演示：
5、CSS设置内容样式
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>HTML5</title>
<link rel="stylesheet" href="html5.css">
<style>
body{
background-color:#CCCCCC;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin:0px auto;
border:solid;
border-color:#FFFFFF;
}
header{
background-color:#F47D31;
display:block;
color:#FFFFFF;
text-align:center;
}
header h2{
margin:0px;
color:white;
}
h1{
font-size:72px;
margin:0px;
}
h2{
font-size:24px;
margin:0px;
text-align:center;
color:#F47D31;
}
h3{
font-size:18px;
margin:0px;
text-align:center;
color:#F47D31;
}
h4{
color:#F47D31;
background-color:#fff;
-webkit-box-shadow:2px 2px 20px #888;
-webkit-transform:rotate(-45deg);
-moz-box-shadow:2px 2px 20px #888;
-moz-transform:rotate(-45deg);
position:absolute;
padding:0px 120px;
top:40px;
left:-110px;
text-align:center;
}
nav{
display:block;
width:10%;
float:left;
text-align:center;
}
nav a:link,nav a:visited{
display:block;
border-bottom:3px solid #fff;
padding:10px;
text-decoration:none;
font-weight:bold;
margin:5px;
}
nav a:hover{
color:white;
background-color:#F47D31;
}
nav h3{
margin:15px;
color:white;
}
#container{
background-color:#888;
}
section{
display:block;
width:65%;
float:left;
}
article{
background-color:#eee;
display:block;
margin:10px;
padding:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:2px 2px 20px #aaa;
-webkit-transform:rotate(0deg);
-moz-box-shadow:2px 2px 20px #aaa;
-moz-transform:rotate(0deg);
}
article header{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:5px;
}
article footer{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:5px;
}
article h1{
font-size:18px;
}
aside{
display:block;
width:25%;
float:left;
}
aside div{
margin:15px;
color:white;
float:left;
}
aside p{
margin:15px;
color:white;
font-weight:bold;
font-style:italic;
}
footer{
clear:both;
display:block;
background-color:#F47D31;
color:#FFFFFF;
text-align:center;
padding:15px;
float:bottom;
}
footer h2{
font-size:14px;
color:white;
}
a{
color:#F47D31;
}
a:hover{
text-decoration:underline;
}
li{
padding:10px;
}
</style>
</head> <body>
<header>
<h1>My first web</h1>
<h2>learn html5</h2>
<h4>HTML5 Rocks!</h4>
</header> <div id="container">
<nav>
<h3>导 航 链 接</h3>
<a href="http://www.baidu.com">百 度</a>
<a href="http://www.google.com">谷 歌</a>
<a href="http://www.sina.com">新 浪</a>
</nav> <section>
<article>
<header>
<h1>什么是 HTML5</h1>
</header>
<p> HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。</p>
<p> HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</p>
<p> HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</p>
<footer>
<h2>what is html5</h2>
</footer>
</article> <article>
<header>
<h1>HTML5 新特性</h1>
</header>
<ul>
<li>用于绘画的 canvas 元素
<li>用于媒介回放的 video 和 audio 元素
<li>对本地离线存储的更好的支持
<li>新的特殊内容元素，比如 article、footer、header、nav、section
<li>新的表单控件，比如 calendar、date、time、email、url、search
</ul>
<footer>
<h2>new feature of html5</h2>
</footer>
</article>
</section> <aside>
<div>
SEARCH:<input type="text"></input>
<button>Go</button>
</div> <p>HTML5:Lorem ipsum dolor HTML5 nunc ant nunquam sit amet, consectetur adipiscing
elit. Vivamus at est eros, vel frinailla urna.</p>
<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula
pellentesque, turpis lorem dictum nunc.</p>
</aside>
<footer>
<h2>Copyright:Caijinping</h2>
</footer>
</div>
</body> </html>
效果演示：
HTML5新特性之CSS+HTML5实例的更多相关文章
- 前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- 第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
- HTML5新特性 websocket(重点)--多对多聊天室
一.html5新特性 websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- HTML5新特性：FileReader 和 FormData
连接在这里: HTML5新特性:FileReader 和 FormData
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
随机推荐
- vvv
すぎやま(杉山) ハイコンテンツコンテスト assortedアクセント・音節as・sórt・ed 発音記号/‐ṭɪd/音声を聞く [形容詞]1分類した,仕分けした.2〈ビスケットなど〉詰め合わせの.用 ...
- hibernate中多对多关联
hibernate中多对多关联 “计应134(实验班) 凌豪” 在关系数据库中有一种常见的关系即多对多关系,例如课程和学生的关系,一个学生可以选择多门课程,同时一门课程也可以被多个学生选择, 因此课程 ...
- javascript函数的基础功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- uestc Palindromic String
字符串hash因为如果一个字符串是回文串,那么正着做哈希和反着做哈希结果应该一样.于是我们先正反各做一边哈希.如果判断出来一个字符串是回文穿那么这个字符串的前半部分和后半部分的重数一定相同,于是当前位 ...
- 第十七周oj刷题——Problem B: 分数类的四则运算【C++】
Description 编写分数类Fraction,实现两个分数的加.减.乘和除四则运算.主函数已给定. Input 每行四个数,分别表示两个分数的分子和分母,以0 0 0 0 表示结束. Outpu ...
- 一个可无限伸缩且无ABA问题的无锁队列
关于无锁队列,详细的介绍请参考陈硕先生的<无锁队列的实现>一文.然进一步,如何实现一个不限node数目即能够无限伸缩的无锁队列,即是本文的要旨. 无锁队列有两种实现形式,分别是数组与链表. ...
- docker private registry使用
一.搭建harbor: 步骤:略 二.命令行操作: 登录:docker login docker01 tag image: tag 一个 image,名称一定要标准( registryAddress[ ...
- Tomcat的JVM内存大小如何设置？【转】
[转]:专家答疑 Tomcat的JVM内存大小如何设置? 本文和大家重点讨论一下如何设置Tomcat的JVM内存大小,JAVA程序启动时JVM都会分配一个初始内存和最大内存给这个应用程序.这个初始内存 ...
- Javascript 自定义事件 (custom event)
Javascript 中经常会用到自定义事件.如何创建一个简单的自定义事件呢?在创建自定义的事件之前,我们应该考虑一下和事件有关的东西.例如 click 事件,首先我们要能注册一个click事件(在一 ...
- UICollectionView 简单的使用和注意事项
UICollectionView 在创建的时候,要给它一个UICollectionViewFlowLayout (不然会崩溃),就像tableview一样,也要为它注册自定义的cell. UIColl ...