[warningbox title="About Me"]
欢迎各位读者访问，大家一起学习。
优秀是一种习惯♡♡♡
做更好的自己！
本人见识有限，写到博客难免有错误或疏忽的地方，还望各位大佬多多指点，在此表示感激不尽。♡♡♡
[/warningbox]
什么是语义元素：
语义指的是对一句话，一个词的正确解释。也就是元素本身能表达出来标签所包含内容类型的信息。
为什么要语义化：
- 代码结构：当没有CSS的情况下能够呈现出很好的内容结构
- 提升用户体验：
- 便于团队开发和维护：语义化使得代码更具有可读性，让其他开发人员能更理解HTML结构，减少差异化
- 方便其他设备解析：屏幕阅读器，盲人阅读器
HTML5页面结构
[info]HTML5提供了新的语义元素来定义网页的不同地方,他们也被称为"切片元素"[/info]
通用容器：
- div:块级通用容器
- span: 行内容器
[successbox title="语义元素"]
<title></title>简短、描述性、唯一（提升搜索引擎排名）
<hn></hn>：h1~h6分级标题，用于创建页面信息的层级关系。
<header></header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav></nav>：标记导航
<main></main>: 一个页面只能使用一次
<article></article>:包含文档，页面，就和报纸一样的内容
<section></section>: 具有相似主题一组的内容，比如网站的主页可以分为个人介绍，博客，联系
<aside></aside>: 值侧栏，指向文章的一组链接，广告，友情链接
<footer></footer>: 页脚，适用文章底部信息
<small></small>: 制定细则，输入负责声明，注解，版权。
<strong></strong>: 表示内容的重要性
<mark></mark>: 突出显示文本[yellow],提醒读着
<address></address>: 作者，联系信息，一般放到footer里面
<del></del>: 给文本添加一条删除线,移除内容
<ins></ins>: 给文本底部添加下划线, 添加内容
<code></code>: 标记代码，示例。
<pre></pre>: 预格式化文本，保持文本的换行和空格
<progress></progress>: 完成进度，可以通过JS进行动态更新
[/successbox]
[info]不要在最能吃苦的年纪选择了安逸！！！ --- Tornado♥[/info]
