玄子Share

玄子Share-HTML5知识手册

前言：

这一版 HTML 笔记，算是我写的第四版了，第三版对照课本编写，第四版则是对照 MDN 官方文档编写，不论是术语亦或专业性，都更上一层

文章依托 MDN 文档，拓展了大量课本上没有介绍的标签，属性等知识点，我相信你认真看完一遍文章，定会受益匪浅

还有，文章中介绍的部分新标签及属性，版本较老的浏览器可能不支持，在练习时推荐使用 Chrome 浏览器进行开发测试

如有疑问*；最终更新时间 2023-10-11

文章目录

玄子Share-HTML5知识手册

@[toc]

1.01 HTML 基本简介

1.1.1 HTML 发展史

1.1.2 HTML 的优势

1.1.3 W3C 标准

1.02 HTML 开发工具

1.2.1 安装 WebStorm

1.03 HTML 基本标签

1.3.1 标签层级关系

1.3.2 基本标签语义

1.04 HTML 文本标签

1.4.1 文本标题标签

1.4.2 文本段落标签

1.4.3 文本换行标签

1.4.4 文本分割标签

1.4.5 文本强调标签

1.4.6 文本注释标签

1.4.7 文本特殊字符

1.4.8 文本标签语义

1.05 HTML 图像标签

1.5.1 图像标签属性

1.5.2 资源图片标签

1.5.3 资源相对路径

1.5.4 资源绝对路径

1.5.5 图像标签语义

1.06 HTML 链接标签

1.6.1 链接标签属性

1.6.2 锚点链接跳转

1.6.3 行内块级元素

1.6.4 链接标签语义

1.07 HTML 列表标签

1.7.1 无序列表标签

1.7.2 有序列表标签

1.7.3 定义列表标签

1.7.4 层级列表标签

1.7.5 列表标签语义

1.08 HTML 表格标签

1.8.1 表格标签属性

1.8.2 表格跨行跨列

1.8.3 表格标签语义

1.09 HTML 媒体标签

1.9.1 视频媒体标签

1.9.2 音频媒体标签

1.9.3 媒体标签属性

1.9.4 多媒体源标签

1.9.5 嵌入对象标签

1.9.6 媒体标签语义

1.10 HTML 状态标签

1.10.1 测量状态标签

1.10.2 进度状态标签

1.10.3 状态标签属性

1.10.4 状态标签语义

1.11 HTML 内联框架

1.11.1 内联框架属性

1.11.2 内联框架语义

1.12 HTML 结构标签

1.12.1 结构标签语义

1.13 HTML 表单标签

1.13.1 表单标签属性

1.13.2 普通文本控件

1.13.3 密码文本控件

1.13.4 邮箱文本控件

1.13.5 电话文本控件

1.13.6 网址文本控件

1.13.7 搜索文本控件

1.13.8 单选按钮控件

1.13.9 复选按钮控件

1.13.10 功能按钮控件

1.13.11 日期选择控件

1.13.12 颜色选择控件

1.13.13 数字选择控件

1.13.14 数字滑块控件

1.13.15 文件上传控件

1.13.16 隐藏文本控件

1.13.17 下拉列表控件

1.13.18 多行文本控件

1.13.19 表单控件属性

1.13.20 表单标签语义

1.14 HTML 标签速览

1.14.1 结构标签

1.14.2 文本标签

1.14.3 功能标签

1.14.4 表单标签

1.14.5 玄子Share

1.01 HTML 基本简介

HTML（超文本标记语言：HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（CSS）或功能与行为（JavaScript）

1.1.1 HTML 发展史

HTML 1.0：超文本标记语言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布
HTML 2.0：1995年11月作为 RFC 1866发布，在 RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2：1997年1月14日，W3C 推荐标准
HTML 4.0：1997年12月18日，W3C 推荐标准
HTML 5.0：2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成

1.1.2 HTML 的优势

解决了跨浏览器问题
化繁为简
- 简化的 DOCTYPE
- 强大的 HTML5 API
- 以浏览器原生能力替代复杂的 JavaScript 代码
跨平台

支持多种类型设备的跨平台适用性，减少了开发人员的工作量
功能强大，新增特性
- 支持本地存储、离线缓存、地理位置等
- 新增实用标签
  - 支持绘制图形
  - 支持播放视频和音频

1.1.3 W3C 标准

W3C
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，Web 技术领域最权威和具影响力的国际中立性技术标准机构
- W3C 官网 http://www.w3.org
- W3C 中文官网 http://www.chinaw3c.org
W3C 标准包括
- 结构化标准语言（XHTML 、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript ）

1.02 HTML 开发工具

记事本
Dreamweaver
WebStorm
- WebStorm 是 Jetbrains (捷克)公司旗下一款 JavaScript 开发工具。被广大中国 JS 开发者誉为Web前端开发神器
VSCode
UltraEdit
Sublime

1.2.1 安装 WebStorm

WebStorm 是最专业的的前端开发工具，版权原因这里不介绍

WebStorm 官网: https://www.jetbrains.com/webstorm/

详细安装教程请加文章封面联系方式

1.03 HTML 基本标签

DOCTYPE html>

<html lang="en">
    <head>
        
        <meta charset="UTF-8">
        
        <title>网页基本标签title>
        
    head>
    <body>
        
        <h1>Change The World!h1>
    body>
html>

1.3.1 标签层级关系

包含关系

<head>
    <title>title>
head>

并列关系

<head>
head>
<body> 
body>

HTML 标签通常为成对出现，以<>开始，结束；部分标签为自闭合标签，如、等

1.3.2 基本标签语义

标签	语义	说明
	文档类型声明	告诉浏览器使用规范为`HTML`
	网页标签	标签位于 HTML 文档的最前面，用于标识 HTML 文档的开始和结尾
	头部标签	用于定义 HTML 文档的头部，描述文档属性，包含一些辅助标签例如、<link>、<script></code></td> </tr> <tr> <td align="left"><code><title></code></td> <td>网页标题</td> <td>用来定义网页的标题名称</td> </tr> <tr> <td align="left"><code><meta></code></td> <td>描述性标签</td> <td>一般用来做 SEO</td> </tr> <tr> <td align="left"><code><body></code></td> <td>主体标题</td> <td>用于定义 HTML 文档的主体内容</td> </tr> </tbody> </table> <hr> <h3>1.04 HTML 文本标签</h3> <h4>1.4.1 文本标题标签</h4> <p>为了使网页更具有语义化，我们经常会在页面中用到标题标签</p> <p>HTML <code><h1></code>–<code><h6></code> 标题标签（heading：标题、类目）元素呈现了六个不同的级别的标题，<code><h1></code> 级别最高，而 <code><h6></code> 级别最低</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>一级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>二级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>三级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>四级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h5</span><span class="token punctuation">></span></span>五级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span><span class="token punctuation">></span></span>六级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/98402e76a8194b4caf4e86861fa674fb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/98402e76a8194b4caf4e86861fa674fb.jpg" alt="玄子Share-HTML5知识手册_第2张图片" width="337" height="542" style="border:1px solid black;"></a></p> <blockquote> <p>这里提一下，在HTML 或其他文档类型中，不推荐使用四级及以下标题。例如，在本手册中，我只用了一、二、三级标题来划分文档结构，这些标题具有较大的字体大小和更醒目的样式，可以更好地表现文档的层次结构和内容重点。相比之下，四级标题的字体大小与常规文本字体相似，容易混淆且不利于阅读和理解。因此，为了防止混淆，优化文档结构和提高可读性，不推荐使用四级及以下标题</p> </blockquote> <h4>1.4.2 文本段落标签</h4> <p>在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示</p> <p>HTML<code><p></code>段落标签（paragraph：段落、节）表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 《静夜思》床前明月光，疑是地上霜。举头望明月，低头思故乡。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 《望天门山》天门中断楚江开，碧水东流至此回。两岸青山相对出，孤帆一片日边来。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 《早发白帝城》朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>段落与段落之间有明显的间隙，段落长度超出浏览器宽度会自动换行</p> </blockquote> <h4>1.4.3 文本换行标签</h4> <p>在网页中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行</p> <p>HTML<code><br></code>换行标签（break：打断、停顿、进入新状态）在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 《独坐敬亭山》<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 众鸟高飞尽，孤云独去闲。<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 相看两不厌，只有敬亭山。<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/97e917c760494d3ebce3103dd8af9e41.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/97e917c760494d3ebce3103dd8af9e41.jpg" alt="玄子Share-HTML5知识手册_第3张图片" width="266" height="123" style="border:1px solid black;"></a></p> <h4>1.4.4 文本分割标签</h4> <p>HTML<code><hr></code>分割标签（horizontal rule：水平分割线）表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/1a438cf7b9a14d0ab08c180ad97dfb93.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1a438cf7b9a14d0ab08c180ad97dfb93.jpg" alt="玄子Share-HTML5知识手册_第4张图片" width="650" height="330" style="border:1px solid black;"></a></p> <h4>1.4.5 文本强调标签</h4> <p>HTML 中，有多标签用来强调文本（emphasis：强调）内容。这些标签可以在一定程度上改变文本的外观，但更重要的是它们用于传达文本的语义信息</p> <pre><code class="prism language-css"><span class="token selector"><style> .mathML, .emphasis > </span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid turquoise<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> </code></pre> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>emphasis<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>p：普通段落文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>em：倾斜文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>i：倾斜文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>strong：加粗文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>b：加粗文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mark</span><span class="token punctuation">></span></span>mark：高亮文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mark</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>u</span><span class="token punctuation">></span></span>u：下划线，已弃用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>u</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>s</span><span class="token punctuation">></span></span>s：删除线，已弃用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>s</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strike</span><span class="token punctuation">></span></span>strike：删除线，已弃用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strike</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ins</span><span class="token punctuation">></span></span>ins：下划线<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ins</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>del</span><span class="token punctuation">></span></span>del：删除线<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>del</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>code：代码文本，alert('Change The World!')<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>samp：程序输出，页面弹窗代码示例：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span>alert('Change The World!')<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span>small：小号文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>big</span><span class="token punctuation">></span></span>big：大号文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>big</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span>cite：引用文本，斜体<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q</span><span class="token punctuation">></span></span>q：引用文本，引号包裹<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>ruby+rt：注音文本：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ruby</span><span class="token punctuation">></span></span>汉<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>hàn<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span>字<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>zì<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ruby</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>abbr：HTML 是 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HyperText Markup Language<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> 的缩写。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>dfn：定义文本，<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dfn</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>超文本标记语言<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dfn</span><span class="token punctuation">></span></span>是用于创建网页的标记语言。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>kbd：请按下 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>Enter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> 键以确认<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>var：假设 x 是一个数字，那么 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>x + 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span> 表示 x 加上 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>sup：上标文本，2<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sup</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sup</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>sub：下标文本，2<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sub</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sub</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>b+i：加粗斜体样式标签可以嵌套使用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="prism language-html"><span class="token comment"><!--数学公式，不多介绍，详见 MDN--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mathML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://developer.mozilla.org/zh-CN/docs/Web/MathML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数学公式 MathML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>二次方程的一般解为：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>math</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mi</span><span class="token punctuation">></span></span>x<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mi</span><span class="token punctuation">></span></span> = <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mfrac</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mrow</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mo</span><span class="token punctuation">></span></span>-<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mo</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mi</span><span class="token punctuation">></span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mi</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mo</span><span class="token punctuation">></span></span>±<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mo</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>msqrt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>msup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mi</span><span class="token punctuation">></span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mi</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mn</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mn</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>msup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mo</span><span class="token punctuation">></span></span>-<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mo</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mn</span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mn</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mo</span><span class="token punctuation">></span></span>⁢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mo</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mi</span><span class="token punctuation">></span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mi</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mo</span><span class="token punctuation">></span></span>⁢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mo</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mi</span><span class="token punctuation">></span></span>c<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mi</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>msqrt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mrow</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mrow</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mn</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mn</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mo</span><span class="token punctuation">></span></span>⁢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mo</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mi</span><span class="token punctuation">></span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mi</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mrow</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mfrac</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>math</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/70abc7a4bae64db786518838d69054b7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/70abc7a4bae64db786518838d69054b7.jpg" alt="玄子Share-HTML5知识手册_第5张图片" width="650" height="115" style="border:1px solid black;"></a></p> <h4>1.4.6 文本注释标签</h4> <p>如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的文字，就需要使用注释标签</p> <p>HTML 中的注释以：<code><!--</code> 开头，以 <code>--></code> 结尾</p> <pre><code class="prism language-html"><span class="token comment"><!-- 注释语句 --></span> <span class="token comment"><!-- <p>这是一个被注释掉的段落</p> --></span> </code></pre> <blockquote> <p>注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的，但会显示在页面源码中</p> </blockquote> <p><a href="http://img.e-com-net.com/image/info8/6e945a69c45a4d3693505d4163364c51.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6e945a69c45a4d3693505d4163364c51.jpg" alt="玄子Share-HTML5知识手册_第6张图片" width="650" height="380" style="border:1px solid black;"></a></p> <h4>1.4.7 文本特殊字符</h4> <p>在网页中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用特殊字符来替代。无需记忆，IDEA 中集成了常用特殊符号</p> <table> <thead> <tr> <th align="left">特殊字符</th> <th align="left">描述</th> <th align="left">字符的代码</th> </tr> </thead> <tbody> <tr> <td align="left"><code> </code></td> <td align="left">空格符</td> <td align="left"><code> </code></td> </tr> <tr> <td align="left"><code><</code></td> <td align="left">小于号</td> <td align="left"><code><</code></td> </tr> <tr> <td align="left"><code>></code></td> <td align="left">大于号</td> <td align="left"><code>></code></td> </tr> <tr> <td align="left"><code>&</code></td> <td align="left">和号</td> <td align="left"><code>&</code></td> </tr> <tr> <td align="left"><code>±</code></td> <td align="left">正负号</td> <td align="left"><code>±</code></td> </tr> <tr> <td align="left"><code>×</code></td> <td align="left">乘号</td> <td align="left"><code>×</code></td> </tr> <tr> <td align="left"><code>÷</code></td> <td align="left">除号</td> <td align="left"><code>÷</code></td> </tr> <tr> <td align="left"><code>©</code></td> <td align="left">版权符号</td> <td align="left"><code>©</code></td> </tr> </tbody> </table> <pre><code class="prism language-html"><span class="token comment"><!--特殊符号不需要记忆，用到百度即可--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>空格<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>空<span class="token entity named-entity"> </span><span class="token entity named-entity"> </span>格<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>大于号：<span class="token entity named-entity">></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>小于号：<span class="token entity named-entity"><</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>分号：<span class="token entity named-entity">"</span><span class="token entity named-entity">"</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>版权符号：<span class="token entity named-entity">©</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/7b076a9b6747446e91a69b188d8110c2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7b076a9b6747446e91a69b188d8110c2.jpg" alt="玄子Share-HTML5知识手册_第7张图片" width="297" height="249" style="border:1px solid black;"></a></p> <h4>1.4.8 文本标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><h1></code>-<code><h6></code></td> <td>标题</td> <td>定义不同级别的标题，<code><h1></code>为最高级别，依次递减</td> </tr> <tr> <td><code><p></code></td> <td>段落</td> <td>定义一个段落</td> </tr> <tr> <td><code><br/></code></td> <td>换行符</td> <td>在文本中插入一个换行符</td> </tr> <tr> <td><code><hr/></code></td> <td>水平线</td> <td>在文档中插入一条水平分隔线</td> </tr> <tr> <td><code><em></code></td> <td>斜体</td> <td>表示文本的强调，通常以斜体显示</td> </tr> <tr> <td><code><i></code></td> <td>斜体</td> <td>表示文本的斜体样式</td> </tr> <tr> <td><code><strong></code></td> <td>粗体</td> <td>表示文本的强调，通常以粗体显示</td> </tr> <tr> <td><code><b></code></td> <td>粗体</td> <td>表示文本的粗体样式</td> </tr> <tr> <td><code><mark></code></td> <td>高亮</td> <td>表示文本的高亮显示</td> </tr> <tr> <td><code><u></code></td> <td>下划线</td> <td>给文本添加下划线（已被废弃，不推荐使用）</td> </tr> <tr> <td><code><s></code></td> <td>删除线</td> <td>表示删除的文本，通常以删除线显示（已被废弃，不推荐使用）</td> </tr> <tr> <td><code><strike></code></td> <td>删除线</td> <td>表示删除的文本，通常以删除线显示（已被废弃，不推荐使用）</td> </tr> <tr> <td><code><ins></code></td> <td>下划线</td> <td>表示插入的文本</td> </tr> <tr> <td><code><del></code></td> <td>删除线</td> <td>表示删除的文本</td> </tr> <tr> <td><code><code></code></td> <td>行内代码</td> <td>表示行内的计算机代码</td> </tr> <tr> <td><code><samp></code></td> <td>代码示例</td> <td>表示代码的示例</td> </tr> <tr> <td><code><small></code></td> <td>小号字体</td> <td>将文字显示为小号字体</td> </tr> <tr> <td><code><big></code></td> <td>大号字体</td> <td>将文字显示为大号字体</td> </tr> <tr> <td><code><cite></code></td> <td>引用标题</td> <td>表示引用或作品的标题</td> </tr> <tr> <td><code><q></code></td> <td>短引用</td> <td>表示短的引用</td> </tr> <tr> <td><code><ruby></code></td> <td>注音标注</td> <td>用于显示拼音或其他注音标记</td> </tr> <tr> <td><code><rt></code></td> <td>注音解释</td> <td>用于显示拼音或其他注音的解释</td> </tr> <tr> <td><code><abbr></code></td> <td>缩写</td> <td>表示缩写词或缩略词</td> </tr> <tr> <td><code><dfn></code></td> <td>定义</td> <td>表示一个术语或定义</td> </tr> <tr> <td><code><kbd></code></td> <td>键盘样式</td> <td>表示键盘输入</td> </tr> <tr> <td><code><var></code></td> <td>变量</td> <td>表示变量或占位符</td> </tr> <tr> <td><code><sup></code></td> <td>上标</td> <td>将文本显示为上标</td> </tr> <tr> <td><code><sub></code></td> <td>下标</td> <td>将文本显示为下标</td> </tr> <tr> <td><code><math></code></td> <td>数学公式</td> <td>用于显示数学公式</td> </tr> <tr> <td><code><!-- --></code></td> <td>注释</td> <td>在HTML中插入注释，不会在页面上显示</td> </tr> </tbody> </table> <hr> <h3>1.05 HTML 图像标签</h3> <p>HTML 标签中，<code><img></code>标签（image：图像）用于定义 HTML 页面中的图像</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>替换文本<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500px<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>标题<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>替换文本<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>标题<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/7a748c660900412bbf2e3baa043168e2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7a748c660900412bbf2e3baa043168e2.jpg" alt="玄子Share-HTML5知识手册_第8张图片" width="455" height="342" style="border:1px solid black;"></a></p> <blockquote> <p><code>../</code>：表示回退到上级目录，回退上两级目录就写两遍，然后指定路径下的文件，如果找不到图像就展示<code>alt</code>属性中的文本</p> </blockquote> <h4>1.5.1 图像标签属性</h4> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>替换文本<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500px<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>标题<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500px<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>src</code></td> <td>图片路径</td> <td>图像索引路径，可以写相对路径或绝对路径</td> </tr> <tr> <td><code>alt</code></td> <td>文本</td> <td>替换文本，图片无法显示时的替换文字</td> </tr> <tr> <td><code>title</code></td> <td>文本</td> <td>提示文本，鼠标悬浮到图像时显示文字</td> </tr> <tr> <td><code>width</code></td> <td>尺寸</td> <td>设置图像的宽度，若以图像宽度等比缩放，只设置宽度尺寸</td> </tr> <tr> <td><code>height</code></td> <td>尺寸</td> <td>设置图像的高度，若以图像高度等比缩放，只设置高度尺寸</td> </tr> <tr> <td><code>loading</code></td> <td><code>eager</code>：立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）<br><code>lazy</code>：延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）</td> <td>设置图像的加载方式</td> </tr> </tbody> </table> <blockquote> <p>在设置图像的宽度或高度时，建议只设置其中一个属性，让浏览器根据比例自动计算另一个属性，以保持图像的原始比例。这样可以避免图像被拉伸或压缩失真</p> <p><code>loading</code>：仅在启用 JavaScript 时才会延迟加载。这是一种反跟踪的措施，因为，如果用户代理在禁用脚本的情况下支持延迟加载，网站仍然跨源通过在图像中策略性地放置图像来跟踪用户在整个会话期间的大致滚动位置，这样服务器可以跟踪请求了多少图像以及请求在何时发起</p> </blockquote> <h4>1.5.2 资源图片标签</h4> <p>HTML<code><picture></code>标签（picture：图像）通过包含零或多个<code><source></code>标签和一个<code><img></code>标签来为不同的显示/设备场景提供图像版本</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子Share.png<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100px<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子Share.png<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(max-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100px<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/470006351bc84622bcf251a0318693f0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/470006351bc84622bcf251a0318693f0.jpg" alt="玄子Share-HTML5知识手册_第9张图片" width="227" height="133" style="border:1px solid black;"></a></p> <h4>1.5.3 资源相对路径</h4> <p>相对路径则是相对于当前HTML文档所在位置的路径。根据相对路径的不同，又可以分为三种类型：同级目录、上级目录和根目录</p> <table> <thead> <tr> <th>相对路径分类</th> <th>符号</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>同级目录</td> <td><code> </code></td> <td><code><img src="image.jpg"></code></td> </tr> <tr> <td>上级目录</td> <td><code>../</code></td> <td><code><img src="../images/image.jpg"></code></td> </tr> <tr> <td>根目录</td> <td><code>/</code></td> <td><code><img src="/images/image.jpg"></code></td> </tr> </tbody> </table> <h4>1.5.4 资源绝对路径</h4> <p>绝对路径指的是从根目录开始的完整路径，网络路径以<code>http://</code>或<code>https://</code>开头，磁盘路径以磁盘盘符开头</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.xuanzishare.com/images/favicon.ico<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>案例中，<code>src</code>指定了一个绝对路径，表示图像<code>favicon.ico</code>位于<code>xuanzishare.com</code>网站的<code>/images</code>目录下</p> <blockquote> <ul> <li>Windows 系统的绝对路径：<code>F:/html/img/favicon.ico</code></li> <li>网络地址：<code>https://www.xuanzishare.com/favicon.ico</code></li> <li>实际开发中建议使用相对路径或网络地址</li> </ul> </blockquote> <h4>1.5.5 图像标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><img/></code></td> <td>图像标签</td> <td>定义一个图片，需要指定图片的 URL、大小、描述等信息</td> </tr> </tbody> </table> <hr> <h3>1.06 HTML 链接标签</h3> <p>HTML<code><a></code>标签（anchor：锚）可以通过它的<code>href</code>属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.xuanzishare.com/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>网址<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1.html<span class="token punctuation">"</span></span> <span class="token attr-name">download</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>新文件名称.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>下载<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:y3336392096@163.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>邮箱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel:12345678911<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电话<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/f90a14af59664392a062f5ef4f5e6b76.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f90a14af59664392a062f5ef4f5e6b76.jpg" alt="玄子Share-HTML5知识手册_第10张图片" width="621" height="392" style="border:1px solid black;"></a></p> <h4>1.6.1 链接标签属性</h4> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.xuanzishare.com/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>网址<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>href</code></td> <td>超链接所指向的 URL（必须属性）<br></td> <td><code>tel:</code> URL 链接到一个电话号码<br><code>mailto:</code> URL 链接到一个邮箱地址</td> </tr> <tr> <td><code>target</code></td> <td><code>_self</code>：当前页面加载。（默认） <br><code>_blank</code>：通常在新标签页打开，但用户可以通过配置选择在新窗口打开<br><code>_parent</code>：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与<code>_self</code>相同<br><code>_top</code>：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 <code>_self</code> 相同</td> <td>用于指定链接页面的打开方式</td> </tr> <tr> <td><code>download</code></td> <td>下载文件名称</td> <td>浏览器将链接的 URL 视为下载资源</td> </tr> </tbody> </table> <blockquote> <p>链接标签经常被滥用为假按钮，将其 <code>href</code> 设置为 <code>#</code> 或 <code>javascript:void(0)</code> 以防止页面刷新，然后监听其 <code>click</code> 事件</p> </blockquote> <h4>1.6.2 锚点链接跳转</h4> <p>锚点链接：点击链接，可以快速定位到某页面中的某个位置</p> <ul> <li>锚点：需要跳转的位置<code><p id="F1">F1</p></code>设置<code>id</code>属性值为锚点</li> <li>跳转点：点击触发跳转<code><p><a href="#F1">跳转至F1</a></p></code>设置<code>href</code>属性值为锚点<code>id</code>前加<code>#</code></li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#F1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跳转至F1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#F2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跳转至F2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 2000px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span>turquoise<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>F1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>F1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 2000px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span>turquoise<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>F2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>F2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/c0b87a20696e4b64993be5325b17fedb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c0b87a20696e4b64993be5325b17fedb.jpg" alt="玄子Share-HTML5知识手册_第11张图片" width="650" height="177" style="border:1px solid black;"></a></p> <hr> <h4>1.6.3 行内块级元素</h4> <p>在HTML中，元素可被分类为行内元素（inline element）和块级元素（block-level element），这两种元素具有不同的特征和表现方式</p> <ul> <li><strong>行内元素</strong>：指默认情况下在文档流中以行内的形式显示的元素。行内元素通常用于包裹文本或者以行内的方式插入到其他元素中</li> <li><strong>块级元素</strong>：指默认情况下在文档流中以块级的形式显示的元素。块级元素占据一整行，空间独立显示，可设置宽度、高度、边距、内边距等属性</li> </ul> <p>行内元素和块级元素的主要区别</p> <ul> <li><strong>显示方式</strong>：行内元素以行内的方式显示，块级元素以块级的方式显示</li> <li><strong>占据空间</strong>：行内元素只占据其内容所需的空间，不独占一行；块级元素占据一整行的空间，独立显示</li> <li><strong>换行行为</strong>：行内元素不会强制换行，会根据父元素和其他行内元素的大小自动填充一行显示；块级元素会在前后自动创建换行</li> <li><strong>宽度和高度</strong>：行内元素的宽度和高度属性设置无效，由内容决定；块级元素的宽度和高度属性可自由调整</li> <li><strong>嵌套规则</strong>：行内元素可嵌套在其他行内元素中，但不能包含块级元素；块级元素可嵌套在其他块级元素中，也可包含行内元素和其他块级元素</li> </ul> <p>常见的行内元素包括 <code><span></code>、<code><a></code>、<code><em></code>、<code><strong></code> 等</p> <p>常见的块级元素包括 <code><div></code>、<code><p></code>、<code><h1></code>-<code><h6></code>、<code><ul></code>、<code><li></code> 等</p> <pre><code class="prism language-html"><span class="token comment"><!--行内元素--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>a标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>a标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20px<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20px<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> <span class="token comment"><!--块级元素--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>标题标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>标题标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>p标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>p标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/26340d1a497a4736bac64646e226b8aa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/26340d1a497a4736bac64646e226b8aa.jpg" alt="玄子Share-HTML5知识手册_第12张图片" width="650" height="811" style="border:1px solid black;"></a></p> <blockquote> <p>需要注意的是，通过CSS的display属性可改变元素的显示方式，使其行内元素变为块级元素或反之。另外，还有一种叫做内联块元素（inline-block）的元素，它具有行内元素的特性，但可设置宽度、高度等块级元素的属性</p> </blockquote> <h4>1.6.4 链接标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><a></code></td> <td>锚点链接</td> <td>定义一个超链接，可以链接到其他网页、文件、位置等</td> </tr> </tbody> </table> <hr> <h3>1.07 HTML 列表标签</h3> <h4>1.7.1 无序列表标签</h4> <p>HTML<code><ul></code>无序列表标签（unordered list：无序列表）表示一系列无序的列表项目，通常渲染为项目符号列表，列表项使用<code><li></code>标签（list item：列表项）定义</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JAVA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>SQL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/ed2b59e3b4934d18b7975ffacf1ff9f0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ed2b59e3b4934d18b7975ffacf1ff9f0.jpg" alt="玄子Share-HTML5知识手册_第13张图片" width="218" height="138" style="border:1px solid black;"></a></p> <blockquote> <ul> <li>无序列表的各个列表项之间没有顺序级别之分，是并列的</li> <li><code><ul></code>中只能嵌套<code><li></code>，直接在<code><ul></code>标签中输入其他标签或者文字的做法是不被允许的，列表中的任何内容都应该放在<code>li</code>中</li> <li><code><li></code> 与 <code></li></code> 之间相当于一个容器，可以容纳所有的元素</li> <li>无序列表可通过<code>type</code>属性设置项目符号，但在实际开发中，我们会使用<code>CSS</code>来设置</li> <li>去除列表项默认符号的方法：<code><ul style="list-style: none;"></code></li> </ul> </blockquote> <h4>1.7.2 有序列表标签</h4> <p>HTML<code><ol></code>有序列表标签（ordered list：有序列表）表示有序列表，通常渲染为一个带编号的列表，列表项使用<code><li></code>标签（list item：列表项）定义</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JAVA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>SQL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/297f058be4b24051827758e8dccb8728.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/297f058be4b24051827758e8dccb8728.jpg" alt="玄子Share-HTML5知识手册_第14张图片" width="206" height="125" style="border:1px solid black;"></a></p> <blockquote> <ul> <li>有序列表的各个列表项之间有级别之分，是顺序的</li> <li><code><ol></code>中只能嵌套<code><li></code>，直接在<code><ol></code>标签中输入其他标签或者文字的做法是不被允许的，列表中的任何内容都应该放在<code>li</code>中</li> <li><code><li></code> 与 <code></li></code> 之间相当于一个容器，可以容纳所有的元素</li> <li>有序列表可通过<code>type</code>属性设置项目符号，但在实际开发中，我们会使用<code>CSS</code>来设置</li> <li>去除列表项默认符号的方法：<code><ol style="list-style: none;"></code></li> </ul> </blockquote> <h4>1.7.3 定义列表标签</h4> <p>HTML<code><dl></code>定义列表（definition list：定义列表）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)，该标签会与 <code><dt></code>（definition term：定义术语）和 <code><dd></code>（definition description：定义描述）一起使用</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>前端<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>后端<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>JAVA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>MySQL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> </code></pre> <p>![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-blog.csdnimg.cn/749590ed92804b67a9e33905488ad21f.pn<br> g)</p> <blockquote> <ul> <li><code><dl></code>里面只包含<code><dt></code>、<code><dd></code></li> <li><code><dt></code>和<code><dd></code>个数没有限制，通常是一个<code><dt></code>对应多个<code><dd></code></li> </ul> </blockquote> <h4>1.7.4 层级列表标签</h4> <ul> <li>HTML<code><details></code>标签（details：详细资料）可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息</li> <li>HTML<code><summary></code>标签（summary：摘要）指定了<code><details></code>标签展开盒子的内容的摘要，标题或图例</li> <li>点击<code><summary></code>标签可以切换父元素<code><details></code>开启和关闭的状态</li> </ul> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">details</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #aaa<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em 0.5em 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">summary</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> -0.5em -0.5em 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">details[open]</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">details[open] summary</span> <span class="token punctuation">{</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #aaa<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>第一层<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>第二层-1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>第三层-1 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>第二层-2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/32f59687a9ae4cbfbd0bcf4fda719261.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/32f59687a9ae4cbfbd0bcf4fda719261.png" alt="玄子Share-HTML5知识手册_第15张图片" width="677" height="464" style="border:1px solid black;"></a></p> <blockquote> <p><code>open</code>这个布尔属性表示细节内容：也就是 <code><details></code> 元素的内容目前是否可见。默认情况下为 <code>false</code>，意味着细节内容是不可见的</p> </blockquote> <h4>1.7.5 列表标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><ul></code></td> <td>无序列表</td> <td>用于创建一个无序列表，其中每个列表项都由一个圆点符号标识</td> </tr> <tr> <td><code><ol></code></td> <td>有序列表</td> <td>用于创建一个有序列表，其中每个列表项都由一个数字或字母标识</td> </tr> <tr> <td><code><li></code></td> <td>列表项</td> <td>用于定义列表中的一个列表项</td> </tr> <tr> <td><code><dl></code></td> <td>定义列表</td> <td>用于创建一个定义列表，其中每个列表项由一个术语和一个定义组成</td> </tr> <tr> <td><code><dt></code></td> <td>定义术语</td> <td>用于定义定义列表中的一个术语</td> </tr> <tr> <td><code><dd></code></td> <td>定义描述</td> <td>用于定义定义列表中术语的定义</td> </tr> <tr> <td><code><details></code></td> <td>可折叠内容</td> <td>用于创建一个可折叠的区域，其中包含详细信息</td> </tr> <tr> <td><code><summary></code></td> <td>折叠摘要</td> <td>用于定义<code><details></code>元素的摘要或标题</td> </tr> </tbody> </table> <hr> <h3>1.08 HTML 表格标签</h3> <ul> <li>HTML<code><table></code>标签（table：表格）表示表格数据，即在一个由包含数据的行和列组成的二维表格中呈现的信息</li> <li>HTML<code><caption></code>标签 (caption：标题) 展示一个表格的标题</li> <li>HTML<code><thead></code>标签（tableHead：表格头部）定义了一组定义表格的列头的行</li> <li>HTML<code><tbody></code>标签（tableBody：表格主体）封装了一系列表格的行<code>tr</code></li> <li>HTML<code><tfoot></code>标签（tableFoot：表格尾部）定义了一组表格中各列的汇总行</li> <li>HTML<code><tr></code>标签（tableRow：表格行）定义表格中的行。同一行可同时出现<code>td</code>与<code>th</code></li> <li>HTML<code><th></code>标签（tableHeading：表头单元格）定义表格内的表头单元格</li> <li>HTML<code><td></code>标签（tableData：数据单元格）定义表格中的列。同一行内可有多列<code>td</code></li> </ul> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">table</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 100px auto<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">border-collapse</span><span class="token punctuation">:</span> collapse<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">caption</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span> <span class="token property">caption-side</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #323232<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> turquoise<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>36<span class="token punctuation">,</span> 36<span class="token punctuation">,</span> 36<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">code</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 3px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 3px 5px<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>170<span class="token punctuation">,</span> 200<span class="token punctuation">,</span> 228<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #2F2F2F<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">th, td, th</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #323232<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.75<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">th</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #42D392<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>26<span class="token punctuation">,</span> 26<span class="token punctuation">,</span> 26<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">tr:nth-of-type(even)</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>26<span class="token punctuation">,</span> 26<span class="token punctuation">,</span> 26<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">tr:nth-of-type(odd)</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>36<span class="token punctuation">,</span> 36<span class="token punctuation">,</span> 36<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>caption</span><span class="token punctuation">></span></span>标题：表格标签属性<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>caption</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>属性名<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>属性值<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>描述<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>align<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>、<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>center<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>、<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>：表格将在文档左侧显示（默认）<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>center<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>：表格将在文档中央显示<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>：表格将在文档右侧显示 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>border<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>整数或 0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>规定表格单元是否拥有边框，默认为 0，表示没有边框<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>bgcolor<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>RGB 编码，以<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>作为前缀<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>表格的背景颜色<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>cellpadding<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>像素值<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>规定单元边沿与其内容之间的空白<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>cellspacing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>像素值<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>规定单元格之间的空白<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>width<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>像素值或百分比<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>规定表格的宽度<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tfoot</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跨行演示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跨列一行<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跨列二行<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tfoot</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传</p> <h4>1.8.1 表格标签属性</h4> <p>表格标签大部分私有属性均被弃用，改用适当的<code>CSS</code>设置样式</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">cellpadding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> </code></pre> <table> <thead> <tr> <th align="left">属性名</th> <th align="left">属性值</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td align="left"><code>align</code></td> <td align="left"><code>left</code>：表格将在文档左侧显示（默认）<br><code>center</code>：表格将在文档中央显示<br><code>right</code>：表格将在文档右侧显示</td> <td align="left">表格在文档中显示位置</td> </tr> <tr> <td align="left"><code>border</code></td> <td align="left">整数</td> <td align="left">规定表格单元是否拥有边框，默认为 0，表示没有边框</td> </tr> <tr> <td align="left"><code>bgcolor</code></td> <td align="left">RGB 编码，以<code>#</code>作为前缀</td> <td align="left">表格的背景颜色</td> </tr> <tr> <td align="left"><code>cellpadding</code></td> <td align="left">像素值</td> <td align="left">规定单元边沿与其内容之间的空白</td> </tr> <tr> <td align="left"><code>cellspacing</code></td> <td align="left">像素值</td> <td align="left">规定单元格之间的空白</td> </tr> <tr> <td align="left"><code>width</code></td> <td align="left">像素值或百分比</td> <td align="left">规定表格的宽度</td> </tr> </tbody> </table> <h4>1.8.2 表格跨行跨列</h4> <p>特殊情况下，可以把多个单元格<code>td</code>合并为一个单元格</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tfoot</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跨行演示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跨列一行<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跨列二行<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tfoot</span><span class="token punctuation">></span></span> </code></pre> <p>外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传</p> <blockquote> <ul> <li>跨行合并（上下合并）：<code>rowspan="合并单元格的个数"</code></li> <li>跨列合并（左右合并）：<code>colspan="合并单元格的个数"</code></li> <li>合并完毕后删除多余的单元格</li> </ul> </blockquote> <h4>1.8.3 表格标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><table></code></td> <td>表格</td> <td>用于创建表格的容器</td> </tr> <tr> <td><code><caption></code></td> <td>表格标题</td> <td>用于为表格提供标题</td> </tr> <tr> <td><code><thead></code></td> <td>表格头</td> <td>用于组织表格中的表头行（包含表格的列标题）</td> </tr> <tr> <td><code><tbody></code></td> <td>表格体</td> <td>用于组织表格中的主体内容，通常包括多个数据行</td> </tr> <tr> <td><code><tfoot></code></td> <td>表格尾</td> <td>用于组织表格中的页脚内容，通常包括汇总行或其他与表格整体相关的信息</td> </tr> <tr> <td><code><tr></code></td> <td>表格行</td> <td>表示表格中的一行数据</td> </tr> <tr> <td><code><th></code></td> <td>表格头单元格</td> <td>表示表格中的表头单元格，通常包含列标题</td> </tr> <tr> <td><code><td></code></td> <td>表格数据单元格</td> <td>表示表格中的数据单元格，包含实际的数据内容</td> </tr> </tbody> </table> <hr> <h3>1.09 HTML 媒体标签</h3> <h4>1.9.1 视频媒体标签</h4> <p>HTML<code><video></code>标签（video：视频）用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将<code><video></code>标签用于音频内容，但是<code><audio></code>元素可能在用户体验上更合适</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/video/video.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span> <span class="token punctuation">></span></span>你的浏览器不支持video标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>浏览器不支持<code><video></code>标签时，将会显示标签中间的文字</p> </blockquote> <h4>1.9.2 音频媒体标签</h4> <p>HTML<code><audio> </code>标签（audio：音频）用于在文档中嵌入声音内容</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/audio/audio.mp3<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span>你的浏览器不支持audio标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>浏览器不支持<code><audio></code>标签时，将会显示标签中间的文字</p> </blockquote> <p><a href="http://img.e-com-net.com/image/info8/b79bc5071fae4ea2a64f3c665ae32cf7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b79bc5071fae4ea2a64f3c665ae32cf7.jpg" alt="玄子Share-HTML5知识手册_第16张图片" width="650" height="332" style="border:1px solid black;"></a></p> <h4>1.9.3 媒体标签属性</h4> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">autoplay</span> <span class="token attr-name">controls</span> <span class="token attr-name">muted</span> <span class="token attr-name">preload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/video/G.E.M.邓紫棋-GLORIA.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">poster</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>视频封面.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">autoplay</span> <span class="token attr-name">controls</span> <span class="token attr-name">muted</span> <span class="token attr-name">preload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>metadata<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/audio/G.E.M.邓紫棋-天空没有极限.flac<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> </code></pre> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td><code>width</code></td> <td>像素</td> <td align="left">设置视频播放器的宽度（仅限绝对值，不支持百分比）</td> </tr> <tr> <td><code>height</code></td> <td>像素</td> <td align="left">设置视频播放器的高度（仅限绝对值，不支持百分比）</td> </tr> <tr> <td><code>src</code></td> <td>URL</td> <td align="left">要嵌到页面的视频的 URL</td> </tr> <tr> <td><code>controls</code></td> <td></td> <td align="left">浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放</td> </tr> <tr> <td><code>autoplay</code></td> <td>布尔属性</td> <td align="left">视频会尽快自动开始播放，不会停下来等待数据全部加载完成</td> </tr> <tr> <td><code>loop</code></td> <td>布尔属性</td> <td align="left">在视频播放结束的时候，自动返回视频开始的地方，继续播放</td> </tr> <tr> <td><code>muted</code></td> <td>布尔属性</td> <td align="left">音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放</td> </tr> <tr> <td><code>poster</code></td> <td>视频封面文件 URL</td> <td align="left">海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示</td> </tr> <tr> <td><code>preload</code></td> <td><code>none</code>: 表示不应该预加载视频 <br><code>metadata</code>: 表示仅预先获取视频的元数据（例如长度）<br><code>auto</code>: 表示可以下载整个视频文件，即使用户不希望使用它<br><code>空字符串</code>: 和值为<code>auto</code>一致。每个浏览器的默认值都不相同，即使规范建议设置为<code>metadata</code></td> <td align="left">该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验</td> </tr> </tbody> </table> <blockquote> <p><code>autoplay</code>属性的优先级比<code>preload</code>高。如果制定了<code>autopaly</code>属性，浏览器显然需要开始下载视频以便回放</p> </blockquote> <h4>1.9.4 多媒体源标签</h4> <p>HTML<code><source></code>标签（source：来源）指定用于<code><picture></code>、<code><audio></code>元素或<code><video></code>元素的多个媒体资源</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">autoplay</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/audio/G.E.M.邓紫棋-天空没有极限.flac<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/audio/G.E.M.邓紫棋-天空没有极限.mp3<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> 你的浏览器不支持audio标签 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>浏览器会从上到下依次尝试加载<code><source></code>标签指定的音频源。它会选择第一个可用的音频格式进行播放，如果都不支持则显示错误信息</p> </blockquote> <h4>1.9.5 嵌入对象标签</h4> <p>HTML <code><object></code>标签（object：对象）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>object</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>application/pdf<span class="token punctuation">"</span></span> <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/world/玄子Share-HTML知识手册.pdf<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1000px<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>object</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/2f71038f42a44589b92345807e1f8f38.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2f71038f42a44589b92345807e1f8f38.jpg" alt="玄子Share-HTML5知识手册_第17张图片" width="650" height="519" style="border:1px solid black;"></a></p> <h4>1.9.6 媒体标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><video></code></td> <td>视频</td> <td>定义一个视频，通常用于播放电影、短片等</td> </tr> <tr> <td><code><audio></code></td> <td>音频</td> <td>定义一个音频，通常用于播放音乐、声音等</td> </tr> <tr> <td><code><source></code></td> <td>媒体源</td> <td>定义媒体元素的一个或多个媒体资源，通常用于指定不同格式、不同分辨率的媒体文件</td> </tr> <tr> <td><code><object></code></td> <td>通用元素</td> <td>用于在HTML页面中嵌入各种外部资源</td> </tr> </tbody> </table> <hr> <h3>1.10 HTML 状态标签</h3> <h4>1.10.1 测量状态标签</h4> <p>HTML<code><meter></code>标签（meter：测量）用来显示已知范围的标量值或者分数值</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meter</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meter1<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">low</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>33<span class="token punctuation">"</span></span> <span class="token attr-name">high</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>66<span class="token punctuation">"</span></span> <span class="token attr-name">optimum</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>at 10/100<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>meter</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meter</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meter2<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">low</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>33<span class="token punctuation">"</span></span> <span class="token attr-name">high</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>66<span class="token punctuation">"</span></span> <span class="token attr-name">optimum</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>at 50/100<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>meter</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meter</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meter3<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">low</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>33<span class="token punctuation">"</span></span> <span class="token attr-name">high</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>66<span class="token punctuation">"</span></span> <span class="token attr-name">optimum</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>90<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>at 90/100<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>meter</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/5e7a9338cd0249c0bd46c33a85702b5d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5e7a9338cd0249c0bd46c33a85702b5d.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="650" height="68"></a></p> <h4>1.10.2 进度状态标签</h4> <p>HTML<code><progress></code>标签（progress：进度）用来显示一项任务的完成进度。通常情况下，该元素都显示为一个进度条形式</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>progress</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>70%<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>progress</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/dcac52ee632f4c4db51a46acf7f0240e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/dcac52ee632f4c4db51a46acf7f0240e.jpg" alt="玄子Share-HTML5知识手册_第18张图片" width="650" height="102" style="border:1px solid black;"></a></p> <blockquote> <p><code><progress></code>标签只有案例中这两个属性</p> </blockquote> <h4>1.10.3 状态标签属性</h4> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>value</code></td> <td>整数</td> <td>当前的数值。如果设置了最小值和最大值（分别由 min 属性和 max 属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为 0。如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值</td> </tr> <tr> <td><code>min</code></td> <td>整数</td> <td>值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为 0</td> </tr> <tr> <td><code>max</code></td> <td>整数</td> <td>值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为 1</td> </tr> <tr> <td><code>low</code></td> <td>整数</td> <td>定义了低值区间的上限值（译者注：如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在 [min,low]、[high,max] 等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过 high 值和最大值。未设置或者比最小值还要小时，其值即为最小值</td> </tr> <tr> <td><code>high</code></td> <td>整数</td> <td>定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值</td> </tr> <tr> <td><code>optimum</code></td> <td>整数</td> <td>这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围</td> </tr> </tbody> </table> <blockquote> <p>除非值域在 0 到 1（闭区间）, 否则最小值和最大值属性需要定义，以保证 value 属性在值域范围内。换言之，默认的 min 和 max 值分别为 0 和 1</p> </blockquote> <h4>1.10.4 状态标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><meter></code></td> <td>测量</td> <td>表示某个度量值或指标的测量结果</td> </tr> <tr> <td><code><progress></code></td> <td>进度条</td> <td>表示任务或操作的完成进度</td> </tr> </tbody> </table> <hr> <h3>1.11 HTML 内联框架</h3> <p>HTML<code><iframe></code>内联框架标签（iframe：内联框架）表示嵌套的浏览器内容。它能够将另一个 HTML 页面嵌入到当前页面中</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>01_网页基本标签.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iframe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点击跳转：网页基本标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>02_基础标签.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iframe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点击跳转：基础标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800px<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1500px<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.xuanzishare.com/<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iframe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 您的浏览器不支持iframe <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/504a23c103fc4ce3baac2a7e4d823562.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/504a23c103fc4ce3baac2a7e4d823562.jpg" alt="玄子Share-HTML5知识手册_第19张图片" width="650" height="260" style="border:1px solid black;"></a></p> <h4>1.11.1 内联框架属性</h4> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>页面地址<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>宽度<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>高度<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>名称<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> </code></pre> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>src</td> <td>URL 地址</td> <td>被嵌套资源的 URL 地址</td> </tr> <tr> <td>width</td> <td>嵌入页面的宽度</td> <td>以 CSS 像素格式，或以像素格式，或以百分比格式指定的 frame 的宽度。默认值是<code>300</code></td> </tr> <tr> <td>height</td> <td>嵌入页面的高度</td> <td>以 CSS 像素格式，或像素格式，或百分比格式指定 frame 的高度。默认值为<code>150</code></td> </tr> <tr> <td>name</td> <td>嵌入页面的名称</td> <td>用于定位嵌入的浏览上下文的名称，可以用作<code><a></code>标签的<code>target</code>属性值</td> </tr> </tbody> </table> <h4>1.11.2 内联框架语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><iframe></code></td> <td>内嵌框架</td> <td><code><iframe></code>标签用于嵌入另一个 HTML 页面或外部网页，创建一个内联框架，允许在当前页面中显示其他内容</td> </tr> </tbody> </table> <hr> <h3>1.12 HTML 结构标签</h3> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>示例页面<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav li</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav a</span> <span class="token punctuation">{</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">main</span> <span class="token punctuation">{</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">article</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f9f9f9<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">section</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f0f0f0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">aside</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">footer</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>网页标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>关于<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>联系我们<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>文章标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是一篇示例文章。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>区段标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是一个区段的内容。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>侧边栏<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是侧边栏的内容。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> <span class="token entity named-entity">©</span> 2023 示例公司 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/739b1793905144d1a36446c19f941a8b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/739b1793905144d1a36446c19f941a8b.jpg" alt="玄子Share-HTML5知识手册_第20张图片" width="650" height="305" style="border:1px solid black;"></a></p> <h4>1.12.1 结构标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><header></code></td> <td>头部</td> <td>定义文档或区段的页眉</td> </tr> <tr> <td><code><nav></code></td> <td>导航</td> <td>定义导航链接的部分</td> </tr> <tr> <td><code><main></code></td> <td>主要内容</td> <td>指定文档的主要内容区域</td> </tr> <tr> <td><code><article></code></td> <td>文章</td> <td>表示独立的文章或内容块</td> </tr> <tr> <td><code><section></code></td> <td>区段</td> <td>定义文档的一个区段或部分</td> </tr> <tr> <td><code><aside></code></td> <td>侧边栏</td> <td>表示与文档内容相关但可选的部分</td> </tr> <tr> <td><code><footer></code></td> <td>底部</td> <td>定义文档或区段的页脚</td> </tr> <tr> <td><code><div></code></td> <td>通用容器</td> <td>用于分组和样式化元素，没有特定语义</td> </tr> <tr> <td><code><span></code></td> <td>行内元素</td> <td>用于在文本内部添加行内样式和其他行内元素</td> </tr> </tbody> </table> <hr> <h3>1.13 HTML 表单标签</h3> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>表单标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">form</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 1800px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f7f7f7<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1, h2</span> <span class="token punctuation">{</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 20px auto<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ededed<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.container div</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 10px auto<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #e3e3e3<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">label</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.flex</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">enctype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multipart/form-data<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>玄子Share-表单标签功能演示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>input：输入框演示1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>文本输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入用户名<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>密码输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入密码<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>邮件输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入邮箱<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电话输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入电话号码<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>网址输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入网址<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>搜索输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入搜索关键词<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>日期时间输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>日期输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>月份输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>周输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>时间输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>颜色选择框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#007bff<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>input：输入框演示2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>单选框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nan<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>男<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>女<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>oth<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>其他<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>复选框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>唱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox2<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jump<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跳<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox3<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rap<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>rap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox4<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basketball<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>篮球<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>范围输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数字输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入数字<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>普通按钮：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>按钮<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提交按钮：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>重置按钮：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重置<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>图像按钮：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../../resources/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图像按钮<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 20px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>文件上传：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>隐藏字段：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>这是隐藏字段<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>select：下拉列表演示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>爱好：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>第一组<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>唱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jump<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>跳<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>第二组<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>rap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basketball<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>篮球<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>textarea：文本域演示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comments<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>留言：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comments<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comments<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请留下您的留言<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>button：按钮演示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>普通按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提交按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>重置按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/3f3370e3a7e640509bbf2d9f4d28258c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3f3370e3a7e640509bbf2d9f4d28258c.jpg" alt="玄子Share-HTML5知识手册_第21张图片" width="650" height="319" style="border:1px solid black;"></a></p> <h4>1.13.1 表单标签属性</h4> <p>HTML<code><form></code>标签（form：表单）表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url地址<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交方式<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>表单域名称<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- 表单元素控件 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>action</code></td> <td>处理表单提交的 URL</td> <td>可被<code><button></code>、<code><input type="submit"></code>或<code><input type="image"></code>元素上的<code>formaction</code>属性覆盖</td> </tr> <tr> <td><code>method</code></td> <td><code>post</code>：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器<br><code>get</code>：指的是 HTTP GET 方法；表单数据会附加在<code>action</code>属性的 URL 中，并以 ‘?’ 作为分隔符，没有附件时使用这个方法<br><code>dialog</code>：当表单在<code><dialog></code>中时，关闭对话框并在提交时触发<code>submit</code>事件，而不提交数据或清除表单（可被：formaction 覆盖）</td> <td>浏览器使用这种 HTTP 方式来提交表单<br></td> </tr> <tr> <td><code>enctype</code></td> <td><code>application/x-www-form-urlencoded</code>：未指定属性时的默认值<br><code>multipart/form-data</code>：当表单包含 <code>type=file</code> 的<code><input></code>元素时使用此值<br><code>text/plain</code>：出现于 HTML5，用于调试</td> <td>当<code>method</code>属性值为<code>post</code>时，<code>enctype</code>就是将表单的内容提交给服务器的 MIME 类型</td> </tr> <tr> <td><code>target</code></td> <td><code>_self</code>：默认值。在相同浏览上下文中加载<br><code>_blank</code>：在新的未命名的浏览上下文中加载<br><code>_parent</code>：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 <code>_self</code>表现一致<br><code>_top</code>：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与<code>_self</code>表现一致（可被：formaction 覆盖）</td> <td>表示在提交表单之后，在哪里显示响应信息</td> </tr> </tbody> </table> <h4>1.13.2 普通文本控件</h4> <p>单行的文本字段，输入值中的换行会被自动去除</p> <p>HTML<code><label></code>标签（label：标签）表示用户界面中某个元素的说明，<code>for</code>属性值为绑定控件<code>id</code>值，表现为点击<code><label></code>同时激活绑定控件</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>文本输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入文本<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/ebe7f4d5c34449139ce8a277448b82e3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ebe7f4d5c34449139ce8a277448b82e3.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="363" height="53"></a></p> <blockquote> <p><code>maxlength</code>：可以限制输入长度不能高于6</p> </blockquote> <h4>1.13.3 密码文本控件</h4> <p>单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>密码输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入密码<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/e97f6e98926b441fa5dafd11406ea458.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e97f6e98926b441fa5dafd11406ea458.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="477" height="98"></a></p> <blockquote> <p><code>minlength</code>：可以限制输入长度不能低于6</p> </blockquote> <h4>1.13.4 邮箱文本控件</h4> <p>编辑邮箱地址的字段。类似 <code>text</code> 输入，但在支持的浏览器和带有动态键盘的设备上会有验证参数和相应的键盘</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>邮件输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入邮箱<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xuanzi@qq.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/c74e6fc0b7074fe39c0bd2e4fa3f688a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c74e6fc0b7074fe39c0bd2e4fa3f688a.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="386" height="83"></a></p> <h4>1.13.5 电话文本控件</h4> <p>用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电话输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入电话号码<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0207<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/87765ded2cbc4bcfbab41bb7a86059a1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/87765ded2cbc4bcfbab41bb7a86059a1.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="362" height="69"></a></p> <h4>1.13.6 网址文本控件</h4> <p>用于输入 URL 的控件。类似<code>text</code>输入，但有验证参数，在支持动态键盘的设备上有相应的键盘</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>网址输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入网址<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.xuanzishare.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/67227904d773437ba30c010e03f7665f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/67227904d773437ba30c010e03f7665f.jpg" alt="玄子Share-HTML5知识手册_第22张图片" width="386" height="110" style="border:1px solid black;"></a></p> <h4>1.13.7 搜索文本控件</h4> <p>用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>搜索输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入搜索关键词<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/e2bbd913811343209cc5ef10defb2f4e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e2bbd913811343209cc5ef10defb2f4e.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="351" height="72"></a></p> <blockquote> <p>与普通<code>text</code>的区别表现在，文本框末尾有<code>x</code>可一键删除输入内容</p> </blockquote> <h4>1.13.8 单选按钮控件</h4> <p>单选按钮，允许在多个拥有相同<code>name</code>值的选项中选中其中一个</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 性别： <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">checked</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>na<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> 男 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nv<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> 女 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/5ee33629c1074ac5a727220425b3c6e6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5ee33629c1074ac5a727220425b3c6e6.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="179" height="50"></a></p> <blockquote> <p>要求<code>name</code>属性的值一致，提交选中项<code>value</code>值，<code>checked</code>属性表示默认选中</p> </blockquote> <h4>1.13.9 复选按钮控件</h4> <p>复选框，可将其值设为选中或未选中</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> 请选择你会的语言： <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">checked</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>language<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Chinese<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>中文<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">checked</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>language<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>English<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>英文<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>language<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Japanese<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>日文<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>language<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Espana<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>西班牙语<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/6838b26f03d34beab843d64e23b170e3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6838b26f03d34beab843d64e23b170e3.jpg" alt="玄子Share-HTML5知识手册_第23张图片" width="217" height="205" style="border:1px solid black;"></a></p> <blockquote> <p><code>checkbox</code>复选框的<code>name</code>属性如果一致，提交时会将选项合并为集合提交</p> </blockquote> <h4>1.13.10 功能按钮控件</h4> <p>HTML 中提供了多种按钮，用于处理不同场景下的点击事件</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>普通按钮<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交按钮<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重置按钮<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片按钮<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/a890dd8de91949c98b9b6bb699760b51.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a890dd8de91949c98b9b6bb699760b51.jpg" alt="玄子Share-HTML5知识手册_第24张图片" width="386" height="145" style="border:1px solid black;"></a></p> <p>HTML<code><button></code>标签（button：按钮）表示一个可点击的按钮</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>普通按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提交按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>重置按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/eb6b8188b10c43e69ec65e0894fc87e7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eb6b8188b10c43e69ec65e0894fc87e7.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="252" height="56"></a></p> <blockquote> <ul> <li> <p><code>button</code>：普通按钮，上面显示<code>value</code>属性的值，默认为空</p> </li> <li> <p><code>submit</code>：提交按钮，用于提交表单的按钮</p> </li> <li> <p><code>reset</code>：重置按钮：此按钮将表单的所有内容重置为默认值。不推荐使用该类型</p> </li> <li> <p><code>image</code>：图形化<code>submit</code>按钮。显示的图像由<code>src</code>属性决定。如果<code>src</code>属性缺失，就会显示<code>alt</code>的内容</p> </li> </ul> </blockquote> <h4>1.13.11 日期选择控件</h4> <p>输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>日期时间输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> </code></pre> <p>输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>日期输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> </code></pre> <p>输入年和月的控件，没有时区</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>月份输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> </code></pre> <p>用于输入以年和周数组成的日期，不带时区</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>周输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> </code></pre> <p>用于输入时间的控件，不包括时区</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>时间输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/9db33835f6294c888674aba72cff6d6b.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/9db33835f6294c888674aba72cff6d6b.png" alt="玄子Share-HTML5知识手册_第25张图片" width="411" height="269" style="border:1px solid black;"></a></p> <h4>1.13.12 颜色选择控件</h4> <p>用于指定颜色的控件，在支持的浏览器中，激活时会打开取色器</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>颜色选择框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#007bff<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/90b87e0f3b884009a25264b7ad3a00dc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/90b87e0f3b884009a25264b7ad3a00dc.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="427" height="62"></a></p> <h4>1.13.13 数字选择控件</h4> <p>用于输入数字的控件，如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。同时使用<code>min</code>，<code>max</code>，<code>step</code>来规定可接受值的范围，及步增值。拥有动态键盘的设备上会显示数字键盘。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数字滑块框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/ad590be244f2491fab96d752b0b8a94e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ad590be244f2491fab96d752b0b8a94e.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="429" height="55"></a></p> <h4>1.13.14 数字滑块控件</h4> <p>此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用<code>min</code>，<code>max</code>，<code>step</code>来规定可接受值的范围，及步增值</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数字选择框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入数字<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/e25151cf8c9e4a9caa5cb2790143edc7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e25151cf8c9e4a9caa5cb2790143edc7.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="426" height="60"></a></p> <h4>1.13.15 文件上传控件</h4> <p>让用户选择文件的控件。使用<code>accept</code>属性规定控件能选择的文件类型</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>文件上传：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/b9420f4502ca422da7e089db41ee184d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b9420f4502ca422da7e089db41ee184d.jpg" alt="玄子Share-HTML5知识手册_第26张图片" width="650" height="262" style="border:1px solid black;"></a></p> <blockquote> <p><code>accept</code>属性限制上传文件类型，若要上传文件<code><fomr></code>标签提交方式需要为<code>post</code>并添加属性<code>enctype="multipart/form-data"</code></p> </blockquote> <h4>1.13.16 隐藏文本控件</h4> <p>不显示的控件，其值仍会提交到服务器</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>隐藏字段：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>这是隐藏字段<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/6f3125287b854389b6d027ba6b042c36.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6f3125287b854389b6d027ba6b042c36.jpg" alt="玄子Share-HTML5知识手册_第27张图片" width="650" height="199" style="border:1px solid black;"></a></p> <h4>1.13.17 下拉列表控件</h4> <ul> <li>HTML<code><select></code>标签（select：选择）表示一个提供选项菜单的控件</li> <li>HTML<code><optgroup></code> 标签（option group：选项组）为<code><select></code>标签中的选项创建分组</li> <li>HTML<code><option></code>标签（option：选项）用于定义在<code><select></code>,<code><optgroup></code>或<code><datalist></code>标签中包含的项</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>第一组<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>唱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jump<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>跳<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>第二组<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>rap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basketball<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>篮球<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/5cf73c47acc04f0a9b28826c018d4c6d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5cf73c47acc04f0a9b28826c018d4c6d.jpg" alt="玄子Share-HTML5知识手册_第28张图片" width="281" height="171" style="border:1px solid black;"></a></p> <p>HTML<code><datalist></code>标签（datalist：数据列表）包含了一组<code><option></code>标签，这些元素表示其他表单控件可选值</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数据列表：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbiesList<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbiesList<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>唱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jump<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>跳<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>rap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basketball<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>篮球<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/4a6504f626bd481ca209c6ab4a61363c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4a6504f626bd481ca209c6ab4a61363c.jpg" alt="玄子Share-HTML5知识手册_第29张图片" width="376" height="258" style="border:1px solid black;"></a></p> <blockquote> <p><code><input></code>标签的<code>list</code>属性表示数据来源，值为<code><datalist></code>标签<code>id</code>值</p> </blockquote> <h4>1.13.18 多行文本控件</h4> <p>HTML<code><textarea></code>标签（textarea：文本区域）表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comments<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>留言：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comments<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comments<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请留下您的留言<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/abd97a5b3bf04fb0ba51d14cd85a3e43.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/abd97a5b3bf04fb0ba51d14cd85a3e43.jpg" alt="玄子Share-HTML5知识手册_第30张图片" width="361" height="121" style="border:1px solid black;"></a></p> <blockquote> <ul> <li><code>rows</code>元素的输入文本的行数（显示的高度）</li> <li><code>cols</code>文本域的可视宽度。必须为正数，默认为 20 (HTML5)</li> <li><code>spellcheck</code>布尔值<code>true</code>表明该元素会做拼写和语法检查</li> <li>禁止拉伸文本框大小，设置：<code>style="resize: none;"</code></li> </ul> </blockquote> <h4>1.13.19 表单控件属性</h4> <table> <thead> <tr> <th align="left">属性</th> <th align="left">类型</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td align="left"><code>accept</code></td> <td align="left"><code>file</code></td> <td align="left">文件上传控件中预期文件类型的提示</td> </tr> <tr> <td align="left"><code>alt</code></td> <td align="left"><code>image</code></td> <td align="left">图片类型的 alt 属性。对无障碍是必需的</td> </tr> <tr> <td align="left"><code>autocomplete</code></td> <td align="left">除了<code>checkbox</code>、<code>radio</code>和按钮以外</td> <td align="left">表单自动填充特性提示</td> </tr> <tr> <td align="left"><code>capture</code></td> <td align="left"><code>file</code></td> <td align="left">文件上传控件中媒体捕获方法的提示</td> </tr> <tr> <td align="left"><code>checked</code></td> <td align="left"><code>checkbox</code>、<code>radio</code></td> <td align="left">控件是否选中</td> </tr> <tr> <td align="left"><code>dirname</code></td> <td align="left"><code>search</code>、<code>text</code></td> <td align="left">表单字段的名称，用于在提交表单时发送元素的方向性</td> </tr> <tr> <td align="left"><code>disabled</code></td> <td align="left">所有类型</td> <td align="left">表单控件是否禁用</td> </tr> <tr> <td align="left"><code>form</code></td> <td align="left">所有类型</td> <td align="left">将控件联系到表单元素中</td> </tr> <tr> <td align="left"><code>formaction</code></td> <td align="left"><code>image</code>、<code>submit</code></td> <td align="left">要提交表单的 URL 地址</td> </tr> <tr> <td align="left"><code>formenctype</code></td> <td align="left"><code>image</code>、<code>submit</code></td> <td align="left">提交表单时使用的表单数据编码类型</td> </tr> <tr> <td align="left"><code>formmethod</code></td> <td align="left"><code>image</code>、<code>submit</code></td> <td align="left">提交表单时所使用的 HTTP 方法</td> </tr> <tr> <td align="left"><code>formnovalidate</code></td> <td align="left"><code>image</code>、<code>submit</code></td> <td align="left">绕过表单提交时的表单控件验证</td> </tr> <tr> <td align="left"><code>formtarget</code></td> <td align="left"><code>image</code>、<code>submit</code></td> <td align="left">提交表单时的浏览上下文</td> </tr> <tr> <td align="left"><code>height</code></td> <td align="left"><code>image</code></td> <td align="left">与<code><img ></code>元素的 height 属性有相同含义，垂直方向上的维度值</td> </tr> <tr> <td align="left"><code>list</code></td> <td align="left">除了<code>hidden</code>、<code>password</code>、<code>checkbox</code>、<code>radio</code>和按钮以外</td> <td align="left">自动完成选项的<code><datalist></code>的 id 属性的值</td> </tr> <tr> <td align="left"><code>max</code></td> <td align="left"><code>date</code>、<code>month</code>、<code>week</code>、<code>time</code>、<code>datetime-local</code>、<code>number</code>、<code>range</code></td> <td align="left">最大值</td> </tr> <tr> <td align="left"><code>maxlength</code></td> <td align="left"><code>text</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code>、<code>password</code></td> <td align="left"><code>value</code>的最大长度（字符数）</td> </tr> <tr> <td align="left"><code>min</code></td> <td align="left"><code>date</code>、<code>month</code>、<code>week</code>、<code>time</code>、<code>datetime-local</code>、<code>number</code>、<code>range</code></td> <td align="left">最小值</td> </tr> <tr> <td align="left"><code>minlength</code></td> <td align="left"><code>text</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code>、<code>password</code></td> <td align="left"><code>value</code>的最小长度（字符数）</td> </tr> <tr> <td align="left"><code>multiple</code></td> <td align="left"><code>email</code>、<code>file</code></td> <td align="left">布尔值。是否允许多个值</td> </tr> <tr> <td align="left"><code>name</code></td> <td align="left">所有类型</td> <td align="left">表单的控件名称，作为键值对的一部分与表单一同提交</td> </tr> <tr> <td align="left"><code>pattern</code></td> <td align="left"><code>text</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code>、<code>password</code></td> <td align="left">为了使得<code>value</code>有效，必须符合的模式</td> </tr> <tr> <td align="left"><code>placeholder</code></td> <td align="left"><code>text</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code>、<code>password</code>、<code>number</code></td> <td align="left">当没有值设定时，出现在表单控件上的文字</td> </tr> <tr> <td align="left"><code>readonly</code></td> <td align="left">除了<code>hidden</code>、<code>range</code>、<code>color</code>、<code>checkbox</code>、<code>radio</code> 和按钮以外</td> <td align="left">布尔值。如果存在，其中的值将不可编辑。</td> </tr> <tr> <td align="left"><code>required</code></td> <td align="left">除了<code>hidden</code>、<code>range</code>、<code>color</code>和按钮以外</td> <td align="left">布尔值。如果存在，一个值是必需的，或者必须勾选该值才能提交表格。</td> </tr> <tr> <td align="left"><code>size</code></td> <td align="left"><code>text</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code>、<code>password</code></td> <td align="left">控件的尺寸</td> </tr> <tr> <td align="left"><code>src</code></td> <td align="left"><code>image</code></td> <td align="left">与<code><img></code>标签<code>src</code>属性含义相同，图片资源的地址</td> </tr> <tr> <td align="left"><code>step</code></td> <td align="left"><code>date</code>、<code>month</code>、<code>week</code>、<code>time</code>、<code>datetime-local</code>、<code>number</code>、<code>range</code></td> <td align="left">有效的增量值</td> </tr> <tr> <td align="left"><code>type</code></td> <td align="left">所有类型</td> <td align="left">表单控件的类型</td> </tr> <tr> <td align="left"><code>value</code></td> <td align="left">所有类型</td> <td align="left">表单控件的初始值</td> </tr> <tr> <td align="left"><code>width</code></td> <td align="left"><code>image</code></td> <td align="left">与<code><img></code>标签<code>width</code>属性含义相同</td> </tr> </tbody> </table> <h4>1.13.20 表单标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><input></code></td> <td>输入框</td> <td>用于输入文本、密码、电子邮件、电话号码、URL、日期等信息</td> </tr> <tr> <td><code><input type="text"></code></td> <td>文本输入框</td> <td>用于输入一行文本</td> </tr> <tr> <td><code><input type="password"></code></td> <td>密码输入框</td> <td>用于输入密码，输入的内容会被隐藏</td> </tr> <tr> <td><code><input type="email"></code></td> <td>电子邮件输入框</td> <td>用于输入电子邮件地址</td> </tr> <tr> <td><code><input type="tel"></code></td> <td>电话输入框</td> <td>用于输入电话号码</td> </tr> <tr> <td><code><input type="url"></code></td> <td>网址输入框</td> <td>用于输入网址</td> </tr> <tr> <td><code><input type="search"></code></td> <td>搜索输入框</td> <td>用于输入搜索关键词</td> </tr> <tr> <td><code><input type="datetime-local"></code></td> <td>日期时间输入框</td> <td>用于选择日期和时间</td> </tr> <tr> <td><code><input type="date"></code></td> <td>日期输入框</td> <td>用于选择日期</td> </tr> <tr> <td><code><input type="month"></code></td> <td>月份输入框</td> <td>用于选择月份</td> </tr> <tr> <td><code><input type="week"></code></td> <td>周输入框</td> <td>用于选择周</td> </tr> <tr> <td><code><input type="time"></code></td> <td>时间输入框</td> <td>用于选择时间</td> </tr> <tr> <td><code><input type="color"></code></td> <td>颜色选择框</td> <td>用于选择颜色</td> </tr> <tr> <td><code><input type="radio"></code></td> <td>单选框</td> <td>用于选择一个选项</td> </tr> <tr> <td><code><input type="checkbox"></code></td> <td>复选框</td> <td>用于选择多个选项</td> </tr> <tr> <td><code><input type="range"></code></td> <td>数字滑块框</td> <td>用于选择一个数值范围</td> </tr> <tr> <td><code><input type="number"></code></td> <td>数字选择框</td> <td>用于输入数字</td> </tr> <tr> <td><code><input type="button"></code></td> <td>普通按钮</td> <td>用于触发 JavaScript 函数</td> </tr> <tr> <td><code><input type="submit"></code></td> <td>提交按钮</td> <td>用于提交表单数据</td> </tr> <tr> <td><code><input type="reset"></code></td> <td>重置按钮</td> <td>用于重置表单数据为默认值</td> </tr> <tr> <td><code><input type="image"></code></td> <td>图像按钮</td> <td>用于提交表单，并显示一个图像作为按钮</td> </tr> <tr> <td><code><input type="file"></code></td> <td>文件上传</td> <td>用于上传文件</td> </tr> <tr> <td><code><input type="hidden"></code></td> <td>隐藏字段</td> <td>用于存储不可见的数据</td> </tr> <tr> <td><code><label></code></td> <td>表单标签</td> <td>为表单元素创建标签，增加表单元素的可用性和可访问性</td> </tr> <tr> <td><code><button></code></td> <td>按钮</td> <td>创建一个按钮，用于触发 JavaScript 函数或提交表单</td> </tr> <tr> <td><code><button type="button"></code></td> <td>普通按钮</td> <td>创建一个普通按钮，用于触发 JavaScript 函数</td> </tr> <tr> <td><code><button type="submit"></code></td> <td>提交按钮</td> <td>创建一个提交按钮，用于提交表单数据</td> </tr> <tr> <td><code><button type="reset"></code></td> <td>重置按钮</td> <td>创建一个重置按钮，用于将表单数据重置为默认值</td> </tr> <tr> <td><code><select></code></td> <td>下拉列表</td> <td>创建一个下拉选项列表，用户可以从中选择一个选项</td> </tr> <tr> <td><code><optgroup></code></td> <td>选项组</td> <td>创建一个选择列表中的选项组，通常包含一组相关的<code><option></code>元素。具有<code>label</code>属性，用于描述组的内容</td> </tr> <tr> <td><code><option></code></td> <td>选项</td> <td>用于在<code><select></code>元素中创建一个选项</td> </tr> <tr> <td><code><textarea></code></td> <td>文本域</td> <td>允许用户输入多行文本，通常用于留言、评论等多行文本输入</td> </tr> </tbody> </table> <hr> <h3>1.14 HTML 标签速览</h3> <p>HTML5 引入了一些新的语义化标签，这些标签更好地描述了网页的结构和内容，有助于提升页面的可读性、可访问性和搜索引擎优化。</p> <h4>1.14.1 结构标签</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><!DOCTYPE html></code></td> <td>文档类型声明</td> <td>告诉浏览器使用规范为<code>HTML</code></td> </tr> <tr> <td><code><html></code></td> <td>网页标签</td> <td>标签位于 HTML 文档的最前面，用于标识 HTML 文档的开始和结尾</td> </tr> <tr> <td><code><head></code></td> <td>头部标签</td> <td>用于定义 HTML 文档的头部，描述文档属性，包含一些辅助标签例如<code><title>、<link>、<script></code></td> </tr> <tr> <td><code><title></code></td> <td>网页标题</td> <td>用来定义网页的标题名称</td> </tr> <tr> <td><code><link></code></td> <td>外部资源链接</td> <td>引用外部样式表、图标等</td> </tr> <tr> <td><code><style></code></td> <td>内部样式表</td> <td>包含文档的内部样式规则</td> </tr> <tr> <td><code><script></code></td> <td>JavaScript脚本</td> <td>包含JavaScript代码</td> </tr> <tr> <td><code><meta></code></td> <td>描述性标签</td> <td>一般用来做 SEO</td> </tr> <tr> <td><code><body></code></td> <td>主体标题</td> <td>用于定义 HTML 文档的主体内容</td> </tr> <tr> <td><code><header></code></td> <td>头部</td> <td>定义文档或区段的页眉</td> </tr> <tr> <td><code><nav></code></td> <td>导航</td> <td>定义导航链接的部分</td> </tr> <tr> <td><code><main></code></td> <td>主要内容</td> <td>指定文档的主要内容区域</td> </tr> <tr> <td><code><article></code></td> <td>文章</td> <td>表示独立的文章或内容块</td> </tr> <tr> <td><code><section></code></td> <td>区段</td> <td>定义文档的一个区段或部分</td> </tr> <tr> <td><code><aside></code></td> <td>侧边栏</td> <td>表示与文档内容相关但可选的部分</td> </tr> <tr> <td><code><footer></code></td> <td>底部</td> <td>定义文档或区段的页脚</td> </tr> <tr> <td><code><div></code></td> <td>通用容器</td> <td>用于分组和样式化元素，没有特定语义</td> </tr> <tr> <td><code><span></code></td> <td>行内元素</td> <td>用于在文本内部添加行内样式和其他行内元素</td> </tr> <tr> <td><code><ul></code></td> <td>无序列表</td> <td>用于创建一个无序列表，其中每个列表项都由一个圆点符号标</td> </tr> <tr> <td><code><ol></code></td> <td>有序列表</td> <td>用于创建一个有序列表，其中每个列表项都由一个数字或字母标识</td> </tr> <tr> <td><code><li></code></td> <td>列表项</td> <td>用于定义列表中的一个列表项</td> </tr> <tr> <td><code><dl></code></td> <td>定义列表</td> <td>用于创建一个定义列表，其中每个列表项由一个术语和一个定义组成</td> </tr> <tr> <td><code><dt></code></td> <td>定义术语</td> <td>用于定义定义列表中的一个术语</td> </tr> <tr> <td><code><dd></code></td> <td>定义描述</td> <td>用于定义定义列表中术语的定义</td> </tr> <tr> <td><code><details></code></td> <td>可折叠内容</td> <td>用于创建一个可折叠的区域，其中包含详细信息</td> </tr> <tr> <td><code><summary></code></td> <td>折叠摘要</td> <td>用于定义<code><details></code>元素的摘要或标题</td> </tr> <tr> <td><code><table></code></td> <td>表格</td> <td>用于创建表格的容器</td> </tr> <tr> <td><code><caption></code></td> <td>表格标题</td> <td>用于为表格提供标题</td> </tr> <tr> <td><code><thead></code></td> <td>表格头</td> <td>用于组织表格中的表头行（包含表格的列标题）</td> </tr> <tr> <td><code><tbody></code></td> <td>表格体</td> <td>用于组织表格中的主体内容，通常包括多个数据行</td> </tr> <tr> <td><code><tfoot></code></td> <td>表格尾</td> <td>用于组织表格中的页脚内容，通常包括汇总行或其他与表格整体相关的信息</td> </tr> <tr> <td><code><tr></code></td> <td>表格行</td> <td>表示表格中的一行数据</td> </tr> <tr> <td><code><th></code></td> <td>表格头单元格</td> <td>表示表格中的表头单元格，通常包含列标题</td> </tr> <tr> <td><code><td></code></td> <td>表格数据单元格</td> <td>表示表格中的数据单元格，包含实际的数据内容</td> </tr> </tbody> </table> <h4>1.14.2 文本标签</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><h1></code>-<code><h6></code></td> <td>标题</td> <td>定义不同级别的标题，<code><h1></code>为最高级别，依次递减</td> </tr> <tr> <td><code><p></code></td> <td>段落</td> <td>定义一个段落</td> </tr> <tr> <td><code><br/></code></td> <td>换行符</td> <td>在文本中插入一个换行符</td> </tr> <tr> <td><code><hr/></code></td> <td>水平线</td> <td>在文档中插入一条水平分隔线</td> </tr> <tr> <td><code><em></code></td> <td>斜体</td> <td>表示文本的强调，通常以斜体显示</td> </tr> <tr> <td><code><i></code></td> <td>斜体</td> <td>表示文本的斜体样式</td> </tr> <tr> <td><code><strong></code></td> <td>粗体</td> <td>表示文本的强调，通常以粗体显示</td> </tr> <tr> <td><code><b></code></td> <td>粗体</td> <td>表示文本的粗体样式</td> </tr> <tr> <td><code><mark></code></td> <td>高亮</td> <td>表示文本的高亮显示</td> </tr> <tr> <td><code><u></code></td> <td>下划线</td> <td>给文本添加下划线（已被废弃，不推荐使用）</td> </tr> <tr> <td><code><s></code></td> <td>删除线</td> <td>表示删除的文本，通常以删除线显示（已被废弃，不推荐使用）</td> </tr> <tr> <td><code><strike></code></td> <td>删除线</td> <td>表示删除的文本，通常以删除线显示（已被废弃，不推荐使用）</td> </tr> <tr> <td><code><ins></code></td> <td>下划线</td> <td>表示插入的文本</td> </tr> <tr> <td><code><del></code></td> <td>删除线</td> <td>表示删除的文本</td> </tr> <tr> <td><code><code></code></td> <td>行内代码</td> <td>表示行内的计算机代码</td> </tr> <tr> <td><code><samp></code></td> <td>代码示例</td> <td>表示代码的示例</td> </tr> <tr> <td><code><small></code></td> <td>小号字体</td> <td>将文字显示为小号字体</td> </tr> <tr> <td><code><big></code></td> <td>大号字体</td> <td>将文字显示为大号字体</td> </tr> <tr> <td><code><cite></code></td> <td>引用标题</td> <td>表示引用或作品的标题</td> </tr> <tr> <td><code><q></code></td> <td>短引用</td> <td>表示短的引用</td> </tr> <tr> <td><code><ruby></code></td> <td>注音标注</td> <td>用于显示拼音或其他注音标记</td> </tr> <tr> <td><code><rt></code></td> <td>注音解释</td> <td>用于显示拼音或其他注音的解释</td> </tr> <tr> <td><code><abbr></code></td> <td>缩写</td> <td>表示缩写词或缩略词</td> </tr> <tr> <td><code><dfn></code></td> <td>定义</td> <td>表示一个术语或定义</td> </tr> <tr> <td><code><kbd></code></td> <td>键盘样式</td> <td>表示键盘输入</td> </tr> <tr> <td><code><var></code></td> <td>变量</td> <td>表示变量或占位符</td> </tr> <tr> <td><code><sup></code></td> <td>上标</td> <td>将文本显示为上标</td> </tr> <tr> <td><code><sub></code></td> <td>下标</td> <td>将文本显示为下标</td> </tr> <tr> <td><code><math></code></td> <td>数学公式</td> <td>用于显示数学公式</td> </tr> <tr> <td><code><!-- --></code></td> <td>注释</td> <td>在HTML中插入注释，不会在页面上显示</td> </tr> </tbody> </table> <h4>1.14.3 功能标签</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><img/></code></td> <td>图像标签</td> <td>定义一个图片，需要指定图片的 URL、大小、描述等信息</td> </tr> <tr> <td><code><picture></code></td> <td>图像资源</td> <td>为不同的显示/设备场景提供图像版本</td> </tr> <tr> <td><code><a></code></td> <td>锚点链接</td> <td>定义一个超链接，可以链接到其他网页、文件、位置等</td> </tr> <tr> <td><code><video></code></td> <td>视频</td> <td>定义一个视频，通常用于播放电影、短片等</td> </tr> <tr> <td><code><audio></code></td> <td>音频</td> <td>定义一个音频，通常用于播放音乐、声音等</td> </tr> <tr> <td><code><source></code></td> <td>媒体源</td> <td>定义媒体元素的一个或多个媒体资源，通常用于指定不同格式、不同分辨率的媒体文件</td> </tr> <tr> <td><code><object></code></td> <td>通用元素</td> <td>用于在HTML页面中嵌入各种外部资源</td> </tr> <tr> <td><code><meter></code></td> <td>测量</td> <td>表示某个度量值或指标的测量结果</td> </tr> <tr> <td><code><progress></code></td> <td>进度条</td> <td>表示任务或操作的完成进度</td> </tr> <tr> <td><code><iframe></code></td> <td>内嵌框架</td> <td><code><iframe></code>标签用于嵌入另一个 HTML 页面或外部网页，创建一个内联框架，允许在当前页面中显示其他内容</td> </tr> </tbody> </table> <h4>1.14.4 表单标签</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><input></code></td> <td>输入框</td> <td>用于输入文本、密码、电子邮件、电话号码、URL、日期等信息</td> </tr> <tr> <td><code><input type="text"></code></td> <td>文本输入框</td> <td>用于输入一行文本</td> </tr> <tr> <td><code><input type="password"></code></td> <td>密码输入框</td> <td>用于输入密码，输入的内容会被隐藏</td> </tr> <tr> <td><code><input type="email"></code></td> <td>电子邮件输入框</td> <td>用于输入电子邮件地址</td> </tr> <tr> <td><code><input type="tel"></code></td> <td>电话输入框</td> <td>用于输入电话号码</td> </tr> <tr> <td><code><input type="url"></code></td> <td>网址输入框</td> <td>用于输入网址</td> </tr> <tr> <td><code><input type="search"></code></td> <td>搜索输入框</td> <td>用于输入搜索关键词</td> </tr> <tr> <td><code><input type="datetime-local"></code></td> <td>日期时间输入框</td> <td>用于选择日期和时间</td> </tr> <tr> <td><code><input type="date"></code></td> <td>日期输入框</td> <td>用于选择日期</td> </tr> <tr> <td><code><input type="month"></code></td> <td>月份输入框</td> <td>用于选择月份</td> </tr> <tr> <td><code><input type="week"></code></td> <td>周输入框</td> <td>用于选择周</td> </tr> <tr> <td><code><input type="time"></code></td> <td>时间输入框</td> <td>用于选择时间</td> </tr> <tr> <td><code><input type="color"></code></td> <td>颜色选择框</td> <td>用于选择颜色</td> </tr> <tr> <td><code><input type="radio"></code></td> <td>单选框</td> <td>用于选择一个选项</td> </tr> <tr> <td><code><input type="checkbox"></code></td> <td>复选框</td> <td>用于选择多个选项</td> </tr> <tr> <td><code><input type="range"></code></td> <td>数字滑块框</td> <td>用于选择一个数值范围</td> </tr> <tr> <td><code><input type="number"></code></td> <td>数字选择框</td> <td>用于输入数字</td> </tr> <tr> <td><code><input type="button"></code></td> <td>普通按钮</td> <td>用于触发 JavaScript 函数</td> </tr> <tr> <td><code><input type="submit"></code></td> <td>提交按钮</td> <td>用于提交表单数据</td> </tr> <tr> <td><code><input type="reset"></code></td> <td>重置按钮</td> <td>用于重置表单数据为默认值</td> </tr> <tr> <td><code><input type="image"></code></td> <td>图像按钮</td> <td>用于提交表单，并显示一个图像作为按钮</td> </tr> <tr> <td><code><input type="file"></code></td> <td>文件上传</td> <td>用于上传文件</td> </tr> <tr> <td><code><input type="hidden"></code></td> <td>隐藏字段</td> <td>用于存储不可见的数据</td> </tr> <tr> <td><code><label></code></td> <td>表单标签</td> <td>为表单元素创建标签，增加表单元素的可用性和可访问性</td> </tr> <tr> <td><code><button></code></td> <td>按钮</td> <td>创建一个按钮，用于触发 JavaScript 函数或提交表单</td> </tr> <tr> <td><code><button type="button"></code></td> <td>普通按钮</td> <td>创建一个普通按钮，用于触发 JavaScript 函数</td> </tr> <tr> <td><code><button type="submit"></code></td> <td>提交按钮</td> <td>创建一个提交按钮，用于提交表单数据</td> </tr> <tr> <td><code><button type="reset"></code></td> <td>重置按钮</td> <td>创建一个重置按钮，用于将表单数据重置为默认值</td> </tr> <tr> <td><code><select></code></td> <td>下拉列表</td> <td>创建一个下拉选项列表，用户可以从中选择一个选项</td> </tr> <tr> <td><code><optgroup></code></td> <td>选项组</td> <td>创建一个选择列表中的选项组，通常包含一组相关的<code><option></code>元素。具有<code>label</code>属性，用于描述组的内容</td> </tr> <tr> <td><code><option></code></td> <td>选项</td> <td>用于在<code><select></code>元素中创建一个选项</td> </tr> <tr> <td><code><textarea></code></td> <td>文本域</td> <td>允许用户输入多行文本，通常用于留言、评论等多行文本输入</td> </tr> </tbody> </table> <h4>1.14.5 玄子Share</h4> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>HTML总结<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://blog.csdn.net/qq_62283694<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点击跳转CSDN博客<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>玄子Share-CSDN博客首页 https://blog.csdn.net/qq_62283694</p> </blockquote> <hr> <blockquote> <p>玄子Share-HTML5知识手册 2023-10-11</p> </blockquote> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1722833971001241600"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(一篇文章入门编程系列(后端,+,前端,+,数据库,+,框架),html5,前端,html)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1903805657425965056.htm" title="SpringAOP-基本概念-AOP入门程序-核心概念-通知类型-通知顺序-切入点表达式-连接点joinpoint-记录操作日志-获取当前登录员工" target="_blank">SpringAOP-基本概念-AOP入门程序-核心概念-通知类型-通知顺序-切入点表达式-连接点joinpoint-记录操作日志-获取当前登录员工</a> <span class="text-muted">汐栊</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>目录SpringAOP:AOP快速入门：AOP核心概念：AOP进阶：通知类型：注意事项：方法实现：@PointCutAOP通知顺序:执行顺序:不同切面类中,默认按照切面类的类名字母排序。用@Order(数字)加在切面类上来控制顺序AOP切入点表达式:切入点表达式-execution：切入点表达式-@annotation:可以使用通配符描述切入点:AOP连接点:AOP案例:将案例中增,删,改相关接口</div> </li> <li><a href="/article/1903804775091204096.htm" title="【网络安全 \| 漏洞挖掘】通过控制台调试实现登录" target="_blank">【网络安全 \| 漏洞挖掘】通过控制台调试实现登录</a> <span class="text-muted">秋说</span> <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E6%BC%8F%E6%B4%9E%E6%8C%96%E6%8E%98/1.htm">漏洞挖掘</a> <div>未经许可，不得转载。文章目录正文在安全测试过程中，我留意到一个特殊现象：当登录出现错误时，相关请求包并不经过BurpSuite。那么此时账号密码是储存在前端的，我通过调试即可实现登录管理员账户。正文由于系统设定，输入错误的账号和密码会弹出“账号密码错误”的提示。基于此，我在代码中“账号密码错误”提示的相关位置设置了断点，截图如下：随后，我刷新浏览器页面，输入错误的账号和密码，然后点击登录按钮，操作</div> </li> <li><a href="/article/1903804271321739264.htm" title="性能优化中如何“避免链接关键请求”" target="_blank">性能优化中如何“避免链接关键请求”</a> <span class="text-muted">混血哲谈</span> <a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>在性能优化中，“避免链接关键请求”是指通过优化资源加载顺序和依赖关系，减少关键渲染路径中的链式请求（CriticalRequestChains），从而加速页面加载。以下是具体策略及实施步骤：一、什么是“关键请求链”？定义：关键请求链是浏览器在渲染首屏内容时必须按顺序加载的资源序列。例如：HTMLCSSFont浏览器需先下载HTML，解析后请求CSS，CSS解析后发现需要字体文件，再请求字体。问题：</div> </li> <li><a href="/article/1903803637151363072.htm" title="2025年入职/转行网络安全，该如何规划？网络安全职业规划" target="_blank">2025年入职/转行网络安全，该如何规划？网络安全职业规划</a> <span class="text-muted">教网络安全的毛老师</span> <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/1.htm">渗透测试</a><a class="tag" taget="_blank" href="/search/%E6%BC%8F%E6%B4%9E%E6%8C%96%E6%8E%98/1.htm">漏洞挖掘</a> <div>网络安全是一个日益增长的行业，对于打算进入或转行进入该领域的人来说，制定一个清晰且系统的职业规划非常重要。2025年，网络安全领域将继续发展并面临新的挑战，包括不断变化的技术、法规要求以及日益复杂的威胁环境。以下是一个关于网络安全职业规划的详细指南，涵盖了从入门到高级岗位的成长路径、技能要求、资源获取等方面的内容。第一部分：网络安全行业概述1.1网络安全的现状与未来网络安全已经成为全球企业和政府的</div> </li> <li><a href="/article/1903800860819910656.htm" title="UV - Python 包管理" target="_blank">UV - Python 包管理</a> <span class="text-muted">丽英y</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/uv/1.htm">uv</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录创建uv项目已有项目已有uv项目创建uv项目#创建项目uvinitm3#创建环境cdm3uvvenv--python3.11#激活环境source.venv/bin/activate#添加库uvaddflask如果创建项目后，给库取别的名字，add的时候，会自动创建.venv文件夹>uvvenv--python3.12e312[0]UsingCPython3.12.8interpreter</div> </li> <li><a href="/article/1903797457255460864.htm" title="Python环境管理新利器：UV工具详解" target="_blank">Python环境管理新利器：UV工具详解</a> <span class="text-muted">云水木石</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/uv/1.htm">uv</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Python包和环境管理最好的工具无疑是Anaconda，但我在之前的一篇文章《注意，使用这款Python软件可能会带来麻烦》写过，个人使用完全没有问题。如果在公司内使用，就需要格外小心，可能会招来官司。在我们公司，Anaconda（包括Miniconda）就是禁止安装的软件之一。但是在工作中，确实又存在需要切换不同Python版本的需求，比如编译Chromium需要Python3.8以上的版本，</div> </li> <li><a href="/article/1903796197458505728.htm" title="Python新手入门 python流程控制基础1——条件语句if~~else；if~elif~else；" target="_blank">Python新手入门 python流程控制基础1——条件语句if~~else；if~elif~else；</a> <span class="text-muted">不爱纸片人</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、条件语句是什么？二、语句使用方法1.if.....2.if.......elif......3.if.......elif......else.......总结一、条件语句是什么？在Python中，条件语句用于根据不同的条件执行不同的代码块二、语句使用方法一共有三种if…if’…elif…if…elif…else…1.if</div> </li> <li><a href="/article/1903795819367165952.htm" title="Spring事务失效的常见场景" target="_blank">Spring事务失效的常见场景</a> <span class="text-muted">红云梦</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>1事务1.1数据库事务作为单个逻辑工作单元执行的一系列操作，要么完全执行，要么完全不执行1.2事务的四大特性（ACID）原子性(Atomicity)：要么成功，要么失败。一个事务内的所有SQL语句同步执行（依靠undo.log日志保证）一致性(Consistency)：事务前后总量不变，数据库完整性约束没有被破坏隔离性(Isolation)：一个事务执行不被其他事务干扰（锁+MVCC）持久性(Du</div> </li> <li><a href="/article/1903795441326157824.htm" title="机器学习：让计算机学会思考的艺术" target="_blank">机器学习：让计算机学会思考的艺术</a> <span class="text-muted">平凡而伟大.</span> <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>目录什么是机器学习？机器学习的基本步骤常见的机器学习算法机器学习的实际应用如何入门机器学习？结语在当今数字化时代，机器学习（MachineLearning,ML）已经成为一个炙手可热的话题。从推荐系统到自动驾驶汽车，再到语音助手，机器学习的应用无处不在。然而，对于许多人来说，机器学习仍然是一个神秘而复杂的领域。本文将用通俗易懂的语言，带你走进机器学习的世界，了解它的基本原理和应用。什么是机器学习？</div> </li> <li><a href="/article/1903794558131564544.htm" title="vant官网-vant ui 首页-移动端Vue组件库" target="_blank">vant官网-vant ui 首页-移动端Vue组件库</a> <span class="text-muted">embelfe_segge</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>Vant是有赞前端团队开源的移动端vue组件库，适用于手机端h5页面。鉴于百度搜索不到vant官方网址，分享一下vant组件库官网地址，方便新手使用vant官网地址https://vant-contrib.gitee.io/vant/#/zh-CN/通过npm安装在现有项目中使用Vant时，可以通过npm或yarn进行安装：#Vue2项目，安装Vant2：npmivant-S#Vue3项目，安装V</div> </li> <li><a href="/article/1903792542579748864.htm" title="HTML--表格" target="_blank">HTML--表格</a> <span class="text-muted">MK-mm</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML表格一，语法表格的标签为,行的标签为,表项的标签为，可以用表示列或行的第一个单元格。格式为：标题表头1表头2...表头n表头表项1......表项n-1...快捷键：table>tr个数>td个数二，属性补充：设置表格背景图像，可用bgcolor或background属性，在标签内设置。三，不规则表格使用colspan和rowspan属性建立-跨行：单元格垂直方向合并，语法为单元格内容</div> </li> <li><a href="/article/1903792416188592128.htm" title="OpenStack阶梯计价实战：Hashmap模块从入门到精准计费" target="_blank">OpenStack阶梯计价实战：Hashmap模块从入门到精准计费</a> <span class="text-muted">冯·诺依曼的</span> <a class="tag" taget="_blank" href="/search/openstack/1.htm">openstack</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>目录Hashmap模块概述核心概念解析配置步骤详解应用场景分析注意事项与扩展1.Hashmap模块概述OpenStack的Rating模块负责资源使用量的计费统计，而Hashmap是其核心组件，用于定义灵活的计价规则。通过Hashmap，管理员可以：根据资源类型（如CPU、存储、网络）设置差异化单价实现阶梯计价（如使用量超过阈值后单价打折）将资源与服务、服务组绑定，支持复杂计费策略2.核心概念解析</div> </li> <li><a href="/article/1903789390077947904.htm" title="Python 常用内建模块-HTMLParser" target="_blank">Python 常用内建模块-HTMLParser</a> <span class="text-muted">赔罪</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0/1.htm">系统学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录HTMLParser小结练习HTMLParser如果我们要编写一个搜索引擎，第一步是用爬虫把目标网站的页面抓下来，第二步就是解析该HTML页面，看看里面的内容到底是新闻、图片还是视频。假设第一步已经完成了，第二步应该如何解析HTML呢？HTML本质上是XML的子集，但是HTML的语法没有XML那么严格，所以不能用标准的DOM或SAX来解析HTML。好在Python提供了HTMLParser来非</div> </li> <li><a href="/article/1903788508699488256.htm" title="可视化埋点在React Native中的实践" target="_blank">可视化埋点在React Native中的实践</a> <span class="text-muted">Shopee技术团队</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>本文首发于微信公众号“Shopee技术团队”。1.背景笔者所在团队为Shopee的本地生活前端团队，用户可以在我们的平台购买优惠券，然后去线下门店使用。随着用户规模不断增加，研究用户行为数据可以更好地指导产品功能设计，提供更加优秀的用户体验。用户行为数据的研究首先涉及到如何采集，即我们常说的“埋点”。一直以来，我们项目中的埋点都采用代码埋点，每次新增埋点往往是一些重复性的工作，且需要重新发布代码才</div> </li> <li><a href="/article/1903788381238784000.htm" title="去哪儿网 ReactNative 跨小程序多端方案介绍" target="_blank">去哪儿网 ReactNative 跨小程序多端方案介绍</a> <span class="text-muted">去哪儿网技术沙龙</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%8D%E7%AB%AF/1.htm">大前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>1前言qrn-remax-unir是由去哪儿网前端技术团队实现的一套将RN适配到小程序端的跨端组件，通过该组件库可快速方便的将RN源代码直接运行到小程序端。方案参考了react-native-web的适配方案，使用remax框架来实现适配组件库并达到适配多小程序的目的。和react-native-web一样，它对RN源代码侵入度低，并且调试和替换组件相当方便。方案来自于社区，我们只是合理的应用用来</div> </li> <li><a href="/article/1903784978836156416.htm" title="Rust + 时序数据库 TDengine：打造高性能时序数据处理利器" target="_blank">Rust + 时序数据库 TDengine：打造高性能时序数据处理利器</a> <span class="text-muted">涛思数据（TDengine）</span> <a class="tag" taget="_blank" href="/search/%E6%97%B6%E5%BA%8F%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">时序数据库</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/tdengine/1.htm">tdengine</a> <div>引言：为什么选择TDengine与Rust？TDengine是一款专为物联网、车联网、工业互联网等时序数据场景优化设计的开源时序数据库，支持高并发写入、高效查询及流式计算，通过“一个数据采集点一张表”与“超级表”的概念显著提升性能。Rust作为一门系统级编程语言，近年来在数据库、嵌入式系统、分布式服务等领域迅速崛起，以其内存安全、高性能著称，与TDengine的高效特性天然契合，适合构建高可靠、高</div> </li> <li><a href="/article/1903783717093044224.htm" title="Android端ReactNative环境搭建——上" target="_blank">Android端ReactNative环境搭建——上</a> <span class="text-muted">hzulwy</span> <a class="tag" taget="_blank" href="/search/reactnative/1.htm">reactnative</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>前言最近一年，因为公司业务需要，部门引入了rn这门跨段技术来开发业务需求。从去年部门大佬调研rn这个框架到现在已有超过一年的时间了。而我从当时毕业不到1年的小白成长到现在负责维护项目的Android端代码的主力。同时，自己对rn相关的技术有了不少理解。因此，想要分享一些知识点，希望可以帮助到大家。我会以一个专栏的方式述说在这一年当中使用rn开发需求遇到的困难。大家可以借鉴参考下，共同进步！！！使用</div> </li> <li><a href="/article/1903782330296758272.htm" title="C语言指针入门(一)" target="_blank">C语言指针入门(一)</a> <span class="text-muted">悄悄敲敲敲</span> <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1.什么是指针？内存会划分为一个个内存单元（一个内存单元大小为1字节）每个内存单元都有一个编号即地址也被称为指针，我们可以理解为指针就是地址。通过指针可以找到其所指向的内存单元。就像我们第一次去一个朋友家时可以通过门牌号找到她的家一样，指针就是所存储数据的“门牌号”但不同的地方是在C语言中不同类型的数据在内存中所占用的字节数和存储方式是不一样的，所以我们在存取数据时不仅要知道位置信息还要知道该数据</div> </li> <li><a href="/article/1903782330770714624.htm" title="C语言指针入门(二)" target="_blank">C语言指针入门(二)</a> <span class="text-muted">悄悄敲敲敲</span> <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>1.二级指针二级指针就是指针的指针，即存放指针变量地址的一个变量。#includeintmain(){inta=10;intp=&a;intpp=&p;printf("%d\n",a);printf("%d\n",p);printf("%d\n",*pp);//打印结果全为10printf("%p\n",a);printf("%p\n",p);printf("%p\n",pp);/</div> </li> <li><a href="/article/1903778668358987776.htm" title="PyQt和PySide的区别和比较" target="_blank">PyQt和PySide的区别和比较</a> <span class="text-muted">PgosOcaml</span> <a class="tag" taget="_blank" href="/search/pyqt/1.htm">pyqt</a><a class="tag" taget="_blank" href="/search/mfc/1.htm">mfc</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>PyQt和PySide的区别和比较PyQt和PySide是两个用于创建图形用户界面(GUI)的Python库。它们都是基于Qt框架，Qt是一个跨平台的应用程序和UI开发框架。本文将介绍PyQt和PySide之间的区别和比较，并提供相应的源代码示例。开发者许可证：PyQt的开发者许可证是商业许可证，因此如果您想在商业项目中业项目中使用PyQt，您需要购买相应的许可证。而Py业项目中使用PyQt，您需</div> </li> <li><a href="/article/1903776777617076224.htm" title="计算机基础：编码01，无符号数编码" target="_blank">计算机基础：编码01，无符号数编码</a> <span class="text-muted">水饺编程</span> <a class="tag" taget="_blank" href="/search/MFC%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">MFC学习笔记</a><a class="tag" taget="_blank" href="/search/Win32%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">Win32学习笔记</a><a class="tag" taget="_blank" href="/search/mfc/1.htm">mfc</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>专栏导航本节文章分别属于《Win32学习笔记》和《MFC学习笔记》两个专栏，故划分为两个专栏导航。读者可以自行选择前往哪个专栏。（一）WIn32专栏导航上一篇：计算机基础：二进制基础13，十六进制与二进制的相互转换回到目录下一篇：计算机基础：编码02，有符号数编码，原码（二）MFC专栏导航上一篇：计算机基础：二进制基础13，十六进制与二进制的相互转换回到目录下一篇：计算机基础：编码02，有符号数编</div> </li> <li><a href="/article/1903776144612716544.htm" title="时序数据库QuestDB在Winform窗体应用" target="_blank">时序数据库QuestDB在Winform窗体应用</a> <span class="text-muted">ryan68888</span> <a class="tag" taget="_blank" href="/search/%E6%97%B6%E5%BA%8F%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">时序数据库</a> <div>以下是QuestDB在Winform使用的代码：//初始化privatevoidInit(){//创建数据库对象(用法和EFDappper一样通过new保证线程安全)SqlSugarClientDb=newSqlSugarClient(newConnectionConfig(){ConnectionString=“host=10.3.5.227;port=8812;username=admin;p</div> </li> <li><a href="/article/1903774881703587840.htm" title="《AI大模型趣味实战》第8集：多端适配个人新闻头条基于大模型和RSS聚合打造个人新闻电台(Flask WEB版) 2" target="_blank">《AI大模型趣味实战》第8集：多端适配个人新闻头条基于大模型和RSS聚合打造个人新闻电台(Flask WEB版) 2</a> <span class="text-muted">带娃的IT创业者</span> <a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B%E8%B6%A3%E5%91%B3%E5%AE%9E%E6%88%98/1.htm">AI大模型趣味实战</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>《AI大模型趣味实战》第8集：多端适配个人新闻头条基于大模型和RSS聚合打造个人新闻电台(FlaskWEB版)2摘要本文末尾介绍了如何实现新闻智能体的方法。在信息爆炸的时代，如何高效获取和筛选感兴趣的新闻内容成为一个现实问题。本文将带领读者通过Python和Flask框架，结合大模型的强大能力，构建一个个性化的新闻聚合平台，不仅能够自动收集整理各类RSS源的新闻，还能以语音播报的形式提供"新闻电台</div> </li> <li><a href="/article/1903769711456350208.htm" title=".net 4.0 webServices 的使用，从前端到后端，代码超全。" target="_blank">.net 4.0 webServices 的使用，从前端到后端，代码超全。</a> <span class="text-muted">静静香甜</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a> <div>1、创建webServices：创建之后会生成两个文件，分别是：SecurityWebService.asmx，SecurityWebService.asmx.csSecurityWebService.asmx代码：SecurityWebService.asmx.cs代码：usingNewtonsoft.Json;usingNewtonsoft.Json.Linq;usingSystem;usin</div> </li> <li><a href="/article/1903767820219510784.htm" title="[开题报告]Springboot高校图书管理系统设计与实现lq627计算机毕业设计" target="_blank">[开题报告]Springboot高校图书管理系统设计与实现lq627计算机毕业设计</a> <span class="text-muted">卓越计算机毕设</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a> <div>本项目包含程序+源码+数据库+LW+调试部署环境，文末可获取一份本项目的java源码和数据库参考。开题报告研究背景：随着高校图书馆的规模不断扩大和信息化程度的提高，传统的手工管理方式已经无法满足日益增长的图书馆资源管理需求。图书管理系统的设计与实现成为了解决这一问题的关键。通过引入计算机技术和信息管理系统，可以提高图书馆的管理效率和服务质量，为读者提供更便捷、高效的借阅体验。研究意义：图书管理系统</div> </li> <li><a href="/article/1903766682334195712.htm" title="【最低2万搞定！】10万双枪充电桩平台神级配置：服务器成本直降80%+日志/数据库存储全拆解！慧知开源充电桩平台！！！必看攻略" target="_blank">【最低2万搞定！】10万双枪充电桩平台神级配置：服务器成本直降80%+日志/数据库存储全拆解！慧知开源充电桩平台！！！必看攻略</a> <span class="text-muted">文慧的科技江湖</span> <a class="tag" taget="_blank" href="/search/%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97/1.htm">更新日志</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%28%E6%85%A7%E5%93%A5%29%E6%85%A7%E7%9F%A5%E5%85%85%E7%94%B5%E6%A1%A9%E5%B9%B3%E5%8F%B0/1.htm">(慧哥)慧知充电桩平台</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/%E7%9B%B4%E6%B5%81%E5%85%85%E7%94%B5%E6%A1%A9/1.htm">直流充电桩</a><a class="tag" taget="_blank" href="/search/%E5%85%85%E7%94%B5%E6%A1%A9/1.htm">充电桩</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cloud/1.htm">cloud</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>10万台充电桩设备双枪，需要最小的服务器配置？服务器费用控制2-3万，服务器日志产生多少g,数据库订单数据产生多少g!-慧知开源充电桩平台一、服务器配置方案及逻辑（阿里云）1.需求分析设备规模：10万台双枪充电桩，理论最大并发连接数为20万（每个枪独立通信）。请求类型：心跳包（高频）、充电启停、支付、状态上报等，假设平均每秒请求量约5,000QPS。费用目标：总成本控制在2-3万元/月（按包年包月</div> </li> <li><a href="/article/1903765800406282240.htm" title="如何设计一个 RPC 框架？需要考虑哪些点？" target="_blank">如何设计一个 RPC 框架？需要考虑哪些点？</a> <span class="text-muted">蒂法就是我</span> <a class="tag" taget="_blank" href="/search/rpc/1.htm">rpc</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>设计一个完整的RPC框架需要覆盖以下核心模块及关键技术点：一、核心架构模块模块功能与实现要点服务注册与发现使用Zookeeper/Nacos等实现服务地址动态注册与订阅，支持心跳检测和节点变更通知网络通信层基于Netty或gRPC的HTTP/2实现异步非阻塞传输，优化连接池复用与零拷贝技术序列化协议支持Protobuf（高性能）、JSON（可读性）、Hessian（跨语言）等，需平衡性能与扩展性动</div> </li> <li><a href="/article/1903764288569405440.htm" title="零基础入门机器学习：用Scikit-learn实现鸢尾花分类" target="_blank">零基础入门机器学习：用Scikit-learn实现鸢尾花分类</a> <span class="text-muted">藍海琴泉</span> <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/scikit-learn/1.htm">scikit-learn</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%B1%BB/1.htm">分类</a> <div>适合人群：机器学习新手\|数据分析爱好者\|需快速展示案例的学生一、引言：为什么要学这个案例？目的：明确机器学习解决什么问题，建立学习信心。机器学习定义：让计算机从数据中自动学习规律（如分类鸢尾花品种）。为什么选鸢尾花数据集：数据量小、特征明确，适合教学演示。Scikit-learn优势：提供现成算法和工具，无需从头写数学公式。二、环境准备：5分钟快速上手目的：搭建可运行的代码环境，避免卡在工具安装环</div> </li> <li><a href="/article/1903762775906250752.htm" title="通过SSH隧道与跳板机实现本地端口映射访问服务器文件" target="_blank">通过SSH隧道与跳板机实现本地端口映射访问服务器文件</a> <span class="text-muted">t.y.Tang</span> <a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>文章目录场景需求一、服务器端配置1.启动HTTP文件服务2.配置防火墙3.验证服务状态二、SSH隧道建立1.直接连接场景2.通过跳板机连接三、Windows端配置1.使用PowerShell建立隧道2.保持隧道稳定四、浏览器验证五、高阶配置建议1.生产环境增强2.SSH安全加固故障排查指南原理解析场景需求在Windows浏览器访问127.0.0.1:12138自动显示服务器指定路径下的文件列表通过</div> </li> <li><a href="/article/1903759875444371456.htm" title="软考中级软件设计师考点知识点笔记总结 day06" target="_blank">软考中级软件设计师考点知识点笔记总结 day06</a> <span class="text-muted">莫问alicia</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E8%80%83/1.htm">软考</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E7%BA%A7%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1%E5%B8%88/1.htm">中级软件设计师</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>文章目录6、树和二叉树6.1、树的基本概念6.2、二叉树的基本概念6.3、二叉树的遍历6.4、查找二叉树（二叉排序树）BST6.5、构造霍夫曼树+6.6、线索二叉树6.7、平衡二叉树7、图7.1、存储结构-邻接矩阵7.2、存储结构-邻接表7.3、图的遍历7.4、拓扑排序7.5、最小生成树普利姆算法7.6、克鲁斯卡尔算法6、树和二叉树6.1、树的基本概念结点的度：一个结点的度是指该结点拥有的子树数量</div> </li> <li><a href="/article/22.htm" title="redis学习笔记——不仅仅是存取数据" target="_blank">redis学习笔记——不仅仅是存取数据</a> <span class="text-muted">Everyday都不同</span> <a class="tag" taget="_blank" href="/search/returnSource/1.htm">returnSource</a><a class="tag" taget="_blank" href="/search/expire%2Fdel/1.htm">expire/del</a><a class="tag" taget="_blank" href="/search/incr%2Flpush/1.htm">incr/lpush</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E5%88%86%E5%8C%BA/1.htm">数据库分区</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷） 1、关于JedisPool.returnSource(Jedis jeids) 这个方法是从red</div> </li> <li><a href="/article/149.htm" title="SQL性能优化-持续更新中。。。。。。" target="_blank">SQL性能优化-持续更新中。。。。。。</a> <span class="text-muted">atongyeye</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>1 通过ROWID访问表--索引你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 2 共享SQL语句--相同的sql放入缓存 3 选择最有效率的表</div> </li> <li><a href="/article/276.htm" title="[JAVA语言]JAVA虚拟机对底层硬件的操控还不完善" target="_blank">[JAVA语言]JAVA虚拟机对底层硬件的操控还不完善</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/JAVA%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">JAVA虚拟机</a> <div> 如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ &n</div> </li> <li><a href="/article/403.htm" title="lvs- real" target="_blank">lvs- real</a> <span class="text-muted">男人50</span> <a class="tag" taget="_blank" href="/search/LVS/1.htm">LVS</a> <div>#!/bin/bash # # Script to start LVS DR real server. # description: LVS DR real server # #. /etc/rc.d/init.d/functions VIP=10.10.6.252 host='/bin/hostname' case "$1" in sta</div> </li> <li><a href="/article/530.htm" title="生成公钥和私钥" target="_blank">生成公钥和私钥</a> <span class="text-muted">oloz</span> <a class="tag" taget="_blank" href="/search/DSA/1.htm">DSA</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E5%8A%A0%E5%AF%86/1.htm">安全加密</a> <div>package com.msserver.core.util; import java.security.KeyPair; import java.security.PrivateKey; import java.security.PublicKey; import java.security.SecureRandom; public class SecurityUtil { </div> </li> <li><a href="/article/657.htm" title="UIView 中加入的cocos2d，背景透明" target="_blank">UIView 中加入的cocos2d，背景透明</a> <span class="text-muted">374016526</span> <a class="tag" taget="_blank" href="/search/cocos2d/1.htm">cocos2d</a><a class="tag" taget="_blank" href="/search/glClearColor/1.htm">glClearColor</a> <div>要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll</div> </li> <li><a href="/article/784.htm" title="mysql常用命令" target="_blank">mysql常用命令</a> <span class="text-muted">香水浓</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>连接数据库 mysql -u troy -ptroy 备份表 mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 恢复表（与恢复数据库命令相同） mysql -u troy -ptroy mm_database < user.sql 备份数据库 mysqldump -u troy -ptroy</div> </li> <li><a href="/article/911.htm" title="我的架构经验系列文章 - 后端架构 - 系统层面" target="_blank">我的架构经验系列文章 - 后端架构 - 系统层面</a> <span class="text-muted">agevs</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>系统层面：高可用性所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速</div> </li> <li><a href="/article/1038.htm" title="利用ant进行远程tomcat部署" target="_blank">利用ant进行远程tomcat部署</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 1.配置tomcat的用户角色</div> </li> <li><a href="/article/1165.htm" title="获取复利总收入" target="_blank">获取复利总收入</a> <span class="text-muted">baalwolf</span> <a class="tag" taget="_blank" href="/search/%E8%8E%B7%E5%8F%96/1.htm">获取</a> <div> public static void main(String args[]){ int money=200; int year=1; double rate=0.1; &</div> </li> <li><a href="/article/1292.htm" title="eclipse.ini解释" target="_blank">eclipse.ini解释</a> <span class="text-muted">BigBird2012</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 Overview 1、Eclipse.ini的作用 Eclipse startup is controlled by th</div> </li> <li><a href="/article/1419.htm" title="AngularJS实现分页功能" target="_blank">AngularJS实现分页功能</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5/1.htm">分页</a> <div> 对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。 &nbs</div> </li> <li><a href="/article/1546.htm" title="[Maven学习笔记三]Maven archetype" target="_blank">[Maven学习笔记三]Maven archetype</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/ArcheType/1.htm">ArcheType</a> <div>archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等. mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式， mvn archetype 1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener</div> </li> <li><a href="/article/1673.htm" title="【Java命令三】jps" target="_blank">【Java命令三】jps</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Java%E5%91%BD%E4%BB%A4/1.htm">Java命令</a> <div>jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看 [hadoop@hadoop bin]$ jps -help usage: jps [-help] jps [-q] [-mlvV] [<hostid>] Definitions: <hostid>: <hostname>[:</div> </li> <li><a href="/article/1800.htm" title="ZABBIX2.2 2.4 等各版本之间的兼容性" target="_blank">ZABBIX2.2 2.4 等各版本之间的兼容性</a> <span class="text-muted">ronin47</span> <div>zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点客户端AGENT兼容 zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p</div> </li> <li><a href="/article/1927.htm" title="unity 3d还是cocos2dx哪个适合游戏？" target="_blank">unity 3d还是cocos2dx哪个适合游戏？</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a><a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a><a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a> <div>unity 3d还是cocos2dx哪个适合游戏？问：unity 3d还是cocos2dx哪个适合游戏？答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2， </div> </li> <li><a href="/article/2054.htm" title="百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序" target="_blank">百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E7%99%BE%E5%BA%A6/1.htm">百度</a><a class="tag" taget="_blank" href="/search/%E6%8B%9B%E8%81%98/1.htm">招聘</a> <div> import java.util.Arrays; / * 最早是在陈利人老师的微博看到这道题： * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K * 设计一个排序算法。It should be faster than O(nlgn)。</div> </li> <li><a href="/article/2181.htm" title="获取checkbox复选框的值" target="_blank">获取checkbox复选框的值</a> <span class="text-muted">chiangfai</span> <a class="tag" taget="_blank" href="/search/checkbox/1.htm">checkbox</a> <div><title>CheckBox</title> <script type = "text/javascript"> doGetVal: function doGetVal() { //var fruitName = document.getElementById("apple").value;//根据</div> </li> <li><a href="/article/2308.htm" title="MySQLdb用户指南" target="_blank">MySQLdb用户指南</a> <span class="text-muted">chenchao051</span> <a class="tag" taget="_blank" href="/search/mysqldb/1.htm">mysqldb</a> <div>原网页被墙，放这里备用。 MySQLdb User's Guide Contents Introduction Installation _mysql MySQL C API translation MySQL C API function mapping Some _mysql examples MySQLdb </div> </li> <li><a href="/article/2435.htm" title="HIVE 窗口及分析函数" target="_blank">HIVE 窗口及分析函数</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/%E7%AA%97%E5%8F%A3%E5%87%BD%E6%95%B0/1.htm">窗口函数</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E6%9E%90%E5%87%BD%E6%95%B0/1.htm">分析函数</a> <div>窗口函数应用场景：（1）用于分区排序（2）动态Group By （3）Top N （4）累计计算（5）层次查询一、分析函数用于等级、百分点、n分片等。函数说明 RANK() &nbs</div> </li> <li><a href="/article/2562.htm" title="PHP ZipArchive 实现压缩解压Zip文件" target="_blank">PHP ZipArchive 实现压缩解压Zip文件</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/zip/1.htm">zip</a> <div> PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。一、解压缩zip文件 01 02 03 04 05 06 07 08 09 10 11 </div> </li> <li><a href="/article/2689.htm" title="精彩英语贺词" target="_blank">精彩英语贺词</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%8B%B1%E8%AF%AD/1.htm">英语</a> <div>I'm always here 我会一直在这里支持你 &nb</div> </li> <li><a href="/article/2816.htm" title="基于Java注解的Spring的IoC功能" target="_blank">基于Java注解的Spring的IoC功能</a> <span class="text-muted">e200702084</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/IOC/1.htm">IOC</a><a class="tag" taget="_blank" href="/search/Office/1.htm">Office</a> <div> </div> </li> <li><a href="/article/2943.htm" title="java模拟post请求" target="_blank">java模拟post请求</a> <span class="text-muted">geeksun</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。此处用HttpComponents的httpclient来完成使命。 import org.apache.http.HttpEntity ; import org.apache.http.HttpRespon</div> </li> <li><a href="/article/3070.htm" title="Swift语法之 ---- ?和!区别" target="_blank">Swift语法之 ---- ?和!区别</a> <span class="text-muted">hongtoushizi</span> <a class="tag" taget="_blank" href="/search/%3F/1.htm">?</a><a class="tag" taget="_blank" href="/search/swift/1.htm">swift</a><a class="tag" taget="_blank" href="/search/%21/1.htm">!</a> <div>转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错： var stringValue : String //</div> </li> <li><a href="/article/3197.htm" title="centos7安装jdk1.7" target="_blank">centos7安装jdk1.7</a> <span class="text-muted">jisonami</span> <a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>安装JDK1.7 步骤1、解压tar包在当前目录 [root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 步骤2：配置环境变量在etc/profile文件下添加 export JAVA_HOME=/usr/java/jdk1.7.0_75 export CLASSPATH=/usr/java/jdk1.7.0_75/lib </div> </li> <li><a href="/article/3324.htm" title="数据源架构模式之数据映射器" target="_blank">数据源架构模式之数据映射器</a> <span class="text-muted">home198979</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%98%A0%E5%B0%84%E5%99%A8/1.htm">数据映射器</a><a class="tag" taget="_blank" href="/search/datamapper/1.htm">datamapper</a> <div>前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。一、概念数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 &nb</div> </li> <li><a href="/article/3451.htm" title="在Python中使用MYSQL" target="_blank">在Python中使用MYSQL</a> <span class="text-muted">pda158</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>缘由　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到数据库中。　　了解到 Python在这方面有优势，便选用之。　　由于我有台 server上面安装有 mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里记录一下，大家共勉。　　 python中mysql的调用　　百度之后能够通过MySQLdb进行数据库操作。</div> </li> <li><a href="/article/3578.htm" title="单例模式" target="_blank">单例模式</a> <span class="text-muted">hxl1988_0311</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BB%B6/1.htm">单件</a> <div>package com.sosop.designpattern.singleton; / * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点 * * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件 * * 必须考虑到并发情况下创建了多个实例对象 * / /* * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率</div> </li> <li><a href="/article/3705.htm" title="27种迹象显示你应该辞掉程序员的工作" target="_blank">27种迹象显示你应该辞掉程序员的工作</a> <span class="text-muted">vipshichg</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>