(2) html 语义化
HTML语义化标签
1 什么是语义化标签？
通过标签判断内容语义，例如根据h1标签判断出内容是标题，根据 p 判断内容是段落、input 标签是输入框等。
2 为什么要标签语义化？
1.搜素引擎友好
2.更容易让屏幕阅读器读出网页内容
3.去掉或者丢失样式的时候能让页面呈现出清晰地结构
4.便于团队开发和维护
3 常用语义化的标签有哪些？
3.1 title
title 元素可定义文档的标题。
浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
<html>
<head>
<title>XHTML Tag Reference</title>
</head>
<body>
The content of the document......
</body>
</html>
3.2 header
header 标签定义文档的页眉（介绍信息）。
<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>
3.3 nav
nav 标签定义导航链接的部分。
<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>
3.4 main
main 标签规定文档的主要内容。
main 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
注释：在一个文档中，不能出现一个以上的 main 元素。main 元素不能是以下元素的后代：article、aside、footer、header 或 nav。
<main>
<h1>Web Browsers</h1>
<p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
</main>
3.5 progress
progress标签标示任务的进度（进程）。
<progress value="22" max="100"></progress>
3.6 pre
可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。pre 标签的一个常见应用就是用来表示计算机的源代码。
<pre>
<html>
<head>
<script type="text/javascript" src="loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");
document.write("xmlDoc is loaded, ready for use");
</script>
</body>
</html>
</pre>
3.7 footer
footer 标签定义文档或节的页脚。
footer 元素应当含有其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 footer 元素。
<footer>
<p>Posted by: W3School</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
3.8 aside
aside 标签定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。
<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
3.9 section
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<section>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</section>
3.10 article
article 标签规定独立的自包含内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
本文部分内容摘自w3school
(2) html 语义化的更多相关文章
- 关于HTML语义化的一些理解
语义化这个词我想大家都看到了无数次,特别是在一些招聘广告上. 其实我自己也是,不过每次看到都觉得是那些招聘公司复制的,其实他们根本说不清语义化是什么,而且也根本不看重. 所以我一直也没把这东西当回事过 ...
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- HTML5的新语义化的标签
在HTML5之前采用HTML+CSS文档结构写法 [ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域)] ...
- 理解HTML语义化
1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义 ...
- HTML 语义化之b_i_em_strong
默认效果 i和em都是斜体.b和strong都是加粗. 语义区别: em 和 strong 分别表示句中强调和全局加重强调 搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气. i 和 b ...
- 如何让你的JavaScript代码更加语义化
语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...
- 浅谈web语义化
在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所 ...
- Html标签的语义化
为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1 <tab ...
- 谈谈对HTML语义化的理解
什么是HTML语义化? HTML标签可以分为有语义的标签,和无语义的标签.比如table表示表格,form表示表单,a标签表示超链接,strong标签表强调.无语义标签典型的有<div>, ...
- Web语义化
在昨天和做SEO的同学聊了一会儿,当然我没有学会搜索引擎优化的技巧和知识,但在此之前一直对HTML5中header.footer.sidebar.article等标签嗤之以鼻,觉得这个和div没有什么 ...
随机推荐
- 前端面试题整理---JS基础
为了督促自己学习,整理了一下前端的面试题 JavaScript: JavaScript 中如何监测一个变量是String类型? typeof(obj)==="string"; ty ...
- 剑指Offer的学习笔记（C#篇）-- 数组中只出现一次的数字
题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 题目给定:num1,num2分别为长度为1的数组.传出参数:将 num1[0], num2[0 ...
- maven工程运行出Unable to compile class for JSP: 错误
使用mvn tomcat:run运行时出现500错误,使用tomcat7再次运行就好了 更新,上面的是在命令行操作的 如果要在idea上面出现错误的话需要在pom.xml上配置下面的语句 org.ap ...
- Androidstudio坑
1.intel haxm sdkmanager显示不可选中,而且boost设置好了intervt 解决:重新关闭,打开系统,然后开启.... 2.解决不了一直报错,(自己的代码,明明已经没有问题) 有 ...
- 《SQL 进阶教程》 case：在 UPDATE 语句里进行条件分支
1.对当前工资为30万日元以上的员工,降薪10%:2.对当前工资为25万日元以上且不满28万日元的员工,加薪20% update salaries set salary = case when sal ...
- Python模块之 sys
# sys模块是与python解释器交互的一个接口 import sys print(sys.argv) # 命令行参数list,第一个元素是程序本身路径 # (第一个元素就是执行文件的时候,写在py ...
- 洛谷P4238【模板】多项式求逆
洛谷P4238 多项式求逆:http://blog.miskcoo.com/2015/05/polynomial-inverse 注意:直接在点值表达下做$B(x) \equiv 2B'(x) - A ...
- oracle中CAST函数使用简介【转】
CAST()函数可以进行数据类型的转换. CAST()函数的参数有两部分,源值和目标数据类型,中间用AS关键字分隔. 以下例子均通过本人测试. 一.转换列或值 语法:cast( 列名/值 as 数据类 ...
- keil-rtx
OS:任务级设计,任务间耦合小:改变裸机前后台设计方案中后台任务轮训无优先级重要任务得不到确定性响应:伪并行,提高利用率. 在keilv4.74最后一个版本之后,KIELV5将KEIL-RTX该为CM ...
- [luogu 1967]货车运输
货车运输 题目描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在不超过车辆限重的情 ...