HTML的常用标签

最新推荐文章于 2023-09-15 18:14:41 发布
最新推荐文章于 2023-09-15 18:14:41 发布
阅读量152 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z2908039948/article/details/127658879
版权

html常用标签

### 1、html列表

#### 1.1 无序列表

没有序列的一组内容。

(1)语法

```html

<ul>

    <li>苹果</li>

    <li>香蕉</li>

    ...

</ul>

```

(2)语义

无序列表，用于将没有数字顺序的一组数据或内容进行分组。

(3)默认样式（演示）

- 默认间距(外边距、内边距)

- 列表样式：实心圆

(4)典型应用

- 新闻列表

- 产品列表

- 导航、分页、选项止

(5)type属性

- disc列表样式实心圆

- circle 列表样式空心圆

- square列表样式为小方块

  ```html

  <ul type="square">

      <li>苹果</li>

      <li>香蕉</li>

  </ul>

  ```

  **注意:**type属性不常用，通常使用css属性替代。

#### 1.2 有序列表

(1)语法

```

<ol>

<li>出门</li>

<li>右转</li>

...

</ul>

```

(2)语义

无序列表,用于将顺序是有意义的一组数据或内容进行分组

(3)默认样式（演示）

- 默认间距

- 列表样式：数字编号

(4)典型应用 （图示）

- 烹饪食谱中的各个步骤

- 指路时的各处转弯方向

- 营养信息标签上 按含量排序的成分列表

- 面包屑导航

(5)type属性（了解）

- `a`: 小写字母

- `A`: 大写字母

- `i`: 小写罗马数字

- `I`: 大写罗马数字

- `1`: 数字

  ```html

  <ol type="I">

          <li>步骤一</li>

          <li>步骤二</li>

   </ol>

  ```

  **注意:**type属性不常用，通常使用css属性替代。

#### 1.3 定义列表

(1)语法

```

<dl>

<dt>定义</dt>

<dd>描述 </dd>

...

</dl>

```

(2)语义

- 包含术语定义以及描述的列表

- dl自定义列表、dt 自定义列表项、dd自定义列表项的注释（描述）

- 用于将一组项目及其相关的描述进行分组

(3)默认样式

- 默认dl，dd带有间距

(4)典型应用

- 名词解释、分类（大分类-细节的类别）

- 键-值对列表 （内存：100M）

**注意:**

允许使用多条项目定义与描述。

```HTML

<dl>

    <dt>姓名</dt>

    <dd>李美丽</dd>

    <dt>生日</dt>

    <dd>1990</dd>

</dl>

```

允许使用带有多个描述的单个项目定义。

```HTML

<dl>

  <dt>加入我们</dt>

  <dd>社会招聘</dd>

  <dd>校园招聘</dd>

  <dd>国际招聘</dd>

</dl>

```

### 2、行级标签

#### 2.1 图像

图像是网页的主要内容之一，在HTML标签中，img标签用于定义HTML页面中的图像。

(1)语法

```html

<img src="" alt="" width="" height="">

```

(2)标签属性

- src属性

  - 作用：用于指定图像文件的路径和文件名

  - 注意：是<img>标签的必须属性

  - 代码演示

- alt属性

  - 作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验

  - 代码演示

- width/height属性

  - 作用:指定图片宽度/高度

  - 注意：值可以不带单位默认px，只指定宽或高属性其中一个，另一个按照原比例等比缩放

  - 代码演示

(3)默认样式

- 多张图片可以交列在一行显示

- 默认产生下间隙

(4)典型应用

   作为内容展示的图像：产品图、广告图、详情页、文章页中插图。

**(5)图像路径**

页面中的图片会非常的多，通常我们会新建一个文件夹来存放这些图像文件images，这时候再查找图像，就需要通过路径的来描述图像文件的位置。

路径可以分成，相对路径和绝对路径。

**相对路径**

概述:相对路径是指由这个文件所在位置为参考基础，而建立出的目录关系，常用的相对路径包括当前目录，上一级目录，下一级目录。

- 当前目录

  - 语法

    一个点（.）后面跟一个斜杠表示当前目录也就是当前文件所在目录。

    ```HTML

    <img src="pic.png" alt="">

    <img src="./pic.png" alt="">     <!-- ./ 可以省略 -->

    ```

- 上一级目录

  - 语法

    两个点（.）后跟一个斜杠表示前文件所在目录的上一级目录。

    ```HTML

     <img src="../pic2.png" alt="">

    ```

- 下一级目录

  - 语法

    一个斜杠，表示图像文件位于HTML文件下一级。

    ```HTML

     <img src="images/pic3.png" alt="">

    ```

   

**绝对路径**

绝对路径文件在目录中的绝对位置完整描述，常见的绝对路径一种由其在网络上的绝对位置定义的位置，一种是本地从盘符出发的绝对位置。

- 网络绝对位置

  - 语法

    包括协议和域名：如：http://www.ujiuye.com/statics/images/logo.png

- 本地绝对位置

  - 语法

    D盘下webset文件夹下的image文件夹中的logo.png描述为：

    ```

    D:\webset\images\logo.jpg

    ```

  ​    特点:绝对URL始终指向同一位置，无论在何处使用

  **注意:**在链接到同一网站内的其他位置时，应尽可能使用相对链接。链接到另一个网站时，需要使用绝对链接。

#### 2.2 超链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。将文档链接到其他文档或资源，链接到文档的特定部分。

(1)语法

```html

<a href="">文字或图片</a>

```

(2)语义

 超链接

(3)默认样式

- 不独占一行

- 默认当前窗口打开

- 默认带有下划线、文字颜色

  ![](D:/web/2021/2021一阶段资料/day02/笔记/media/day02_04.png)

(4)超链接属性

- href属性

  - 作用：指定链接跳转的地址

    ```html

    <a href="http://www.jd.com">京东商城（文字链接）</a>

    <a href="4.例-导航.html" target="_blank"><img src="pic.png" alt="">（图片链接）</a>

    ```

七龙咕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML常用标签代码
05-07
在本资源中，我们看到的"HTML常用标签代码"显然是一个帮助初学者或开发者学习和练习HTML标签的资料。下面将详细介绍一些常见的HTML标签及其用法。 1. `<html>`: 这是每个HTML文档的根元素，包含整个网页的代码。...
HTML系列之图像标签img
热门推荐
老__L的博客
10-24 3万+
本文主要介绍 img 标签。 将一份图像嵌入文档。没有基线（baseline）;根据图像文件的类型，图像可能会有一个原始分辨率（intrinsic dimension）或者叫原始宽高。对于一些类型的图像，原始分辨率并不是必要的；在高分辨率设备上， srcset 将被优先加载，取代 src 属性中的图像。在支持 srcset 的用户代理中，src 属性中的图片被作为 1x 候选项；alt 属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。
HTML基础——图像标签（img标签）
Ariel_欢
01-09 2万+
一、思维导图： 二、代码： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>img标签</title> </head> <body> • <img src="花花.jpg" /> • &l
<img>标签
立业的博客
11-27 3245
■ 定义 <img>标签用于定义网页的图片显示 <img>标签是单标签 img代表单词image，意为图像 ■ 属性 □src属性 是<img>标签的必需属性，用于在页面上显示图像 需要使用该属性指定图片的URL地址，即图像文件的路径和文件名 <img src="图片的url"> □alt属性 alt属性用来为图像定义一串预先自定义的可替换...
img标签
pbaiking的博客
02-26 1234
页面中的图片会非常的多，通常我们会新建一个文件夹来存放这些图像文件images，这时候再查找图像，就需要通过路径的来描述图像文件的位置。概述:相对路径是指由这个文件所在位置为参考基础，而建立出的目录关系，常用的相对路径包括当前目录，上一级目录，下一级目录。-- ./ 可以省略 -->- 作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验。图像是网页的主要内容之一，在HTML标签中，img标签用于定义HTML页面中的图像。- 作用：用于指定图像文件的路径和文件名。
img标签有哪些属性，分别有什么作用
最新发布
study_way的博客
09-15 9162
（alternative text）：这个属性用于提供图像的替代文本，通常在图像无法加载或者用户使用辅助技术（如屏幕阅读器）时显示。Img 标签是用于在网页上显示图像的 HTML 元素，它有一些属性可以用来控制图像的显示和行为。：这个属性用于提供多个不同分辨率或大小的图像源，以便根据设备屏幕的特性选择合适的图像。：这个属性用于指定图像在不同屏幕尺寸下的显示尺寸，以帮助浏览器选择适当的图像源。：这个属性用于提供有关图像的额外信息，通常在鼠标悬停在图像上时显示为工具提示。：这个属性用于指定图像的解码方式。
20.2 HTML 常用标签
07-28
在“20.2 HTML 常用标签”这个主题中，我们将深入探讨一些HTML中不可或缺的核心标签，这些标签对于创建功能性且结构清晰的网页至关重要。 1. **文档类型声明（<!DOCTYPE html>）**：这是每个HTML文档的开头，用于...
HTML常用标签
09-09
HTML 常用标签 - 表单 Form 在 HTML 中，表单是一个非常重要的组件，它允许客户端的用户以标准格式向服务器提交数据。在本节课中，我们将深入了解表单的基本结构、属性、元素和使用方法。 一、表单的认识 表单是...
HTML常用标签属性.txt
04-29
HTML常用标签属性大全
前端基础知识学习——Html常见标签 img标签、a标签、h标题、p段落、列表、选择符（二）
weixin_45496521的博客
05-23 1773
Html常见标签 img标签、a标签、h标题、p段落、列表、选择符
img标签、多媒体标签和表格 布局
m0_62976216的博客
12-16 1320
1.img标签定义 img 元素向网页中嵌入一幅图像；<img> 标签有两个必需的属性：src属性和alt属性。 一些常用的图片格式：JPG PNG GIF BMP SVG等 基本代码格式： <img src=" "> alt ---如果图片是因为浏览器或者路径的问题加载不出来的时候，会显示图片的名字，alt的值 width 、height ------- 设置图片的宽度和高度 单位是像素px 或百分比（X%）一定要遵循图片原本的高度和宽度的比例 bor...
标签：img
weixin_52808469的博客
02-24 402
img标签
HTML——图像的超链接
时光·漫步的博客
05-13 1万+
1.  设置图像的超链接    对整个一幅图像文件设置超链接    语法：            &lt;a  herf="链接地址"  target="目标窗口打开方式"&gt;&lt;img  src="图像文件的地址"&gt;&lt;/a&gt;    功能：            为图片添加超链接    在图像属性中可以添加图像的其他参数，如  heigth、border、hspace 等..
PowerBI报表可视化技能大全
07-29
该课程包含PowerBI Desktop中截止2021年7月份主要和报表可视化开发技能相关的知识主要内容分为：通用可视化技能、内置视觉对象讲解，自定义视觉对象讲解，以及DAX函数在可视化交互技能上的实际应用 
html图片标签img的介绍以及基本用法详解
we
07-11 2万+
元素向网页中嵌入一幅图像。 标签有两个必需的属性：src 属性 和 alt 属性。注意：在 HTML 中， 标签没有结束标签。举例： 运行浏览器后得到的效果如图一、 标签的 src 属性 标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。为了分清楚这两个路径，我先把图片放到文件夹下 查看绝对路径方法：右键属性，位置C:\Users\China\Documents\HBuilderProjects，就...
html添加样式表有什么用,在HTML中#是什么意思?
weixin_39819327的博客
06-03 1492
#是css层叠样式表中的ID选择器ID选择器可以在HTML任意标签中添加选中标签内元素但是在一个 HTML 文档中ID 选择器一个ID只能使用一次#a{color: red;}123 #是css层叠样式表中的ID选择器 这个# 点击后会跳转到本页面的顶部 ！在一个HTML文档中,CSS ID 选择器会根据该元素的ID属性中的内容匹配元素，元素ID属性名必须与选择器中的ID属性名完全匹配，此条样式声...
5.HTML基础——img标签
Veronnit的博客
07-04 1万+
文章目录img标签1.什么是img标签2.img标签的格式3.注意4.属性 img标签 1.什么是img标签 img标签中的img其实是英文image的缩写。所以img标签的作用，就是告诉浏览器我们需要显示一张图片。 2.img标签的格式 < img src=" " > img —— 代表一个标签 src="" —— 代表一个属性 img标签中的src是英文source的缩写 所以img标签中的src就是用来告诉img标签，需要显示的图片名称 3.注意 和H系列标签、P标签还有Hr标签不一样，
HTML文本、段落标记
weixin_43055077的博客
08-13 7925
对网页中的文字、段落格式化；包括标题字、粗体、下划线、上标、下标文字标注等内容的实现说明，以及预格式化标记等……
HTML知识
top9523的博客
06-24 611
HTML网页制作
HTML常用标签总结
03-09
<!...而<html>定义了这是一个html文档，定义了网页的头部部分，包含常用标签、、、、等；...希望通过对HTML常用标签的总结和学习，能够帮助大家更好地理解和应用HTML标签，为日后的网页开发工作打下坚实的基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值