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">