跳至主要內容

HTML

naijoug大约 23 分钟

html vs xhtml

  • HTML(Hypertext Markup Language): 超文本标记语言，是网页的文件格式。

    HTML 不是编程语言，是一种描述性标记语言。 语法: <tag>content</tag>

    HTML 特点

    • HTML 对空格、tab、换行忽略
    • 空白折叠 : 标签内的文字，多个空格、tab、换行，会被压缩为一个空格。
    • <h1>标签一般只能有一个

  • XHTML(Extensible Hypertext Markup Language): 可扩展超文本标记语言，通俗讲就是更加严格的 HTML。

    要求标签闭合、标签属性小写，属性用引号。除了表单元素以外的所有元素，都应该用 id 而不是 name。

html
<!-- 1: 文档声明 -->
<!DOCTYPE html> 
<!-- 2: html 标签: 标记这是页面的开始 -->
<html>
    <!-- 3: head 标签: 网页的头部内容 -->
    <head>
        <meta charset="utf-8" />
        <title>我是网页的标题</title>
    </head>
    <!-- 4: body 标签: 网页的身体内容 -->
    <body>
        <h1>我是大标题</h1>
        <p>我是内容</p>
    </body>
</html> <!-- 这是页面的结束 -->

标签一览

标签全称说明
基本标签
<head></head>head头部
<body></body>body身体
<h1~6></h1~6>head标题
<p></p>paragraph段落
分区标签
<div></div>division区块
<span></span>span行内块
分割标签
<br/>breaking换行
<hr/>horizon水平线(分割线)
文本标签
<b></b>bold粗体
<i></i>italic斜体
<strong></strong>strong强调 - 粗体(语义性更好)
<em></em>emphasis强调 - 斜体(语义性更好)
<s></s>strikethrough中划线(删除线)
<del></del>delete删除线
<u></u>underline下划线
<sup></sup>superscripted上标
<sub></sub>subscripted下标
<big></big>big大字号
<small></small>small小字号
图片标签
<img/>image图片
超链接标签
<a></a>anchor超链接(锚点)
列表标签
<ul></ul>unordered list无序列表
<ol></ol>ordered list有序列表
<li></li>list item列表项
<dl></dl>defintion list定义列表
<dt></dt>definition title定义标题
<dd></dd>definition description定义描述
表格标签
<table></table>table表格
<caption></caption>caption标题
<thead></thead>table head表头
<tbody></tbody>table body表身
<tfoot></tfoot>table foot表脚
<tr></tr>table row表格行
<th></th>table header表头
<td/></td>table data表格数据
<rowspan></rowspan>row span合并单元格 - 行跨度
<colspan></colspan>column span合并单元格 - 列跨度
表单标签
<form></form>form表单
<input/>input输入框
<textarea></textarea>text area文本域(多行文本输入框)
<select></select>select下拉列表
<option></option>option下拉列表选项
框架标签
<iframe></iframe>frame框架

标签分类

  • 标签分类

    类型说明
    容器标签任何标签都可以包含，包括自己(div、li、dd、dt、td)
    文本标签只能存放文字、图片、表单，以及其他文本标签

  • 元素分类

    元素说明
    block块元素。块元素占据一行，不能与其它元素位于同一行，可以嵌套其它块元素和行内元素
    inline行内元素。可以和其它行内元素位于同一行，不能嵌套块元素

自闭合标签

标签说明
<meta/>网页元信息
<link/>引入外部文件
<br/>换行
<hr/>水平线
<img/>图片
<input/>输入框

字符实体

字符显示说明
&nbsp;空格
&quot;"引号
&times;×乘号
&divide;÷除号
&gt;>大于号
&lt;<小于号
&amp;&与符号
&copy;©️版权符号

基本标签

<head></head> - “头部”

<head> 标签是所有 HTML 文档必须有的一部分。它是元数据（如 <title>、<style>、<meta>、<link>、<script>等）的容器，并包含了关于文档的信息，不会在网页上可见。

<head>元素必须是<html>标签的第一个子元素，并且之后紧跟<body>标签。

能嵌套在 <head> 标签内的标签

标签说明
<title>定义了文档的标题，显示在浏览器的标题栏或者标签页上。
<meta>网页元信息，用于为搜索引擎提供关键词、页描述、字符编码等信息。
<link>引入外部文件，定义文档与外部资源的关系，常用于链接 CSS 文件。
<style>包含了文档的内嵌 CSS。
<script>包含文档的 JavaScript 代码，或链接外部的 JavaScript 文件。
<head>
    <!-- 1. 页面标题 -->
    <title>页面标题</title>
  
    <!-- 2. 网页元信息 -->
    <meta charset="UTF-8">
    <meta name="description" content="网页描述">
    <meta name="keywords" content="关键词1,关键词2">
    
    <!-- 3. 引入外部 CSS 文件 -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- 4. 内嵌 CSS 样式 -->
    <style>
        body {background-color: powderblue;}
        h1 {color: blue;}
        p {color: red;}
    </style>
    
    <!-- 5. 引入外部 JavaScript 文件 -->
    <script src="script.js"></script>
</head>

<body></body> - “身体”

<body> 标签中包含的是页面上所有的内容，如文本，超链接，图片，表格，列表等。所有你想在网页上显示的内容应该放在 <body> 标签和 </body> 标签之间。

可以放在 <body> 中的基本标签：

标签说明
<h1> ~ <h6>表示六级标题，<h1> 表示最高级别的标题， <h6> 表示最低级别的标题。
<p>表示段落。
<a>用来创建超链接。
<img>用来插入图像。
<table>用来创建表格。
<ul> <ol> <li>用来创建列表。
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <a href="https://www.example.com">Click here to go to Example.com</a>
  <img src="image.jpg" alt="Description of image">
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</body>

<h1~6></h1~6> - “标题”

<h1> ~ <h6>: head 的缩写，用于定义标题，其中 <h1> 表示最高级别的标题，<h6> 表示最低级别的标题。

<h1> ~ <h6> 标签样式：浏览器通常会默认为 <h1> 到 <h6> 加上从大到小的字体，可以使用 CSS 更改这些默认的样式。

<h1> ~ <h6> 标签语义：不仅在视觉上表示标题，也告诉搜索引擎和辅助阅读工具这是页面的层次结构。<h1> 标签定义的标题通常是最重要的，可能是整个网页或一个大的内容区块的主标题，而 <h2> ~ <h6> 则用于次级标题和副标题。

注意事项：

  • 在同一页面中，<h1> 通常只应该出现一次，用来定义整个页面的主要主题。
  • 使用 <h1> ~ <h6> 标签时，遵循一种逻辑顺序，并尽可能保持连续，这样有助于构建出清晰的内容层次和改善网页的可访问性。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!-- 显示在浏览器的标题栏中 -->
    <title>网页标题</title>
</head>
<body>
    <!-- 显示在网页文本中 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

<p></p> - “段落”

<p>: paragraph 的缩写，用来定义段落。它是一种块级元素，会默认带有一些上下外边距，常常用于包裹一些文本内容。

<p> 标签语义：定义的是段落，一个独立的、一般包含一个完整思想或一个独立主题的文本块。搜索引擎和辅助阅读工具会用这个信息来更好地理解和呈现你的内容。

注意事项：尽量保持每个 <p> 标签内的内容是一个完整的段落，而非使用多个 <p> 标签去创建空格或者换行，这样既可以保持代码的清晰，也能遵守 HTML 的语义规则。

<p>这是一个段落。</p>

<!-- 在两个 <p> 标签之间直接输入文本，浏览器会自动把这部分文本包裹在 <p> 标签内 -->
<p>这是第一个段落。</p>这是第二个段落。<p>这是第三个段落。</p>
<!-- 上面的例子会被浏览器解析为以下的方式 -->
<p>这是第一个段落。</p><p>这是第二个段落。</p><p>这是第三个段落。</p>

分块标签

<div></div> - “区块”

<div>: division 的缩写，表达的是逻辑上的区分或分组。这个标签可以包含其他的块级元素和内联元素。在默认情况下，<div> 是一个块级元素，会在前后产生换行。

<div> 标签语义：没有具体的语义含义。

主要目的：

  • 配合 CSS 进行布局和样式改变。可以通过类（class）或者 id 来选择特定的 <div>，然后在 CSS 中为它们添加样式。
  • 在 JavaScript 中，也可以通过id 或者类来获取这个 <div> 元素进行操作。
<div>这是一个div元素</div>

<!-- 通过 class 或 id 选择器来操作 -->
<div class="center">这个div元素有一个center类</div>
<div id="unique">这个div元素有一个唯一的ID</div>

<!-- 内联样式改变了文本颜色 -->
<div style="color:red">这个div元素的文本是红色的</div>

<!-- 表示了一组元素 -->
<div>
  <h1>标题</h1>
  <p>段落</p>
</div>

<span></span> - “行内块”

<span> 用于对文档中的行内元素进行分组或应用样式。<span> 标签与 <div>标签相似，但 <span> 是行内元素，而 <div>是块级元素。

<span> 标签没有默认的可视化特性，也就是说，它不会对内容进行任何改变，除非通过 CSS 给它添加样式。它主要在 CSS 和 JavaScript 中用于通过类（class）或 id 来选择和操作特定的元素。

<span>这是一个 span 元素。</span>

<!-- 内联样式改变了文本颜色 -->
<span style="color:blue">这是一个蓝色文本的 span 元素。</span>

<!-- 位于一个段落中，并用来使其中的一部分文字加粗 -->
<p>这是一个含有 <span style="font-weight:bold">加粗文字</span> 的段落。</p>

<!-- 并通过 class 应用了一个 CSS 类名，使得文本得以高亮显示 -->
<p>这是一个含有 <span class="highlight">高亮文字</span> 的段落。</p>

分割标签

<br/> - “换行标签”

<br/>: break 的缩写，表示一个换行符，用来在不开始新段落的情况下换行，通常在诗歌或者地址等需要文本逐行显示的地方使用。

<br/> 是一个空元素，也就是说，它仅仅表示一个位置，而不包含任何内容。因此，它没有结束标签，不需要在开始和结束位置插入任何内容。

<br/> 标签语义：应该仅用于段落中的换行，不应该用在其它地方实现换行效果。

<!-- 在一个段落中创建了一个换行 -->
<p>这是一行文字。<br/>这是新的一行。</p>

<!-- 在地址中使用了 <br/> 来创建一个换行 -->
<p>123 Main Street<br/>Springfield, USA</p>

<hr/> - “水平线标签”

<hr/>: horizontal rule 的简写，表示一个主题性的内容之间的分隔线，也就是“水平线”。

<hr/> 通常会被渲染为一个水平线，可以通过 CSS 改变其显示样式。<hr/> 是一个空标签，无需结束标签。

<hr/> 标签语义：代表了一个段落级别的主题性的分割，表示了文档的不同部分之间的分隔。

<p>这是一段文字。</p>
<!-- 创建了一条水平线，将两个段落分开 -->
<hr/>
<p>这是另一段文字。</p>

文本标签

标签呈现效果语义
<b></b>粗体 (bold)让文本粗体显示，但并没有提供额外的语义重要性或强调程度。
<strong></strong>粗体不仅让文本粗体显示，同时表示文本具有重要性，相比 <b> 标签具有更好的语义性。
<i></i>斜体 (italic)让文本斜体显示，但并没有提供额外的语义重要性或强调程度。
<em></em>斜体 (emphasized)不仅让文本斜体显示，同时表示强调该部分文本，相比 <i> 标签具有更好的语义性。
<s></s>中划线(删除线 strikethrough)表示文本被删除或不再准确。
<del></del>删除线 (delete)表示该部分内容是已经被删除的内容，当页面内容更新时，它可以清晰地表示哪些内容被做了改变。
<u></u>下划线 (underline)表示下划线，但在 HTML5 中已不推荐使用，因为它可能会与超链接产生混淆。与这位它没有特别的语义意义。
<sup></sup>上标 (superscripted)表示文本应以上标的形式显示，例如数学公式或版权符号等。
<sub></sub>下标 (subscripted)表示文本应该以下标形式显示，例如化学公式等。
<big></big>大字号该标签在 HTML5 中已不再推荐使用。它用于让文本字体变大，但并没有特殊的语义含义。
<small></small>小字号让文本字体变小。一般用于通常被视为辅助、注释或小字体的内容，例如版权声明或者法律文本。

最佳实践：使用 CSS 来控制文本的显示方式，而使用上述文本标签构建具有清晰语义的 HTML，这样做有利于搜索引擎和辅助技术（像屏幕阅读器等）更好地理解页面内容。

<b>这段文字被加粗了。</b>

<i>这段文字是斜体。</i>

<strong>这段文字很重要，所以被加粗了。</strong>

<em>这段文字被强调，所以变成了斜体。</em>

<s>这段文字已被删除。</s>

<p>原来的价格是 <del>$50.00</del>，现在的价格是 $25.00。</p>
<!-- 支持 datetime 属性，可用于指明何时进行删除操作 -->
<del datetime="2020-10-10T16:30:00Z">已删除的内容</del>

<!-- <u> 标签可能引起混淆（它与默认显示下划线的链接的效果一样）在 HTML5 中不再推荐使用它 -->
<u>这段文字下面有一条下划线。</u>

H<sub>2</sub>O (水的化学式) <br>
E = mc<sup>2</sup> (爱因斯坦质能方程)

x<sub>1</sub>, x<sub>2</sub>

<!-- 在 HTML 5 中已被废弃 -->
<big>这段文字字号比普通字大。</big>

<p>这是一段普通的文字. <small>这里是一些辅助信息、法律声明等小字内容。</small></p>

图片标签 - <img/>

<img/>: 在 HTML 中用于嵌入图片到网页中。<img> 标签是一个空元素，即没有闭合标签。

<img/> 标签语义：标识了一个图像区域，并通过 src 和 alt 属性告诉浏览器和用户这个区域的内容是什么。一个良好的 alt 属性值对于提高网页的可访问性、提高 SEO 效果都非常重要。

图片属性

属性说明
src必需。指定图像的 URL 或文件路径。
title可选。设定鼠标悬停在图像上时显示的文本。
alt可选。提供图像的文本替代(alternate)，用于无法显示图片或视力障碍的用户。
width可选。设定图像的宽度。可以使用像素（如 "500px"）或者相对百分比（如 "50%"）
height可选。设定图像的高度。可以使用像素或者相对百分比
border可选。设定图像的边框粗细 （已在 HTML5 中废弃，建议使用 CSS）
align可选。设定图像的对齐方式 （但已在 HTML5 中废弃，建议使用 CSS）
<img src="my-image.jpg" />

<img src="my-image.jpg" title="这是我的图片。" />

<img src="my-image.jpg" alt="我的图片描述。" />

<img src="my-image.jpg" width="500" height="300" />

<img src="my-image.jpg" border="2" />

<img src="my-image.jpg" align="middle" />

超链接标签 - <a>< /a>

<a>: 在 HTML 中用于创建超链接，可以链接到网页中的其它部分，或者链接到其它网页或网站。

<a> 标签语义：定义了一个超链接，用户可以点击这个链接跳转到另一个位置。

<a> 标签中的内容（介于开始 <a> 标签和结束 </a> 标签之间的内容）将作为链接显示。如果嵌入的内容包含其它元素（如图片），那么这些元素也将成为可点击的链接部分。

常用属性

属性说明
href链接跳转地址(hypertext reference) 定义链接的目标 URL。如果该属性未被指定，则 <a> 标签会被视为锚点（可以连接到页面的其他部分）。
target指定在哪里打开链接的目标 URL，例如在新窗口、本窗口等
title定义鼠标悬停在链接时显示的提示文本。
name页面锚点，用于定位到页面某部分
download指示浏览器下载 URL 而不是导航到它，可以是一个具体文件名
rel指定当前页面和链接目标之间的关系
hreflang提示链接目标资源的语言，类似于 lang 属性
type提示链接目标资源的 MIME 类型
href 值说明
外部链接外部网页 url
内部链接本地网页 path
锚点链接锚定当前网页的某一个位置
target 值说明
_self(默认)在当前窗口打开
_blank在新窗口打开
_parent在父窗口打开
_top在顶层窗口打开
<!-- 1. 链接到另一个网页： -->
<a href="https://www.example.com">Visit Example.com</a>
<!-- 设置属性 target="_blank" 意味着链接将在新窗口或标签中打开。 -->
<a href="https://www.example.com" target="_blank">Visit Example.com</a>
    
<!-- 2. 链接到同一文档中的不同部分： -->
<a href="#section2">Go to Section 2</a>
...
<h1 id="section2">Section 2</h1>
    
<!-- 3. 链接到电子邮件： -->
<a href="mailto:someone@example.com">Send Email</a>

列表标签

三种列表类型：无序列表、有序列表和定义列表。

<ul></ul> - “无序列表”

<ul>: unordered list 缩写，用来创建一个无序列表（内容项目前面没有数字或字母）。每个列表项都放在 <li>（列表项）标签中。

<ul> 标签语义： 表示其包含的内容是一个列表，在这个列表中，列表项之间没有特定的顺序。当需要列出几个并列的项目，但并不关心它们的排列顺序时，使用 <ul> 是最合适的。

<ul>
  <!-- 每个列表项都应该被包含在 <li> (list item) 标签中 -->
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<!-- 嵌套使用 <ul> 标签，来创建多级或者分层次的列表 -->
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

<ol></ol> - “有序列表”

<ol>: ordered list 缩写，用于创建一个有序列表，也就是说，列表项将被标记为数字或字母，并且按照特定的顺序排列。

<ol> 标签语义：表示其包含的列表项有固定的顺序。这个标签通常用于列出步骤，或者当列表的排列顺序在语义上有重要意义的时候。

最佳实践：有的列表前面有数字，也不应该用有序列表实现，因为有序列表的外观是固定的。

能调整 <ol> 列表项的标记方式的属性

属性说明
type改变标记类型（"1"、"A"、"a"、"I"、"i" 分别代表阿拉伯数字、大写字母、小写字母、大写罗马数字、小写罗马数字）
start改变计数的开始值
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<!-- 用大写字母标记的有序列表，且从 "C" 开始计数 -->
<ol type="A" start="3">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<dl></dl> - “定义列表”

<dl>: defintion list 缩写，用于创建一个定义列表，是一种由一组术语及其对应的描述组成的列表。

<dl> 标签语义：表示一个包含了多个定义及其解释的列表，通常在需要将包含多组术语和对应描述的内容进行分组和展示时使用 <dl>。比如对于一个词汇的解释列表，或者一个产品的特性描述列表等。

<dl>
  <!-- <dt> 标签表示定义术语 -->
  <dt>Coffee</dt>
  <!-- <dd> 标签表示对应的描述 -->
  <dd> - black hot drink</dd>
  <dt>Milk</dt>
  <dd> - white cold drink</dd>
</dl>

表格标签 - <table></table>

<table>: 用于创建表格。表格是以行和列的形式来展示数据的一种方式。

<table>标签语义：表示其内容是一个表格，其组成部分（如行、单元格等）有着明确的语义关系，并且此标签应当只用于展示行列数据。使用表格来排版页面或者设计布局是不推荐的做法，因为这样会破坏内容的语义关系，并可能带来无法预见的问题。

一个基本的表格的组成部分：

  • <table>：用于创建整个表格。
  • <tr>：用于创建表格中的一行。
  • <td>：用于创建表格中的一个数据单元格，即表格中的一个数据项。
  • <th>：用于创建表格中的一个表头单元格。它类似<td>，但通常文字会被加粗且居中。
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

常用属性 (HTML5 中已被废弃，推荐使用 CSS 代替这些属性进行样式设置)

属性说明
border定义表格的边框宽度
cellpadding定义单元格边沿间的空间
cellspacing定义单元格之间的空间
width定义表格的宽度
height定义表格的高度
align定义表格的水平对齐方式
valign定义表格的垂直对齐方式
bgcolor定义表格的背景色
background定义表格的背景图像

表单标签

<form></form> - “表单”

<form>: 用于创建 web 表单。一个表单可以包含输入元素，例如文字字段，复选框，单选按钮，提交按钮等等。

<form> 标签语义：表示一个用户可以输入他们数据的表单区域，通常用于从用户那里收集信息，例如姓名、电子邮件、密码等等。这些信息在表单提交后一般会发送到服务器进行处理。

常用属性

属性说明
name定义表单的名称，用于在脚本中引用表单
action定义当提交表单时数据发送的 URL
method定义表单数据在提交时使用的 HTTP 方法，如GET、POST
target定义提交表单后的结果在何处显示，例如在新窗口、本窗口等
enctype定义在提交表单时数据的编码类型,一般用于含有文件上传控件的表单
novalidate如果存在该属性，表单数据在提交时不作任何验证
autocomplete定义表单的自动完成功能，如启用或禁用
accept-charset定义在提交表单时用于编码数据的字符集
<!-- 创建了一个包含两个输入字段（姓名和电子邮件）及一个提交按钮的表单 -->
<form action="/submit" method="post">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="Submit">
</form>

<input/> - “输入”

<input/>: 用于创建输入字段，是表单（<form>）中的一个常见元素，能够让用户输入各种类型的数据。

<input> 标签语义：代表一个可以让用户输入值的元素。由 type 属性指定的类型决定了数据的输入方式和格式。

常用属性

属性说明
id定义元素的唯一 ID, 通常与 <label> 元素的 for 属性配合使用
type定义输入字段的类型，如 text、password、checkbox、radio、button 等
name定义输入字段的名称，这个名称会在表单数据提交时使用
value定义输入字段的初始值或默认值
placeholder定义输入字段的占位符，显示在未输入时的字段中
readonly如果存在该属性，用户不能修改输入字段的值
disabled如果存在该属性，用户不能与输入字段进行交互
maxlength定义输入字段能够接受的最大字符数
size定义输入字段的可见宽度，以字符为单位
required如果存在该属性，那么在提交表单之前用户必须填写该字段
autocomplete控制输入字段的自动完成功能，如启用或禁用
autofocus页面加载时，输入字段自动获取焦点

输入字段类型

类型说明
输入框
text“文本”输入框
password“密码”输入框
选项框
radio“单”选框
checkbox“复”选框
按钮
button“普通”按钮
submit“提交”按钮
reset“重置”按钮
文件
file文件上传
<form>
    <!-- 输入框 -->
    <input type="text" placeholder="“文本”输入框" />
    <input type="password" placeholder="“密码”输入框" />
        
    <!-- 单项框 -->
    <input type="radio" name="gender" value="male" /> 男
    <input type="radio" name="gender" value="female" /> 女
    
    <!-- 复项框 -->    
    <input type="checkbox" name="hobby" value="reading" /> 阅读
    <input type="checkbox" name="hobby" value="sporting" /> 运动
    <input type="checkbox" name="hobby" value="traveling" /> 旅行
    
    <!-- 按钮 -->
    <input type="button" value="“普通”按钮" />
    <input type="submit" value="“提交”按钮" />
    <input type="reset" value="“重置”按钮" />
        
    <!-- 文件 -->
    <input type="file" name="myFile" />
    
    <!-- 常常与 <label> 标签一起使用，对输入字段进行说明。 -->
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname">
</form>

<textarea></textarea> - “文本域”

<textarea>: 用于创建一个多行文本输入字段，让用户输入一段文字，如评论、反馈等。

<textarea> 标签语义：表示一个多行文本输入区域，让用户可以输入一段或多段文字。这种标签是很多在线表单的常见组成部分，在例如让用户输入留言、评论、反馈等场景中会使用到。

常用属性

属性说明
id定义元素的唯一 ID, 通常与 <label> 元素的 for 属性配合使用
name定义文本区域的名称，使用表单数据提交时需要
cols指定文本区域的可见宽度，以字符为单位
rows指定文本区域的可见行数
maxlength指定可以输入的最大字符数
placeholder输入提示，在用户未输入之前显示在输入框中
readonly设定该文本区域为只读的
disabled设定该文本区域为禁用状态，用户不能对其进行操作
required设定该文本区域为必填字段
wrap指定文本域中的文本如何换行（"soft"或"hard"）
autofocus页面加载时，文本区域自动获取焦点
<!-- 通常会与 <label> 标签一起使用来提供输入区域的描述，以帮助用户理解应该在该区域中输入什么内容。 -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50">
</textarea>

<select></select> - “下拉列表”

<select>: 用于创建一个下拉列表，用户可以从中选择一个或多个选项。每个 <select> 元素包含一或多个 <option> 元素，每个 <option> 元素代表一个选项。

<select> 标签语义：表示一个下拉列表，用户可以从中选择一个或多个选项。<option> 标签则代表列表中的一个选项。这种标签常用在用户需要从预定的一组选项中选择一个或多个的情况下，如选择国家、语言等。

常用属性

属性说明
id定义元素的唯一 ID, 通常与<label>元素的for属性配合使用。
name定义下拉列表的名称，这个名称会在表单数据提交时使用。
multiple如果存在该属性，允许用户选择多个选项。
size定义下拉列表中同时可见的选项数目。
disabled如果存在该属性，用户不能与下拉列表进行交互。
required如果存在该属性，则要求用户必须选择一个选项才能提交表单。
autofocus页面加载时，下拉列表自动获取焦点。
form定义下拉列表所属的一个或多个表单。
<!-- 通常会与 <label> 标签一起使用，为下拉列表提供描述，帮助用户理解应在该列表中选什么 -->
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
</select>
Copyright © 2025 naijoug