HTML5新特性之CSS+HTML5实例

最新推荐文章于 2023-07-11 15:32:26 发布
最新推荐文章于 2023-07-11 15:32:26 发布
阅读量2.5k 收藏 4
点赞数 1
分类专栏： 编程语言 文章标签： HTML HTML5 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xsc_c/article/details/10201379
版权

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>
效果演示：



蔡金平
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html5和css3入门到精通
04-10
通过基础知识+中小实例+综合案例的方式，讲述了用HTML5+ CSS3设计构建网站的必备知识，相对于专业指南、高级程序设计、开发指南同类图书，本书是一本适合快速入手的自学教程。内容有：创建HTML5文档，实战HTML5表单...
HTML5的十大新特性
weixin_30294021的博客
10-24 529
　　为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等 (1)语义标签 　　语义化标签使得页面的内容结构化，见名知义 标签 描述 <hrader></header> 定义了文档的头部...
Html5新特性归纳
liuqiao0327的专栏
08-17 291
Html5新特性 文章目录Html5新特性一.简介二.十大新特性1.语义化结构化标签1.section2.header3.footer4.nav5.article6.aside7.figure和figcaption8.main9.兼容低版本2.增强型表单3.多媒体标签1.视频 video2.音频 audio4.本地存储1.localStorage 永久存储2.sessionStorage 临时存储3.相同的API操作4.cookies,sessionStorage,localStorage的区别5.Canv
HTML5的新特性
weixin_51620226的博客
06-21 3701
html5特性有：1、语义标签；2、增强型表单输入类型；3、支持视频和音频的播放；4、Canvas绘图；5、SVG绘图；6、地理定位；7、拖放API；8、Web Worker；9、Web Storage；10、WebSocket。
html5的新增特性,HTML5新增特性(示例代码)
weixin_39837867的博客
06-03 87
1、新增的语义化标记元素header 标记头部区域的内容(用于整个页面或页面中的一块区域)。footer 标记脚部区域的内容(用于整个页面或页面中的一块区域)。section 是web页面中的一块区域。article 独立的文章内容。aside 相关内容或者引文。nav 导航类辅助内容。2、新增的功能元素hgroup元素，用于整个页面或页面中的一个内容区块的标题进行组合。figure元素，表示一段...
HTML5&CSS3新特性
weixin_52972575的博客
05-05 7975
一.HTML5新特性 HTML5新特性针对于以前的不足，增加了一些新的标签，新的表单，新的表单属性等。 1.新增语义化标签 新增的带有语义化的标签 二.CSS3新特性
47个Html5CSS3实例
03-12
网上收集的47个Html5CSS3实例，帮助了解HTML5和CSS3特性。
一些HTML5网页特效实例集.rar
07-10
收集的一些HTML5网页特效实例集，包括有canvas、网页拖动特效、图像特效、播放器特效等，还有一些HTML5网页动画制作实例，这些简单的实例，有助于新手更好的了解HTML5的相关特性和方法。
HTML5+MVC3整合实例源码
02-21
HTML5+MVC3整合实例源码 功能描述： Account at a Glance是由Dan Walin主持开发的一个Web应用程序， 这是一个实际上线的产品，由真实的Team开发，并非是为了演示某些技术而做的Demo程序。 前端基于HTML5+jQuery，...
HTML5和CSS3新特性
最新发布
醉意在诗里的博客
07-11 812
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
HTML5+CSS3实例源码（包含20个）
12-30
HTML5+CSS3实例源码（包含20个）,制作都很精细，界面漂亮，望对你有帮助 HTML5+CSS3实例源码（包含20个）,制作都很精细，界面漂亮，望对你有帮助
html5+css3经典案例
05-21
非常好的资源，里面有大量的经典案例，源代码注释详细。下载下来是你正确的选择
html5课堂例子
07-13
html5课堂例子，内容包括打地鼠，打字游戏，大风车，换肤，纪念相册等13个，资源齐全，代码完整。
html5 入门代码及案例
04-02
大一老师给的代码，一学期的东西，前端入门，打好基础
【HTML/CSS学习】html5和css3新特性
zx1041561837的博客
12-07 304
本文介绍html5和css3的一些新特性。
纯html5例子,八个炫酷的html5例子
weixin_29292431的博客
06-09 1242
1、HTML5 Canvas火焰燃烧动画 如同掉落的火球这次要分享的是一款超级绚丽的HTML5火焰动画，画面上是一个熊熊燃烧的小火球，小球燃烧的火焰非常逼真，会比较消耗CPU。另外这个动画是在HTML5 Canvas上实现的，修改起来也非常灵活。之前也分享过几款HTML5火焰动画，像这款HTML5 Canvas火焰闪烁动画。 2、HTML5/CSS3粒子效果进度条 超炫酷进度条动画之前我已经分享了...
HTML5 CSS3提高 11-01 新增标签及属性 表单 多媒体 结构伪类 伪元素 过渡 小米log jd进度条
Write less，do more
06-20 815
HTML5新特性 语义化标签 （★★） <header> 头部标签 <nav> 导航标签 <article> 内容标签 <section> 定义文档某个区域 <aside> 侧边栏标签 <footer> 尾部标签 多媒体标签 视频标签- video（★★★） 基本使用 当前 <video>元素支持三种视频格式： 尽量使用 mp4格式 使用语法： <video src="media/mi.mp4"></
day14 HTML
weixin_30604651的博客
11-11 74
HTML 1、一套规则，浏览器认识的规则。 2、开发者： 学习Html规则 开发后台程序： - 写Html文件（充当模板的作用） ****** - 数据库获取数据，然后替换到html文件的指定位置（Web框架） 3、本地测试 - 找到文件路径，直接浏览器打开 - pycha...
网站设计基础教程html5+css3pdf
07-05
### 回答1： 网站设计基础教程html5 css3pdf是一份教授HTML5和CSS3的PDF教程。HTML5是一种用于构建和展示网页内容的标准，它不仅具有更丰富的语义化元素，还支持多媒体、图形和动画等功能。CSS3是用于控制网页样式和布局的样式表语言，它引入了许多新的特性，如过渡效果、阴影效果和动画效果等。 这份教程通过深入浅出的方式讲解了HTML5和CSS3的基本知识和技巧。首先，它介绍了HTML5的结构标签，如header、nav、section和footer等，这些标签使得网页更加语义化和可读性更强。然后，它解释了CSS3的各种选择器和样式属性，包括字体、颜色、背景和边框等。此外，教程还介绍了如何使用HTML5和CSS3创建响应式网页，以适应不同设备和屏幕尺寸。 这份教程还提供了丰富的实例和练习题，帮助读者巩固所学知识。通过实践，读者可以掌握HTML5和CSS3的应用技巧，并学会创建现代化且具有吸引力的网页设计。此外，教程还提供了一些常用的网站设计工具和资源，如图标、背景图片和颜色选择器，帮助读者更好地进行网页设计和美化。 总的来说，网站设计基础教程HTML5 CSS3 PDF是一份全面而实用的教程，适合初学者入门和有一定基础的设计师进阶学习。通过学习这份教程，读者可以掌握HTML5和CSS3的基本知识和技巧，并能够独立设计和开发出现代化的网页。 ### 回答2： HTML5和CSS3是网站设计的基础语言，它们是用于构建网页的代码。HTML5用于定义网页的结构和内容，包括标题、段落、链接、图像等。CSS3用于定义网页的外观和样式，包括背景、字体、颜色、布局等。因此，学习HTML5和CSS3是学习网站设计的第一步。 《HTML5和CSS3基础教程PDF》是一本教学材料，它提供了系统的学习内容和案例，帮助初学者掌握HTML5和CSS3的基本知识和技能。这本教程通常会介绍HTML5和CSS3的语法规则、常用标签和属性，以及常见的网页布局和样式设计。 通过学习这本教程，你可以了解如何使用HTML5创建网页的骨架和内容。你会学习到HTML5中常用的标签，如<html>、<head>、<body>等，以及如何使用这些标签来组织网页的结构。同时，你还会学习到如何在网页中插入图片、视频、音频等媒体元素，以及如何创建表单和处理用户输入。 此外，在这本教程中还会教授如何使用CSS3来美化网页的外观和样式。你将学习到CSS3中常用的样式属性和值，如颜色、背景、字体、边框等。你还会学习到如何使用CSS3来实现网页的布局，包括如何创建网格布局、响应式布局等。 总而言之，《HTML5和CSS3基础教程PDF》是学习网站设计的好资料，它提供了系统的学习内容和案例，可以帮助你快速入门HTML5和CSS3的基本知识和技能。阅读和实践这本教程，相信你会对网站设计有更深入的理解和掌握。 ### 回答3： 《网站设计基础教程HTML5 CSS3》是一本关于网站设计基础知识的教程，介绍了HTML5和CSS3两种技术的使用方法和应用场景。HTML5是目前最新的标记语言，用于创建网页结构，实现网页内容的排版和呈现。CSS3则是一种用于描述网页样式的语言，可以实现网页的美化效果、动画效果等。 这本教程从HTML5和CSS3最基础的语法入手，逐步介绍了网页的基本结构搭建以及常用的标签和属性的使用方法。同时，它还涵盖了一些常见的网页布局和排版技巧，如盒模型、浮动、定位等，帮助读者实现自己理想中的网页布局。 此外，教程还介绍了CSS3新增的一些强大特性，如过渡、动画、渐变等，可以帮助设计师实现更加出色的网页效果，并提升用户的交互体验。 整本教程内容通俗易懂，结构清晰，适合初学者入门。同时，它还配有详细的示例代码和实战案例，读者可以通过实践来巩固所学知识，提升自己的实际操作能力。 总体来说，《网站设计基础教程HTML5 CSS3》是一本很好的学习教材，它能够帮助读者系统学习HTML5和CSS3的使用，提升网页设计的基础能力。无论是想要成为一名网页设计师，还是对网页制作感兴趣的人，都可以从中获得很多实用的知识和技巧。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值