web前端常用标签（html）

智商不在服务器

已于 2024-03-18 18:46:02 修改

阅读量1.2k

点赞数 26

文章标签： html 前端

于 2024-03-17 19:44:32 首次发布

本文链接：https://blog.csdn.net/LIUaiCHEN_/article/details/136787515

版权

本文详细介绍了HTML的基础知识，包括标签的定义与语法、常用排版、图像、链接、注释标签的使用，以及绝对路径、相对路径的区别，同时还涵盖了无序和有序列表以及文本格式化的方法。

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

1.定义

1.1标签

语法规范：<标签名属性名="属性值">标签名</标签名> 标签之间可以嵌套

1.2属性

定制元素的行为的。属性是不通用的，每一个标签存在自身的属性。当属性名=属性值时，可以只写属性值

2.HTML常用标签

2.1 排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

排版标签
标签名	作用	属性
标题标签<hn></hn>	为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即h1-h6	包含所有全局特性
段落标签<p></p>	可以把 HTML 文档分割为若干段落在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落. 是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。	包含全局属性 `(<p>` 标签的 `align` 属性已被弃用，请不要使用)
水平线标签<hr>	在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，	该元素包含全局属性。 align 已弃用非标准设置页面上分割线的对齐方式。如果没有指定任何值，默认值为 `left`。 color 非标准非标准使用颜色名或十六进制设置分割线的颜色。 noshade 已弃用非标准令分割线不包含阴影。 size 已弃用非标准设置分割线高度的像素值。 width 已弃用非标准使用像素或者百分比设置分割线的宽度。
换行标签<br/>	在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签	包括全局属性 (en-US)。 clear 已弃用指定换行后下一行文本开始位置。
div 和 span标签	他们两个都是盒子，用来装我们网页元素的，只不过他们有区别，现在我们主要记住使用方法和特点就好了 div标签用来布局的，但是现在一行只能放一个div span标签用来布局的，一行上可以放好多个span，不换行	所有全局属性。

2.2图像标签<img>

要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。

**注意: **

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
采取键值对的格式 key=“value” 的格式
重点属性掌握点：

src：表示链接图片的地址，包含图片名称
alt：当图片不能正常显示提示的文本信息
title：表示鼠标悬停在图片时显示的信息
width：图片占屏幕的像素宽度
height：图片占屏幕的像素高度

2.3链接标签<a>

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

注意：
外部链接需要添加 http:// www.baidu.com
内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=“#”)，表示该链接暂时为一个空链接。
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

2.4 注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

语法格式：

    <!-- 注释语句 -->     快捷键是：    ctrl + /

注释重要性：
注释是给人看的，目的是为了更好的解释这部分代码是干啥的，程序是不执行这个代码的

3. 路径

3.1概述

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

3.2 绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，指当所有网页引用同一个文件时，所使用的路径都是一样的。
“F:\web\img\logo.gif”，或完整的网络地址，例如“http://www.baidu.cn/images/logo.gif”。

3.3 相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

同一级路径：只需输入图像文件的名称即可，如<img src=“baidu.gif” >

下一级路径：图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images）如<img src=“images/baidu.gif” >

上一级路径：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src=“…/baidu.gif” >

相对路径，是从代码所在的这个文件出发，去寻找我们的目标文件的，而我们所说的上一级下一级同一级简单说，就是图片位于 HTML 页面的位置

4. 列表标签

4.1无序列表 ul

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

ul就是声明一下。这是一个无序列表，li表示列表项

注意：

1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。

值	描述
disc	默认值、实心圆
circle	空心圆
square	实心方块

<body>
    <p>我的电脑</p>
    <ul type="square">
        <li >我的c盘
            <ul type="disc">
                <li>我的视频</li>
                <li>我的音乐</li>
                <li>我的文档</li>
            </ul>
        </li>
        <li>我的D盘
            <ul type="disc">
                <li>我的视频</li>
                <li>我的音乐</li>
                <li>我的文档</li>
            </ul>
        </li>
    </ul>
</body>

4.2 有序列表 ol

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

4.3 自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

5.文本格式化标签

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

标签语义：突出重要性，比普通文字更重要

语义	标签	说明
加粗	<strong></strong>或者<b></b>	更推荐使用<strong>标签加粗，语义更强烈
倾斜	<em></em>或者<i></i>	更推荐使用<em>标签加粗，语义更强烈
删除线	<del></del>或者<s></s>	更推荐使用<del>标签加粗，语义更强烈
下划线	<ins></ins>或者<u></u>	更推荐使用<ins>标签加粗，语义更强烈