HTML5学习（三）：布局标签、列表、超链接和id

1、布局标签

header表示网页的头部（页眉）
main表示网页的主体部分（一个页面中只会有一个main）
footer表示网页的底部（页脚）
nav表示网页中的导航
aside和主体相关的其他内容（侧边栏）
article表示一个独立的文章
section表示一个独立的区块，上边的标签都不能表示时使用section
div 块元素，没有任何的语义，就用来表示一个区块。目前来讲，div还是主要的布局元素
span 行内元素，没有任何的语义，一般用于在网页中选中文字

2、列表

在html中可以创建列表，html列表一共有三种：

有序列表
无序列表
定义列表

有序列表
使用ol标签来创建有序列表，使用li表示列表项

<ol><li>Mix flour, baking powder, sugar, and salt.</li><li>In another bowl, mix eggs, milk, and oil.</li><li>Stir both mixtures together.</li><li>Fill muffin tray 3/4 full.</li><li>Bake for 20 minutes.</li>
</ol>

无序列表
使用ul标签来创建无序列表，使用li表示列表项

<ul><li>Milk</li><li>Cheese<ul><li>Blue cheese<ul><li>Sweet blue cheese</li><li>Sour blue cheese</li></ul></li><li>Feta</li></ul></li>
</ul>

定义列表
使用dl标签来创建定义列表，使用dt表示定义的内容，使用dd来对内容进行解释说明

<dl><dt>Beast of Bodmin</dt><dd>A large feline inhabiting Bodmin Moor.</dd><dt>Morgawr</dt><dd>A sea serpent.</dd><dt>Owlman</dt><dd>A giant owl-like creature.</dd>
</dl>

3、超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
使用a标签来定义超链接，href属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址
超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

<a href="https://www.baidu.com">超链接</a>

内部地址
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，会以./或../开头

./ 表示当前文件所在目录，可以省略不写
../表示当前文件所在目录的上一级目录

新建页面
打开超链接时，使用target属性，来指定超链接打开的位置。可选值：

_self在当前页面中打开超链接，默认值
_blank在新建页面中打开超链接

锚点跳转

可以使用javascript:void(0);来作为href的属性，此时点击这个超链接什么也不会发生
可以将#作为超链接的路径的占位符使用，此时点击这个超链接会跳转到当前页面的顶部的位置
可以跳转到页面的指定位置（锚点），只需将href属性设置#目标元素的id属性值（唯一不重复）

4、id

id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。

语法：

<element id="value">

HTML5学习（三）：布局标签、列表、超链接和id相关推荐

html5学习系列——qrs标签
旧标签: (1)<q>标签作用:定义一个短的引用:浏览器经常会在各种引用的周围插入引号. 属性:cite 规定引用的源url (2)<s>标签作用:对那些不正确的,不准确 ...
修改meta标签查看源码没效果怎么办_Spring 源码学习(三)-自定义标签
又来填坑啦,上一篇讲完默认标签的解析,这篇笔记记录一下自定义标签的解析吧. 我们知道,Spring 源码的核心模块是 Spring-core 和 Spring-beans,在此基础上衍生出其他模块,例 ...
HTML5 ＜a＞标签
实例 HTML5 <a> 标签的主要作用是用于超链接,可以链接到其他页面也可以链接到本地的其他文件,你可以通过下面的这个示例来认识 <a> 标签. 链接到W3Cschool教程 ...
前端学习第三章——a标签（超链接）
目录 a标签(超链接) 超链接的本地跳转功能性链接 a标签(超链接) 我们浏览一个网页,比如京东.天猫.腾讯视频.csdn.掘金,这些网站,我们总是可以看到一些按钮或者图片或者文字,点击之后可以跳转 ...
HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
html_常用标签_盒子标签_图片标签_超链接_列表标签（2）
接着上一篇博客继续完成常用标签学习本节,将介绍学习: 4.盒子标签 ...
结合HTML5的语义化标签，运用DIV＋CSS网页布局技术设计一个个人博客页面
** CSS+DIV页面布局 ** 结合HTML5的语义化标签,运用DIV+CSS网页布局技术设计一个个人博客页面.要求: (1)header标签定义页面头部区:nav标签定义导航区:div标签定义中 ...
HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...
web前端html5+css3学习笔记(3)——标签
目录一.排版标签 1.标题标签 2.段落标签二.语义标签三.块级元素和行内元素 1.块级元素 2.行内元素四.文本标签 1.常用文本标签 2.不常用文本标签五.图片标签六.相对路径与绝对路 ...