HTML相关标签与字符实体

奇粒粒
136 阅读8分钟

一、列表标签

HTML中列表标签包括：无序列表（unordered list）、有序列表（ordered list）、自定义列表（definition list）标签

1-1、无序列表

<!-- ul表示无序列表的整体 -->
<!-- li表示无序列表的每一项，其中可包含任何内容 -->
<ul>
  <li>
    <p>这里是内容</p>
  </li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
  • 无序列表有type属性，用于定义前导符号的样式，但HTML5中已废弃！建议用CSS代替（disc 实心圆、circle空心圆、square 实心方块）

1-2、有序列表

<!-- ol表示有序列表的整体 -->
<!-- li表示有序列表的每一项，其中可包含任何内容 -->
<ol>
  <li>
    <p>这里是内容</p>
  </li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ol>
  • ol标签可以设置type属性，用来设置编号的类型
type属性值意义
a表示小写英文字母编号
A表示大写英文字母编号
i表示小写罗马数字编号
I表示大写罗马数字编号
1表示数字编号（默认）
<ol type="A"></ol>
  • ol标签可以设置start属性，指定列表编号的起始值（必须是一个整数，尽管列表条目的编号类型type属性可能指定为其他编号类型）
<ol start="3"></ol>
  • ol标签可以设置reversed属性，指定列表中的条目是否是倒序排列的
<ol reversed></ol>

1-3、自定义列表

<!-- dl表示自定义列表的整体 -->
<!-- dt表示自定义列表的主题（标题） -->
<!-- dd表示自定义列表中的每一项解释说明 -->
<dl>
  <dt>标题</dt>
  <dd>项目1</dd>
  <dd>项目2</dd>
  <dd>项目3</dd>
</dl>

二、表格标签

2-1、表格的基本标签

标签名说明
table表格整体，可用于包裹多个tr
tr表格每行，可用于包裹td
td表格单元格，可用于包裹内容
<!-- table表示表格的整体 -->
<!-- tr表示表格的每一行 -->
<!-- td表示表格的单元格 -->
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

嵌套规范：table>tr>td

2-2、表格相关属性

用于设置表格基本展示效果（实际开发更推荐css）

常见相关属性：

属性名属性值效果
border数字边框宽度（需要设置到table上才会有效果）
width数字表格宽度
height数字表格高度
alignleft、center、right设置表格/行/单元格内容的水平对齐方式
  • cellpadding定义表格单元的内容和边框之间的空间，已废弃
  • cellspacing（百分比/像素）定义两个单元格之间的空间大小，已废弃
  <!-- border:表格的边框 -->
  <!-- width:表格的宽度 -->
  <!-- height:表格的高度 -->
<table border="1" width="100" height="100">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

2-2-1、width属性补充

1、给table标签设置该属性，可以调整表格的宽度（当不设置width时，表格的宽度会由内容撑开，要想与父元素宽度一致，可设置为100%）

2、给td标签设置width属性，可以调整该td所在列的宽度

3、给tr标签设置width属性会无效

2-2-2、height属性补充

1、height属性通常设置在tr标签和table标签上来调整高度

2、同width属性一样，当不设置height属性时，table、tr的高度会由内容撑开

注意：

  • width、height属性值的单位默认为px，可以省略
  • width、height属性值只有设置的比“默认宽度”、“默认高度”大时才会有效

2-2-3、align属性补充

1、align设置到table标签上，可以调整table整体的水平位置

2、align设置到tr标签上，可以统一该行所有td中内容的水平对齐方式

3、align设置给某个td，可以调整td中内容的水平对齐方式

2-3、表格标题和表头单元格标签

在表格中表示整体大标题和一列小标题

标签名名称说明
caption表格大标题表示表格整体大标题，默认在表格整体顶部居中位置显示，常常作为<table>的第一个子元素出现
th表头单元格表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
<!-- caption：表格整体的大标题 -->
<!-- th：表头单元格，表格一列的小标题 -->
<table border="1" width="300" height="300">
  <caption><h3>这里是表格标题</h3></caption>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
  • caption标签写在table标签内部
  • th标签写在tr标签内部（用于替换td标签）

2-4、表格的结构标签

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

结构标签：

标签名名称
thead表格头部
tbody表格主体
tfoot表格底部
<!-- thead：表示表格的头部 -->
<!-- tbody：表示表格的主体 -->
<!-- tfoot：表示表格的底部 -->
<table border="1" width="300" height="300">
  <caption><h3>这里是表格标题</h3></caption>
  <!-- 表格的头部 -->
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <!-- 表格的身体 -->
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
  <!-- 表格的底部 -->
  <tfoot>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>
  • 表格结构标签内部用于包裹tr标签
  • 表格的结构标签可以省略

2-5、合并单元格

水平或垂直将多个单元格合并成一个单元格

合并单元格步骤：

  1. 明确合并哪些单元格
  2. 通过左上原则，确定保留谁删除谁
  • 上下合并->只保留最上的，删除其他
  • 左右合并->只保留最左的，删除其他
  1. 给保留的单元格设置跨行合并（rowspan）或跨列合并（colspan）
属性名属性值说明
rowspan合并单元格的个数跨行合并，将多行的单元格垂直合并
colspan合并单元格的个数跨列合并，将多列的单元格水平合并
<table border="1" width="300" height="300">
  <caption><h3>表格标题</h3></caption>
  <!-- 表格的头部 -->
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <!-- 表格的身体 -->
  <tbody>
    <tr>
      <td>1</td>
      <!-- 保留 -->
      <td rowspan="2">2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <!-- 删除 -->
      <!-- <td>2</td> -->
      <td>3</td>
    </tr>
  </tbody>
  <!-- 表格的底部 -->
  <tfoot>
    <tr>
      <td>1</td>
      <!-- 保留 -->
      <td colspan="2">2</td>
      <!-- 删除 -->
      <!-- <td>3</td> -->
    </tr>
  </tfoot>
</table>

! 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

2-6、表格嵌套

表格可以嵌套，嵌套的表格写在td中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table border="1" width="500">
    <tr>
      <td>张三</td>
      <td>李四</td>
    </tr>
    <tr>
      <td>
        <table border="1" width="100%">
          <tr>
            <th>身高</th>
            <th>体重</th>
          </tr>
          <tr>
            <td>180</td>
            <td>70</td>
          </tr>
        </table>
      </td>
      <td>
        <table border="1" width="100%">
          <tr>
            <th>身高</th>
            <th>体重</th>
          </tr>
          <tr>
            <td>180</td>
            <td>70</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

三、表单标签

3-1、input系列标签

在网页中显示收集用户信息的表单效果，如：登录页、注册页

  • input标签可以通过type属性值的不同，展示不同的效果

type属性值：

1、文本框

常见属性：

  • placeholder：占位符，提示用户输入内容的问题

2、密码框

常见属性：

  • placeholder：占位符，提示用户输入内容的问题

3、单选框

常见属性：

  • name：表示分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中。
  • checked：默认选中

4、复选框

常见属性：

  • checked：默认选中

5、文件选择

常见属性：

  • multiple：多文件选择

6、按钮

在网页中显示不同功能的按钮表单控件：

标签名type属性值说明
inputsubmit提交按钮，点击之后提交数据给后端服务
inputreset重置按钮，点击之后恢复表单默认值
inputbutton普通按钮，需js配合添加功能
  • 如果要实现以上功能需要form标签配合使用，使用form标签包裹起来
<form>
  <!-- input标签可以通过type属性值的不同表现出不同的效果 -->
  <!-- 1、文本框：text（type属性的默认值） -->
  用户名：<input type="text"><br><br>

  <!-- 2、密码框：password -->
  密码：<input type="password"><br><br>

  <!-- 3、单选框：radio，使用相同的name值划分为一组，实现单选效果 -->
  性别：<input name="sex" type="radio">男<input name="sex" type="radio">女<br><br>

  <!-- 4、多选框：checkbox -->
  爱好：<input type="checkbox">熬夜<br><br>

  <!-- 5、文件选择框：file -->
  <input type="file">

  <!-- 4、多选框：checkbox -->
  爱好：<input type="checkbox" checked>敲代码
  <input type="checkbox" checked>熬夜
  <input type="checkbox">掉头发<br><br>

  <!-- 5、文件选择：file -->
  <input type="file" multiple><br><br>

  <!-- 按钮 -->
  <!-- 1、submit：提交按钮 -->
  <input type="submit">

  <!-- 2、reset：重置按钮 -->
  <input type="reset">

  <!-- 3、button：普通按钮 -->
  <input type="button" value="普通按钮">
</form>

3-2、button按钮标签

在网页中显示用户点击的按钮

type属性值（同input标签系列）：

标签名type属性值说明
buttonsubmit提交按钮，点击之后提交数据给后端服务
buttonreset重置按钮，点击之后恢复表单默认值
buttonbutton普通按钮，需js配合添加功能
  • 谷歌浏览器中，button默认是提交按钮
  • button标签为双标签，更便于包裹其他内容：文字、图片等等
  <form>
    用户名：<input type="text" placeholder="请输入您的用户名"><br><br>

    <!-- 提交按钮 -->
    <button type="submit">button提交按钮</button>

    <!-- 重置按钮 -->
    <button type="reset">button重置按钮</button>

    <!-- 普通按钮 -->
    <button type="button">button普通按钮</button>
</form>

  <form>
    用户名：<input type="text" placeholder="请输入您的用户名"><br><br>

    <!-- 提交按钮 -->
    <button type="submit">button提交按钮</button>

    <!-- 重置按钮 -->
    <button type="reset">button重置按钮</button>

    <!-- 普通按钮 -->
    <button type="button">button普通按钮</button>
</form>

3-2-1、input按钮与button按钮的区别

1、区别一：

  • 按钮上的提示文字，要写在起始标签和闭合标签之间：
<button>按钮</button>
  • input形式的按钮，提示文字要通过value属性设置：
<input type="submit" value="提交按钮">

2、区别二：

  • <button></button>按钮，起始标签和闭合标签之间不仅可以写文字，还可以写其他内容，比如设置一张图片：
<html>
  <head>
    <style>
      button {
        width: 100px;
        height: 100px;
      }
      img {
        height: 100%;
      }
    </style>
  </head>
	<body>
    <button><img src="../a.jpg" alt=""></button>
  </body>
</html>
  • 而input系列按钮无法实现此效果

3、区别三：

  • 写在form标签中时，<button></button>按钮、<button type="submit">、<input type="submit">按钮有提交表单功能
  • 而<input type="button">等按钮没有提交表单功能
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 以下三种按钮均有提交表单功能 -->
  <form action="">
    <input type="submit" value="按钮一">
    <button type="submit">按纽二</button>
    <button>按纽三</button>
  </form>
</body>
</html>

3-2-2、如何选择

1、如果想要一个图片形式的按钮，优先考虑<button></button>

2、如果想利用form标签提交数据，优先考虑<button></button>和<input type="submit">

3、如果不想利用form标签提交数据，那么可以优先考虑<input type="button">

3-3、select下拉菜单标签

在网页中提供多个选择项的下拉菜单表单控件

  1. 标签组成：
  • select标签：下拉菜单的整体
  • option标签：下拉菜单的每一项
  1. 常见属性：
  • selected：下拉菜单的默认选中
所在城市：
<select>
  <option selected>北京</option>
  <option>上海</option>
  <option>广州</option>
</select>

3-4、textarea文本域标签

在网页中提供可输入多行文本的表单控件

  1. 常见属性：
  • cols：设置文本域内可见宽度
  • rows：设置文本域可见行数
  1. 注意点：
  • 右下角可拖拽改变大小
  • 实际开发中推荐用css设置样式
<!-- 文本域标签 -->
<textarea cols="60" rows="30"></textarea>

3-5、label标签

常用于绑定内容与表单标签的关系

  1. 使用方法1（HTML4）：

    1. 使用label标签把内容包裹起来
    2. 在表单标签上添加id属性
    3. 将label标签的for属性值设置为表单标签上对应的id属性值
<input type="text" id="test">
<label for="test">文字</label>
  1. 使用方法2（HTML5规范）：
    1. 直接使用label标签把内容和表单标签一同包裹起来
    2. 需要把label标签的for属性删除
<label>
  <input type="text">123
</label>

四、语义化标签

4-1、无语义化的布局标签

  • div标签：一行显示一个，独占一行
  • span标签：一行显示多个

4-2、语义化标签

<!-- 有语义的布局标签 -->
<header>网页的头部</header>
<nav>网页的导航</nav>
<footer>网页的底部</footer>
<aside>网页的侧边栏</aside>
<section>网页的区块</section>
<article>网页的文章</article>

五、字符实体

在网页中展示特殊符号效果时，需要使用字符实体替代

结构： &英文;

常见字符实体：

显示结果描述实体名称
空格&nbsp;
<小于号&lt;
大于号&gt;
&和号&amp;
"引号&quot;
'撇号&apos;（IE不支持）
¢分&cent;
£镑&pound;
¥元&yen;
€欧元&euro;
§小节&sect;
©版权&copy;
avatar
文章
阅读
粉丝