Monodyee

这个屌丝很懒，什么也没留下！

热门标签

html常用元素总结

作者：Monodyee | 2024-03-28 09:02:44

踩

html常用元素总结

一.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>:

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

2.<title>，<link>

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


<meta charset="UTF-8">
<meta name="keywords" content="江苏 江苏省 苏 江苏行政区划 江苏地理环境 江苏自然资源 江苏人口民族 江苏政治 江苏经济 江苏社会事业 江苏交通 江苏民俗文化 江苏风景名胜 江苏名优特产 江苏著名人物 已有14个省市开启高考改革！未来高考将有哪些新趋势？">
<meta http-equiv="Refresh" content="3;URL=https://www.baidu.com">
<title>Title</title>
<link rel="icon" href="图标连接">

三.<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的页面

<a href="https://www.baidu.com">点我</a>

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


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

3.2列表标签

<ul>:无序列表


<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

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


<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

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


<dl>
    <dt>列表标题</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
    <dt>列表标题2</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
</dl>

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>

合并单元格

可以使用<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>
            <!--<td>2</td>-->
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

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属性：

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


<form>
    <input type="text" name="username"/>用户名
    <input type="submit" value="提交">
</form>

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

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>，分别为子选项，组选项

举例：


<form>
    <select name="city" multiple="multiple" size="4">
        <optgroup label="江苏省">
            <option value="1">南京市</option>
            <option value="2">苏州市</option>
            <option value="3">无锡市</option>
        </optgroup>
    </select>
</form>

4.<textarea>标签

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

5.<label>标签

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


<form>
    <label for="inp">用户名</label>
    <input id="inp" type="text">
</form>

6.<fieldset>标签

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

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


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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/329079