前端工程师实战开发：HTML基础知识-3（块元素和行内元素）

块和行内

块元素

块属于布局，在网页中一般通过块元素来对页面进行宏观布局。只在块元素中放行内元素，禁止在行内元素中放块元素。

<!--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列表一共有三种：

1. 有序列表

2. 无序列表（ul标签）

3. 定义列表

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属性

1. self：默认值，在当前页面中打开超链接

2. 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>