结构化语义标签:
Content sectioning
显示效果上没有区别,仅仅是在语义上有区别
div 、span
<body>
<!-- 网页的头部,可以有多个头部,也可以用来表示网页中某一部分的头部 -->
<header></header>
<!-- 网页主体,页面中只有一个 -->
<main></main>
<!-- footer 网页底部,,也可以用来表示网页中某一部分的底部 -->
<footer></footer>
<!-- 网页中的导航 -->
<nav></nav>
<!-- 表示和主体相关但是不属于主体的其他内容 -->
<aside></aside>
<!-- 独立的文章 -->
<article></article>
<!-- 表示一个独立的区块,即上述标签都不能表示的时候 -->
<section></section>
<!-- 没有语义,仅仅用来表示区块,目前仍是主要的区块 -->
<div></div>
<!-- 行内元素,没有任何语义,用于在网页中选中文字 -->
<span></span>
</body>
列表:
在html中创建列表:
1、无序列表 ul标签创建,li表示列表项 (可以用来做导航菜单)
2、有须列表 ol创建,li列表项
3、定义列表 dl创建,dt是列表项,dd表示项内容 (可以用来做下拉菜单)
列表之间可以互相嵌套
超链接:
a 标签,帮助当前页面跳转到其他页面或者当前页面的某个位置,也是一个行内元素
a标签中可以嵌套除他自身外的任何元素
属性: href 指定跳转的路径 (紫色表示访问过的地址,蓝色表示没有访问过的)
href的值可以是外部网页的地址,也可以是内部页面(最好是两个页面在同一个路径下)
在跳转到外部网址时,属于绝对路径;跳转到内部页面时,属于相对路径
“相对路径”问题:当我们需要跳转到一个服务器内部的页面时,一般我们都会使用相对路径,相对路径一般使用 ./ 或者 ../ 开头,./是默认的,可以不写,表示当前文件所在目录。../表示当前目录的上一级目录
去顶部:当href的值为 # 时,可以实现页面由回到顶部的功能。
去底部:其实就是到最后一个标签的位置,实现这一功能,给标签加id属性
id是元素的唯一标识,页面中不能出现重复的id,区分大小写,字母开头
href的值设置为 #id值
当在开发的过程中,尚未确定超链接的功能,但是还需要定义一个超链接的时候,可以使用占位符,有两种占位符,具体实现如下
点击超链接,打开新的窗口,而不是覆盖当前的页面。使用target属性
target 可选值: _self 默认值 在当前页面打开超链接 (外国网站用这个多)
_blank 在一个新的页面中打开(很方便但是会导致打开很多的页面 )