HTML标签-优快云博客

文章目录

排版标签
文本格式化标签
媒体标签
链接标签
列表标签
表格标签
表单标签
语义化标签
字符实体

排版标签

标题标签

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>1级标题</h6>

在这里插入图片描述

场景：在页面内用来突出显示文章的主题，其中h1对网页尤为重要，开发中有特定的使用场景，例如新闻的标题、网页的logo
语义：1~6级标题，重要程度依次递减。
特点：文字加粗；文字变大，h1~h6逐渐减小；独占一行

段落标签

<p>一段文字</p>

场景：在页面中的新闻或者文章中，用于分段显示
语义：段落
特点：段落之间存在间隙；独占一行

换行标签

<br>

场景：让文字强制换行显示
语义：换行
特点：单标签；强制换行

水平线标签

<hr>

场景：分割不同主题内容的水平线
语义：主题的分割转换
特点：单标签；页面中显示一条水平线

文本格式化标签

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

标签（语义化）	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

在这里插入图片描述
场景：需要让文字加粗、下划线、倾斜、删除线等效果
语义：突出重要性的强调语境

媒体标签

图片标签

<img src="" alt="">

场景：在网页中显示图片
特点：单标签；img标签需要展示对应的效果，需要借助标签的属性进行设置
常用属性：

属性	说明
src	指定需要展示图片的路径
alt	替换文本，当图片加载失败时显示的文字
title	提示文本，当鼠标悬停时显示的文字
width	图片宽度
height	图片高度

音频标签

<audio src="" controls></audio>

场景：在页面中插入音频，音频标签目前支持三种格式：MP3、Wav、Ogg
常用属性：

属性	说明
src	音频路径
controls	显示播放控件
autoplay	自动播放（不分浏览器不支持）
loop	循环播放

视频标签

<vedio src="" controls></vedio>

场景：在页面中插入视频，视频标签目前支持三种格式：MP4 、WebM 、Ogg

属性	说明
src	视频路径
controls	显示播放控件
autoplay	自动播放（不分浏览器不支持）
loop	循环播放

链接标签

<a href="" target="">超链接</a>

场景：点击之后，从一个页面跳转到另一个页面
特点：双标签，内部可以包裹内容；如果需要点击后跳转，需要设置href属性
常用属性：

属性	说明
href	要跳转的网页路径，href=“#” 空链接，点击后回到网页顶部，开发中不确定最终地址，用空链接占位
target	目标网页打开形式：_self 默认值，在当前窗口跳转，覆盖原网页；_blank 在新窗口中跳转，保留原网页

列表标签

无序列表

<ul>
  <li>榴莲</li>
  <li>香蕉</li>
  <li>苹果</li>
</ul>

在这里插入图片描述

场景：在网页中表示一组无顺序之分的列表，如：新闻列表。
特点：列表的每一项前默认显示圆点标识；
其他：ul标签中只允许包含li标签，li标签可以包含任意内容

有序列表

<ol>
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ol>

在这里插入图片描述

场景：在网页中表示一组有顺序之分的列表，如：排行榜。
特点：列表的每一项前默认显示序号标识
其他：ol标签中只允许包含li标签，li标签可以包含任意内容

自定义列表

<dl>
  <dt>帮助中心</dt>
  <dd>账户管理</dd>
  <dd>购物指南</dd>
</dl>

在这里插入图片描述

场景：在网页的底部导航中通常会使用自定义列表实现。
特点：dd前会默认显示缩进效果
其他：dl表示自定义列表整体，dl标签中只允许包含dt/dd标签，dt表示列表主题，dd表示针对主题的每一项内容，dt/dd标签可以包含任意内容

表格标签

基本标签

<table border="1" width="500" height="300">
  <tr>
      <td>姓名</td>
      <td>成绩</td>
      <td>评语</td>
  </tr>
  <tr>
      <td>张三</td>
      <td>100分</td>
      <td>优秀，并且很牛</td>
  </tr>
  <tr>
      <td>李四</td>
      <td>80分</td>
      <td>良好</td>
  </tr>
  <tr>
      <td>王五</td>
      <td>60分</td>
      <td>及格</td>
  </tr>
</table>

在这里插入图片描述

场景：在网页中以行+列的单元格的方式整齐展示和数据
标签说明：

标签	说明
table	表格整体，用于包含多个tr
tr	表格行，用于包含td
td	表格单元格，用于包含内容

标签的嵌套关系：table > tr > td
常用属性

属性	属性值	说明
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

实际开发时针对于样式效果推荐用CSS设置

表格标题和表头单元格标签

<table border="1">
  <caption><strong>学生成绩单</strong></caption>
  <tr>
      <th>姓名</th>
      <th>成绩</th>
      <th>评语</th>
  </tr>
  <tr>
      <td>张三</td>
      <td>100分</td>
      <td>优秀，并且很牛</td>
  </tr>
  <tr>
      <td>李四</td>
      <td>80分</td>
      <td>良好</td>
  </tr>
  <tr>
      <td>王五</td>
      <td>60分</td>
      <td>及格</td>
  </tr>
</table>

在这里插入图片描述
标签：

caption: 表格大标题，默认在表格顶部居中显示
th：表头单元格，表示一列小标题，用于表格第一行，默认内部文字加粗居中显示

表格的结构标签

<table border="1">
  <caption><strong>学生成绩单</strong></caption>
  <thead>
      <tr>
          <th>姓名</th>
          <th>成绩</th>
          <th>评语</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>张三</td>
          <td>100分</td>
          <td>优秀，并且很牛</td>
      </tr>
      <tr>
          <td>李四</td>
          <td>80分</td>
          <td>良好</td>
      </tr>
      <tr>
          <td>王五</td>
          <td>60分</td>
          <td>及格</td>
      </tr>
  </tbody>
  <tfoot>
   <tr>
       <td>总结</td>
       <td>240分</td>
       <td>大家都很好</td>
   </tr>
  </tfoot>
</table>

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
标签：

thead: 表格头部
tbody: 表格主题
tfoot: 表格底部

合并单元格

<table border="1">
  <caption><strong>学生成绩单</strong></caption>
  <thead>
      <tr>
          <th>姓名</th>
          <th>成绩</th>
          <th>评语</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>张三</td>
          <td rowspan="2">100分</td>
          <td>优秀，并且很牛</td>
      </tr>
      <tr>
          <td>李四</td>
          <td>良好</td>
      </tr>
      <tr>
          <td>王五</td>
          <td>60分</td>
          <td>及格</td>
      </tr>
  </tbody>
  <tfoot>
   <tr>
       <td>总结</td>
       <td colspan="2">大家都很好</td>
   </tr>
  </tfoot>
</table>

在这里插入图片描述

场景：将水平或垂直多个单元格合并成一个单元格
说明：跨行合并（rowspan）或者跨列合并（colspan），上下合并只保留最上的，左右合并只保留最左的；只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

表单标签

input系列标签

文本框：<input type="text">
<br>
<br>
密码框：<input type="password">
<br>
<br>
单选框：<input type="radio" name="gender" id="male">男<input type="radio" name="gender" id="female">女
<br>
<br>
多选框：<input type="checkbox" name="hobby" id="sing"> 唱 
       <input type="checkbox" name="hobby" id="dance"> 跳 
       <input type="checkbox" name="hobby" id="rap"> rap 
       <input type="checkbox" name="hobby" id="basketball"> 篮球
<br>
<br>
文件：<input type="file" name="uploadfile" id="uploadfile">

在这里插入图片描述
input标签可以通过type属性值的不同，展示不同效果

标签名	type属性值	说明
input	text	文本框，用于输入单行文字
input	password	密码框
input	radio	单选框
input	checkbox	多选框
input	file	文件选择
input	submit	提交按钮
input	reset	重置按钮
input	button	普通按钮

常用属性：

属性	说明
placeholder	占位符，提示用户输入内容的文本
value	用户输入的内容，提交之后会发送给后端服务器
name	当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义；单选框name属性相同的单选框为一组，同时只能一个被选中
checked	默认选中
multiple	多文件选择

button按钮标签

<button>按钮</button>

type属性值（同input的按钮系列）

标签名	type属性值	说明
button	submit	提交按钮，点击之后提交服务器
button	reset	重置按钮，点击之后恢复表单默认值
button	button	普通按钮，默认无功能，配置js添加功能

场景：在网页中显示用户点击的按钮
其他：谷歌浏览器中button默认是提交按钮；button标签是双标签，更便于包裹其他内容：文字、图片等

select下拉菜单标签

<select name="address" id="address">
  <option value="1">北京</option>
  <option value="2" selected>上海</option>
  <option value="3">深圳</option>
</select>

场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

常用属性：selected 下拉菜单的默认选中

textarea文本域标签

 <textarea name="" id="" cols="60" rows="20" ></textarea>

场景：在网页中提供可输入多行文本的表单控件
常用属性：

cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数

其他：右下角可以拖拽改变大小；实际开发时针对于样式效果推荐用CSS设置

label标签

<input type="radio" name="gender" id="male"> <label for="male">男</label>
<label><input type="radio" name="gender" id="male"> 女</label>

场景：常用于绑定内容与表单标签的关系
使用方法:

使用label标签把内容（如：文本）包裹起来，在表单标签上添加id属性，在label标签的for属性中设置对应的id属性值
直接使用label标签把内容（如：文本）和表单标签一起包裹起来

语义化标签

div和span
实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标

div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个

布局标签
在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

标签	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

以上标签显示特点和div一致，但是比div多了不同的语义

字符实体

如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
在网页中展示特殊符号效果时，需要使用字符实体替代
常见字符实体
在这里插入图片描述