前端的初学日记（HTML篇）Day3-CSDN博客

本文链接：https://blog.csdn.net/Mothes/article/details/128453403

本文详细介绍了HTML中的语义化标签，包括行内元素、块元素和布局标签的使用，强调了语义的重要性。此外，还讲解了超链接的属性如href、target，并展示了如何实现页面内的跳转，例如去顶部和底部的功能。

摘要由CSDN通过智能技术生成

语义化标签（2）

行内元素（inline element）

主要用来包裹文字

块元素（block element）

在网页中一般通过块元素对页面进行布局，对网页进行宏观布局。一般情况下会在块元素中放行内元素（inline element），而不会在行内元素中放块元素。
例：一般：<h1><em>aaa</em></h1>
不是：<em><h1>aaa</h1></em>
块元素中基本上什么都能放，但注意p元素中不能放任何的块元素。有时没注意写错了但是发现并没有影响网页也没有出现乱码，是因为浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如：

标签写在了根元素<html>外面
p元素中嵌套了块元素
根元素中出现了除head和body以外的元素等

修正的时候不会在原码中纠正，浏览器自动修正。可以在网页中右键——检查或者直接点击F12，可查看网页源代码，但是注意尽量不要让浏览器去修正，容易出现问题。

布局标签（结构语义标签）

一般的布局标签

<header></header>网页的头部
main表示网页的主体部分，一般在头部下面（一个网页中只有一个）
footer表示网页的底部（footer和main可表示整个网页的头部底部，也可以是网页中某一个部分的头部底部）
有些标签要看兼容哪些浏览器
nav表示网页中的导航
例：在这里插入图片描述

aside表示和主体相关的其他内容（在网页中侧边栏）
例：在这里插入图片描述

article表示一个独立的文章
以上显示效果没区别，关注语义
section表示一个独立的区块
以上的标签都不能表示时使用section，以上用的不是很多，了解一下。

常用的布局标签

div：没有语义，就用来表示一个区块，目前来讲，div还是我们主要的布局元素，div可以代替上边所有。
span：是一个行内元素，没有任何的语义，一般用于网页中选中文字
显示效果没有特别区别

列表标签list

在HTML中也可以创建列表，html列表一共有三种。
1、有序列表
2、无序列表
3、定义列表

无序列表

使用ul标签来创建无序列表，使用li表示列表项，无序列表前不是序号。
例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <ul>
    <li>结构</li>
    <li>结构</li>
    <li>结构</li>
  </ul>
</body>
</html>

效果如下：

结构
结构
结构

有序列表

使用ol来创建（以下框架省略，只显示更改部分）

<ol>
    <li>结构</li>
    <li>结构</li>
    <li>结构</li>
  </ol>

效果如下：

结构
结构
结构

注：列表前面的 · 和 123 我们一般不用，因为不同浏览器之间预览是有差异的。

定义列表

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

<dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构，用来规定网页中哪里是标题，哪里是段落</dd>
      </dl>

效果如下：

结构
结构表示网页的结构，用来规定网页中哪里是标题，哪里是段落

dl用起来比较少，用的最多的是ul，列表之间可以互相嵌套。

超链接

超链接可以让我们从一个页面跳转到其他页面或者是当前页面的其他位置，使用a标签来定义超链接。（Alt+Shift+向下（上）箭头=向下（上）复制）
超链接是行内元素，在a标签里可以嵌套除它自身外任何元素（<br>*2+Tab是两个br标签，*几就是几个标签）

属性

href指定跳转目标路径
1.它的值可以是一个外部网站的地址。
2.也可以写一个内部页面的地址，但注意需要建立可以指引的目录路径。

绝对路径

a标签可以跳转到指定位置href后粘贴网址直接可跳转的为绝对路径（也可以跟域名）
例：

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

效果如下：（点击过会变颜色）

超链接

相对路径

当我们需要跳转到服务器内部的页面时，一般我们都会使用相对路径，相对路径会使用 ./ 或 ../ 开头，可以省略，不写默认./

./表示当前文件所在的目录

你的路径写到哪儿当前文件就是谁
例：建立一个新文件取名path，在path文件里建立文本取名01相对路径.html
在这里当前页面就是01相对路径.html
./=01相对路径.html所在的目录path
例：

<a href="./01相对路径.html">超链接1</a>

或

<a href="01相对路径.html">超链接1</a>

这里./就相当于path 意思是在path文件下找01相对路径.html
代表在path文件找01相对路径.html

../表示当前文件所在的目录的上一级目录

例1：建立一个新文件取名01，在01文件里建立文件path和文本target1.html
如果想找target1.html 文本不能在path（./）里找，需要到path的上一级01文件里找
../表示当前文件（target1.html）所在目录的上一级目录也就是01

<a href="../target1.html">超链接2</a>

这里../表示01文件意思是在01文件下找target1.html

例2：在path文件里建inner文件，在inner里建文本target2.html

<a href="./inner/target2.html">超链接3</a>

这里表示在path下的inner去找target2.html
如果inner文件里还有abc文件就一直排下去，有几个文件写几个/，一个/表示一个目录
例3：

<a href="./inner/abc/target2.html">超链接3</a>

并不复杂，多加练习

target属性

target属性，用来指超链接打开的位置，可选值不能随便写。
self 默认值（写不写都一样）在当前页面打开超链接
blank 在一个新的页面中打开超链接
格式如下：

<a href="https://www.baidu.com" target="_self">百度(本窗口打开)</a>
<a href="https://www.baidu.com" target="_blank"> 百度(新窗口打开)</a>

效果如下：(注：请用编译器运行）

百度(本窗口打开)
百度(新窗口打开)

去顶部

想在本页面快速去顶部，可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面顶部的位置
例：

<body>
<a href="#">回到顶部</a>
</body>

效果如下：(注：请用编译器运行）

回到顶部

可以自己找一些文本练习一下，可以打lorem+Tab自动生成英文文本

去底部

如果想去底部或者任意位置，需要加一个特殊符号——id
例：（注：请用编译器运行）

<a href="#bottom">去底部</a>  
文章内容 
<a id="bottom" href="#">回到顶部</a>

id属性

id属性是唯一不重复的，每一个标签都可以加一个id属性，id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性，id都是字母开头。
想要跳转到页面的指定位置，只需将href属性设置#目标元素的id属性值
例：（注：请用编译器运行）

<a href="#p3">去第三个自然段</a>  
<p id="p3">文章内容 <p>

想去哪儿就需要给哪儿一个属性，在开发中，页面还没定，这个href值没办法写，这个时候需要写一个东西给占上，可以将#作为超链接的路径的占位符使用。

<a href="#">这是一个超链接</a>

可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生

<a href="javascript:;">这是一个新的超链接</a>