语义化标签
“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。
HTML 标签语义化是让大家直观的认识标签和属性的用途和作用，很明显<hx>看起来很像标题，因为拥有粗体和较大的字号。<strong>，<em>用来区别于其他文字，起到了强调的作用。
HTML标签语义化的设计思维其实就是给某块内容用上一个最恰当最合适的标签，这样一来，不管是谁都能看懂这块内容是什么。
例如:
<main>标签：表示文档中的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
查看下面这两段html和css代码，体会下里面的许多语义化的标签吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<title>语义化标签</title>
</head>
<body>
<!--页眉-->
<header>
<!-- 导航 -->
<nav><ul><li><a href="#">链接1</a></li><li><a href="#">链接2</a></li><li><a href="#">链接3</a></li></ul></nav>
</header>
<!-- 主体 -->
<main>
<!-- 文章 -->
<article>
<h1>大标题</h1>
<!-- 节 -->
<section>
<h3>标题1</h3>
<p>文章正文</p>
</section>
<!-- 节 -->
<section>
<h3>标题2</h3>
<p>文章正文</p>
</section>
<!-- 节 -->
<section>
<h3>标题3</h3>
<p>文章正文</p>
</section>
</article>
</main>
<!-- 与页面主体无关的内容 -->
<aside>
可显示广告、引用、侧边栏
</aside>
<!-- 页脚 -->
<footer>
<!-- 地址 -->
<address>
显示底部地址
</address>
</footer>
</body>
</html>
body {
text-align: center;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
margin-right: 20px;
}
article {
margin-top: 50px;
}
section {
margin: 30px 0 50px;
}
aside {
position: fixed;
top: 30%;
width: 30%;
padding: 10px;
color: white;
background-color: rgba(0, 0, 0, .3);
}
footer {
height: 10%;
}
更多学习内容，就在码芽网http://www.mayacoder.com/lesson/index
部分页面显示的结果如下：
相关推荐
HTML和CSS是构建网页的基础，它们分别负责网页的内容结构和样式设计。HTML（HyperText Markup Language）是一种标记语言，用于定义网页的结构和意义。CSS（Cascading Style Sheets）则用于控制网页的布局和视觉效果...
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS ...
CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记Head...
CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS ...
css的笔记学习html&css的笔记学习html&css的笔记 学习html&css的笔记学习html&css的笔记学习html&css的笔记 学习html&css的笔记学习html&css的笔记学习html&css的笔记 学习html&...
JavaWeb新版教程-html&CSS-L和CSS-标题标签h1 - h6.avi
JavaWeb新版教程-html&CSS-L和CSS-超连接标签.avi
JavaWeb新版教程-html&CSS-L和CSS-img标签.avi
JavaWeb新版教程-html&CSS-L和CSS-HTML标签的介绍.avi
JavaWeb新版教程-html&CSS-L和CSS-HTML标签的语法.avi
JavaWeb新版教程-html&CSS-L和CSS-标签名选择器.avi
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
HTML&CSS入门学习笔记
html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与...
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 ...
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
《Head First HTML&CSS》是一本由Eric Freeman和Elisabeth Robson编写的经典教材，旨在为读者提供一种直观、高效的学习方式，深入浅出地讲解HTML和CSS的基础与高级应用。这本书之所以受到广泛赞誉，不仅在于其内容的...
2. **定义元素**：对于不被IE8识别的语义化标签，`myIE8up.js`可能会创建这些标签作为JavaScript对象，并赋予它们相应的CSS类名，以便通过CSS进行样式设置。 3. **DOM操作**：文件可能包含将这些语义化标签插入到DOM...