玄子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/1835259338910953472.htm" title="【Python】已解决：TypeError: unsupported operand" target="_blank">【Python】已解决：TypeError: unsupported operand</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/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>文章目录一、分析问题背景出现问题的场景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项已解决：TypeError:unsupportedoperand一、分析问题背景TypeError:unsupportedoperand是Python中常见的一类错误，通常在尝试对不兼容的数据类型进行操作时发生。比如，当你尝试对字符串和整数进行加法操作时，Python会抛出这一错误。这样的错误通常发</div> </li> <li><a href="/article/1835258583235784704.htm" title="HTML中"bgcolor"与"background-color"的区别" target="_blank">HTML中"bgcolor"与"background-color"的区别</a> <span class="text-muted">Sardar_</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou</div> </li> <li><a href="/article/1835257575277424640.htm" title="【Python爬虫】百度百科词条内容" target="_blank">【Python爬虫】百度百科词条内容</a> <span class="text-muted">PokiFighting</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86/1.htm">数据处理</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>词条内容我这里随便选取了一个链接，用的是FBI的词条importurllib.requestimporturllib.parsefromlxmlimportetreedefquery(url):headers={'user-agent':'Mozilla/5.0(WindowsNT6.1;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/80.</div> </li> <li><a href="/article/1835253081579810816.htm" title="三大财报之间的关系" target="_blank">三大财报之间的关系</a> <span class="text-muted">木子读吧</span> <div>「今天是木子读吧陪你的第958天」三大财务报表之间是紧密联系的，就像之前的这篇文章【用相亲的眼光看透三大财务报表】，它们之间就好像骨骼、肌肉和血液的关系。每张表中任意科目的数字变动，都会引起三张表中与之相关科目的变动。资产负债表中有个恒等式：资产（左边）=负债+所有者权益（右边）。也就是说，一项资产的增加，来源于一项负债的增加或所有者权益的增加。你可以把整个利润表当作是所有者权益科目，因为利润表科</div> </li> <li><a href="/article/1835252321269936128.htm" title="go语言安装快速入门" target="_blank">go语言安装快速入门</a> <span class="text-muted">吉祥鸟hu</span> <div>[TOC]go语言是什么Go是一个开源的编程语言，它能让构造简单、可靠且高效的软件变得容易。Go是从2007年末由RobertGriesemer,RobPike,KenThompson主持开发，后来还加入了IanLanceTaylor,RussCox等人，并最终于2009年11月开源，在2012年早些时候发布了Go1稳定版本。现在Go的开发已经是完全开放的，并且拥有一个活跃的社区如何安装环境笔者这</div> </li> <li><a href="/article/1835250143566327808.htm" title="Java集合类框架源码分析之 RoleList源码解析【6】" target="_blank">Java集合类框架源码分析之 RoleList源码解析【6】</a> <span class="text-muted">yunzhonghefei</span> <a class="tag" taget="_blank" href="/search/Java%E9%9B%86%E5%90%88%E7%B1%BB%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/1.htm">Java集合类源码分析</a><a class="tag" taget="_blank" href="/search/RoleList%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/1.htm">RoleList源码解析</a> <div>该类继承于ArrayList，针对Role进行了一些扩展。其他方法和ArrayList中基本相同，源码不做针对性分析：看一下类简介：/**代表了一个roles的列表，作为方法setRoles()的参数，去创建一个关联关系，并且尝试在同一个关系中设置多个角色。ARoleListrepresentsalistofroles(Roleobjects).Itisusedasparameterwhen</div> </li> <li><a href="/article/1835249513875468288.htm" title="说说在 Vue.js 中如何实现组件间通信" target="_blank">说说在 Vue.js 中如何实现组件间通信</a> <span class="text-muted">deniro</span> <div>1用法假设父组件的模板包含子组件，我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组，也可以是对象。html：js：Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果：＂嫦娥四号＂成功</div> </li> <li><a href="/article/1835249258316525568.htm" title="“马云转移1200亿元”？阿里巴巴回复：“谣言”！" target="_blank">“马云转移1200亿元”？阿里巴巴回复：“谣言”！</a> <span class="text-muted">得意安然</span> <div>近日有多家媒体爆料：“阿里巴巴董事局主席马云通过向新加坡建立基金的模式向境外转移了大概1200亿元人民币”。阿里巴巴集团迅速回应：“此为谣言”！按照上述文章的说法，马云2016年将自己持有的阿里巴巴公司3500万股股票，价值169亿美元约1200亿人民币，全部捐给自己在新加坡建立的基金。用马云自己的话来说，这个行为是非常慷慨的捐赠，因为他这笔钱将用于慈善</div> </li> <li><a href="/article/1835249126091091968.htm" title="如何避免学习linux必然会遇到的几个问题" target="_blank">如何避免学习linux必然会遇到的几个问题</a> <span class="text-muted">twintwin</span> <div>相信在看这篇文章的都是对linux系统所迷的志同道合的人，不管你是刚开始学，还是已经接触过一些linux的知识，下面的问题是你在学习linux所必须遇到的，若是没有的话那我只能说大神我服你了。下面我就作为一个过来人分享下我学习后的经验。一、无法摆脱Windows的思维方式相信大家接触电脑的时候都是从windows开始，windows的思维方式已经根深蒂固。不过现在你已经打算开始学习linux了，就</div> </li> <li><a href="/article/1835247726095331328.htm" title="宋真宗御笔书名的“岳麓书院”，历经千年魅力永续" target="_blank">宋真宗御笔书名的“岳麓书院”，历经千年魅力永续</a> <span class="text-muted">博物馆学文化</span> <div>中国古代书院，兴起于唐，清代诗人袁枚在《随园随笔》中记载：“书院之名起唐玄宗时，丽正书院、集贤书院皆建于朝省，为修书之地，非士子肄业之所也。”在《新唐书·百官志》中记载：“唐开元六年，将乾元院改为丽正修书院，十三年又改丽正修书院为集贤殿书院。”这是史料中有关书院最早的记载。是唐代为了搜集图书、校刊经籍，撰写文章的场所，而非教育机构，也非朝廷的正式办事机构。最早具有教育功能的书院是白鹿洞书院，与它一</div> </li> <li><a href="/article/1835247370955223040.htm" title="php状态监控源码,PHP服务器状态监控实现程序" target="_blank">php状态监控源码,PHP服务器状态监控实现程序</a> <span class="text-muted">江子星</span> <a class="tag" taget="_blank" href="/search/php%E7%8A%B6%E6%80%81%E7%9B%91%E6%8E%A7%E6%BA%90%E7%A0%81/1.htm">php状态监控源码</a> <div>/header('Content-type:text/html;charset=utf-8');include'./smtp/class.smtp.php';include'./smtp/class.phpmailer.php';functionsendmail($subject='',$body=''){date_default_timezone_set('Asia/Shanghai');//</div> </li> <li><a href="/article/1835247344719851520.htm" title="2019-05-29 vue-router的两种模式的区别" target="_blank">2019-05-29 vue-router的两种模式的区别</a> <span class="text-muted">Kason晨</span> <div>1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash</div> </li> <li><a href="/article/1835245732337119232.htm" title="如何在Flask中处理表单数据" target="_blank">如何在Flask中处理表单数据</a> <span class="text-muted">ac-er8888</span> <a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>在Flask中处理表单数据是一个常见的任务，它涉及从客户端接收数据并在服务器端进行解析和处理。Flask本身不直接提供表单验证的功能，但它可以与WTForms等库结合使用来简化表单处理过程。不过，即使没有WTForms，你仍然可以直接通过Flask的request对象来处理表单数据。以下是在Flask中处理表单数据的基本步骤：1.创建HTML表单首先，你需要在HTML中创建一个表单，并将其meth</div> </li> <li><a href="/article/1835244971544899584.htm" title="Jooq 框架介绍及其核心要点" target="_blank">Jooq 框架介绍及其核心要点</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/java/1.htm">java</a> <div>一、引言Jooq（JavaPersistenceforRelationalDatabases）是一个强大的类型安全的SQL查询构建器和ORM（Object-RelationalMapping）框架，专为Java和Kotlin设计。它为开发者提供了一种优雅的方式来编写SQL代码，同时还能享受到静态类型检查带来的好处。本文将详细介绍Jooq的核心功能，并通过一系列的代码示例来展示如何使用Jooq。二、</div> </li> <li><a href="/article/1835244539846160384.htm" title="一串奇特的代码" target="_blank">一串奇特的代码</a> <span class="text-muted">hi武林高手</span> <div>一个空的div元素，所有浏览器的渲染结果都不一样。body{display:table-cell;vertical-align:middle;//垂直居中}div{margin:atuo;height:100px;width:100px;outline:inset100pxgreen;//设置4个边框的样式outline-offset:-125px;//对轮廓进行偏移}html{display：t</div> </li> <li><a href="/article/1835243206963458048.htm" title="系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机" target="_blank">系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机</a> <span class="text-muted">rabbit_it</span> <a class="tag" taget="_blank" href="/search/qiankun%E5%AD%A6%E4%B9%A0/1.htm">qiankun学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/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/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a> <div>一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性</div> </li> <li><a href="/article/1835241317211402240.htm" title="华为OD机试 - 完美走位（Java & JS & Python & C & C++）" target="_blank">华为OD机试 - 完美走位（Java & JS & Python & C & C++）</a> <span class="text-muted">「已注销」</span> <a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>文章目录题目描述输入描述输出描述解析题目描述在第一人称射击游戏中，玩家通过键盘的A、S、D、W四个按键控制游戏人物分别向左、向后、向右、向前进行移动，从而完成走位。假设玩家每按动一次键盘，游戏任务会向某个方向移动一步，如果玩家在操作一定次数的键盘并且各个方向的步数相同时，此时游戏任务必定会回到原点，则称此次走位为完美走位。现给定玩家的走位（例如：ASDA），请通过更换其中一段连续走位的方式使得原走</div> </li> <li><a href="/article/1835239573093969920.htm" title="数据库连接池" target="_blank">数据库连接池</a> <span class="text-muted">幻影翔</span> <div>连接池的意义作用：连接池是将已经创建好的连接保存在池中，当有请求来时，直接使用已经创建好的连接对数据库进行访问。这样省略了创建连接和销毁连接的过程。这样性能上得到了提高。连接池放了N个Connection对象，本质上放在内存当中，在内存中划出一块缓存对象，应用程序每次从池里获得Connection对象，而不是直接从数据里获得，这样不占用服务器的内存资源。两种优秀的连接池技术都要实现接口DataSo</div> </li> <li><a href="/article/1835239047803531264.htm" title="ODOO不同版本与平台选择" target="_blank">ODOO不同版本与平台选择</a> <span class="text-muted">chouchengyin2080</span> <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架</div> </li> <li><a href="/article/1835236903717269504.htm" title="【鸿蒙OH-v5.0源码分析之 Linux Kernel 部分】004 - Kernel 启动引导代码head.S 源码逐行分析" target="_blank">【鸿蒙OH-v5.0源码分析之 Linux Kernel 部分】004 - Kernel 启动引导代码head.S 源码逐行分析</a> <span class="text-muted">"小夜猫&小懒虫&小财迷"的男人</span> <a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99OH-v5.0%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90%E4%B9%8B/1.htm">鸿蒙OH-v5.0源码分析之</a><a class="tag" taget="_blank" href="/search/Uboot%2BKernel/1.htm">Uboot+Kernel</a><a class="tag" taget="_blank" href="/search/%E9%83%A8%E5%88%86/1.htm">部分</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a> <div>【鸿蒙OH-v5.0源码分析之LinuxKernel部分】004-Kernel启动引导代码head.S源码逐行分析系列文章汇总：《鸿蒙OH-v5.0源码分析之Uboot+Kernel部分】000-文章链接汇总》本文链接：《【鸿蒙OH-v5.0源码分析之LinuxKernel部分】004-Kernel启动引导代码head.S源码逐行分析》head.S主要工作如下：保存内核启动参数,无效化处理器缓存(</div> </li> <li><a href="/article/1835236525449768960.htm" title="2024年Presto【基础 01】简介+架构+数据源+数据模型(2)，2024年最新一线互联网公司面经总结" target="_blank">2024年Presto【基础 01】简介+架构+数据源+数据模型(2)，2024年最新一线互联网公司面经总结</a> <span class="text-muted">2401_84264536</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>学习路线：这个方向初期比较容易入门一些，掌握一些基本技术，拿起各种现成的工具就可以开黑了。不过，要想从脚本小子变成黑客大神，这个方向越往后，需要学习和掌握的东西就会越来越多以下是网络渗透需要学习的内容：网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化资料的朋友，可以点击这里获取一个人可以走的很快，但一群人才能走的更远！不</div> </li> <li><a href="/article/1835234231316475904.htm" title="重看《天道》，芸芸众生分为4个层次，看看你属于哪一层?" target="_blank">重看《天道》，芸芸众生分为4个层次，看看你属于哪一层?</a> <span class="text-muted">拂尘记</span> <div>听说纯原创的公众号不超过7%，这是拂尘记的第701篇原创文章，字数1676，阅读大概需要3分钟最近用3天时间，重刷一遍《天道》，经典就是经典，每次看都能有不同的收获与感悟。这次最大的感悟是，纵观全剧，有以下4类人：1、俗人：为了名利面子，贪嗔痴，不停地追求索取。比如刘冰，退了股还想呆在格律诗，就为了那辆宝马以及北京的繁华，然而看着肖亚文忙里忙外，开始心态失衡：我们打下的江山，凭什么给你？殊不知，是</div> </li> <li><a href="/article/1835234007260950528.htm" title="Dubbo架构概览：服务注册与发现、远程调用、监控与管理" target="_blank">Dubbo架构概览：服务注册与发现、远程调用、监控与管理</a> <span class="text-muted">木南曌</span> <a class="tag" taget="_blank" href="/search/dubbo/1.htm">dubbo</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Dubbo是一个成熟的、高性能的、基于Java的微服务开发框架，它主要用于解决分布式系统中的服务治理问题，包括服务的注册与发现、远程过程调用（RPC）、服务监控与管理等多个关键环节。以下是Dubbo架构概览的详细介绍：服务注册与发现Dubbo的服务注册与发现机制是其核心功能之一，它依赖于注册中心来管理服务的生命周期和定位服务提供者。1.服务提供者（Provider）服务提供者是实际提供服务的节点，</div> </li> <li><a href="/article/1835233629056364544.htm" title="java 技术架构相关文档" target="_blank">java 技术架构相关文档</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/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在Java中，有许多不同的技术和架构，这里我将列举一些常见的Java技术和架构，并提供一些相关的文档资源。SpringFrameworkSpring是一个开源的Java/JavaEE全功能框架，以Apache许可证形式发布，提供了一种实现企业级应用的方法。官方文档：SpringFrameworkSpringBootSpringBoot是Spring的一个子项目，旨在简化创建生产级的Spring应用</div> </li> <li><a href="/article/1835231942983905280.htm" title="那些口口声声说自己没要求的大龄女性，才是真正“要求高”的人!" target="_blank">那些口口声声说自己没要求的大龄女性，才是真正“要求高”的人!</a> <span class="text-muted">早安收信人</span> <div>本文由【早安收信人】原创点击右上角加“关注”，每天都能收到文章推送！还记得《亲爱的，热爱的》热播时，很多女生被李现饰演的韩商言圈粉，除了他英俊多金的身份外，他对佟年的一往情深和专一，尤其在他说：“我的小孩，我担待时”，那种肯定跟宠溺，会让每个情窦初开的女生沦陷。电视剧中有很多细节，代表了韩商言对佟年的爱，这个不太会表达甚至表面冷冰冰的男人用他自己的方式，守护他喜欢的女孩。韩商言之所以被“追捧”，就</div> </li> <li><a href="/article/1835231866412691456.htm" title="数据库常见笔试面试题及其解析" target="_blank">数据库常见笔试面试题及其解析</a> <span class="text-muted">yxsr_zxx</span> <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/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/SqlServer/1.htm">SqlServer</a><a class="tag" taget="_blank" href="/search/Oracle/1.htm">Oracle</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AF%95/1.htm">笔试</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>数据库基础(面试常见题)一、数据库基础1.数据抽象：物理抽象、概念抽象、视图级抽象,内模式、模式、外模式2.SQL语言包括数据定义、数据操纵(DataManipulation),数据控制(DataControl)数据定义：CreateTable,AlterTable,DropTable,Craete/DropIndex等数据操纵：Select,insert,update,delete,数据控制：g</div> </li> <li><a href="/article/1835231486664601600.htm" title="文本编辑器markdown语法" target="_blank">文本编辑器markdown语法</a> <span class="text-muted">花北城</span> <a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80%E9%9A%8F%E7%AC%94/1.htm">科技随笔</a><a class="tag" taget="_blank" href="/search/Markdown/1.htm">Markdown</a> <div>markdown语法1.介绍Markdown是一种使用一定的语法将普通的文本转换成HTML标签文本的编辑语言，它的特点是可以使用普通的文本编辑器来编写，只需要按照特定的语法标记就可以得到丰富多样的HTML格式的文本。2.标题分级"#"->一级标题"##"->二级标题"###"->三级标题3.分割线使用三个或以上的“-”或者“”表示(混合的不行)4.斜体和粗体使用(或者_)和(或者__)分别</div> </li> <li><a href="/article/1835230981901086720.htm" title="SQLite的入门级项目学习记录（二）" target="_blank">SQLite的入门级项目学习记录（二）</a> <span class="text-muted">深蓝海拓</span> <a class="tag" taget="_blank" href="/search/SQLite%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">SQLite学习笔记</a><a class="tag" taget="_blank" href="/search/sqlite/1.htm">sqlite</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>再补充一些基础知识：并行操作的问题1、可以多游标同时运行SQLite，对于同一个连接sqlite3.connect(db_file)，可以同时创建多个游标，每个游标都是独立的，可以执行各自的SQL命令序列。importsqlite3#创建数据库连接conn=sqlite3.connect('example.db')#创建第一个游标cursor1=conn.cursor()cursor1.execu</div> </li> <li><a href="/article/1835230854553628672.htm" title="使用STM32实现简单的智能温控系统" target="_blank">使用STM32实现简单的智能温控系统</a> <span class="text-muted">棂梓知识</span> <a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a> <div>智能温控系统是一种能够根据环境温度实时调整设备的工作状态的系统。在本篇文章中，我们将使用STM32微控制器来实现一个简单的智能温控系统。该系统将会有以下功能：实时监测环境温度，并显示在LCD屏幕上。当环境温度超过设定的阈值时，自动开启风扇。当环境温度恢复正常时，自动关闭风扇。通过按键模拟调节设定的阈值。系统设计首先，我们需要准备一些硬件设备。具体而言，我们需要以下组件：STM32F103C8T6开</div> </li> <li><a href="/article/1835230531562860544.htm" title="【这里是新疆】（2）“有效光照理论”下的新疆美好生活……" target="_blank">【这里是新疆】（2）“有效光照理论”下的新疆美好生活……</a> <span class="text-muted">拈花老夏</span> <div>图片发自App【这里是新疆】（2）“有效光照理论”下的新疆人，及新疆人们的生活……（这一篇，最好在读完上一篇后进行！前面谈“有效光照”下的植物与作物，本篇谈人，其实本为一整体，但是太长，发不出来[撇嘴]）老夏每年游学南方各省，经常听人这么说：新疆人个子就是高大，结实……其实人也与一棵植物，一棵庄稼没有根本区别！作为生命个体的代表，决定人生命的，其实一是具有能量的、高质量的食物（国际医学及科学普遍认</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>