前端基础：HTML常用的标签、注释和特殊字符

曹莓奶昔

已于 2022-03-13 22:49:25 修改

阅读量2.1k

点赞数 2

分类专栏： HTML 文章标签： html 学习前端 vscode visual studio code

于 2022-03-09 13:00:52 首次发布

本文链接：https://blog.csdn.net/weixin_49555741/article/details/123370620

版权

HTML 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

2.1、div标签

一、HTML常用标签

1、文本格式化标签

在网页中为文字设置粗体、斜体、下划线的效果，来强调重要性。

标签	语义
<strong> </strong>, <b> </b>	加粗
<em> </em>, <i> </i>	倾斜
<del> </del>, <s> </s>	删除线
<ins> </ins>, <u> </u>	下划线

注：建议用第一种写法，语义更加强烈。重点记住加粗和倾斜标签。

2、<div>和<span>标签

这两个是没有语义的标签，它们就是一个盒子，用来装内容的布局。

2.1、<div>标签

div是division的缩写，表示分割、分区，该标签属于块级元素。

特点：

一行只能放一个div标签
可以设置高度，不可设宽度，宽度为100%
可以放块级元素和行内元素

2.2、<span>标签

span表示跨度、跨距；该标签属于行内元素

特点：

一行可以放多个span标签
可以设置高度和宽度
只放行内元素

3、图像标签

3.1 图像标签（重点）

<img>标签有很多属性，其中src是必须属性，它指的是图像文件的路径和文件名。

语法： <img src="URL"/>

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图片不能显示时显示的文字
title	文本	提示文本，鼠标放在图片上显示的文字
width	像素	图片的宽度
height	像素	图片的高度
border	像素	图片的边框粗

<!DOCTYPE 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>Document</title>
</head>

<body>
    <img src="images/14.jpg" alt="这是一只小狗" title="小狗" width="200px" ;height="200px" border="1px">
</body>

</html>

注意：①图像标签可以有多个属性，他们必须写在标签名img的后面

②属性无顺序，属性之间用空格分开

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

3.2 图像路径

目录文件夹：普通文件夹，放页面的相关素材，如html文件，图片等

根目录：文件夹的第一层

路径分为两种：

①相对路径（重点）：以引用文件为参考

②绝对路径：目录下的绝对位置，通常从盘符开始

例如：“D：\images\img\2.jpg”

4、超链接标签（重点）

从一个页面跳转到另一个页面

4.1 语法

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

4.2 超链接分类

外部链接：如<a href ="http:/www.baidu.com">百度</a>
内部链接：网页内部链接，如<a href="index.html">首页</a>
空链接：<a href ="#> 首页</a>
下载链接：如果href里面地址是文件（.exe）或者压缩包（zip），会下载这个文件
网页元素链接：网页中的网页元素，如文本、图像、表格、视频等
锚点链接：点击链接，快速定位页面的位置

在链接文件的href属性中，设置属性值为#xx形式，如<a href ="#2">简介</a>

找到目标位置标签，增加id属性=xx，如<h1 id="2">电影简介<h1>