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="">

    ```

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值