块和行内
块元素
块属于布局,在网页中一般通过块元素来对页面进行宏观布局。只在块元素中放行内元素,禁止在行内元素中放块元素。
<!--more-->
行内元素
p(p标签是行内元素)标签禁止放任何块元素,行内元素主要用来包裹文字。
浏览器纠正:
浏览器在解析网页的时候,会自动对网页中不符合规范的内容进行修正,比如标签写在了根元素的外部,p元素中嵌套了块元素,根元素中出现了除head和body以外的子元素。所以上图虽然写在了外部,但是浏览器会纠正,纠正后的内容是放入到内存中的,那么如何查看内存中此网页的内容呢?只需右键-检查,如下图,本来写在html外部的h1标签放到了html标签里面。
p元素里面放块元素也是一样:
结构化标签
header标签
表示网页头部,一个网页可以有多个头部
main标签
表示网页主体部分(头部以下),一个页面中只会有一个main
footer标签
表示网页的底部,与header一样,可以有多个底部。header和footer都可以用来表示网页的某一个部分的头部或底部。
nav标签
nav:航海家。表示网页中的导航
比如京东的导航栏就可以用nav来实现:
aside标签
表示与主体相关的其它内容(侧边栏)
article标签
表示一个独立的文章
但是为什么这里,他们的显示效果都是一样的呢?这就是我们要强调的,html只负责语义,css负责样式,所以每一个标签比如nav标签要做成导航栏样式是css负责的。我们只需关注标签的语义。
section标签
表示一个独立的区块,上边的标签都不能表示时就是用section。
div标签
没有语义,就用来表示一个区块,div是最最主要的布局元素。div可以用来表示上面介绍的标签的所有语义。(div其实有一点违反html的结构化思想,但是用习惯了,一个网页其实没有必要分的那么细,所以就用div)
span标签
行内元素,没有任何的语义,一般用于在网页中选中文字。
span一般与div一起使用。
列表
在html中可以创建列表,html列表一共有三种:
-
有序列表
-
无序列表(ul标签)
-
定义列表
ul标签(unorder)
无序列表,使用ul标签来创建无序列表
ol标签(order)
有序列表,使用ol标签来创建有序列表
但是这两种标签在不同浏览器显示有差异,所以一般不用。
dl标签(define)
定义列表,使用<dl>
标签来创建一个定义列表
使用<dt>
来表示定义的内容
使用<dd>
来对内容进行解释说明
列表之间可以互相嵌套。
超链接
a标签
超链接可以让我们从一个页面跳转到另一个页面,或者是当前页面的其它位置。
使用<a>
标签创建超链接,是一个行内元素。在a标签内可以嵌套他自身之外的任何元素。
href属性:指定此超链接往哪里跳转。值可以是一个外部网站地址,也可以跳转到内部页面
相对路径与绝对路径
当需要跳转到一个服务器内部的页面时候,都会使用相对路径,相对路径一般都会使用.或..开头,/可以省略不写。如果不写.也不写../则默认就是相当于写了./
./:表示当前文件所在的目录,在这里当前页面就是09相对路径.html
../:表示当前文件所在目录的上一级目录,在这里就是当前页面的上一层目录
./就是09相对路径.html此文件所在的目录,相当于就是path
所以这样写是找不到这个07列表.html这个文件的
<!--意思一样--> <a href="./07列表.html"></a> <a href="07列表.html"></a>
思考,如何使用路径在09访问到target2.html?
<a href="../inner/target2.html">跳转到target2.html</a>
新窗口打开超链接
<a href="https://www.baidu.com" target="blank">新窗口打开超链接</a>
target属性
-
self:默认值,在当前页面中打开超链接
-
blank:在一个新的窗口中打开超链接
回到顶部
将超链接的href属性设置为#,点击即刻回到顶部的位置
<a href="#">回到顶部</a>
回到底部
我们知道将href="#"为回到顶部,那么如何在页面一开头点击就跳到页面的底部呢?这时候就需要定位,通过为跳转到底部的目标标签增加一个id,点击回到底部即刻定位到在底部的这个标签的位置,就可以实现回到底部。
标签的id
id是唯一不重复的,是元素的唯一标识,同一个页面中不能出现重复的id属性值,都以字母开头且符合驼峰命名。
为底部的标签定义一个id:
<a id="buttom" href="#">回到顶部</a>
通过#id 定位标签:
<a href="#buttom">回到底部</a>
思考:如何通过超链接跳转到某一个自然段?(通过给标签设置id,然后在a标签的href属性进行#id值
绑定)
在开发中,可以将#作为超链接都路径的占位符使用,但是也会回到顶部。如果写href=""
的话,超链接就不能点击,那么如何才能写一个毫无作用地址作为href的占位符的超链接呢?可以写<a href="javascript:;" >这是一个点击没有反应的超链接</a>