HTML标签之表单，列表，表格，语义标签，特殊符号

想进步的22级本科生

已于 2023-06-30 20:49:12 修改

阅读量161

点赞数

分类专栏： Web前端文章标签： html 前端

于 2023-06-30 20:48:38 首次发布

本文链接：https://blog.csdn.net/m0_74018560/article/details/131483156

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

表单

`<form>`标签

HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

`<input>`标签

HTML <input>用来填写内容，常见类型有：

<input type="text">：创建基础的单行文本框。
<input type="number">：用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。
<input type="email">：带有 “email” (电子邮箱) 类型标记的输入框元素 (<input>) 能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了multiple属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址 (非空值且符合电子邮箱地址格式). CSS 伪标签 :valid 和 :invalid 能够在校验后自动应用。
<input type="password">：<input> 元素里有一种叫做 “password” 的值，给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的，其中文本被遮蔽以致于无法读取，通常通过用诸如星号（“*”）或点（“•”）等符号替换每个字符来实现。这个符号会根据用户的浏览器和操作系统来具体显示哪个。
<input type="radio">：<input> 的 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。
常用属性有：

name: 名称
id: 唯一ID
maxlength：最大长度
minlength：最小长度
required：是否必填
placeholder：当表单控件为空时，控件中显示的内容

`<textarea>`标签

HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

`<select>`与`<option>`标签

HTML <select> 元素表示一个提供选项菜单的控件。
示例：

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

`<button>`标签

HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮，但你可以使用 CSS 来改变按钮的样貌。

我练习时的代码

<!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="/login.html">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" required minlength="3" maxlength="15" placeholder="用户名">
        <label for="age">年龄</label>
        <input type="number" name="age" id="age" required placeholder="年龄" >
        <label for="email">邮箱</label>
        <input type="email" name="email" id="email" required placeholder="邮箱">
        <label for="password">密码</label>
        <input type="password" name="password" id="password" required placeholder="密码">
        <label for="resume">个人简介</label>
        <textarea name="resume" id="resume" cols="30" rows="10" placeholder="个人简介"></textarea>
        <label for="lang">语言</label>
        <select name="lang" id="lang">
            <option value="Cpp">Cpp</option>
            <option value="Java">Java</option>
            <option value="Python">Python</option>
        </select>
        <button type="submit">提交</button>
    </form>

</body>
</html>

列表

`<ul>`与`<li>`标签

HTML <ul> 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。
示例：

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

`<ol>`与`<li>`标签

HTML <ol> 元素表示有序列表，通常渲染为一个带编号的列表。
示例：

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

`<dl>、<dt>`与`<dd>`标签

HTML <dl> 元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。
示例：

<dl>
    <dt>Name</dt>
    <dd>Godzilla</dd>
    <dt>Born</dt>
    <dd>1952</dd>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
    <dt>Color</dt>
    <dd>Green</dd>
    <dd>Orange</dd>
</dl>

我练习时的代码

<!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>
    <ol>
        <li>第一讲</li>
        <li>
            第二讲
            <ul>
                <li>第一小节</li>
                <li>第二小节</li>
                <li>第三小节</li>
            </ul>
        </li>
        <li>第三讲
            <ol>
                <li>第一小节</li>
                <li>第二小节</li>
                <li>第三小节</li>
            </ol>
        </li>
    </ol>
    <dl>
        <dt>Name</dt>
        <dd>Godzilla</dd>
        <dt>Born</dt>
        <dd>1952</dd>
        <dt>Birthplace</dt>
        <dd>Japan</dd>
        <dt>Color</dt>
        <dd>Green</dd>
        <dd>Orange</dd>
    </dl>
</body>

</html>

表格

`<table>`标签

HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。

`<thead>`标签

HTML的<thead>元素定义了一组定义表格的列头的行。

`<tbody>`标签

HTML的<tbody>元素定义一组数据行。

`<tr>`标签

HTML <tr> 元素定义表格中的行。同一行可同时出现<td> 和<th> 元素。

`<th>`标签

HTML <th>元素定义表格内的表头单元格。

`<td>`标签

HTML <td> 元素定义了一个包含数据的表格单元格。

`<caption>`标签

HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在相对于表格的任意位置。

示例：

<table>
    <caption>My Table</caption>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

语义标签

在这里插入图片描述

`<header>`

HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

`<nav>`

HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

`<section>`

HTML <section>元素表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

`<figure>`

HTML <figure> 元素代表一段独立的内容，经常与说明（caption）<figcaption> 配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

`<figcaption>`

HTML <figcaption> 元素是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。这意味着 <figcaption> 在<figure> 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。

`<article>`

HTML <article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

`<aside>`

HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。

`<footer>`

HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

示例

<!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>
    <header>
        <h3>我的收藏夹</h3>

    </header>
    <section>
        <h4>图片</h4>
        <figure>
            <img width="100" src="/images/logo.png" alt="logo" >
            <figcaption>logo</figcaption>
        </figure>
        <figure>
            <img width="100" src="/images/mountain.jpg" alt="mountain">
            <figcaption>山</figcaption>
        </figure>
    </section>
    <section>
        <h4>古诗</h4>
        <article>
            <h5>春晓</h5>
            <p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>
        </article>
        <article>
            <h5>咏柳</h5>
            <p>碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。</p>
        </article>
    </section>
    <footer>&copy;2018-2022 Me 版权所有</footer>
</body>
</html>

特殊符号

&lt;	<	小于号或显示标记
&gt;	>	大于号或显示标记
&amp;	&	可用于显示其它特殊字符
&quot;	“	引号
&reg;	®	已注册
&copy;	©	版权
&trade;	™	商标
&nbsp;		不断行的空白

想进步的22级本科生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML标签之表单，列表，表格，语义标签，特殊符号

html标签二
复制链接

扫一扫

专栏目录

HTML标签之表单，列表，表格，语义标签，特殊符号

表单

<form>标签

<input>标签

<textarea>标签

<select>与<option>标签

<button>标签

我练习时的代码

列表

<ul>与<li>标签

<ol>与<li>标签

<dl>、<dt>与<dd>标签

我练习时的代码

表格

<table>标签

<thead>标签

<tbody>标签

<tr>标签

<th>标签

<td>标签

<caption>标签

示例：

语义标签

<header>

<nav>

<section>

<figure>

<figcaption>

<article>

<aside>

<footer>

示例

特殊符号

“相关推荐”对你有帮助么？

`<form>`标签

`<input>`标签

`<textarea>`标签

`<select>`与`<option>`标签

`<button>`标签

`<ul>`与`<li>`标签

`<ol>`与`<li>`标签

`<dl>、<dt>`与`<dd>`标签

`<table>`标签

`<thead>`标签

`<tbody>`标签

`<tr>`标签

`<th>`标签

`<td>`标签

`<caption>`标签

`<header>`

`<nav>`

`<section>`

`<figure>`

`<figcaption>`

`<article>`

`<aside>`

`<footer>`