【前端基础】HTML常用标签总结

zwhnsh

已于 2022-06-14 17:25:54 修改

阅读量302

点赞数 1

文章标签： html 前端 css

于 2022-06-14 14:47:31 首次发布

本文链接：https://blog.csdn.net/weixin_42115131/article/details/125277876

版权

1、HTLM基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页主体
</body>
</html>

2、常用标签

2.1、文本标签

标题标签：

h1-h6，h1最大，h6最小

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

<p>段落文本内容</p>

文本格式化标签

<b>加粗</b>
<strong>强调，效果同b标签</strong>
<i>斜体</i>
<u>删除线</u>

换行标签

<br/>

水平线标签

<hr/>

字符实体

一些特殊字符会影响HTML的解析，最终影响显示效果故需要将这类字符进行转换。

&lt;		"<"
&gt;		">"
&nbsp;		空格
&copy;		"©"
&yen;		"¥"

2.2、容器标签

常用于页面结构划分，结合CSS实现网页布局

<div id="top">顶部</div>
<div id="body">主体</div>
<div id="button">底部</div>
<span>文本</span>

2.3、图片标签

用于在网页中插入一张图片，语法如下：

<img src="" alt="" width="" height="" title="">

属性src：图片的URL，必填。
属性alt：设置图片加载失败后的提示文本。
属性width/height：用于设置图片尺寸，取像素值，默认按图片原始尺寸显示。
属性title：设置图片标题，鼠标悬停在图片上时显示。

2.4、超链接标签

格式如下：

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="#top">返回顶部</a>

1. 属性href：设置目标URL，必填，也可指向某个元素，如：href="#top"
2. 属性target：设置的打开方式，默认在当前窗口打开，可设置新建窗口打开target="_blank"

2.3、结构标签

列表标签
- 无序列表：默认用实心原点标识列表项，如果要去掉实心原点，可设置样式：list-style-type: none;
```
<ul>
    <li></li>
    <li></li>
</ul>


```
- 有序列表：默认使用阿拉伯数字标识每条数据，可以使用start属性设置起始值，默认为1
```
<ol start="7">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>
```

表格标签

表格标签基本结构如下：

<table border="1" cellspacing="0">
    <!-- border为表格外框线大小，cellspacing为单元格间距 -->
    <caption>学生信息管理</caption>
    <!-- caption为标题 -->
    <tr>
        <th>第一列标题</th>
        <th>第二列标题</th>
        <th>第三列标题</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
    </tr>
</table>

单元格合并：调整表格结构，分跨行和跨列合并，合并后需要删除被合并的单元格，保证表格结构完整。

单元格属性作用取值
colspan 跨列合并单元格无单位数值
rowspan 跨行合并单元格无单位数值

单元格属性	作用	取值
colspan	跨列合并单元格	无单位数值
rowspan	跨行合并单元格	无单位数值

2.4、表单标签

表单用于采集用户信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。其中input标签具有type、name、value等属性，以及checked、readonly、disabled等公共属性。

常用表单标签如下：

<!-- text文本框 -->
<input type="text" id="name" placeholder="input user" name="name"/>

<!-- password密码框 -->
<input type="password" id="passwd" placeholder="input pwd" name="passwd"/>

<!-- 提交表单 -->
<input type="submit" value="提交" />

<!-- 重置 -->
<input type="reset" value="重置" />

<!-- 单选框，checked表示默认选中状态 -->
<input type="radio" value="1" name="sex" checked />男
<input type="radio" value="2" name="sex"/>女

<!-- 多选框，checked表示默认选中状态 -->
<input type="checkbox" name="like1"/>吃
<input type="checkbox" checked name="like2"/>喝
<input type="checkbox" name="like3"/>玩

<!-- 下拉框，option设置表项，value是列表的值 -->
<select name="xl" id="xl">
    <option value="1"></option>
    <option value="2">小学</option>
    <option value="3">中学</option>
    <option value="4">大学</option>
</select>

<!-- 拖动条 -->
<textarea name="demo" id="demo" cols="30" rows="10"></textarea>

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <!-- action为提交url地址，#表示当前页面地址 -->
    <form action="#">
        <div>
            <!-- for的值对应input标签的id值，使label和input框关联起来 -->
            <label for="name">用户：</label>
            <!-- 占位符placeholder -->
            <input type="text"      
                   id="name"
                   placeholder="请输入用户"
                   name="name"/>
        </div>
        <div>
            <label for="passwd">密码：</label>
            <input type="password"
                   id="passwd"
                   placeholder="请输入密码"
                   name="passwd"/>
        </div>
        <div>
            <label for="xl">学历：</label>
            <!--下拉列表框元素，使用option设置表项，value是列表的值-->
            <select name="xl" id="xl">
                <option value="1"></option>
                <option value="2">小学</option>
                <option value="3">中学</option>
                <option value="4">大学</option>
            </select>
        </div>
        <div>
            <label for="sex">性别：</label>
            <!-- 单选按钮,相互排斥时，将name属性值设置为同一个 -->
            <!-- checked表示默认选中状态 -->
            <input type="radio"
                   value="1"
                   name="sex"
                   checked
            />男
            <input type="radio" value="2" name="sex"/>女
        </div>
        <div>
            <label for="like">爱好：</label>
            <input type="checkbox" name="like1"/>吃
            <input type="checkbox" checked name="like2"/>喝
            <input type="checkbox" name="like3"/>玩
        </div>

        <div>
            <label for="demo">简介：</label>
            <!-- 输入多行多列文本内容 -->
            <textarea name="demo"
                      id="demo"
                      cols="30"
                      rows="10"></textarea>
        </div>

        <input type="range" id="num" min="1" max="10" value="3"/>

        <div>
            <input type="submit" value="注册" />
            <input type="reset" value="重置" />
        </div>
    </form>

</body>
</html>

运行结果如下：

在这里插入图片描述

输入信息如下后提交：

在这里插入图片描述

提交结果：

form_test.html?name=abc&passwd=def&xl=4&sex=2&like2=on&like3=on&demo=test#

2.5、标签总结

分类：行内标签、块标签
- 块元素
  
  包括body,div,h1-h6,p,ul,ol,li,table,hr,form等
  - 总是在新行上开始
  - 高度、行高以及外边距和内边距都可控制
  - 宽度缺省是他的容器的100%，除非设定一个宽度
  - 他可以容纳内联元素和其他块元素
- 行内元素
  
  包括span,label,b,strong,i,u,a等，具有如下特征：
  - 和其他元素都在一行上；
  - 高和外边距不可改变；
  - 宽度就是文字或图片宽度；
  - 内联元素只能容纳文本或其他内联元素
- 行内块元素
  
  包括img,input,button等，既可和其他元素共行显示，又可手动调整宽高。
块元素和行内元素互换：
- 行内->块：display:block;
- 块->行内：display:inline;
- 行内块元素：display:inline-block;
- 隐藏：display:none;