html常用元素总结

叁歲伎倆 2022-02-03 06:41 249阅读 0赞

# 一.HTML的基本结构 #

一个最基本的HTML文件需要包括以下代码块中的内容:

**1.<!DOCTYPE html>**：

该行与最后一行的</html>构成一对标签；

它始终放在文档的第一行；

该行中的!DOCTYPE用来告诉浏览器应该用什么样的html规范还解释该html文件，!DOCTYPE表示用标准的W3C标准来解释

**2.<head></head>**：

该标签中主要有<meta>标签和<title标签>（下文中详细解释）

<head>中的标签不在浏览器页面显示，主要是一些声明性的内容

**3.<body></body>**:

该标签内的内容均为显示在浏览器页面中的内容

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    </html>

--------------------

# 二.<head></head>中的标签解释： #

如代码块所示：

### 1.<meta>:  ###

1.  第一句解释本html的编码格式是UTF-8
2.  第二句解释了本页面的关键词，content的内容就是关键字，比如我们在百度搜索关键字时，搜索结果就是根据这条展示的；
3.  第三句表示每三秒页面刷新跳转到URL标识的页面

### 2.<title>，<link> ###

1.  第四句和第五句分别表示浏览器顶层表示该页面的标题和图标，如下图所示的【写文章-CSDN博客】和红底白字的大写C：

![20190508231702580.png][]

--------------------

# 三.<body></body>中的标签解释： #

body中的标签主要分为【块级标签】和【内联标签】，两者可以通过**display属性进行转换**

**块级标签**：一个标签占一行的内容，下一个标签需要另起一行；块级标签可以更改长宽

**内联标签**：一个标签是多大就占多大位置，下一个标签在右侧补上；内联标签不可以更改长宽

内联标签**转换为**块级标签：display=block

块级标签**转换为**内联标签：display=inline

块级标签**转换为**内联标签以后还可以更改长宽：display=inline-block

## 3.1基本标签 ##

<hn>:其中n的范围为1~6，用来表示标题，1~6表示字体从大到小

<br>:换行

<p>:该行的内容会基于上一个标签另起一行，同时上下有一倍行距

<b>,<strong>：两者都是加粗

<em>：字体为斜体

<sup>:上角标

<sub>:下角标

<hr>:水平线

<img>:显示图片，属性有src=文件路径；height；width；title等

<a>:具有超链接和类似目录的功能

*  **超链接：**点击【点我】后，页面会跳转到前面url的页面

*  **类似目录功能：**点击【目录】后，页面就会跳转到当前页中id为“target”标签的位置。注意，这里只能用id属性，并且<a>标签中id号前需要用\#标识。

<a href="#target">目录</a>
    ...
    ...
    ...
    <div id="target">页面跳转位置</div>

## 3.2列表标签 ##

**<ul>:无序列表**

![20190509095857705.png][]

--------------------

**<ol>:有序列表，每一项前有编号**

![20190509095938729.png][]

--------------------

**<dl>:自定义列表，其中<dt>表示列表标题；<dd>表示列表项**

![20190509100337890.png][]

--------------------

## 3.3表格标签 ##

*  <table>标签内由两部分标签组成<thead>和<tbody>，这两个标签分别表示表头和表体，在表头和表体中主要由<tr>和<td>两个标签组成，<tr>表示某一行的内容，<td>表示某一列的内容。
 *  <table>有以下几个属性：border表示表格边框粗细；cellpadding表示表格内边距；cellspacing表示表格外边距；width表示表格宽度。

<table border="1" cellpadding="10" cellspacing="10" width="300">
        <thead>
            <tr>
                <td>表头第二列</td>
                <td>表头第二列</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70][]

--------------------

**合并单元格**

可以使用<td>的colspan和rowspan属性；colspan表示合并一行的单元格，属性值为待合并列数；rowspan同理，举例如下：

<table border="1" cellpadding="10" cellspacing="10" width="300">
        <thead>
            <tr>
                <td>表头第二列</td>
                <td>表头第二列</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">1,2</td>
                
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70 1][]

## 3.4表单标签<form> ##

表单标签与上述标签不同，表单标签的功能是向服务器传输客户端的数据，比如登录界面上的用户名密码输入框就是一个表单元素，表单元素的内容是需要传输给服务器的。

### **1.<form>的属性值**有： ###

action：表示数据传输给服务端的哪个函数进行处理，通常是一个url路径；

method:表示数据的提交方式是post还是get；get提交的数据键值对直接放在地址栏url后面，数据明文传输，安全性较差，对提交的数据内容有长度限制，适合用于【查找且无需加密传输】的场景，相比post少去了一些加密运算等消耗；post提交的数据键值对不放在地址栏后，安全性较高，对数据传输的内容长度无限制。

**表单元素**：

表单内的标签称为表单元素。

### 2.<input/>标签： ###

属性：

**1.type属性**:

*  "text":文本框,
 *  "password"：密码框，输入密码时隐藏密码明文,
 *  "submit"：提交按钮，点击后当前表单的元素内容会传给form中属性action指定的服务器函数进行处理,
 *  "button"：按钮，一般与js配合使用，用来触发一个事件,
 *  "radio"：单选框,
 *  "checkbox"：复选框,
 *  "file"：上传文件，前提是需要在form标签后添加属性：enctype="multipart/form-data"

**2.name属性**：

表单提交时，该标签传入值得键值；也就是传入服务端得数据的变量名，需要与后端变量名统一使用。举例如下：

当我们在文本框输入abc，并点击提交时，username='abc'的键值对将会传输给服务端。

![20190509104922414.png][]

--------------------

**3.value属性**：

*  当type="button"/"reset"/"submit"时，value表示按钮上显示的文本
 *  当type="text"/"password"/"hidden"时，value表示输入字段的默认值
 *  当type="checkbox"/"radio"/"image"时，value表示与输入相关联的值，比如单选框radio，选择【男】/【女】时，我们与服务端协商好，选择男时用1表示，选择女时用2表示，那么这里的1和2就是value。

**4.id属性**：

id属性与后端无交互，一个页面中一个标签的id值是唯一的，主要为了方便css或js定位到该标签。

### 3.<select>标签，下拉框 ###

其有属性：multiple表示可多选，size表示页面显示选项的个数

其下有两种标签，<option>和<optgroup>，分别为子选项，组选项

举例：

![20190509110427188.png][]

--------------------

### 4.<textarea>标签 ###

也是文本框，但是一般用于页面上填写个人简介、备注之类，与input相比，该标签支持多行输入。

### 5.<label>标签 ###

将某个标签与另一个标签相关联，关联时依据另一个标签的id值进行关联，举例如下，点击姓名时，能关联到文本输入框，触发文本框的输入。

![20190509110952600.png][]

--------------------

### 6.<fieldset>标签 ###

对表单中的相关元素进行分组，举例如下：

fieldset对input标签分组，组名用标签<legend>表示

<form>
        <fieldset>
            <legend>click</legend>
            <input id="inp" type="text">
        </fieldset>
    </form>

![20190509111344846.png][]

[20190508231702580.png]: /images/20220203/edd334c9b479469bbcfea4239e1dbe9e.png
[20190509095857705.png]: /images/20220203/2703a9f243b6493d89eed568d9438561.png
[20190509095938729.png]: /images/20220203/0ac3213a605845aeaa3bcf314422633a.png
[20190509100337890.png]: /images/20220203/3e52ce6fb8b04e218a73c7e2c34874c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70]: /images/20220203/d3d6faeda77f4eb7b77937d9743c916d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70 1]: /images/20220203/1604c635dece410da25ce6a394d375ca.png
[20190509104922414.png]: /images/20220203/46938726d4644f509a5ca174ba34a34c.png
[20190509110427188.png]: /images/20220203/478cd6c4321d4218a2d2249ccdcc5557.png
[20190509110952600.png]: /images/20220203/0c1ca399e5ce421cb0101b0c2b115fb7.png
[20190509111344846.png]: /images/20220203/f9f0b2a6a98b494f874f1e3df3a892e0.png