第二天学习笔记

## 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)默认样式

- 不独占一行

- 默认当前窗口打开

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

  

(4)超链接属性

- href属性

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

    ```html

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

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

    ```

- target属性

  - 作用：指定目标地址的打开方式

  - 取值

    - `_blank`新窗口打开

    - `_self`当前窗口打开（默认值 ）

    ```html

     <a href="http://www.jd.com" target="_blank"><img src="pic.png" alt=""></a>

    ```

  

- title属性

  - 作用：定义提示文本，将鼠标悬停在链接上会显示标题作为工具提示

    

**(5)链接的类型**

- 空链接

  - 描述：如果当时没有确定链接的目标时使用空链

    ```html

    <a href="#">商品</a>

    ```

- 外部链接

  - 描述：链接到站外其他 网站的链接 （绝对地址）

    ```html

    <a href="https://www.baidu.com"> 百度 </a>

    ```

- 内部链接 （相对地址）

  - 描述：网站内部页面之间的相互链接。直接链接内部页面的名称

    ```html

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

    ```

- 下载链接

  - 描述：如果href里面的地址是一个文件或压缩包，会下载这个文件。

  - 代码演示

    ```html

    <a href="1.txt">下载文本文件</a>

    ```

  **(6)锚点链接**

  描述：当我们点击锚点链接时，可以快速定位到页面中的某个位置。

  - 跳转至当前页面指定位置的锚点

    - 语法：

    ```html

    定义目标：<p id="box"></p>

    定义跳转：<a href="#box"></a>

    ```

  - 跳转至其它页面的锚点

    - 语法：

    ```html

    定义目标：a.html页面的 <div id="box"></div>

    定义跳转：<a href="a.html#test"></a>

    ```

  **总结：**重点掌握内部链接，外部链接，锚点链接。

  效果参考：https://www.tencent.com/zh-cn/about.html#about-con-1 腾讯企业站

  ### 文本格式化标签

  概述：在日常用语中，我们常常会加重某个字的读音，或者用加粗等方式突出某句话的重点。

  与此类似，HTML 也提供了相应的标签，用于标记某些文本，使其具有加粗、倾斜、删除划线等效果。

  #### em标签

  (1)语法

  ```HTML

  <em></em>

  ```

  (2)语义

  强调，用于标记强调内容。

  (3)默认样式

  - 斜体显示

  - 不独占一行

  #### strong 标签

  (1)作用

  标记重要强调的内容。

  为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。

  (2)语法

  ```html

  <strong></strong>

  ```

  (3)语义

  着重强调

  (4)默认样式

  - 不独占一行

  - 加粗显示

  #### del标签

  (1)作用

  被从文档中删除的文字内容

  (2)语法

  ```HTML

  <del></del>

  ```

  (3)语义

  删除的内容

  (4)默认样式

  - 带有中划线

  - 不独占一行

  (5)应用

  - 价格中的原价

  - 待办事项中已完成的项

  

  #### I标签

  (1)作用

  区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等

  (2)语法

  ```html

  <i></i>

  ```

  (3)语义

     无

  (4)默认样式

  - 斜体显示

  - 不独占一行

  #### b标签

  (1)作用

  定义粗体文本,用于吸引读者的注意到该元素的内容上。

  (2)语法

  ```HTML

  <b></b>

  ```

  (3)语义

  没有语义

  (4)默认样式

  - 加粗

  - 不独占一行

  #### span标签

  (1)作用

  作为行内容器包含短语内容，通常用来区分文本样式。

  (2)语法

  ```HTML

  <span></span>

  ```

  (3)语义

  无

  (4)默认样式：无

 

  #### 2.3 换行

  常常我们在需要手动换行地方，加入换行标签 ，即可实现内容强制换行。

  (1)语法

  ```html

  <br />

  ```

  **注意：**

  - 不应该只为了实现加粗、斜体效果使用strong，em，可以使用css替代

  - br用于处理文本内容换行，不应用于控制元素间距

  ### 3、HTML 字符实体

  概述:HTML中有些字符是保留的。例如，不能直接在文本中输入大于号（>）或小于号（<），因为浏览器会误以为它们是标记。

  希望浏览器如实显示这些字符，那么我们必须在HTML源代码中插入字符实体。