# 基础知识 > HTML（HyperText Markup Language）：超文本标记语言，从语义角度描述页面的结构。 ## 1. 基础结构 ```markup Document ``` html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。 * **head 区域的元素**：[meta](https://sherwinshen.gitbook.io/qian-duan-xue-xi/frontend-basic/html-advanced#5-yuan-biao-qian)，title，style，link，script，base 等； * **body 区域的元素**：详见[“HTML标签”](#2-html-biao-qian)。 ## 2. HTML 标签 {% hint style="info" %} 参考链接：[W3school HTML 标签参考手册](https://www.w3school.com.cn/tags/html_ref_byfunc.asp) {% endhint %} 第一种分类： * **文本级标签**：文本级标签里只能放**文字、图片、表单元素**，主要有 p、span、a、b、i、u、em 等； * **容器级标签**：容器级标签里可以放置任何东西，主要有 div、h1、li、dt、dd 等。 第二种分类 * **block 块元素**：块元素以新行来开始和结束，主要有 div、h1、p、ul、table 等； * **inline 行内元素**：行内元素不以新行来开始和结束，主要有 img、span、b、a、td 等； * **inline-block 元素**：对外的表现是行内元素，对内的表现是块级元素。 | 块元素 | 行内元素 | | ----------------------------------------------- | -------------------------- | | 块级元素的宽度在不设置的情况下是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度 | 行内元素的宽度就是它包含的文字或图片的宽度，不可改变 | | 块级元素的高度、宽度、行高以及顶和底边距都可设置 | 内联元素的高度、宽度及顶部和底部边距不可设置 | ### 2.1 排版标签 {% hint style="info" %} div 是最常见的元素，大多数场景下都可以用div，这也导致 div 的语义并不是很明确，因此除了 div+css 布局之外，H5 中引入了更加明确语义的标签页面布局，例如 header、footer、nav、section 等，具体详见[“语义化标签”](https://sherwinshen.gitbook.io/qian-duan-xue-xi/frontend-basic/html5#1-yu-yi-hua-biao-qian)。 {% endhint %} 基础标签 ```markup

This is a paragraph


``` 格式化标签 ```markup 



































```

### 2.2 超链接

``标签属性：

* `href`：目标URL
* `title`：悬停文本
* `name`：主要用于设置一个锚点的名称
* `target`：告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值：
  * `_self`：在同一个网页中显示（默认值）
  * `_blank`：**在新的窗口中打开**。
  * `_parent`：在父窗口中显示
  * `_top`：在顶级窗口中显示

#### 外部链接

```markup
Link Text
```

#### 锚链接

```markup



回到顶部



回到顶部


定位至fourdays页面的锚tips
```

{% hint style="warning" %}
若浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。
{% endhint %}

#### 邮件链接

```markup
Send email to nowhere

Send mail with cc, bcc, subject and body
```

{% hint style="info" %}
知识点：区别 href 与 src

* href 用于在当前文档和引用资源之间确立联系，例如 a 标签、link 标签等；
* src 用于替换当前内，例如 img 标签、script 标签等。
  {% endhint %}

### 2.3 图片标签

```markup

替换文本
```

{% hint style="info" %}
知识点：相对路径和绝对路径。

* 相对路径：相对当前页面所在的路径，`.`和`..`代表当前目录和上一层目录；
* 绝对路径：主要分为盘路径和网络路径
  * 以盘符开始的绝对路径，例如 C:\Users\html\images\1.jpg
  * 网络路径，例如 
    {% endhint %}

{% hint style="danger" %}
绝对不允许使用`file://`开头的文件，这个是完全错误的！
{% endhint %}

图片添加说明文字，建议舍弃使用``与`
`组合，采用`
` 和 `
`，建立图片与标题之间的语义。

```markup



  一只恐龙头部和躯干的骨架
  
一只霸王龙的化石



```

图片定位链接可在图片不同位置跳转至不同链接，具体详见[“图像区域映射”](https://sherwinshen.gitbook.io/qian-duan-xue-xi/frontend-basic/html-advanced#3-tu-xiang-qu-yu-ying-she)。

```markup



     
     

```

### 2.4 列表标签

无序列表

```markup

    
    
  • 实心原点（默认）
    • 
    
  • 实心方点
    • 
    
  • 空心圆
    • 


```

有序列表

```markup

    
     
  1. 默认
    2. 
     
  2. 
     
  3. 
     
  4. 
     
  5. 


```

定义列表

```markup


  
	
购物指南

	
	
购物流程

	
会员介绍

	
生活旅行/团购

	
常见问题





	
配送方式

	

		上门自提
		211限时达
		配送服务查询
		配送费收取标准
		海外配送
	



```

![](https://1936115583-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-ME8bAQhIbNQVAgxp8HX%2Fuploads%2Fgit-blob-c211784ebc9247b226932c88ea0e322aa5afbecf%2F%E5%AE%9A%E4%B9%89%E5%88%97%E8%A1%A8.png?alt=media)

![](https://1936115583-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-ME8bAQhIbNQVAgxp8HX%2Fuploads%2Fgit-blob-2ca27838e1f0d24faf6cca2868ebf6520564bd53%2F%E5%AE%9A%E4%B9%89%E5%88%97%E8%A1%A8-2.png?alt=media)

### 2.5 表格标签

基本结构

```markup

      

    
    
    
    

        
        
      

    
    
    
      

        
        
      

    
    
    
  

```

单元格合并

* `colspan`：横向合并，例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。
* `rowspan`：纵向合并，例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。

```markup


    

      Animals
    

    

      Hippopotamus
    

    

      Horse
      Mare
    

    

      Stallion
    

    

      Crocodile
    

    

      Chicken
      Hen
    

    

      Rooster
    

  

```

![](https://1936115583-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-ME8bAQhIbNQVAgxp8HX%2Fuploads%2Fgit-blob-240dfc456c68d6203b1b962ce60627446a0593bd%2Ftable.png?alt=media)

### 2.6 框架标签

在网页内显示网页：

```markup

```

iframe 通过 name 属性作为链接的目标，点击 a 链接则 iframe 显示链接地址的内容：

```markup
W3School.com.cn

```

![](https://1936115583-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-ME8bAQhIbNQVAgxp8HX%2Fuploads%2Fgit-blob-8bba493db0a61ad8112579ebb82302c9a891ad46%2Fiframe.gif?alt=media)

### 2.7 表单标签

表单标签用`
`表示，用于与服务器的交互。

**属性**

* `name`：表单的名称，用于JS来操作或控制表单时使用；
* `id`：表单的名称，用于JS来操作或控制表单时使用；
* `action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php”；
* `method`：表单数据的HTTP提交方式，一般是get(默认)和post。
* `enctype`属性：内容发送编码

{% hint style="info" %}
知识点：编码格式

* application/x-www-form-urlencoded（默认），key=value\&key=value 格式
* multipart/form-data，提交文件时需要设置
* text/plain，纯文本
  {% endhint %}

```markup

  

    
    
    
  

  

    
    
  

  

    
    
  

  

    
  



```

表单语义化

* fieldset 元素是用于创建具有相同目的的小部件组的方式，出于样式和语义目的；
* legend 元素来给 fieldset 标上标签，其文本内容正式地描述 fieldset 的用途。

```markup


  

    账户信息
    姓名：
    密码：
  
  
   
  

    其他信息
    性别：
    爱好：
  



```

基础组件

{% hint style="info" %}
完整表单组件详见 [W3school HTML 标签参考手册](https://www.w3school.com.cn/tags/html_ref_byfunc.asp)
{% endhint %}

```markup


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    

    
    
    
    
      
      
      
      
      
      
      
      
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    

    
    

    
    
  

```

### 2.8 多媒体标签

{% hint style="info" %}
video 和 audio 是 [HTML5](https://sherwinshen.gitbook.io/qian-duan-xue-xi/frontend-basic/html5#shi-yin-pin) 中引入的。
{% endhint %}

视频 `