【第一部分 | HTML】2：HTML的常用标签

| 本章目标

|标题标签

| 段落标签\和换行标签\

| 文本格式化标签

| 锚点链接《a href="#Name"》

| 特殊字符

这一篇文章，我们将介绍一下HTML常用的一些标签，这些标签很零散，因此归为一篇来介绍。

| 本章目标

HTML标签（上）

主要学习：标题、段落、文本格式化、图像、超链接、锚点链接、特殊字符

主要技巧：初始div和span、学习VS配置根目录和快捷创建文件、url相关知识

学习目标：可以制作简单的具有一定格式文本的网站、简单的页面跳转

|标题标签

| 段落标签\
和换行标签\

HTML中若不使用段落标签，则即使你给文本分了段，浏览器中的文本仍然不会以分段形式展示，会默认为一段。

同理，若不使用换行标签，则即使给文本换了行，浏览器中的文本仍然会视为没有换行

| 文本格式化标签

| div 和 span标签

注意：

一个div中定义的所有东西会独立地占用对应空间，占用一行，是一个大盒子，块级元素！

一个span中定义的东西只占用当前位置，占用一小块，是一个小盒子，行级元素！

具体如何使用，在今后网页布局的时候会学习。

| 图像标签

下列代码的图片存放在html所在目录 / imgs目录下，名字为Klee.jpg


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <h1>图像标签的使用h1>
    <p>通过alt可以设置图片加载失败时候的代替文本p>
    <p>通过title可以设置鼠标放置在图片上的标题文本p>
    <p>width=300px表示设置图片宽度为300像素p>
    <img src="imgs/klee.jpg" alt="图片加载失败" title="这是Klee" width="300px"/>
body>
html>

| VS根目录配置及路径url相关知识

1.两个概念

目录文件夹：存放html文件、img文件（目录）等的文件夹

根目录：把整个web各目录看作树，则最上面那个根节点文件夹就是根目录

2.在VScode中设置目录文件夹

File → Open Folder 即可打开目录文件夹。

这样以后点击“New File“的时候就可以直接在目录文件夹创建html啦

3.url的路径

| 超链接标签

url的种类：外部链接、内部链接、空链接、下载链接、网页元素链接 五种链接示例：

下面的代码，展示了外部链接、内部链接、空链接、下载链接四种链接的书写方式


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <h1>超链接标签h1>
    <p>a 表示这是一个超链接p>
    <p>href 是必备属性，表示超链接的urlp>
    <p>target="_blank" 表示新窗口打开页面p><br/>
 
    <h2>外部链接h2>
    <a href="https://blog.csdn.net/m0_57265007?spm=1011.2266.3001.5343" target="_blank">
        Klee
    a>
    <br/>
 
    <h2>内部链接h2>
    <a href="6.图片标签 img.html">
        内部链接
    a>
 
    <h2>空链接h2>
    <p>使用 href="#" 来表示这是一个空链接，一般用于表示目标网页还在开发中p>
    <a href="#">空链接a>
    
    <h2>下载链接h2>
    <p>如果url是一个文件或压缩包，则点击url后会下载这个文件p>
    <a href="imgs/klee.rar">下载图片klee.jpga>
 
    <h2>网页元素链接h2>
    <p>a标签内，除了写文本，其实还可以放上图片、视频、表格、音频、视频哦p>
    <a href="https://www.baidu.com/" target="_blank"><img src="imgs/klee.jpg" title="点击进入百度" width="300px"/>a>
body>
html>

| 锚点链接《a href="#Name"》

锚点链接的作用是实现当前网页的页内跳转（比如点一下右边向上的箭头就会回到网页顶部）


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <h2 id="top">目录h2>
    <span><a href="#Klee">Kleea>span>
    <span><a href="#Sagiri">Sagiria>span>
    <br/>
 
 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <img src="imgs/klee.jpg" id="Klee" width="400px"><br/>
    <a href="#top">回到顶部a>
    <br/>
 
 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <img src="imgs/Sagiri.jpg" id="Sagiri" width="400px"><br/>
    <a href="#top">回到顶部a>
 
body>
html>

| 特殊字符

在Html中，就算我们使用了

等标签，

文本中的空格，还是会被浏览器忽略掉。

如果我们想打空格，就需要特殊字符。

相关阅读:
存储服务器如何打造容灾集群系统？
六月集训(第23天) —— 字典树
差值结构的加法
树莓派移植FFmepg记录(x264、硬件编码支持)
第六章：Property-based Testing and Test Oracles
Spring 的代理开发设计
Jackson
抖音__ac_signature
Java 线程详解
ThreeJs学习

原文地址：https://blog.csdn.net/m0_57265007/article/details/127112145

【第一部分 | HTML】2：HTML的常用标签

| 本章目标

|标题标签

| 段落标签\和换行标签\

| 文本格式化标签

| div 和 span标签

| 图像标签

| VS根目录配置 及 路径url相关知识

| 超链接标签

| 锚点链接《a href="#Name"》

| 特殊字符

| 段落标签\
和换行标签\

| VS根目录配置及路径url相关知识