小菜鸟谈html语义化

1.首先我们需要了解一个问题，就是我们为什么需要学习html5的语义化标签？

在html5未出现之前，我们一般都采用div和css的布局方式，但是这样写的页面不仅是我的页面结构不够清晰，也不利于SEO的优化，为了解决以上问题，html5出现了，html5定义了许多的新标签，可以加强我们所写页面的结构，是页面结构更加的清晰。

2.引入html5的优点

可以是我们的页面结构更加的清晰
便利与后续程序员的维护与开发
便于SEO的优化

3.html5标签详解

header标签
- 定义文档的页眉（介绍信息）
nav
- 表示页面布局的导航
aside
- 表示包含的内容不是页面的主体内容，是对页面的扩充
footer
- 一般将放置到页面的底部或者某一个区块的底部，包括版权信息和联系方式等。
article
- 表示页面中的一块独立的内容，多使用于文章的定义。
section
- 多用于一个区块中的内容分组，多用于文章的分段

4.实战代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>web语义化</title><style type="text/css">*{padding: 0;margin: 0;}header{width: 800px;height: 100px;background: dodgerblue;margin: 0 auto;}nav{width: 800px;height: 30px;margin: 0 auto;background: yellow;}nav a{float: left;text-decoration: none;line-height: 30px;color: #333;padding: 0 10px;font-size: 13px;}nav a:hover{background: greenyellow;}#main{width: 800px;height: 400px;/*border: 1px solid blue;*/margin: 0 auto;}#main article{width: 500px;height: 400px;border: 2px solid orange;float: left;}#main aside{width: 290px;float: right;height: 400px;border: 2px solid green;}footer{width: 800px;height: 100px;background: pink;margin: 0 auto;margin-bottom: 500px;}</style>
</head>
<body><header></header><!--导航条-->
<nav><a href="">首页</a><a href="">导航项目</a><a href="">导航项目</a><a href="">导航项目</a><a href="">导航项目</a><a href="">导航项目</a>
</nav>
<!--导航条结束--><div id="main"><article><h1>大家喜爱的明星</h1><time datatime="2017-03-22">发表日期：2017年3月22日</time><!--section标签表示文章的一部分--><section><h2>周星驰</h2><p><ins>周星驰</ins>，<del>1962年6月22日生于香港</del>，祖籍浙江宁波，中国香港演员、导演、编剧、制作人、商人，<mark>毕业于无线电视艺员训练班</mark>。1980年成为丽的电视台的特约演员，从而进入演艺圈。1981年出演个人首部电视剧《IQ成熟时》。1988年将演艺事业的重心转向大银幕，并于同年出演电影处女作《捕风汉子》</p></section><section><h3>景甜</h3><p>景甜（Sally），1988年7月21日出生于陕西省西安市，毕业于北京电影学院表演系，华语影视女演员。2006年，景甜发行个人首张音乐EP《你是谁》，并正式踏上演艺之路。2010年，景甜凭借爱情片《我的美女老板》崭露头角。2011年，景甜因主演古装片《战国》而获得更多关注。2013年开始，其主演的动作片《特殊</p></section></article><!--侧边--><aside><h3>一段优雅无比的的代码</h3><code>for(var i=0;i<100;i++){alert('哈哈哈哈哈');}</code><h3>选择你想去旅游的景点</h3><select><optgroup label="北京"><option>故宫</option><option>颐和园</option><option>长城</option></optgroup><optgroup label="山东"><option>泰山</option><option>趵突泉</option><option>大明湖</option><option>梁山</option></optgroup><optgroup label="云南"><option>大理</option><option>丽江</option><option>香格里拉</option></optgroup></select><br /><br /><progress value="66" max="100" min=0></progress><br /><br /><meter value="16" min="0" max="100" low="20" high="70"></meter></aside><!--侧边结束-->
</div><!--底部-->
<footer><address>风流倜傥小小张</address>
</footer>
<!--底部结束--></body>
</html>

转载于:https://www.cnblogs.com/zhnaglei/p/6600799.html

小菜鸟谈html语义化相关推荐

浅谈html的语义化和一些简单优化,html标签语义化
1.什么是语义化? 必应网典的解释语义化是指用合理HTML标记以及其特有的属性去格式化文档内容.通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的(X)HTML文档有助于提升你的 ...
浅谈html的语义化和一些简单优化,浅谈HTML的语义化和一些简单优化
下面小编就为大家带来一篇浅谈HTML的语义化和一些简单优化.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.什么是语义化? 必应网典的解释语义化是指用合理HTML标 ...
HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
一.排版标签 1.标题标签在新闻和文章的页面中都离不开标题,用来突出显示文章主题. h系列标题 <body><h1>1级标题</h1> <h2>2级标 ...
HTML5+CSS3 02（表格、表单标签、语义化，字符实体标签）
一表格的基本使用 1.1 表格的基本标签场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表基本标签: 标签名说明 table 表格整体,可用于包裹多个tr tr 表格每行,可用 ...
有关WEB前端中的语义化
作天在变卖大学书籍时也不晓得怎么的就想起语义化这个概念,于是乎也就花点时间搞搞它.语义化标记对于刚学web前端脚本语言的童鞋来说往往都没太在意,哇哈哈,其实我也就算只比较老的菜鸟而已,本文不是说教, ...
【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
web标准，表现与数据分离，web语义化，页面布局和架构
目录目录 web标准结构层标准,就是W3C规定的那样: 表现层标准: 行为层标准: 表现与数据分离: web语义化在广义方面在代码编译方面页面布局和架构布局架构开发人员会有一些困惑: ...
HTML5语义化标签综合基础案例,HTML5语义化标签综合案例
HTML 标签声明必须是 HTML 文档的第一行,位于标签之前. 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 请始终向 HTML 文档添加 ...
HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

小菜鸟谈html语义化

小菜鸟谈html语义化

1.首先我们需要了解一个问题，就是我们为什么需要学习html5的语义化标签？

2.引入html5的优点

3.html5标签详解

4.实战代码如下：

小菜鸟谈html语义化相关推荐

最新文章

热门文章