跟随黑马学前端-3，HTML标签

第三天：HTML标签

java.lang.StackOverflowError: Love must be long long type

学习目标

  • 能够说出标签的书写注意规范

  • 能够写出HTML骨架标签

  • 能够写出超链接标签

  • 能够写出图片标签并说出alt和title的区别

  • 能够说出相对路径的三种形式

学习路线

HTML标签

  • HTML语法规范

    1. HTML标签必须是由尖括号包围的关键词，例如<html>
    2. HTML标签通常是成对出现的，例如<html>和</html>，我们称之为双标签，其中第一个标签是开始标签，第二个是结束标签
    3. 有些特殊的标签必须是独个的标签，例如</br，我们称之为单标签
1
2
<html></html>       <!--双标签：标签成对出现-->
</br>               <!--单标签：标签独自出现--><!--可以直接写 <br> 效果也是一样的-->

  • 标签关系

    双标签关系可以分两种：包含和并列

    包含关系：

    1
    2
    3
    <head>
        <title></title>
    </head>

    并列关系

    1
    2
    <head></head>
    <body></body>
HTML基本结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写的

HTML页面也称作HTML文档

1
2
3
4
5
6
7
8
<html>
<head>
    <title>我的第一个页面</title>
</head>
<body>
这里也不知道些什么比较好
</body>
</html>

image-20220925162952249

开发工具

我们可以直接用VS Code进行H5的编写

image-20220925163410867

  • <!DOCTYPE>标签

    文档类型的声明标签

    1
    <!DOCTYPE html>

    表示当前采用的是HTML5版来显示网页。必须写在第一行。这不是HTML5标签。

  • lang语言语种

    用来定义当前文档的显示语言。

    en英语

    zh-CN简体中文

    通常用来提示浏览器当前语种

  • 字符集

    字符集（charset）是多个字符的集合，以便计算机能够识别和储存各种文字

    在标签内，可以通过标签的charset属性来规定HTML文档应当使用哪种字符进行编码

文字标签

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更加清晰

  • 标题标签

    为了使网页具有语义化，我们经常会在页面中用到标题标签，HTML提供了<h1>-<h6>共6个网页标签

    1
    2
    3
    <h1>
        我是一级标题
    </h1>

  • 段落和换行标签

    在网页中，为了键文字更加条理性的展示出来，需要将这些文字分段。

    <p>是HTML的分段符 paragraphs

    1
    2
    3
    <p>
        我是一个段落标签
    </p>

    • 文本会根据浏览器自动换行。

    • 段落之间有空隙

  • 换行标签

    <br>是一个单标签 break

  • 文本格式化标签

    在网页中，有时候需要为文字设置粗体，下划线，斜体等效果。这时候就要用到HTML中的文本格式化标签，使文字以特殊的方式展示。

    1
    2
    <strong>我是加粗标签</strong>
    <b>我是加粗标签</b>
    1
    2
    <em>我是倾斜标签</em>
    <i>我是倾斜标签</i>
    1
    2
    <del>我是删除线</del>
    <s>我是删除线</s>
    1
    2
    <ins>我是下划线</ins>
    <u>我是下划线</u>
<div>和<span>标签

<div>和<span>是没有语义的，他们就是一个盒子，用来装内容的

1
2
<div>这是头部</div>
<span>今日价格</span>

div是division的缩写，表示分割、分区。span表示跨度、跨距

特点：

一个div直接会独占一行（大盒子）

1
<div>我直接占一行</div>

多个span将会整合到一行（小盒子）

1
2
3
<span>我是span1</span>
<span>我是span2</span>
<span>我是span3</span>
图片标签和路径

  1. 图片标签

    在HTML标签中，<img>标签用于定义HTML页面中的图像。

    1
    <img scr = "图像url"/>

    image的缩写

    src是<img>标签的必须属性，它用于指定文件的路径和文件名

    我们还可以添加属性：alt。替换文本，图片显示不出来的时候用文字替换。

    1
    <img scr = "img.jpg" alt = "我真的显示不出来"/>

    就像这样：image-20220927175442528

    我们还可以添加title属性，这是鼠标停留在图片上的提示信息

    1
    <img scr = "img.jpg" alt = "我真的显示不出来" title="这是图片信息"/>
    属性 属性值 说明
    src 图片路径 必需的属性
    alt 文本 替换文本，图像不能显示时的提示信息
    title 文本 提示文本，鼠标停留在图片上的提示信息
    width 像素 设置图像的宽度
    height 像素 设置图像的高度
    border 像素 设置图像的边框粗细

    一般来说，我们在开发过程中只需要修改高度和宽度中任意一个即可。另一个将会同比例缩放

    对于图片边框，我们一般不通过在HTML中设置图片属性来设定，而是在CSS中设定

注意：图片标签可以有多个属性，但是必须写在标签名img后面。

​ 属性之间是不分先后顺序的，属性之间必须以空格区分开

​ 属性采用键值对的格式，即 key = "value"的格式，属性=“属性值”​

  1. 路径

    • 相对路径：

      以引用文件所在位置作参考基础，而建立出的目录路径

      1
      <img src = "images/img.jpg"/>

      | 相对路径分类 | 符号 | 说明 |
      | ------------ | ---- | ------------------------------------------------------------ |
      | 同一级路径 | | 图像位置位于HTML文件同一级，如<img src = "baidu.png"/> |
      | 下一级分类 | / | 图像文件位于HTML文件下一级，如<img src = "images/baidu.png"/> |
      | 上一级分类 | …/ | 图像文件位于HTML文件上一级，如<img src = "../baidu.png/>" |

    • 绝对路径

      是指目录下的绝对路径，直接到达目标位置，通常是指从盘符开始的路径

超链接标签

在HTML标签中，<a>标签常常用于定义链接，作用是从一个页面跳转到另一个页面

语法：

1
<a href = "跳转目标" target = "目标窗口的弹出方式"> 文本或图像 </a>

<a>是英语单词anchor的缩写，意为锚

属性 作用
href 用于指定链接目标的url地址，（必须属性）当作为标签应用href属性时，他就具有了超链接的功能
target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开

链接分类：

  1. 外部链接：例如

    1
    <a href = "http://www.baidu.com" target = "_blank"> 百度 </a>

  2. 内部链接

    内部链接网站页面之间的相互链接，直接链接内部网页名称即可，例如：

    1
    <a href = "index.html" > 首页 </a>

  3. 空链接

    如果当时没有确定链接目标时，

    1
    <a href = "#" > 首页 </a>

  4. 下载链接

    如果href内地址是一个压缩包或者文件，将会下载这个文件，例如：

    1
    <a href = "img.zip" > 下载 </a>

  5. 网页元链接

    在网页中的各种网页元素，比如文本、图像、表格、音频、视频等，都可以添加超链接。链接：

    1
    <a href = "http://www.baidu.com" > <img scr = "img.jpg"/> </a>

  6. 锚点链接

    作用：在此页面中跳转至指定位置

    • 在连接文本的href属性中，设置属性为#名字的形式，如<a href = "#two"> 第二集 </a>

    • 找到目标位置标签，在里面添加一个id属性 = 刚才的名字，如：

      1
      <h3 id = "two"> 第二集介绍 </h3>

    例如：

    1
    2
    3
    4
    5
    6
    7
    <a href = "#two"> 第二集</a>

    .
    .
    .

    <h3 id = "two"> 第二集介绍 </h3>
HTML中的注释和特殊字符

  • 注释

    例如：

    1
    <!-- 在这里添加注释 -->

  • 特殊字符

    HTML中一些特殊字符很难或不方便使用，此时我们可以使用下面的字符来代替

    HTML 原代码 显示结果 描述
    &lt; < 小于号或显示标记
    &gt; > 大于号或显示标记
    &amp; & 可用于显示其它特殊字符
    &quot; “ 引号
    &reg; ® 已注册
    &copy; © 版权
    &trade; ™ 商标
    &ensp; 半个空白位
    &emsp; 一个空白位
    &nbsp; 不断行的空白