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

318 阅读4分钟

HTML常见标签

常见标签

标签内容单标签/双标签

-

标题1-6标签双标签

段内换行单标签

段落双标签
 空格单标签
预留格式双标签

水平线单标签
注释单标签
行内组合(与css合用)双标签
超链接标签双标签
图像标签单标签
区域设置双标签
    无序列表双标签
  • 列表项双标签
      有序列表双标签
      表格双标签
      表格行数双标签
      表格列数双标签
      表格头部双标签
      上角标签双标签
      表单标签双标签
      输入框单标签
      下拉列表框双标签
      文本域双标签

      编码方式声明

      <meta charset='编码方式'>
      常见的有ASCIIGB2312UnicodeUTF-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 />为段内换行
      &nbsp;为空格

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

      <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="后端数据处理页面">

      文本框、密码框、按钮

      <imput type="text | password | submit | reset | radio |checkbox ">

      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>
      

      在这里插入图片描述

      Html的大致内容都在上面了,只要是经常使用的一些基本标签,如果还有一些没有描述的常用的可以进行百度,建议根据H5的要求使用web语义话的方式进行书写。