页面结构
开头我我们先复习一下,通用的HTML5页面结构:
接下来我们将会较为分别介绍每个标签。
网页基础标签
1.<header>页眉
<header>标签定义了文档的头部区域(可以理解为页眉)。该元素适合在<body>标签内部使用。
<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<h1>页眉</h1>
</header>
</body>
</html>
页眉
需要注意的是,<head>与<header>看起来相似但是完全不同,要将两者区分清除。
- head作为整个html页面的头部
- header作为文档的头部区域使用
2.<footer>页脚
与<header>相对应,<footer>用于定义文档的页脚
<footer>
<p>Posted by: Xiao Lu</p>
</footer>
当然直接写这一串代码,无法实现页脚固定在页面的下方这样的功能,需要结合CSS才能够实现。你若心急的话,可以先参考这篇文章来实现该功能。
footer至于底部的四种方法,不过这篇文章发布于2012年并没有用到最新的标准,但是作为HTML与CSS基础学习还是可行的(HTML现在最新标准为HTML5,CSS已经发展到CSS3)
3.<nav>导航链接部分
<nav>是作为作为标注一个导航链接的区域的标签
<nav>
<p>前端入门学习笔记</p>
<a href="https://blog.csdn.net/TUTsmile/article/details/81455784">环境配置</a>
<a href="https://blog.csdn.net/TUTsmile/article/details/81457269">HTML基础(一)</a>
<a href="https://blog.csdn.net/TUTsmile/article/details/81478253" tpye="_blank">HTML基础(二)</a>
</nav>
在CSDN的MarkDown中的表现如下:
在浏览器中代码效果如下
一般而言参考浏览器中的代码效果即可,此处列出两种不一样的效果,是想要提醒一下大家,在不同的环境中,实现效果可能略有些不同,需要多做测试。
<nav>标签内部使用链接标签<a>,使用规则并无任何变化,只需要加上tpye=”_blank”,即可在新标签中打开链接。
4.<article>文章
W3C的定义为:<article>定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
来源:
- 论坛帖子
- 博客文章
- 新闻故事
- 评论
按照我个人的看法,至需要理解article的英文意思即可在合适的环境下使用article标签。
在牛津词典中,article的解释为:(报刊上的)文章,论文,报道 ,(协议、契约的)条款,项 ,
抽象之后,可知道它们的共同点是都有多段文字,按照我的看法,只要出现多段文字,都可用article。
<article>
<h1>文章标题</h1>
<p>文章元素的内容</p>
</article>
文章标题
文章元素的内容
5.<section>部分
<section>定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
<section>
<h1>Section</h1>
<p>words</p>
</section>
Section
words
6.<aside>侧边栏
<aside>在W3C的定义为:定义<article>标签外的内容。
大部分时候,都是作为侧边栏进行使用,所以我直接将其理解为侧边栏。
<aside>
<p>aside</p>
</aside>
如同footer一样,需要实现侧边栏功能的话,需要与CSS配合。