12小时爆肝HTML常见标签及详细解析（有详细代码解析和结果解析）

最新推荐文章于 2024-04-28 01:25:06 发布

三岁学编程

最新推荐文章于 2024-04-28 01:25:06 发布

阅读量568

点赞数 1

分类专栏： Web 文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_45623093/article/details/118062518

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML常见标签

- 常见标签

常见标签

标签	内容	单标签/双标签
<h1>-<h6>	标题1-6标签	双标签
<br />	段内换行	单标签
<p>	段落	双标签
	空格	单标签
<pre>	预留格式	双标签
<hr />	水平线	单标签
<!-- -->	注释	单标签
<sapn>	行内组合（与css合用）	双标签
<a>	超链接标签	双标签
<img>	图像标签	单标签
<div>	区域设置	双标签
<ul>	无序列表	双标签
<li>	列表项	双标签
<ol>	有序列表	双标签
<table>	表格	双标签
<tr>	表格行数	双标签
<td>	表格列数	双标签
<th>	表格头部	双标签
<sup>	上角标签	双标签
<form>	表单标签	双标签
<input>	输入框	单标签
<select>	下拉列表框	双标签
<textarea>	文本域	双标签

编码方式声明

<meta charset='编码方式'>
常见的有ASCII、GB2312、Unicode、UTF-8

charset 设置正确ansi.html 保存源文件的编码是ANSI，源文件中没有声明编码方式，浏览器自动解析

charset 设置正确 utf-8.html 源文件与声明的编码方式都是UTF-8

charset 设置错误.html 保存源文件的编码是ANSI，源文件声明为UTF-8编码方式，出现乱码

标题标签

<h1></h1>到<h6></h6>

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

效果展示：
在这里插入图片描述

段落、段内换行、空格

<p></p>为段落符
<br />为段内换行
 为空格

在段落中会自动忽略空格和换行符需要添加对应的格式方可。

<body>
    <p>
        HTML的全称为超文本标记语言，是一种标记语言。
        它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
        HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
    </p>

</body>

在这里插入图片描述
加上有关的标签以后：

<body>
<p>
    HTML的全称为超文本标记语言，<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是一种标记语言。<br />
    它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。<br />
    HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。<br />
</p>

</body>

在这里插入图片描述

预留格式

<per> </per>
预留格式，里面的内容会直接显示，多用于代码显示。

<body>
<pre>
    public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }    
    }
</pre>

</body>

在这里插入图片描述

水平线、注释

<hr /> 是水平线，用于添加一条横线
 注释，用于注释内容给编程人员看

<body>
<p>
    <!--这里是注释-->
    这里是注释
<hr />
    <!--这里是水平线-->
    这里是水平线
</p>
</body>

在这里插入图片描述

超链接

<a href="网址" > 链接内容</href>
超链接可以链接内容：

其他的网址
本站点网址
虚拟超链接

<body>
    <a href="https://www.baidu.com/">百度一下</a> <br /> <!-- 链接到其他站点-->
    <a href="01.html">站内网页</a> <br /> <!--链接到站内地址-->
    <a href="#">虚拟地址</a> <br /><!-- 虚拟地址 -->
</body>

在这里插入图片描述

图像标签

网页常见格式：jpg、gif、png等
<img src="路径" alt= "文件名" />
其中路径可以是相对路径也可以是绝对路径

<body>
    <img src="./images/python.png" alt="python">
    <img src="C:home/images/python.png" alt="python">
</body>

在这里插入图片描述

区域设置

<div>用于设置区域，也是板块，元素组合。
这一个区域可以设置固定的内容/样式，以便于管理。
后期有css以后可以方便处理

有序、无序列表

<ul>无序列表
<ol>有序列表
<li>列表项

无序

<body>
<ul>
    <li>python</li>
    <li>java</li>
    <li>C语言</li>
</ul>
</body>

在这里插入图片描述

有序

<body>
<ol>
    <li>python</li>
    <li>java</li>
    <li>C语言</li>
</ol>
</body>

在这里插入图片描述

表格

table表格
tr
td
th

<body>
<table>
    <tr>
        <th>代码</th> <!--表头-->
        <th>含义</th>
    </tr>
    <tr>
        <td>print</td>
        <td>打印输出</td>
    </tr>
    <tr>
        <td>input</td>
        <td>输入</td>
    </tr>
</table>
</body>

在这里插入图片描述
添加边框
在table中添加 border="1"内容

<body>
<table border="1">
    <tr>
        <th>代码</th> <!--表头-->
        <th>含义</th>
    </tr>
    <tr>
        <td>print</td>
        <td>打印输出</td>
    </tr>
    <tr>
        <td>input</td>
        <td>输入</td>
    </tr>
</table>
</body>

在这里插入图片描述

表单

表单下面有表单元素包括了：文本框、按钮、单选、复选、下拉列表、文本域等
<form action="后端数据处理页面">

文本框、密码框、按钮

type="text" 文本框（明文显示）
type="password" 密码框（密文显示，*显示）

一般里面会加一个name属性，用于定义名称给后端进行处理，这里就不演示了

<body>
    <form action="xxx">
        账号：<input type="text"> <br />
        密码：<input type="password">
    </form>
</body>

在这里插入图片描述
submit 确定按钮
reset 重置按钮

value 定义按钮文字

<body>
    <form action="xxx">
        账号：<input type="text">
        <input type="submit" value="确定">
        <input type="reset" value="重置">
        <br>
        密码：<input type="password">
        <input type="submit" value="确定">
        <input type="reset" value="重置">
    </form>
</body>

在这里插入图片描述

单选框、复选框

radio 单选框
bceckbox 复选框
value 提交给后台的值
checked 默认选中

<body>
    <form action="xxx">
        性别：男<input type="radio" value="1" name="gender" >
        女<input type="radio" value="1" name="gender" > <br />
        国籍：中国<input type="checkbox" value="0" name="music" checked="checked">
    </form>
</body>

下拉列表框

<select> 下拉列表框
<option> 选项
selted 默认选择

<body>
    <form action="xxx">
        最常用语言：
        <select name="live" id="data">
            <option value="python" selected="selected">python</option>
            <option value="java">java</option>
            <option value="">C语言</option>
            <option value="">C++</option>
            <option value="">R语言</option>
        </select>
    </form>
</body>

在这里插入图片描述

文本域

<textarea rows="行数" cols="列数" >文本 </textarea>

<body>
    <form action="xxx">
        个人简介：<br />
        <textarea name="xxxx" id="xxxx" cols="50" rows="10">
在这里输入内容……
        </textarea>
        <br />
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>