玄子Share

玄子Share-HTML5知识手册

前言：

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

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

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

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

文章目录

玄子Share-HTML5知识手册

@[toc]

1.01 HTML 基本简介

1.1.1 HTML 发展史

1.1.2 HTML 的优势

1.1.3 W3C 标准

1.02 HTML 开发工具

1.2.1 安装 WebStorm

1.03 HTML 基本标签

1.3.1 标签层级关系

1.3.2 基本标签语义

1.04 HTML 文本标签

1.4.1 文本标题标签

1.4.2 文本段落标签

1.4.3 文本换行标签

1.4.4 文本分割标签

1.4.5 文本强调标签

1.4.6 文本注释标签

1.4.7 文本特殊字符

1.4.8 文本标签语义

1.05 HTML 图像标签

1.5.1 图像标签属性

1.5.2 资源图片标签

1.5.3 资源相对路径

1.5.4 资源绝对路径

1.5.5 图像标签语义

1.06 HTML 链接标签

1.6.1 链接标签属性

1.6.2 锚点链接跳转

1.6.3 行内块级元素

1.6.4 链接标签语义

1.07 HTML 列表标签

1.7.1 无序列表标签

1.7.2 有序列表标签

1.7.3 定义列表标签

1.7.4 层级列表标签

1.7.5 列表标签语义

1.08 HTML 表格标签

1.8.1 表格标签属性

1.8.2 表格跨行跨列

1.8.3 表格标签语义

1.09 HTML 媒体标签

1.9.1 视频媒体标签

1.9.2 音频媒体标签

1.9.3 媒体标签属性

1.9.4 多媒体源标签

1.9.5 嵌入对象标签

1.9.6 媒体标签语义

1.10 HTML 状态标签

1.10.1 测量状态标签

1.10.2 进度状态标签

1.10.3 状态标签属性

1.10.4 状态标签语义

1.11 HTML 内联框架

1.11.1 内联框架属性

1.11.2 内联框架语义

1.12 HTML 结构标签

1.12.1 结构标签语义

1.13 HTML 表单标签

1.13.1 表单标签属性

1.13.2 普通文本控件

1.13.3 密码文本控件

1.13.4 邮箱文本控件

1.13.5 电话文本控件

1.13.6 网址文本控件

1.13.7 搜索文本控件

1.13.8 单选按钮控件

1.13.9 复选按钮控件

1.13.10 功能按钮控件

1.13.11 日期选择控件

1.13.12 颜色选择控件

1.13.13 数字选择控件

1.13.14 数字滑块控件

1.13.15 文件上传控件

1.13.16 隐藏文本控件

1.13.17 下拉列表控件

1.13.18 多行文本控件

1.13.19 表单控件属性

1.13.20 表单标签语义

1.14 HTML 标签速览

1.14.1 结构标签

1.14.2 文本标签

1.14.3 功能标签

1.14.4 表单标签

1.14.5 玄子Share

1.01 HTML 基本简介

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

1.1.1 HTML 发展史

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

1.1.2 HTML 的优势

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

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

1.1.3 W3C 标准

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

1.02 HTML 开发工具

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

1.2.1 安装 WebStorm

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

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

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

1.03 HTML 基本标签

DOCTYPE html>

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

1.3.1 标签层级关系

包含关系

<head>
    <title>title>
head>

并列关系

<head>
head>
<body> 
body>

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

1.3.2 基本标签语义

标签	语义	说明
	文档类型声明	告诉浏览器使用规范为`HTML`
	网页标签	标签位于 HTML 文档的最前面，用于标识 HTML 文档的开始和结尾
	头部标签	用于定义 HTML 文档的头部，描述文档属性，包含一些辅助标签例如、<link>、<script></code></td> </tr> <tr> <td align="left"><code><title></code></td> <td>网页标题</td> <td>用来定义网页的标题名称</td> </tr> <tr> <td align="left"><code><meta></code></td> <td>描述性标签</td> <td>一般用来做 SEO</td> </tr> <tr> <td align="left"><code><body></code></td> <td>主体标题</td> <td>用于定义 HTML 文档的主体内容</td> </tr> </tbody> </table> <hr> <h3>1.04 HTML 文本标签</h3> <h4>1.4.1 文本标题标签</h4> <p>为了使网页更具有语义化，我们经常会在页面中用到标题标签</p> <p>HTML <code><h1></code>–<code><h6></code> 标题标签（heading：标题、类目）元素呈现了六个不同的级别的标题，<code><h1></code> 级别最高，而 <code><h6></code> 级别最低</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>一级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>二级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>三级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>四级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h5</span><span class="token punctuation">></span></span>五级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span><span class="token punctuation">></span></span>六级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/98402e76a8194b4caf4e86861fa674fb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/98402e76a8194b4caf4e86861fa674fb.jpg" alt="玄子Share-HTML5知识手册_第2张图片" width="337" height="542" style="border:1px solid black;"></a></p> <blockquote> <p>这里提一下，在HTML 或其他文档类型中，不推荐使用四级及以下标题。例如，在本手册中，我只用了一、二、三级标题来划分文档结构，这些标题具有较大的字体大小和更醒目的样式，可以更好地表现文档的层次结构和内容重点。相比之下，四级标题的字体大小与常规文本字体相似，容易混淆且不利于阅读和理解。因此，为了防止混淆，优化文档结构和提高可读性，不推荐使用四级及以下标题</p> </blockquote> <h4>1.4.2 文本段落标签</h4> <p>在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示</p> <p>HTML<code><p></code>段落标签（paragraph：段落、节）表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 《静夜思》床前明月光，疑是地上霜。举头望明月，低头思故乡。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 《望天门山》天门中断楚江开，碧水东流至此回。两岸青山相对出，孤帆一片日边来。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 《早发白帝城》朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>段落与段落之间有明显的间隙，段落长度超出浏览器宽度会自动换行</p> </blockquote> <h4>1.4.3 文本换行标签</h4> <p>在网页中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行</p> <p>HTML<code><br></code>换行标签（break：打断、停顿、进入新状态）在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 《独坐敬亭山》<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 众鸟高飞尽，孤云独去闲。<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 相看两不厌，只有敬亭山。<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/97e917c760494d3ebce3103dd8af9e41.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/97e917c760494d3ebce3103dd8af9e41.jpg" alt="玄子Share-HTML5知识手册_第3张图片" width="266" height="123" style="border:1px solid black;"></a></p> <h4>1.4.4 文本分割标签</h4> <p>HTML<code><hr></code>分割标签（horizontal rule：水平分割线）表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/1a438cf7b9a14d0ab08c180ad97dfb93.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1a438cf7b9a14d0ab08c180ad97dfb93.jpg" alt="玄子Share-HTML5知识手册_第4张图片" width="650" height="330" style="border:1px solid black;"></a></p> <h4>1.4.5 文本强调标签</h4> <p>HTML 中，有多标签用来强调文本（emphasis：强调）内容。这些标签可以在一定程度上改变文本的外观，但更重要的是它们用于传达文本的语义信息</p> <pre><code class="prism language-css"><span class="token selector"><style> .mathML, .emphasis > </span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid turquoise<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> </code></pre> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>emphasis<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>p：普通段落文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>em：倾斜文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>i：倾斜文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>strong：加粗文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>b：加粗文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mark</span><span class="token punctuation">></span></span>mark：高亮文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mark</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>u</span><span class="token punctuation">></span></span>u：下划线，已弃用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>u</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>s</span><span class="token punctuation">></span></span>s：删除线，已弃用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>s</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strike</span><span class="token punctuation">></span></span>strike：删除线，已弃用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strike</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ins</span><span class="token punctuation">></span></span>ins：下划线<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ins</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>del</span><span class="token punctuation">></span></span>del：删除线<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>del</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>code：代码文本，alert('Change The World!')<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>samp：程序输出，页面弹窗代码示例：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span>alert('Change The World!')<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span>small：小号文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>big</span><span class="token punctuation">></span></span>big：大号文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>big</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span>cite：引用文本，斜体<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q</span><span class="token punctuation">></span></span>q：引用文本，引号包裹<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>ruby+rt：注音文本：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ruby</span><span class="token punctuation">></span></span>汉<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>hàn<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span>字<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>zì<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ruby</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>abbr：HTML 是 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HyperText Markup Language<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> 的缩写。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>dfn：定义文本，<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dfn</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>超文本标记语言<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dfn</span><span class="token punctuation">></span></span>是用于创建网页的标记语言。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>kbd：请按下 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>Enter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> 键以确认<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>var：假设 x 是一个数字，那么 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>x + 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span> 表示 x 加上 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>sup：上标文本，2<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sup</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sup</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>sub：下标文本，2<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sub</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sub</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>b+i：加粗斜体样式标签可以嵌套使用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="prism language-html"><span class="token comment"><!--数学公式，不多介绍，详见 MDN--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mathML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://developer.mozilla.org/zh-CN/docs/Web/MathML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数学公式 MathML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>二次方程的一般解为：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>math</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mi</span><span class="token punctuation">></span></span>x<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mi</span><span class="token punctuation">></span></span> = <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mfrac</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mrow</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mo</span><span class="token punctuation">></span></span>-<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mo</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mi</span><span class="token punctuation">></span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mi</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mo</span><span class="token punctuation">></span></span>±<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mo</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>msqrt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>msup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mi</span><span class="token punctuation">></span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mi</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mn</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mn</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>msup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mo</span><span class="token punctuation">></span></span>-<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mo</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mn</span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mn</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mo</span><span class="token punctuation">></span></span>⁢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mo</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mi</span><span class="token punctuation">></span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mi</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mo</span><span class="token punctuation">></span></span>⁢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mo</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mi</span><span class="token punctuation">></span></span>c<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mi</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>msqrt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mrow</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mrow</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mn</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mn</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mo</span><span class="token punctuation">></span></span>⁢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mo</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mi</span><span class="token punctuation">></span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mi</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mrow</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mfrac</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>math</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/70abc7a4bae64db786518838d69054b7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/70abc7a4bae64db786518838d69054b7.jpg" alt="玄子Share-HTML5知识手册_第5张图片" width="650" height="115" style="border:1px solid black;"></a></p> <h4>1.4.6 文本注释标签</h4> <p>如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的文字，就需要使用注释标签</p> <p>HTML 中的注释以：<code><!--</code> 开头，以 <code>--></code> 结尾</p> <pre><code class="prism language-html"><span class="token comment"><!-- 注释语句 --></span> <span class="token comment"><!-- <p>这是一个被注释掉的段落</p> --></span> </code></pre> <blockquote> <p>注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的，但会显示在页面源码中</p> </blockquote> <p><a href="http://img.e-com-net.com/image/info8/6e945a69c45a4d3693505d4163364c51.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6e945a69c45a4d3693505d4163364c51.jpg" alt="玄子Share-HTML5知识手册_第6张图片" width="650" height="380" style="border:1px solid black;"></a></p> <h4>1.4.7 文本特殊字符</h4> <p>在网页中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用特殊字符来替代。无需记忆，IDEA 中集成了常用特殊符号</p> <table> <thead> <tr> <th align="left">特殊字符</th> <th align="left">描述</th> <th align="left">字符的代码</th> </tr> </thead> <tbody> <tr> <td align="left"><code> </code></td> <td align="left">空格符</td> <td align="left"><code> </code></td> </tr> <tr> <td align="left"><code><</code></td> <td align="left">小于号</td> <td align="left"><code><</code></td> </tr> <tr> <td align="left"><code>></code></td> <td align="left">大于号</td> <td align="left"><code>></code></td> </tr> <tr> <td align="left"><code>&</code></td> <td align="left">和号</td> <td align="left"><code>&</code></td> </tr> <tr> <td align="left"><code>±</code></td> <td align="left">正负号</td> <td align="left"><code>±</code></td> </tr> <tr> <td align="left"><code>×</code></td> <td align="left">乘号</td> <td align="left"><code>×</code></td> </tr> <tr> <td align="left"><code>÷</code></td> <td align="left">除号</td> <td align="left"><code>÷</code></td> </tr> <tr> <td align="left"><code>©</code></td> <td align="left">版权符号</td> <td align="left"><code>©</code></td> </tr> </tbody> </table> <pre><code class="prism language-html"><span class="token comment"><!--特殊符号不需要记忆，用到百度即可--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>空格<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>空<span class="token entity named-entity"> </span><span class="token entity named-entity"> </span>格<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>大于号：<span class="token entity named-entity">></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>小于号：<span class="token entity named-entity"><</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>分号：<span class="token entity named-entity">"</span><span class="token entity named-entity">"</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>版权符号：<span class="token entity named-entity">©</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/7b076a9b6747446e91a69b188d8110c2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7b076a9b6747446e91a69b188d8110c2.jpg" alt="玄子Share-HTML5知识手册_第7张图片" width="297" height="249" style="border:1px solid black;"></a></p> <h4>1.4.8 文本标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><h1></code>-<code><h6></code></td> <td>标题</td> <td>定义不同级别的标题，<code><h1></code>为最高级别，依次递减</td> </tr> <tr> <td><code><p></code></td> <td>段落</td> <td>定义一个段落</td> </tr> <tr> <td><code><br/></code></td> <td>换行符</td> <td>在文本中插入一个换行符</td> </tr> <tr> <td><code><hr/></code></td> <td>水平线</td> <td>在文档中插入一条水平分隔线</td> </tr> <tr> <td><code><em></code></td> <td>斜体</td> <td>表示文本的强调，通常以斜体显示</td> </tr> <tr> <td><code><i></code></td> <td>斜体</td> <td>表示文本的斜体样式</td> </tr> <tr> <td><code><strong></code></td> <td>粗体</td> <td>表示文本的强调，通常以粗体显示</td> </tr> <tr> <td><code><b></code></td> <td>粗体</td> <td>表示文本的粗体样式</td> </tr> <tr> <td><code><mark></code></td> <td>高亮</td> <td>表示文本的高亮显示</td> </tr> <tr> <td><code><u></code></td> <td>下划线</td> <td>给文本添加下划线（已被废弃，不推荐使用）</td> </tr> <tr> <td><code><s></code></td> <td>删除线</td> <td>表示删除的文本，通常以删除线显示（已被废弃，不推荐使用）</td> </tr> <tr> <td><code><strike></code></td> <td>删除线</td> <td>表示删除的文本，通常以删除线显示（已被废弃，不推荐使用）</td> </tr> <tr> <td><code><ins></code></td> <td>下划线</td> <td>表示插入的文本</td> </tr> <tr> <td><code><del></code></td> <td>删除线</td> <td>表示删除的文本</td> </tr> <tr> <td><code><code></code></td> <td>行内代码</td> <td>表示行内的计算机代码</td> </tr> <tr> <td><code><samp></code></td> <td>代码示例</td> <td>表示代码的示例</td> </tr> <tr> <td><code><small></code></td> <td>小号字体</td> <td>将文字显示为小号字体</td> </tr> <tr> <td><code><big></code></td> <td>大号字体</td> <td>将文字显示为大号字体</td> </tr> <tr> <td><code><cite></code></td> <td>引用标题</td> <td>表示引用或作品的标题</td> </tr> <tr> <td><code><q></code></td> <td>短引用</td> <td>表示短的引用</td> </tr> <tr> <td><code><ruby></code></td> <td>注音标注</td> <td>用于显示拼音或其他注音标记</td> </tr> <tr> <td><code><rt></code></td> <td>注音解释</td> <td>用于显示拼音或其他注音的解释</td> </tr> <tr> <td><code><abbr></code></td> <td>缩写</td> <td>表示缩写词或缩略词</td> </tr> <tr> <td><code><dfn></code></td> <td>定义</td> <td>表示一个术语或定义</td> </tr> <tr> <td><code><kbd></code></td> <td>键盘样式</td> <td>表示键盘输入</td> </tr> <tr> <td><code><var></code></td> <td>变量</td> <td>表示变量或占位符</td> </tr> <tr> <td><code><sup></code></td> <td>上标</td> <td>将文本显示为上标</td> </tr> <tr> <td><code><sub></code></td> <td>下标</td> <td>将文本显示为下标</td> </tr> <tr> <td><code><math></code></td> <td>数学公式</td> <td>用于显示数学公式</td> </tr> <tr> <td><code><!-- --></code></td> <td>注释</td> <td>在HTML中插入注释，不会在页面上显示</td> </tr> </tbody> </table> <hr> <h3>1.05 HTML 图像标签</h3> <p>HTML 标签中，<code><img></code>标签（image：图像）用于定义 HTML 页面中的图像</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>替换文本<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500px<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>标题<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>替换文本<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>标题<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/7a748c660900412bbf2e3baa043168e2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7a748c660900412bbf2e3baa043168e2.jpg" alt="玄子Share-HTML5知识手册_第8张图片" width="455" height="342" style="border:1px solid black;"></a></p> <blockquote> <p><code>../</code>：表示回退到上级目录，回退上两级目录就写两遍，然后指定路径下的文件，如果找不到图像就展示<code>alt</code>属性中的文本</p> </blockquote> <h4>1.5.1 图像标签属性</h4> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>替换文本<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500px<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>标题<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500px<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>src</code></td> <td>图片路径</td> <td>图像索引路径，可以写相对路径或绝对路径</td> </tr> <tr> <td><code>alt</code></td> <td>文本</td> <td>替换文本，图片无法显示时的替换文字</td> </tr> <tr> <td><code>title</code></td> <td>文本</td> <td>提示文本，鼠标悬浮到图像时显示文字</td> </tr> <tr> <td><code>width</code></td> <td>尺寸</td> <td>设置图像的宽度，若以图像宽度等比缩放，只设置宽度尺寸</td> </tr> <tr> <td><code>height</code></td> <td>尺寸</td> <td>设置图像的高度，若以图像高度等比缩放，只设置高度尺寸</td> </tr> <tr> <td><code>loading</code></td> <td><code>eager</code>：立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）<br><code>lazy</code>：延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）</td> <td>设置图像的加载方式</td> </tr> </tbody> </table> <blockquote> <p>在设置图像的宽度或高度时，建议只设置其中一个属性，让浏览器根据比例自动计算另一个属性，以保持图像的原始比例。这样可以避免图像被拉伸或压缩失真</p> <p><code>loading</code>：仅在启用 JavaScript 时才会延迟加载。这是一种反跟踪的措施，因为，如果用户代理在禁用脚本的情况下支持延迟加载，网站仍然跨源通过在图像中策略性地放置图像来跟踪用户在整个会话期间的大致滚动位置，这样服务器可以跟踪请求了多少图像以及请求在何时发起</p> </blockquote> <h4>1.5.2 资源图片标签</h4> <p>HTML<code><picture></code>标签（picture：图像）通过包含零或多个<code><source></code>标签和一个<code><img></code>标签来为不同的显示/设备场景提供图像版本</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子Share.png<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100px<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子Share.png<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(max-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100px<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/470006351bc84622bcf251a0318693f0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/470006351bc84622bcf251a0318693f0.jpg" alt="玄子Share-HTML5知识手册_第9张图片" width="227" height="133" style="border:1px solid black;"></a></p> <h4>1.5.3 资源相对路径</h4> <p>相对路径则是相对于当前HTML文档所在位置的路径。根据相对路径的不同，又可以分为三种类型：同级目录、上级目录和根目录</p> <table> <thead> <tr> <th>相对路径分类</th> <th>符号</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>同级目录</td> <td><code> </code></td> <td><code><img src="image.jpg"></code></td> </tr> <tr> <td>上级目录</td> <td><code>../</code></td> <td><code><img src="../images/image.jpg"></code></td> </tr> <tr> <td>根目录</td> <td><code>/</code></td> <td><code><img src="/images/image.jpg"></code></td> </tr> </tbody> </table> <h4>1.5.4 资源绝对路径</h4> <p>绝对路径指的是从根目录开始的完整路径，网络路径以<code>http://</code>或<code>https://</code>开头，磁盘路径以磁盘盘符开头</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.xuanzishare.com/images/favicon.ico<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>案例中，<code>src</code>指定了一个绝对路径，表示图像<code>favicon.ico</code>位于<code>xuanzishare.com</code>网站的<code>/images</code>目录下</p> <blockquote> <ul> <li>Windows 系统的绝对路径：<code>F:/html/img/favicon.ico</code></li> <li>网络地址：<code>https://www.xuanzishare.com/favicon.ico</code></li> <li>实际开发中建议使用相对路径或网络地址</li> </ul> </blockquote> <h4>1.5.5 图像标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><img/></code></td> <td>图像标签</td> <td>定义一个图片，需要指定图片的 URL、大小、描述等信息</td> </tr> </tbody> </table> <hr> <h3>1.06 HTML 链接标签</h3> <p>HTML<code><a></code>标签（anchor：锚）可以通过它的<code>href</code>属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.xuanzishare.com/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>网址<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1.html<span class="token punctuation">"</span></span> <span class="token attr-name">download</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>新文件名称.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>下载<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:y3336392096@163.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>邮箱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel:12345678911<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电话<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/f90a14af59664392a062f5ef4f5e6b76.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f90a14af59664392a062f5ef4f5e6b76.jpg" alt="玄子Share-HTML5知识手册_第10张图片" width="621" height="392" style="border:1px solid black;"></a></p> <h4>1.6.1 链接标签属性</h4> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.xuanzishare.com/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>网址<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>href</code></td> <td>超链接所指向的 URL（必须属性）<br></td> <td><code>tel:</code> URL 链接到一个电话号码<br><code>mailto:</code> URL 链接到一个邮箱地址</td> </tr> <tr> <td><code>target</code></td> <td><code>_self</code>：当前页面加载。（默认） <br><code>_blank</code>：通常在新标签页打开，但用户可以通过配置选择在新窗口打开<br><code>_parent</code>：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与<code>_self</code>相同<br><code>_top</code>：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 <code>_self</code> 相同</td> <td>用于指定链接页面的打开方式</td> </tr> <tr> <td><code>download</code></td> <td>下载文件名称</td> <td>浏览器将链接的 URL 视为下载资源</td> </tr> </tbody> </table> <blockquote> <p>链接标签经常被滥用为假按钮，将其 <code>href</code> 设置为 <code>#</code> 或 <code>javascript:void(0)</code> 以防止页面刷新，然后监听其 <code>click</code> 事件</p> </blockquote> <h4>1.6.2 锚点链接跳转</h4> <p>锚点链接：点击链接，可以快速定位到某页面中的某个位置</p> <ul> <li>锚点：需要跳转的位置<code><p id="F1">F1</p></code>设置<code>id</code>属性值为锚点</li> <li>跳转点：点击触发跳转<code><p><a href="#F1">跳转至F1</a></p></code>设置<code>href</code>属性值为锚点<code>id</code>前加<code>#</code></li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#F1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跳转至F1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#F2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跳转至F2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 2000px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span>turquoise<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>F1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>F1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 2000px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span>turquoise<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>F2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>F2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/c0b87a20696e4b64993be5325b17fedb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c0b87a20696e4b64993be5325b17fedb.jpg" alt="玄子Share-HTML5知识手册_第11张图片" width="650" height="177" style="border:1px solid black;"></a></p> <hr> <h4>1.6.3 行内块级元素</h4> <p>在HTML中，元素可被分类为行内元素（inline element）和块级元素（block-level element），这两种元素具有不同的特征和表现方式</p> <ul> <li><strong>行内元素</strong>：指默认情况下在文档流中以行内的形式显示的元素。行内元素通常用于包裹文本或者以行内的方式插入到其他元素中</li> <li><strong>块级元素</strong>：指默认情况下在文档流中以块级的形式显示的元素。块级元素占据一整行，空间独立显示，可设置宽度、高度、边距、内边距等属性</li> </ul> <p>行内元素和块级元素的主要区别</p> <ul> <li><strong>显示方式</strong>：行内元素以行内的方式显示，块级元素以块级的方式显示</li> <li><strong>占据空间</strong>：行内元素只占据其内容所需的空间，不独占一行；块级元素占据一整行的空间，独立显示</li> <li><strong>换行行为</strong>：行内元素不会强制换行，会根据父元素和其他行内元素的大小自动填充一行显示；块级元素会在前后自动创建换行</li> <li><strong>宽度和高度</strong>：行内元素的宽度和高度属性设置无效，由内容决定；块级元素的宽度和高度属性可自由调整</li> <li><strong>嵌套规则</strong>：行内元素可嵌套在其他行内元素中，但不能包含块级元素；块级元素可嵌套在其他块级元素中，也可包含行内元素和其他块级元素</li> </ul> <p>常见的行内元素包括 <code><span></code>、<code><a></code>、<code><em></code>、<code><strong></code> 等</p> <p>常见的块级元素包括 <code><div></code>、<code><p></code>、<code><h1></code>-<code><h6></code>、<code><ul></code>、<code><li></code> 等</p> <pre><code class="prism language-html"><span class="token comment"><!--行内元素--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>a标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>a标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20px<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20px<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> <span class="token comment"><!--块级元素--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>标题标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>标题标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>p标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>p标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/26340d1a497a4736bac64646e226b8aa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/26340d1a497a4736bac64646e226b8aa.jpg" alt="玄子Share-HTML5知识手册_第12张图片" width="650" height="811" style="border:1px solid black;"></a></p> <blockquote> <p>需要注意的是，通过CSS的display属性可改变元素的显示方式，使其行内元素变为块级元素或反之。另外，还有一种叫做内联块元素（inline-block）的元素，它具有行内元素的特性，但可设置宽度、高度等块级元素的属性</p> </blockquote> <h4>1.6.4 链接标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><a></code></td> <td>锚点链接</td> <td>定义一个超链接，可以链接到其他网页、文件、位置等</td> </tr> </tbody> </table> <hr> <h3>1.07 HTML 列表标签</h3> <h4>1.7.1 无序列表标签</h4> <p>HTML<code><ul></code>无序列表标签（unordered list：无序列表）表示一系列无序的列表项目，通常渲染为项目符号列表，列表项使用<code><li></code>标签（list item：列表项）定义</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JAVA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>SQL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/ed2b59e3b4934d18b7975ffacf1ff9f0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ed2b59e3b4934d18b7975ffacf1ff9f0.jpg" alt="玄子Share-HTML5知识手册_第13张图片" width="218" height="138" style="border:1px solid black;"></a></p> <blockquote> <ul> <li>无序列表的各个列表项之间没有顺序级别之分，是并列的</li> <li><code><ul></code>中只能嵌套<code><li></code>，直接在<code><ul></code>标签中输入其他标签或者文字的做法是不被允许的，列表中的任何内容都应该放在<code>li</code>中</li> <li><code><li></code> 与 <code></li></code> 之间相当于一个容器，可以容纳所有的元素</li> <li>无序列表可通过<code>type</code>属性设置项目符号，但在实际开发中，我们会使用<code>CSS</code>来设置</li> <li>去除列表项默认符号的方法：<code><ul style="list-style: none;"></code></li> </ul> </blockquote> <h4>1.7.2 有序列表标签</h4> <p>HTML<code><ol></code>有序列表标签（ordered list：有序列表）表示有序列表，通常渲染为一个带编号的列表，列表项使用<code><li></code>标签（list item：列表项）定义</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JAVA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>SQL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/297f058be4b24051827758e8dccb8728.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/297f058be4b24051827758e8dccb8728.jpg" alt="玄子Share-HTML5知识手册_第14张图片" width="206" height="125" style="border:1px solid black;"></a></p> <blockquote> <ul> <li>有序列表的各个列表项之间有级别之分，是顺序的</li> <li><code><ol></code>中只能嵌套<code><li></code>，直接在<code><ol></code>标签中输入其他标签或者文字的做法是不被允许的，列表中的任何内容都应该放在<code>li</code>中</li> <li><code><li></code> 与 <code></li></code> 之间相当于一个容器，可以容纳所有的元素</li> <li>有序列表可通过<code>type</code>属性设置项目符号，但在实际开发中，我们会使用<code>CSS</code>来设置</li> <li>去除列表项默认符号的方法：<code><ol style="list-style: none;"></code></li> </ul> </blockquote> <h4>1.7.3 定义列表标签</h4> <p>HTML<code><dl></code>定义列表（definition list：定义列表）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)，该标签会与 <code><dt></code>（definition term：定义术语）和 <code><dd></code>（definition description：定义描述）一起使用</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>前端<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>后端<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>JAVA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>MySQL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> </code></pre> <p>![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-blog.csdnimg.cn/749590ed92804b67a9e33905488ad21f.pn<br> g)</p> <blockquote> <ul> <li><code><dl></code>里面只包含<code><dt></code>、<code><dd></code></li> <li><code><dt></code>和<code><dd></code>个数没有限制，通常是一个<code><dt></code>对应多个<code><dd></code></li> </ul> </blockquote> <h4>1.7.4 层级列表标签</h4> <ul> <li>HTML<code><details></code>标签（details：详细资料）可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息</li> <li>HTML<code><summary></code>标签（summary：摘要）指定了<code><details></code>标签展开盒子的内容的摘要，标题或图例</li> <li>点击<code><summary></code>标签可以切换父元素<code><details></code>开启和关闭的状态</li> </ul> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">details</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #aaa<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em 0.5em 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">summary</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> -0.5em -0.5em 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">details[open]</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">details[open] summary</span> <span class="token punctuation">{</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #aaa<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>第一层<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>第二层-1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>第三层-1 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>第二层-2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/32f59687a9ae4cbfbd0bcf4fda719261.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/32f59687a9ae4cbfbd0bcf4fda719261.png" alt="玄子Share-HTML5知识手册_第15张图片" width="677" height="464" style="border:1px solid black;"></a></p> <blockquote> <p><code>open</code>这个布尔属性表示细节内容：也就是 <code><details></code> 元素的内容目前是否可见。默认情况下为 <code>false</code>，意味着细节内容是不可见的</p> </blockquote> <h4>1.7.5 列表标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><ul></code></td> <td>无序列表</td> <td>用于创建一个无序列表，其中每个列表项都由一个圆点符号标识</td> </tr> <tr> <td><code><ol></code></td> <td>有序列表</td> <td>用于创建一个有序列表，其中每个列表项都由一个数字或字母标识</td> </tr> <tr> <td><code><li></code></td> <td>列表项</td> <td>用于定义列表中的一个列表项</td> </tr> <tr> <td><code><dl></code></td> <td>定义列表</td> <td>用于创建一个定义列表，其中每个列表项由一个术语和一个定义组成</td> </tr> <tr> <td><code><dt></code></td> <td>定义术语</td> <td>用于定义定义列表中的一个术语</td> </tr> <tr> <td><code><dd></code></td> <td>定义描述</td> <td>用于定义定义列表中术语的定义</td> </tr> <tr> <td><code><details></code></td> <td>可折叠内容</td> <td>用于创建一个可折叠的区域，其中包含详细信息</td> </tr> <tr> <td><code><summary></code></td> <td>折叠摘要</td> <td>用于定义<code><details></code>元素的摘要或标题</td> </tr> </tbody> </table> <hr> <h3>1.08 HTML 表格标签</h3> <ul> <li>HTML<code><table></code>标签（table：表格）表示表格数据，即在一个由包含数据的行和列组成的二维表格中呈现的信息</li> <li>HTML<code><caption></code>标签 (caption：标题) 展示一个表格的标题</li> <li>HTML<code><thead></code>标签（tableHead：表格头部）定义了一组定义表格的列头的行</li> <li>HTML<code><tbody></code>标签（tableBody：表格主体）封装了一系列表格的行<code>tr</code></li> <li>HTML<code><tfoot></code>标签（tableFoot：表格尾部）定义了一组表格中各列的汇总行</li> <li>HTML<code><tr></code>标签（tableRow：表格行）定义表格中的行。同一行可同时出现<code>td</code>与<code>th</code></li> <li>HTML<code><th></code>标签（tableHeading：表头单元格）定义表格内的表头单元格</li> <li>HTML<code><td></code>标签（tableData：数据单元格）定义表格中的列。同一行内可有多列<code>td</code></li> </ul> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">table</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 100px auto<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">border-collapse</span><span class="token punctuation">:</span> collapse<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">caption</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span> <span class="token property">caption-side</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #323232<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> turquoise<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>36<span class="token punctuation">,</span> 36<span class="token punctuation">,</span> 36<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">code</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 3px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 3px 5px<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>170<span class="token punctuation">,</span> 200<span class="token punctuation">,</span> 228<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #2F2F2F<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">th, td, th</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #323232<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.75<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">th</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #42D392<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>26<span class="token punctuation">,</span> 26<span class="token punctuation">,</span> 26<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">tr:nth-of-type(even)</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>26<span class="token punctuation">,</span> 26<span class="token punctuation">,</span> 26<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">tr:nth-of-type(odd)</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>36<span class="token punctuation">,</span> 36<span class="token punctuation">,</span> 36<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>caption</span><span class="token punctuation">></span></span>标题：表格标签属性<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>caption</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>属性名<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>属性值<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>描述<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>align<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>、<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>center<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>、<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>：表格将在文档左侧显示（默认）<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>center<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>：表格将在文档中央显示<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>：表格将在文档右侧显示 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>border<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>整数或 0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>规定表格单元是否拥有边框，默认为 0，表示没有边框<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>bgcolor<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>RGB 编码，以<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>#<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>作为前缀<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>表格的背景颜色<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>cellpadding<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>像素值<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>规定单元边沿与其内容之间的空白<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>cellspacing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>像素值<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>规定单元格之间的空白<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>width<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>像素值或百分比<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>规定表格的宽度<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tfoot</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跨行演示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跨列一行<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跨列二行<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tfoot</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传</p> <h4>1.8.1 表格标签属性</h4> <p>表格标签大部分私有属性均被弃用，改用适当的<code>CSS</code>设置样式</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">cellpadding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> </code></pre> <table> <thead> <tr> <th align="left">属性名</th> <th align="left">属性值</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td align="left"><code>align</code></td> <td align="left"><code>left</code>：表格将在文档左侧显示（默认）<br><code>center</code>：表格将在文档中央显示<br><code>right</code>：表格将在文档右侧显示</td> <td align="left">表格在文档中显示位置</td> </tr> <tr> <td align="left"><code>border</code></td> <td align="left">整数</td> <td align="left">规定表格单元是否拥有边框，默认为 0，表示没有边框</td> </tr> <tr> <td align="left"><code>bgcolor</code></td> <td align="left">RGB 编码，以<code>#</code>作为前缀</td> <td align="left">表格的背景颜色</td> </tr> <tr> <td align="left"><code>cellpadding</code></td> <td align="left">像素值</td> <td align="left">规定单元边沿与其内容之间的空白</td> </tr> <tr> <td align="left"><code>cellspacing</code></td> <td align="left">像素值</td> <td align="left">规定单元格之间的空白</td> </tr> <tr> <td align="left"><code>width</code></td> <td align="left">像素值或百分比</td> <td align="left">规定表格的宽度</td> </tr> </tbody> </table> <h4>1.8.2 表格跨行跨列</h4> <p>特殊情况下，可以把多个单元格<code>td</code>合并为一个单元格</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tfoot</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跨行演示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跨列一行<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跨列二行<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tfoot</span><span class="token punctuation">></span></span> </code></pre> <p>外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传</p> <blockquote> <ul> <li>跨行合并（上下合并）：<code>rowspan="合并单元格的个数"</code></li> <li>跨列合并（左右合并）：<code>colspan="合并单元格的个数"</code></li> <li>合并完毕后删除多余的单元格</li> </ul> </blockquote> <h4>1.8.3 表格标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><table></code></td> <td>表格</td> <td>用于创建表格的容器</td> </tr> <tr> <td><code><caption></code></td> <td>表格标题</td> <td>用于为表格提供标题</td> </tr> <tr> <td><code><thead></code></td> <td>表格头</td> <td>用于组织表格中的表头行（包含表格的列标题）</td> </tr> <tr> <td><code><tbody></code></td> <td>表格体</td> <td>用于组织表格中的主体内容，通常包括多个数据行</td> </tr> <tr> <td><code><tfoot></code></td> <td>表格尾</td> <td>用于组织表格中的页脚内容，通常包括汇总行或其他与表格整体相关的信息</td> </tr> <tr> <td><code><tr></code></td> <td>表格行</td> <td>表示表格中的一行数据</td> </tr> <tr> <td><code><th></code></td> <td>表格头单元格</td> <td>表示表格中的表头单元格，通常包含列标题</td> </tr> <tr> <td><code><td></code></td> <td>表格数据单元格</td> <td>表示表格中的数据单元格，包含实际的数据内容</td> </tr> </tbody> </table> <hr> <h3>1.09 HTML 媒体标签</h3> <h4>1.9.1 视频媒体标签</h4> <p>HTML<code><video></code>标签（video：视频）用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将<code><video></code>标签用于音频内容，但是<code><audio></code>元素可能在用户体验上更合适</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/video/video.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span> <span class="token punctuation">></span></span>你的浏览器不支持video标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>浏览器不支持<code><video></code>标签时，将会显示标签中间的文字</p> </blockquote> <h4>1.9.2 音频媒体标签</h4> <p>HTML<code><audio> </code>标签（audio：音频）用于在文档中嵌入声音内容</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/audio/audio.mp3<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span>你的浏览器不支持audio标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>浏览器不支持<code><audio></code>标签时，将会显示标签中间的文字</p> </blockquote> <p><a href="http://img.e-com-net.com/image/info8/b79bc5071fae4ea2a64f3c665ae32cf7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b79bc5071fae4ea2a64f3c665ae32cf7.jpg" alt="玄子Share-HTML5知识手册_第16张图片" width="650" height="332" style="border:1px solid black;"></a></p> <h4>1.9.3 媒体标签属性</h4> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">autoplay</span> <span class="token attr-name">controls</span> <span class="token attr-name">muted</span> <span class="token attr-name">preload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/video/G.E.M.邓紫棋-GLORIA.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">poster</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>视频封面.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">autoplay</span> <span class="token attr-name">controls</span> <span class="token attr-name">muted</span> <span class="token attr-name">preload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>metadata<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/audio/G.E.M.邓紫棋-天空没有极限.flac<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> </code></pre> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td><code>width</code></td> <td>像素</td> <td align="left">设置视频播放器的宽度（仅限绝对值，不支持百分比）</td> </tr> <tr> <td><code>height</code></td> <td>像素</td> <td align="left">设置视频播放器的高度（仅限绝对值，不支持百分比）</td> </tr> <tr> <td><code>src</code></td> <td>URL</td> <td align="left">要嵌到页面的视频的 URL</td> </tr> <tr> <td><code>controls</code></td> <td></td> <td align="left">浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放</td> </tr> <tr> <td><code>autoplay</code></td> <td>布尔属性</td> <td align="left">视频会尽快自动开始播放，不会停下来等待数据全部加载完成</td> </tr> <tr> <td><code>loop</code></td> <td>布尔属性</td> <td align="left">在视频播放结束的时候，自动返回视频开始的地方，继续播放</td> </tr> <tr> <td><code>muted</code></td> <td>布尔属性</td> <td align="left">音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放</td> </tr> <tr> <td><code>poster</code></td> <td>视频封面文件 URL</td> <td align="left">海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示</td> </tr> <tr> <td><code>preload</code></td> <td><code>none</code>: 表示不应该预加载视频 <br><code>metadata</code>: 表示仅预先获取视频的元数据（例如长度）<br><code>auto</code>: 表示可以下载整个视频文件，即使用户不希望使用它<br><code>空字符串</code>: 和值为<code>auto</code>一致。每个浏览器的默认值都不相同，即使规范建议设置为<code>metadata</code></td> <td align="left">该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验</td> </tr> </tbody> </table> <blockquote> <p><code>autoplay</code>属性的优先级比<code>preload</code>高。如果制定了<code>autopaly</code>属性，浏览器显然需要开始下载视频以便回放</p> </blockquote> <h4>1.9.4 多媒体源标签</h4> <p>HTML<code><source></code>标签（source：来源）指定用于<code><picture></code>、<code><audio></code>元素或<code><video></code>元素的多个媒体资源</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">autoplay</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/audio/G.E.M.邓紫棋-天空没有极限.flac<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/audio/G.E.M.邓紫棋-天空没有极限.mp3<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> 你的浏览器不支持audio标签 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>浏览器会从上到下依次尝试加载<code><source></code>标签指定的音频源。它会选择第一个可用的音频格式进行播放，如果都不支持则显示错误信息</p> </blockquote> <h4>1.9.5 嵌入对象标签</h4> <p>HTML <code><object></code>标签（object：对象）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>object</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>application/pdf<span class="token punctuation">"</span></span> <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/world/玄子Share-HTML知识手册.pdf<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1000px<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>object</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/2f71038f42a44589b92345807e1f8f38.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2f71038f42a44589b92345807e1f8f38.jpg" alt="玄子Share-HTML5知识手册_第17张图片" width="650" height="519" style="border:1px solid black;"></a></p> <h4>1.9.6 媒体标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><video></code></td> <td>视频</td> <td>定义一个视频，通常用于播放电影、短片等</td> </tr> <tr> <td><code><audio></code></td> <td>音频</td> <td>定义一个音频，通常用于播放音乐、声音等</td> </tr> <tr> <td><code><source></code></td> <td>媒体源</td> <td>定义媒体元素的一个或多个媒体资源，通常用于指定不同格式、不同分辨率的媒体文件</td> </tr> <tr> <td><code><object></code></td> <td>通用元素</td> <td>用于在HTML页面中嵌入各种外部资源</td> </tr> </tbody> </table> <hr> <h3>1.10 HTML 状态标签</h3> <h4>1.10.1 测量状态标签</h4> <p>HTML<code><meter></code>标签（meter：测量）用来显示已知范围的标量值或者分数值</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meter</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meter1<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">low</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>33<span class="token punctuation">"</span></span> <span class="token attr-name">high</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>66<span class="token punctuation">"</span></span> <span class="token attr-name">optimum</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>at 10/100<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>meter</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meter</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meter2<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">low</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>33<span class="token punctuation">"</span></span> <span class="token attr-name">high</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>66<span class="token punctuation">"</span></span> <span class="token attr-name">optimum</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>at 50/100<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>meter</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meter</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meter3<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">low</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>33<span class="token punctuation">"</span></span> <span class="token attr-name">high</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>66<span class="token punctuation">"</span></span> <span class="token attr-name">optimum</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>90<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>at 90/100<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>meter</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/5e7a9338cd0249c0bd46c33a85702b5d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5e7a9338cd0249c0bd46c33a85702b5d.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="650" height="68"></a></p> <h4>1.10.2 进度状态标签</h4> <p>HTML<code><progress></code>标签（progress：进度）用来显示一项任务的完成进度。通常情况下，该元素都显示为一个进度条形式</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>progress</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>70%<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>progress</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/dcac52ee632f4c4db51a46acf7f0240e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/dcac52ee632f4c4db51a46acf7f0240e.jpg" alt="玄子Share-HTML5知识手册_第18张图片" width="650" height="102" style="border:1px solid black;"></a></p> <blockquote> <p><code><progress></code>标签只有案例中这两个属性</p> </blockquote> <h4>1.10.3 状态标签属性</h4> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>value</code></td> <td>整数</td> <td>当前的数值。如果设置了最小值和最大值（分别由 min 属性和 max 属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为 0。如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值</td> </tr> <tr> <td><code>min</code></td> <td>整数</td> <td>值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为 0</td> </tr> <tr> <td><code>max</code></td> <td>整数</td> <td>值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为 1</td> </tr> <tr> <td><code>low</code></td> <td>整数</td> <td>定义了低值区间的上限值（译者注：如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在 [min,low]、[high,max] 等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过 high 值和最大值。未设置或者比最小值还要小时，其值即为最小值</td> </tr> <tr> <td><code>high</code></td> <td>整数</td> <td>定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值</td> </tr> <tr> <td><code>optimum</code></td> <td>整数</td> <td>这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围</td> </tr> </tbody> </table> <blockquote> <p>除非值域在 0 到 1（闭区间）, 否则最小值和最大值属性需要定义，以保证 value 属性在值域范围内。换言之，默认的 min 和 max 值分别为 0 和 1</p> </blockquote> <h4>1.10.4 状态标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><meter></code></td> <td>测量</td> <td>表示某个度量值或指标的测量结果</td> </tr> <tr> <td><code><progress></code></td> <td>进度条</td> <td>表示任务或操作的完成进度</td> </tr> </tbody> </table> <hr> <h3>1.11 HTML 内联框架</h3> <p>HTML<code><iframe></code>内联框架标签（iframe：内联框架）表示嵌套的浏览器内容。它能够将另一个 HTML 页面嵌入到当前页面中</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>01_网页基本标签.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iframe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点击跳转：网页基本标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>02_基础标签.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iframe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点击跳转：基础标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800px<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1500px<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.xuanzishare.com/<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iframe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 您的浏览器不支持iframe <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/504a23c103fc4ce3baac2a7e4d823562.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/504a23c103fc4ce3baac2a7e4d823562.jpg" alt="玄子Share-HTML5知识手册_第19张图片" width="650" height="260" style="border:1px solid black;"></a></p> <h4>1.11.1 内联框架属性</h4> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>页面地址<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>宽度<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>高度<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>名称<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> </code></pre> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>src</td> <td>URL 地址</td> <td>被嵌套资源的 URL 地址</td> </tr> <tr> <td>width</td> <td>嵌入页面的宽度</td> <td>以 CSS 像素格式，或以像素格式，或以百分比格式指定的 frame 的宽度。默认值是<code>300</code></td> </tr> <tr> <td>height</td> <td>嵌入页面的高度</td> <td>以 CSS 像素格式，或像素格式，或百分比格式指定 frame 的高度。默认值为<code>150</code></td> </tr> <tr> <td>name</td> <td>嵌入页面的名称</td> <td>用于定位嵌入的浏览上下文的名称，可以用作<code><a></code>标签的<code>target</code>属性值</td> </tr> </tbody> </table> <h4>1.11.2 内联框架语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><iframe></code></td> <td>内嵌框架</td> <td><code><iframe></code>标签用于嵌入另一个 HTML 页面或外部网页，创建一个内联框架，允许在当前页面中显示其他内容</td> </tr> </tbody> </table> <hr> <h3>1.12 HTML 结构标签</h3> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>示例页面<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav li</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav a</span> <span class="token punctuation">{</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">main</span> <span class="token punctuation">{</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">article</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f9f9f9<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">section</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f0f0f0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">aside</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">footer</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>网页标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>关于<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>联系我们<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>文章标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是一篇示例文章。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>区段标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是一个区段的内容。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>侧边栏<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是侧边栏的内容。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> <span class="token entity named-entity">©</span> 2023 示例公司 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/739b1793905144d1a36446c19f941a8b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/739b1793905144d1a36446c19f941a8b.jpg" alt="玄子Share-HTML5知识手册_第20张图片" width="650" height="305" style="border:1px solid black;"></a></p> <h4>1.12.1 结构标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><header></code></td> <td>头部</td> <td>定义文档或区段的页眉</td> </tr> <tr> <td><code><nav></code></td> <td>导航</td> <td>定义导航链接的部分</td> </tr> <tr> <td><code><main></code></td> <td>主要内容</td> <td>指定文档的主要内容区域</td> </tr> <tr> <td><code><article></code></td> <td>文章</td> <td>表示独立的文章或内容块</td> </tr> <tr> <td><code><section></code></td> <td>区段</td> <td>定义文档的一个区段或部分</td> </tr> <tr> <td><code><aside></code></td> <td>侧边栏</td> <td>表示与文档内容相关但可选的部分</td> </tr> <tr> <td><code><footer></code></td> <td>底部</td> <td>定义文档或区段的页脚</td> </tr> <tr> <td><code><div></code></td> <td>通用容器</td> <td>用于分组和样式化元素，没有特定语义</td> </tr> <tr> <td><code><span></code></td> <td>行内元素</td> <td>用于在文本内部添加行内样式和其他行内元素</td> </tr> </tbody> </table> <hr> <h3>1.13 HTML 表单标签</h3> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>表单标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">form</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 1800px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f7f7f7<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1, h2</span> <span class="token punctuation">{</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 20px auto<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ededed<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.container div</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 10px auto<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #e3e3e3<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">label</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.flex</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">enctype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multipart/form-data<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>玄子Share-表单标签功能演示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>input：输入框演示1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>文本输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入用户名<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>密码输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入密码<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>邮件输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入邮箱<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电话输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入电话号码<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>网址输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入网址<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>搜索输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入搜索关键词<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>日期时间输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>日期输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>月份输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>周输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>时间输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>颜色选择框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#007bff<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>input：输入框演示2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>单选框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nan<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>男<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>女<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>oth<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>其他<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>复选框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>唱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox2<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jump<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跳<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox3<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rap<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>rap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox4<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basketball<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>篮球<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>范围输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数字输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入数字<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>普通按钮：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>按钮<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提交按钮：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>重置按钮：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重置<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>图像按钮：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../../resources/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图像按钮<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 20px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>文件上传：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>隐藏字段：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>这是隐藏字段<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>select：下拉列表演示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>爱好：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>第一组<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>唱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jump<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>跳<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>第二组<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>rap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basketball<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>篮球<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>textarea：文本域演示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comments<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>留言：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comments<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comments<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请留下您的留言<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>button：按钮演示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>普通按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提交按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>重置按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/3f3370e3a7e640509bbf2d9f4d28258c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3f3370e3a7e640509bbf2d9f4d28258c.jpg" alt="玄子Share-HTML5知识手册_第21张图片" width="650" height="319" style="border:1px solid black;"></a></p> <h4>1.13.1 表单标签属性</h4> <p>HTML<code><form></code>标签（form：表单）表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url地址<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交方式<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>表单域名称<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- 表单元素控件 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>action</code></td> <td>处理表单提交的 URL</td> <td>可被<code><button></code>、<code><input type="submit"></code>或<code><input type="image"></code>元素上的<code>formaction</code>属性覆盖</td> </tr> <tr> <td><code>method</code></td> <td><code>post</code>：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器<br><code>get</code>：指的是 HTTP GET 方法；表单数据会附加在<code>action</code>属性的 URL 中，并以 ‘?’ 作为分隔符，没有附件时使用这个方法<br><code>dialog</code>：当表单在<code><dialog></code>中时，关闭对话框并在提交时触发<code>submit</code>事件，而不提交数据或清除表单（可被：formaction 覆盖）</td> <td>浏览器使用这种 HTTP 方式来提交表单<br></td> </tr> <tr> <td><code>enctype</code></td> <td><code>application/x-www-form-urlencoded</code>：未指定属性时的默认值<br><code>multipart/form-data</code>：当表单包含 <code>type=file</code> 的<code><input></code>元素时使用此值<br><code>text/plain</code>：出现于 HTML5，用于调试</td> <td>当<code>method</code>属性值为<code>post</code>时，<code>enctype</code>就是将表单的内容提交给服务器的 MIME 类型</td> </tr> <tr> <td><code>target</code></td> <td><code>_self</code>：默认值。在相同浏览上下文中加载<br><code>_blank</code>：在新的未命名的浏览上下文中加载<br><code>_parent</code>：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 <code>_self</code>表现一致<br><code>_top</code>：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与<code>_self</code>表现一致（可被：formaction 覆盖）</td> <td>表示在提交表单之后，在哪里显示响应信息</td> </tr> </tbody> </table> <h4>1.13.2 普通文本控件</h4> <p>单行的文本字段，输入值中的换行会被自动去除</p> <p>HTML<code><label></code>标签（label：标签）表示用户界面中某个元素的说明，<code>for</code>属性值为绑定控件<code>id</code>值，表现为点击<code><label></code>同时激活绑定控件</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>文本输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入文本<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/ebe7f4d5c34449139ce8a277448b82e3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ebe7f4d5c34449139ce8a277448b82e3.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="363" height="53"></a></p> <blockquote> <p><code>maxlength</code>：可以限制输入长度不能高于6</p> </blockquote> <h4>1.13.3 密码文本控件</h4> <p>单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>密码输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入密码<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/e97f6e98926b441fa5dafd11406ea458.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e97f6e98926b441fa5dafd11406ea458.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="477" height="98"></a></p> <blockquote> <p><code>minlength</code>：可以限制输入长度不能低于6</p> </blockquote> <h4>1.13.4 邮箱文本控件</h4> <p>编辑邮箱地址的字段。类似 <code>text</code> 输入，但在支持的浏览器和带有动态键盘的设备上会有验证参数和相应的键盘</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>邮件输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入邮箱<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xuanzi@qq.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/c74e6fc0b7074fe39c0bd2e4fa3f688a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c74e6fc0b7074fe39c0bd2e4fa3f688a.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="386" height="83"></a></p> <h4>1.13.5 电话文本控件</h4> <p>用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电话输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入电话号码<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0207<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/87765ded2cbc4bcfbab41bb7a86059a1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/87765ded2cbc4bcfbab41bb7a86059a1.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="362" height="69"></a></p> <h4>1.13.6 网址文本控件</h4> <p>用于输入 URL 的控件。类似<code>text</code>输入，但有验证参数，在支持动态键盘的设备上有相应的键盘</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>网址输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入网址<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.xuanzishare.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/67227904d773437ba30c010e03f7665f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/67227904d773437ba30c010e03f7665f.jpg" alt="玄子Share-HTML5知识手册_第22张图片" width="386" height="110" style="border:1px solid black;"></a></p> <h4>1.13.7 搜索文本控件</h4> <p>用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>搜索输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入搜索关键词<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/e2bbd913811343209cc5ef10defb2f4e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e2bbd913811343209cc5ef10defb2f4e.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="351" height="72"></a></p> <blockquote> <p>与普通<code>text</code>的区别表现在，文本框末尾有<code>x</code>可一键删除输入内容</p> </blockquote> <h4>1.13.8 单选按钮控件</h4> <p>单选按钮，允许在多个拥有相同<code>name</code>值的选项中选中其中一个</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 性别： <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">checked</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>na<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> 男 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nv<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> 女 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/5ee33629c1074ac5a727220425b3c6e6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5ee33629c1074ac5a727220425b3c6e6.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="179" height="50"></a></p> <blockquote> <p>要求<code>name</code>属性的值一致，提交选中项<code>value</code>值，<code>checked</code>属性表示默认选中</p> </blockquote> <h4>1.13.9 复选按钮控件</h4> <p>复选框，可将其值设为选中或未选中</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> 请选择你会的语言： <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">checked</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>language<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Chinese<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>中文<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">checked</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>language<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>English<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>英文<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>language<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Japanese<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>日文<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>language<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Espana<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>西班牙语<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/6838b26f03d34beab843d64e23b170e3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6838b26f03d34beab843d64e23b170e3.jpg" alt="玄子Share-HTML5知识手册_第23张图片" width="217" height="205" style="border:1px solid black;"></a></p> <blockquote> <p><code>checkbox</code>复选框的<code>name</code>属性如果一致，提交时会将选项合并为集合提交</p> </blockquote> <h4>1.13.10 功能按钮控件</h4> <p>HTML 中提供了多种按钮，用于处理不同场景下的点击事件</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>普通按钮<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交按钮<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重置按钮<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/image/玄子头像.png<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片按钮<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/a890dd8de91949c98b9b6bb699760b51.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a890dd8de91949c98b9b6bb699760b51.jpg" alt="玄子Share-HTML5知识手册_第24张图片" width="386" height="145" style="border:1px solid black;"></a></p> <p>HTML<code><button></code>标签（button：按钮）表示一个可点击的按钮</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>普通按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提交按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>重置按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/eb6b8188b10c43e69ec65e0894fc87e7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eb6b8188b10c43e69ec65e0894fc87e7.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="252" height="56"></a></p> <blockquote> <ul> <li> <p><code>button</code>：普通按钮，上面显示<code>value</code>属性的值，默认为空</p> </li> <li> <p><code>submit</code>：提交按钮，用于提交表单的按钮</p> </li> <li> <p><code>reset</code>：重置按钮：此按钮将表单的所有内容重置为默认值。不推荐使用该类型</p> </li> <li> <p><code>image</code>：图形化<code>submit</code>按钮。显示的图像由<code>src</code>属性决定。如果<code>src</code>属性缺失，就会显示<code>alt</code>的内容</p> </li> </ul> </blockquote> <h4>1.13.11 日期选择控件</h4> <p>输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>日期时间输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> </code></pre> <p>输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>日期输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> </code></pre> <p>输入年和月的控件，没有时区</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>月份输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> </code></pre> <p>用于输入以年和周数组成的日期，不带时区</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>周输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> </code></pre> <p>用于输入时间的控件，不包括时区</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>时间输入框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/9db33835f6294c888674aba72cff6d6b.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/9db33835f6294c888674aba72cff6d6b.png" alt="玄子Share-HTML5知识手册_第25张图片" width="411" height="269" style="border:1px solid black;"></a></p> <h4>1.13.12 颜色选择控件</h4> <p>用于指定颜色的控件，在支持的浏览器中，激活时会打开取色器</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>颜色选择框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#007bff<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/90b87e0f3b884009a25264b7ad3a00dc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/90b87e0f3b884009a25264b7ad3a00dc.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="427" height="62"></a></p> <h4>1.13.13 数字选择控件</h4> <p>用于输入数字的控件，如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。同时使用<code>min</code>，<code>max</code>，<code>step</code>来规定可接受值的范围，及步增值。拥有动态键盘的设备上会显示数字键盘。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数字滑块框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/ad590be244f2491fab96d752b0b8a94e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ad590be244f2491fab96d752b0b8a94e.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="429" height="55"></a></p> <h4>1.13.14 数字滑块控件</h4> <p>此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用<code>min</code>，<code>max</code>，<code>step</code>来规定可接受值的范围，及步增值</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数字选择框：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入数字<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/e25151cf8c9e4a9caa5cb2790143edc7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e25151cf8c9e4a9caa5cb2790143edc7.jpg" alt="外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传" width="426" height="60"></a></p> <h4>1.13.15 文件上传控件</h4> <p>让用户选择文件的控件。使用<code>accept</code>属性规定控件能选择的文件类型</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>文件上传：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/b9420f4502ca422da7e089db41ee184d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b9420f4502ca422da7e089db41ee184d.jpg" alt="玄子Share-HTML5知识手册_第26张图片" width="650" height="262" style="border:1px solid black;"></a></p> <blockquote> <p><code>accept</code>属性限制上传文件类型，若要上传文件<code><fomr></code>标签提交方式需要为<code>post</code>并添加属性<code>enctype="multipart/form-data"</code></p> </blockquote> <h4>1.13.16 隐藏文本控件</h4> <p>不显示的控件，其值仍会提交到服务器</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>隐藏字段：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>这是隐藏字段<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/6f3125287b854389b6d027ba6b042c36.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6f3125287b854389b6d027ba6b042c36.jpg" alt="玄子Share-HTML5知识手册_第27张图片" width="650" height="199" style="border:1px solid black;"></a></p> <h4>1.13.17 下拉列表控件</h4> <ul> <li>HTML<code><select></code>标签（select：选择）表示一个提供选项菜单的控件</li> <li>HTML<code><optgroup></code> 标签（option group：选项组）为<code><select></code>标签中的选项创建分组</li> <li>HTML<code><option></code>标签（option：选项）用于定义在<code><select></code>,<code><optgroup></code>或<code><datalist></code>标签中包含的项</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>第一组<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>唱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jump<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>跳<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>第二组<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>rap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basketball<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>篮球<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/5cf73c47acc04f0a9b28826c018d4c6d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5cf73c47acc04f0a9b28826c018d4c6d.jpg" alt="玄子Share-HTML5知识手册_第28张图片" width="281" height="171" style="border:1px solid black;"></a></p> <p>HTML<code><datalist></code>标签（datalist：数据列表）包含了一组<code><option></code>标签，这些元素表示其他表单控件可选值</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数据列表：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbiesList<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbies<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbiesList<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>唱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jump<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>跳<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>rap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basketball<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>篮球<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/4a6504f626bd481ca209c6ab4a61363c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4a6504f626bd481ca209c6ab4a61363c.jpg" alt="玄子Share-HTML5知识手册_第29张图片" width="376" height="258" style="border:1px solid black;"></a></p> <blockquote> <p><code><input></code>标签的<code>list</code>属性表示数据来源，值为<code><datalist></code>标签<code>id</code>值</p> </blockquote> <h4>1.13.18 多行文本控件</h4> <p>HTML<code><textarea></code>标签（textarea：文本区域）表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comments<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>留言：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comments<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comments<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请留下您的留言<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/abd97a5b3bf04fb0ba51d14cd85a3e43.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/abd97a5b3bf04fb0ba51d14cd85a3e43.jpg" alt="玄子Share-HTML5知识手册_第30张图片" width="361" height="121" style="border:1px solid black;"></a></p> <blockquote> <ul> <li><code>rows</code>元素的输入文本的行数（显示的高度）</li> <li><code>cols</code>文本域的可视宽度。必须为正数，默认为 20 (HTML5)</li> <li><code>spellcheck</code>布尔值<code>true</code>表明该元素会做拼写和语法检查</li> <li>禁止拉伸文本框大小，设置：<code>style="resize: none;"</code></li> </ul> </blockquote> <h4>1.13.19 表单控件属性</h4> <table> <thead> <tr> <th align="left">属性</th> <th align="left">类型</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td align="left"><code>accept</code></td> <td align="left"><code>file</code></td> <td align="left">文件上传控件中预期文件类型的提示</td> </tr> <tr> <td align="left"><code>alt</code></td> <td align="left"><code>image</code></td> <td align="left">图片类型的 alt 属性。对无障碍是必需的</td> </tr> <tr> <td align="left"><code>autocomplete</code></td> <td align="left">除了<code>checkbox</code>、<code>radio</code>和按钮以外</td> <td align="left">表单自动填充特性提示</td> </tr> <tr> <td align="left"><code>capture</code></td> <td align="left"><code>file</code></td> <td align="left">文件上传控件中媒体捕获方法的提示</td> </tr> <tr> <td align="left"><code>checked</code></td> <td align="left"><code>checkbox</code>、<code>radio</code></td> <td align="left">控件是否选中</td> </tr> <tr> <td align="left"><code>dirname</code></td> <td align="left"><code>search</code>、<code>text</code></td> <td align="left">表单字段的名称，用于在提交表单时发送元素的方向性</td> </tr> <tr> <td align="left"><code>disabled</code></td> <td align="left">所有类型</td> <td align="left">表单控件是否禁用</td> </tr> <tr> <td align="left"><code>form</code></td> <td align="left">所有类型</td> <td align="left">将控件联系到表单元素中</td> </tr> <tr> <td align="left"><code>formaction</code></td> <td align="left"><code>image</code>、<code>submit</code></td> <td align="left">要提交表单的 URL 地址</td> </tr> <tr> <td align="left"><code>formenctype</code></td> <td align="left"><code>image</code>、<code>submit</code></td> <td align="left">提交表单时使用的表单数据编码类型</td> </tr> <tr> <td align="left"><code>formmethod</code></td> <td align="left"><code>image</code>、<code>submit</code></td> <td align="left">提交表单时所使用的 HTTP 方法</td> </tr> <tr> <td align="left"><code>formnovalidate</code></td> <td align="left"><code>image</code>、<code>submit</code></td> <td align="left">绕过表单提交时的表单控件验证</td> </tr> <tr> <td align="left"><code>formtarget</code></td> <td align="left"><code>image</code>、<code>submit</code></td> <td align="left">提交表单时的浏览上下文</td> </tr> <tr> <td align="left"><code>height</code></td> <td align="left"><code>image</code></td> <td align="left">与<code><img ></code>元素的 height 属性有相同含义，垂直方向上的维度值</td> </tr> <tr> <td align="left"><code>list</code></td> <td align="left">除了<code>hidden</code>、<code>password</code>、<code>checkbox</code>、<code>radio</code>和按钮以外</td> <td align="left">自动完成选项的<code><datalist></code>的 id 属性的值</td> </tr> <tr> <td align="left"><code>max</code></td> <td align="left"><code>date</code>、<code>month</code>、<code>week</code>、<code>time</code>、<code>datetime-local</code>、<code>number</code>、<code>range</code></td> <td align="left">最大值</td> </tr> <tr> <td align="left"><code>maxlength</code></td> <td align="left"><code>text</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code>、<code>password</code></td> <td align="left"><code>value</code>的最大长度（字符数）</td> </tr> <tr> <td align="left"><code>min</code></td> <td align="left"><code>date</code>、<code>month</code>、<code>week</code>、<code>time</code>、<code>datetime-local</code>、<code>number</code>、<code>range</code></td> <td align="left">最小值</td> </tr> <tr> <td align="left"><code>minlength</code></td> <td align="left"><code>text</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code>、<code>password</code></td> <td align="left"><code>value</code>的最小长度（字符数）</td> </tr> <tr> <td align="left"><code>multiple</code></td> <td align="left"><code>email</code>、<code>file</code></td> <td align="left">布尔值。是否允许多个值</td> </tr> <tr> <td align="left"><code>name</code></td> <td align="left">所有类型</td> <td align="left">表单的控件名称，作为键值对的一部分与表单一同提交</td> </tr> <tr> <td align="left"><code>pattern</code></td> <td align="left"><code>text</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code>、<code>password</code></td> <td align="left">为了使得<code>value</code>有效，必须符合的模式</td> </tr> <tr> <td align="left"><code>placeholder</code></td> <td align="left"><code>text</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code>、<code>password</code>、<code>number</code></td> <td align="left">当没有值设定时，出现在表单控件上的文字</td> </tr> <tr> <td align="left"><code>readonly</code></td> <td align="left">除了<code>hidden</code>、<code>range</code>、<code>color</code>、<code>checkbox</code>、<code>radio</code> 和按钮以外</td> <td align="left">布尔值。如果存在，其中的值将不可编辑。</td> </tr> <tr> <td align="left"><code>required</code></td> <td align="left">除了<code>hidden</code>、<code>range</code>、<code>color</code>和按钮以外</td> <td align="left">布尔值。如果存在，一个值是必需的，或者必须勾选该值才能提交表格。</td> </tr> <tr> <td align="left"><code>size</code></td> <td align="left"><code>text</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code>、<code>password</code></td> <td align="left">控件的尺寸</td> </tr> <tr> <td align="left"><code>src</code></td> <td align="left"><code>image</code></td> <td align="left">与<code><img></code>标签<code>src</code>属性含义相同，图片资源的地址</td> </tr> <tr> <td align="left"><code>step</code></td> <td align="left"><code>date</code>、<code>month</code>、<code>week</code>、<code>time</code>、<code>datetime-local</code>、<code>number</code>、<code>range</code></td> <td align="left">有效的增量值</td> </tr> <tr> <td align="left"><code>type</code></td> <td align="left">所有类型</td> <td align="left">表单控件的类型</td> </tr> <tr> <td align="left"><code>value</code></td> <td align="left">所有类型</td> <td align="left">表单控件的初始值</td> </tr> <tr> <td align="left"><code>width</code></td> <td align="left"><code>image</code></td> <td align="left">与<code><img></code>标签<code>width</code>属性含义相同</td> </tr> </tbody> </table> <h4>1.13.20 表单标签语义</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><input></code></td> <td>输入框</td> <td>用于输入文本、密码、电子邮件、电话号码、URL、日期等信息</td> </tr> <tr> <td><code><input type="text"></code></td> <td>文本输入框</td> <td>用于输入一行文本</td> </tr> <tr> <td><code><input type="password"></code></td> <td>密码输入框</td> <td>用于输入密码，输入的内容会被隐藏</td> </tr> <tr> <td><code><input type="email"></code></td> <td>电子邮件输入框</td> <td>用于输入电子邮件地址</td> </tr> <tr> <td><code><input type="tel"></code></td> <td>电话输入框</td> <td>用于输入电话号码</td> </tr> <tr> <td><code><input type="url"></code></td> <td>网址输入框</td> <td>用于输入网址</td> </tr> <tr> <td><code><input type="search"></code></td> <td>搜索输入框</td> <td>用于输入搜索关键词</td> </tr> <tr> <td><code><input type="datetime-local"></code></td> <td>日期时间输入框</td> <td>用于选择日期和时间</td> </tr> <tr> <td><code><input type="date"></code></td> <td>日期输入框</td> <td>用于选择日期</td> </tr> <tr> <td><code><input type="month"></code></td> <td>月份输入框</td> <td>用于选择月份</td> </tr> <tr> <td><code><input type="week"></code></td> <td>周输入框</td> <td>用于选择周</td> </tr> <tr> <td><code><input type="time"></code></td> <td>时间输入框</td> <td>用于选择时间</td> </tr> <tr> <td><code><input type="color"></code></td> <td>颜色选择框</td> <td>用于选择颜色</td> </tr> <tr> <td><code><input type="radio"></code></td> <td>单选框</td> <td>用于选择一个选项</td> </tr> <tr> <td><code><input type="checkbox"></code></td> <td>复选框</td> <td>用于选择多个选项</td> </tr> <tr> <td><code><input type="range"></code></td> <td>数字滑块框</td> <td>用于选择一个数值范围</td> </tr> <tr> <td><code><input type="number"></code></td> <td>数字选择框</td> <td>用于输入数字</td> </tr> <tr> <td><code><input type="button"></code></td> <td>普通按钮</td> <td>用于触发 JavaScript 函数</td> </tr> <tr> <td><code><input type="submit"></code></td> <td>提交按钮</td> <td>用于提交表单数据</td> </tr> <tr> <td><code><input type="reset"></code></td> <td>重置按钮</td> <td>用于重置表单数据为默认值</td> </tr> <tr> <td><code><input type="image"></code></td> <td>图像按钮</td> <td>用于提交表单，并显示一个图像作为按钮</td> </tr> <tr> <td><code><input type="file"></code></td> <td>文件上传</td> <td>用于上传文件</td> </tr> <tr> <td><code><input type="hidden"></code></td> <td>隐藏字段</td> <td>用于存储不可见的数据</td> </tr> <tr> <td><code><label></code></td> <td>表单标签</td> <td>为表单元素创建标签，增加表单元素的可用性和可访问性</td> </tr> <tr> <td><code><button></code></td> <td>按钮</td> <td>创建一个按钮，用于触发 JavaScript 函数或提交表单</td> </tr> <tr> <td><code><button type="button"></code></td> <td>普通按钮</td> <td>创建一个普通按钮，用于触发 JavaScript 函数</td> </tr> <tr> <td><code><button type="submit"></code></td> <td>提交按钮</td> <td>创建一个提交按钮，用于提交表单数据</td> </tr> <tr> <td><code><button type="reset"></code></td> <td>重置按钮</td> <td>创建一个重置按钮，用于将表单数据重置为默认值</td> </tr> <tr> <td><code><select></code></td> <td>下拉列表</td> <td>创建一个下拉选项列表，用户可以从中选择一个选项</td> </tr> <tr> <td><code><optgroup></code></td> <td>选项组</td> <td>创建一个选择列表中的选项组，通常包含一组相关的<code><option></code>元素。具有<code>label</code>属性，用于描述组的内容</td> </tr> <tr> <td><code><option></code></td> <td>选项</td> <td>用于在<code><select></code>元素中创建一个选项</td> </tr> <tr> <td><code><textarea></code></td> <td>文本域</td> <td>允许用户输入多行文本，通常用于留言、评论等多行文本输入</td> </tr> </tbody> </table> <hr> <h3>1.14 HTML 标签速览</h3> <p>HTML5 引入了一些新的语义化标签，这些标签更好地描述了网页的结构和内容，有助于提升页面的可读性、可访问性和搜索引擎优化。</p> <h4>1.14.1 结构标签</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><!DOCTYPE html></code></td> <td>文档类型声明</td> <td>告诉浏览器使用规范为<code>HTML</code></td> </tr> <tr> <td><code><html></code></td> <td>网页标签</td> <td>标签位于 HTML 文档的最前面，用于标识 HTML 文档的开始和结尾</td> </tr> <tr> <td><code><head></code></td> <td>头部标签</td> <td>用于定义 HTML 文档的头部，描述文档属性，包含一些辅助标签例如<code><title>、<link>、<script></code></td> </tr> <tr> <td><code><title></code></td> <td>网页标题</td> <td>用来定义网页的标题名称</td> </tr> <tr> <td><code><link></code></td> <td>外部资源链接</td> <td>引用外部样式表、图标等</td> </tr> <tr> <td><code><style></code></td> <td>内部样式表</td> <td>包含文档的内部样式规则</td> </tr> <tr> <td><code><script></code></td> <td>JavaScript脚本</td> <td>包含JavaScript代码</td> </tr> <tr> <td><code><meta></code></td> <td>描述性标签</td> <td>一般用来做 SEO</td> </tr> <tr> <td><code><body></code></td> <td>主体标题</td> <td>用于定义 HTML 文档的主体内容</td> </tr> <tr> <td><code><header></code></td> <td>头部</td> <td>定义文档或区段的页眉</td> </tr> <tr> <td><code><nav></code></td> <td>导航</td> <td>定义导航链接的部分</td> </tr> <tr> <td><code><main></code></td> <td>主要内容</td> <td>指定文档的主要内容区域</td> </tr> <tr> <td><code><article></code></td> <td>文章</td> <td>表示独立的文章或内容块</td> </tr> <tr> <td><code><section></code></td> <td>区段</td> <td>定义文档的一个区段或部分</td> </tr> <tr> <td><code><aside></code></td> <td>侧边栏</td> <td>表示与文档内容相关但可选的部分</td> </tr> <tr> <td><code><footer></code></td> <td>底部</td> <td>定义文档或区段的页脚</td> </tr> <tr> <td><code><div></code></td> <td>通用容器</td> <td>用于分组和样式化元素，没有特定语义</td> </tr> <tr> <td><code><span></code></td> <td>行内元素</td> <td>用于在文本内部添加行内样式和其他行内元素</td> </tr> <tr> <td><code><ul></code></td> <td>无序列表</td> <td>用于创建一个无序列表，其中每个列表项都由一个圆点符号标</td> </tr> <tr> <td><code><ol></code></td> <td>有序列表</td> <td>用于创建一个有序列表，其中每个列表项都由一个数字或字母标识</td> </tr> <tr> <td><code><li></code></td> <td>列表项</td> <td>用于定义列表中的一个列表项</td> </tr> <tr> <td><code><dl></code></td> <td>定义列表</td> <td>用于创建一个定义列表，其中每个列表项由一个术语和一个定义组成</td> </tr> <tr> <td><code><dt></code></td> <td>定义术语</td> <td>用于定义定义列表中的一个术语</td> </tr> <tr> <td><code><dd></code></td> <td>定义描述</td> <td>用于定义定义列表中术语的定义</td> </tr> <tr> <td><code><details></code></td> <td>可折叠内容</td> <td>用于创建一个可折叠的区域，其中包含详细信息</td> </tr> <tr> <td><code><summary></code></td> <td>折叠摘要</td> <td>用于定义<code><details></code>元素的摘要或标题</td> </tr> <tr> <td><code><table></code></td> <td>表格</td> <td>用于创建表格的容器</td> </tr> <tr> <td><code><caption></code></td> <td>表格标题</td> <td>用于为表格提供标题</td> </tr> <tr> <td><code><thead></code></td> <td>表格头</td> <td>用于组织表格中的表头行（包含表格的列标题）</td> </tr> <tr> <td><code><tbody></code></td> <td>表格体</td> <td>用于组织表格中的主体内容，通常包括多个数据行</td> </tr> <tr> <td><code><tfoot></code></td> <td>表格尾</td> <td>用于组织表格中的页脚内容，通常包括汇总行或其他与表格整体相关的信息</td> </tr> <tr> <td><code><tr></code></td> <td>表格行</td> <td>表示表格中的一行数据</td> </tr> <tr> <td><code><th></code></td> <td>表格头单元格</td> <td>表示表格中的表头单元格，通常包含列标题</td> </tr> <tr> <td><code><td></code></td> <td>表格数据单元格</td> <td>表示表格中的数据单元格，包含实际的数据内容</td> </tr> </tbody> </table> <h4>1.14.2 文本标签</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><h1></code>-<code><h6></code></td> <td>标题</td> <td>定义不同级别的标题，<code><h1></code>为最高级别，依次递减</td> </tr> <tr> <td><code><p></code></td> <td>段落</td> <td>定义一个段落</td> </tr> <tr> <td><code><br/></code></td> <td>换行符</td> <td>在文本中插入一个换行符</td> </tr> <tr> <td><code><hr/></code></td> <td>水平线</td> <td>在文档中插入一条水平分隔线</td> </tr> <tr> <td><code><em></code></td> <td>斜体</td> <td>表示文本的强调，通常以斜体显示</td> </tr> <tr> <td><code><i></code></td> <td>斜体</td> <td>表示文本的斜体样式</td> </tr> <tr> <td><code><strong></code></td> <td>粗体</td> <td>表示文本的强调，通常以粗体显示</td> </tr> <tr> <td><code><b></code></td> <td>粗体</td> <td>表示文本的粗体样式</td> </tr> <tr> <td><code><mark></code></td> <td>高亮</td> <td>表示文本的高亮显示</td> </tr> <tr> <td><code><u></code></td> <td>下划线</td> <td>给文本添加下划线（已被废弃，不推荐使用）</td> </tr> <tr> <td><code><s></code></td> <td>删除线</td> <td>表示删除的文本，通常以删除线显示（已被废弃，不推荐使用）</td> </tr> <tr> <td><code><strike></code></td> <td>删除线</td> <td>表示删除的文本，通常以删除线显示（已被废弃，不推荐使用）</td> </tr> <tr> <td><code><ins></code></td> <td>下划线</td> <td>表示插入的文本</td> </tr> <tr> <td><code><del></code></td> <td>删除线</td> <td>表示删除的文本</td> </tr> <tr> <td><code><code></code></td> <td>行内代码</td> <td>表示行内的计算机代码</td> </tr> <tr> <td><code><samp></code></td> <td>代码示例</td> <td>表示代码的示例</td> </tr> <tr> <td><code><small></code></td> <td>小号字体</td> <td>将文字显示为小号字体</td> </tr> <tr> <td><code><big></code></td> <td>大号字体</td> <td>将文字显示为大号字体</td> </tr> <tr> <td><code><cite></code></td> <td>引用标题</td> <td>表示引用或作品的标题</td> </tr> <tr> <td><code><q></code></td> <td>短引用</td> <td>表示短的引用</td> </tr> <tr> <td><code><ruby></code></td> <td>注音标注</td> <td>用于显示拼音或其他注音标记</td> </tr> <tr> <td><code><rt></code></td> <td>注音解释</td> <td>用于显示拼音或其他注音的解释</td> </tr> <tr> <td><code><abbr></code></td> <td>缩写</td> <td>表示缩写词或缩略词</td> </tr> <tr> <td><code><dfn></code></td> <td>定义</td> <td>表示一个术语或定义</td> </tr> <tr> <td><code><kbd></code></td> <td>键盘样式</td> <td>表示键盘输入</td> </tr> <tr> <td><code><var></code></td> <td>变量</td> <td>表示变量或占位符</td> </tr> <tr> <td><code><sup></code></td> <td>上标</td> <td>将文本显示为上标</td> </tr> <tr> <td><code><sub></code></td> <td>下标</td> <td>将文本显示为下标</td> </tr> <tr> <td><code><math></code></td> <td>数学公式</td> <td>用于显示数学公式</td> </tr> <tr> <td><code><!-- --></code></td> <td>注释</td> <td>在HTML中插入注释，不会在页面上显示</td> </tr> </tbody> </table> <h4>1.14.3 功能标签</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><img/></code></td> <td>图像标签</td> <td>定义一个图片，需要指定图片的 URL、大小、描述等信息</td> </tr> <tr> <td><code><picture></code></td> <td>图像资源</td> <td>为不同的显示/设备场景提供图像版本</td> </tr> <tr> <td><code><a></code></td> <td>锚点链接</td> <td>定义一个超链接，可以链接到其他网页、文件、位置等</td> </tr> <tr> <td><code><video></code></td> <td>视频</td> <td>定义一个视频，通常用于播放电影、短片等</td> </tr> <tr> <td><code><audio></code></td> <td>音频</td> <td>定义一个音频，通常用于播放音乐、声音等</td> </tr> <tr> <td><code><source></code></td> <td>媒体源</td> <td>定义媒体元素的一个或多个媒体资源，通常用于指定不同格式、不同分辨率的媒体文件</td> </tr> <tr> <td><code><object></code></td> <td>通用元素</td> <td>用于在HTML页面中嵌入各种外部资源</td> </tr> <tr> <td><code><meter></code></td> <td>测量</td> <td>表示某个度量值或指标的测量结果</td> </tr> <tr> <td><code><progress></code></td> <td>进度条</td> <td>表示任务或操作的完成进度</td> </tr> <tr> <td><code><iframe></code></td> <td>内嵌框架</td> <td><code><iframe></code>标签用于嵌入另一个 HTML 页面或外部网页，创建一个内联框架，允许在当前页面中显示其他内容</td> </tr> </tbody> </table> <h4>1.14.4 表单标签</h4> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><input></code></td> <td>输入框</td> <td>用于输入文本、密码、电子邮件、电话号码、URL、日期等信息</td> </tr> <tr> <td><code><input type="text"></code></td> <td>文本输入框</td> <td>用于输入一行文本</td> </tr> <tr> <td><code><input type="password"></code></td> <td>密码输入框</td> <td>用于输入密码，输入的内容会被隐藏</td> </tr> <tr> <td><code><input type="email"></code></td> <td>电子邮件输入框</td> <td>用于输入电子邮件地址</td> </tr> <tr> <td><code><input type="tel"></code></td> <td>电话输入框</td> <td>用于输入电话号码</td> </tr> <tr> <td><code><input type="url"></code></td> <td>网址输入框</td> <td>用于输入网址</td> </tr> <tr> <td><code><input type="search"></code></td> <td>搜索输入框</td> <td>用于输入搜索关键词</td> </tr> <tr> <td><code><input type="datetime-local"></code></td> <td>日期时间输入框</td> <td>用于选择日期和时间</td> </tr> <tr> <td><code><input type="date"></code></td> <td>日期输入框</td> <td>用于选择日期</td> </tr> <tr> <td><code><input type="month"></code></td> <td>月份输入框</td> <td>用于选择月份</td> </tr> <tr> <td><code><input type="week"></code></td> <td>周输入框</td> <td>用于选择周</td> </tr> <tr> <td><code><input type="time"></code></td> <td>时间输入框</td> <td>用于选择时间</td> </tr> <tr> <td><code><input type="color"></code></td> <td>颜色选择框</td> <td>用于选择颜色</td> </tr> <tr> <td><code><input type="radio"></code></td> <td>单选框</td> <td>用于选择一个选项</td> </tr> <tr> <td><code><input type="checkbox"></code></td> <td>复选框</td> <td>用于选择多个选项</td> </tr> <tr> <td><code><input type="range"></code></td> <td>数字滑块框</td> <td>用于选择一个数值范围</td> </tr> <tr> <td><code><input type="number"></code></td> <td>数字选择框</td> <td>用于输入数字</td> </tr> <tr> <td><code><input type="button"></code></td> <td>普通按钮</td> <td>用于触发 JavaScript 函数</td> </tr> <tr> <td><code><input type="submit"></code></td> <td>提交按钮</td> <td>用于提交表单数据</td> </tr> <tr> <td><code><input type="reset"></code></td> <td>重置按钮</td> <td>用于重置表单数据为默认值</td> </tr> <tr> <td><code><input type="image"></code></td> <td>图像按钮</td> <td>用于提交表单，并显示一个图像作为按钮</td> </tr> <tr> <td><code><input type="file"></code></td> <td>文件上传</td> <td>用于上传文件</td> </tr> <tr> <td><code><input type="hidden"></code></td> <td>隐藏字段</td> <td>用于存储不可见的数据</td> </tr> <tr> <td><code><label></code></td> <td>表单标签</td> <td>为表单元素创建标签，增加表单元素的可用性和可访问性</td> </tr> <tr> <td><code><button></code></td> <td>按钮</td> <td>创建一个按钮，用于触发 JavaScript 函数或提交表单</td> </tr> <tr> <td><code><button type="button"></code></td> <td>普通按钮</td> <td>创建一个普通按钮，用于触发 JavaScript 函数</td> </tr> <tr> <td><code><button type="submit"></code></td> <td>提交按钮</td> <td>创建一个提交按钮，用于提交表单数据</td> </tr> <tr> <td><code><button type="reset"></code></td> <td>重置按钮</td> <td>创建一个重置按钮，用于将表单数据重置为默认值</td> </tr> <tr> <td><code><select></code></td> <td>下拉列表</td> <td>创建一个下拉选项列表，用户可以从中选择一个选项</td> </tr> <tr> <td><code><optgroup></code></td> <td>选项组</td> <td>创建一个选择列表中的选项组，通常包含一组相关的<code><option></code>元素。具有<code>label</code>属性，用于描述组的内容</td> </tr> <tr> <td><code><option></code></td> <td>选项</td> <td>用于在<code><select></code>元素中创建一个选项</td> </tr> <tr> <td><code><textarea></code></td> <td>文本域</td> <td>允许用户输入多行文本，通常用于留言、评论等多行文本输入</td> </tr> </tbody> </table> <h4>1.14.5 玄子Share</h4> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>HTML总结<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://blog.csdn.net/qq_62283694<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点击跳转CSDN博客<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>玄子Share-CSDN博客首页 https://blog.csdn.net/qq_62283694</p> </blockquote> <hr> <blockquote> <p>玄子Share-HTML5知识手册 2023-10-11</p> </blockquote> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1722833971001241600"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(一篇文章入门编程系列(后端,+,前端,+,数据库,+,框架),html5,前端,html)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835509390879322112.htm" title="扫地机类清洁产品之直流无刷电机控制" target="_blank">扫地机类清洁产品之直流无刷电机控制</a> <span class="text-muted">悟空胆好小</span> <a class="tag" taget="_blank" href="/search/%E6%B8%85%E6%B4%81%E6%9C%8D%E5%8A%A1%E6%9C%BA%E5%99%A8%E4%BA%BA/1.htm">清洁服务机器人</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/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续</div> </li> <li><a href="/article/1835509391361667072.htm" title="Linux下QT开发的动态库界面弹出操作（SDL2）" target="_blank">Linux下QT开发的动态库界面弹出操作（SDL2）</a> <span class="text-muted">13jjyao</span> <a class="tag" taget="_blank" href="/search/QT%E7%B1%BB/1.htm">QT类</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/sdl2/1.htm">sdl2</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口</div> </li> <li><a href="/article/1835508630959517696.htm" title="向内而求" target="_blank">向内而求</a> <span class="text-muted">陈陈_19b4</span> <div>10月27日，阴。阅读书目:《次第花开》。作者:希阿荣博堪布，是当今藏传佛家宁玛派最伟大的上师法王，如意宝晋美彭措仁波切颇具影响力的弟子之一。多年以来，赴海内外各地弘扬佛法，以正式授课、现场开示、发表文章等多种方法指导佛学弟子修行佛法。代表作《寂静之道》、《生命这出戏》、《透过佛法看世界》自出版以来一直是佛教类书籍中的畅销书。图片发自App金句:1.佛陀说，一切痛苦的根源在于我们长期以来对自身及外</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835508123746529280.htm" title="那个抄袭的大张伟" target="_blank">那个抄袭的大张伟</a> <span class="text-muted">猫小努</span> <div>最近一直在追《即刻电音》这个综艺，除了觉得出场节目的音乐制作人有意思之外，也觉得有两个导师挺有趣的（另外一个就忽略了吧）。孙艺兴在上一篇文章里面已经说过了，那么这篇就说说我们的大老师，大张伟吧。其实在节目刚开始大张伟出来的时候，我以为他是属于导师里面来活跃气氛负责搞笑的，毕竟孙艺兴属于卖萌卖傻卖老实的，尚雯婕一般负责装逼耍狠的，而大张伟一贯以来上综艺的形象基本上都是蹦蹦跳跳带动气氛的。谁知道，两期</div> </li> <li><a href="/article/1835507248395284480.htm" title="【一起学Rust \| 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数" target="_blank">【一起学Rust \| 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数</a> <span class="text-muted">广龙宇</span> <a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%B5%B7%E5%AD%A6Rust/1.htm">一起学Rust</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Rust%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">Rust设计模式</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分</div> </li> <li><a href="/article/1835505606245576704.htm" title="Python中os.environ基本介绍及使用方法" target="_blank">Python中os.environ基本介绍及使用方法</a> <span class="text-muted">鹤冲天Pro</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi</div> </li> <li><a href="/article/1835504723210366976.htm" title="第四天旅游线路预览——从换乘中心到喀纳斯湖" target="_blank">第四天旅游线路预览——从换乘中心到喀纳斯湖</a> <span class="text-muted">陟彼高冈yu</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E4%BA%8EGoogle/1.htm">基于Google</a><a class="tag" taget="_blank" href="/search/earth/1.htm">earth</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/%E7%9A%84%E6%97%85%E6%B8%B8%E8%A7%84%E5%88%92%E5%92%8C%E9%A2%84%E8%A7%88/1.htm">的旅游规划和预览</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>第四天：从贾登峪到喀纳斯风景区入口，晚上住宿贾登峪；换乘中心有4路车，喀纳斯①号车，去喀纳斯湖，路程时长约5分钟；将上面的的行程安排进行动态展示，具体步骤见”Googleearthstudio进行动态轨迹显示制作过程“、“Googleearthstudio入门教程”和“Googleearthstudio进阶教程“相关内容，得到行程如下所示：Day4-2-480p</div> </li> <li><a href="/article/1835504218178416640.htm" title="Google earth studio 简介" target="_blank">Google earth studio 简介</a> <span class="text-muted">陟彼高冈yu</span> <a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G</div> </li> <li><a href="/article/1835503712899002368.htm" title="linux中sdl的使用教程,sdl使用入门" target="_blank">linux中sdl的使用教程,sdl使用入门</a> <span class="text-muted">Melissa Corvinus</span> <a class="tag" taget="_blank" href="/search/linux%E4%B8%ADsdl%E7%9A%84%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B/1.htm">linux中sdl的使用教程</a> <div>本文通过一个简单示例讲解SDL的基本使用流程。示例中展示一个窗口，窗口里面有个随机颜色快随机移动。当我们鼠标点击关闭按钮时间窗口关闭。基本步骤如下：1.初始化SDL并创建一个窗口。SDL_Init()初始化SDL_CreateWindow()创建窗口2.纹理渲染存储RGB和存储纹理的区别：比如一个从左到右由红色渐变到蓝色的矩形，用存储RGB的话就需要把矩形中每个点的具体颜色值存储下来；而纹理只是一</div> </li> <li><a href="/article/1835502451877310464.htm" title="基于社交网络算法优化的二维最大熵图像分割" target="_blank">基于社交网络算法优化的二维最大熵图像分割</a> <span class="text-muted">智能算法研学社（Jack旭）</span> <a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E4%BC%98%E5%8C%96%E7%AE%97%E6%B3%95%E5%BA%94%E7%94%A8/1.htm">智能优化算法应用</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E5%83%8F%E5%88%86%E5%89%B2/1.htm">图像分割</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt</div> </li> <li><a href="/article/1835501948011376640.htm" title="使用 FinalShell 进行远程连接（ssh 远程连接 Linux 服务器）" target="_blank">使用 FinalShell 进行远程连接（ssh 远程连接 Linux 服务器）</a> <span class="text-muted">编程经验分享</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/1.htm">开发工具</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>目录前言基本使用教程新建远程连接连接主机自定义命令路由追踪前言后端开发，必然需要和服务器打交道，部署应用，排查问题，查看运行日志等等。一般服务器都是集中部署在机房中，也有一些直接是云服务器，总而言之，程序员不可能直接和服务器直接操作，一般都是通过ssh连接来登录服务器。刚接触远程连接时，使用的是XSHELL来远程连接服务器，连接上就能够操作远程服务器了，但是仅用XSHELL并没有上传下载文件的功能</div> </li> <li><a href="/article/1835501821569888256.htm" title="关于提高复杂业务逻辑代码可读性的思考" target="_blank">关于提高复杂业务逻辑代码可读性的思考</a> <span class="text-muted">编程经验分享</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E7%BB%8F%E9%AA%8C/1.htm">开发经验</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一</div> </li> <li><a href="/article/1835501774031646720.htm" title="18-115 一切思考不能有效转化为行动，都TM是扯淡！" target="_blank">18-115 一切思考不能有效转化为行动，都TM是扯淡！</a> <span class="text-muted">成长时间线</span> <div>7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的</div> </li> <li><a href="/article/1835499681732456448.htm" title="SQL Server_查询某一数据库中的所有表的内容" target="_blank">SQL Server_查询某一数据库中的所有表的内容</a> <span class="text-muted">qq_42772833</span> <a class="tag" taget="_blank" href="/search/SQL/1.htm">SQL</a><a class="tag" taget="_blank" href="/search/Server/1.htm">Server</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> <div>1.查看所有表的表名要列出CrabFarmDB数据库中的所有表（名），可以使用以下SQL语句：USECrabFarmDB;--切换到目标数据库GOSELECTTABLE_NAMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASETABLE';对这段SQL脚本的解释：SELECTTABLE_NAME：这个语句的作用是从查询结果中选择TABLE_NAM</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835497664381284352.htm" title="探索OpenAI和LangChain的适配器集成：轻松切换模型提供商" target="_blank">探索OpenAI和LangChain的适配器集成：轻松切换模型提供商</a> <span class="text-muted">nseejrukjhad</span> <a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/easyui/1.htm">easyui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>#探索OpenAI和LangChain的适配器集成：轻松切换模型提供商##引言在人工智能和自然语言处理的世界中，OpenAI的模型提供了强大的能力。然而，随着技术的发展，许多人开始探索其他模型以满足特定需求。LangChain作为一个强大的工具，集成了多种模型提供商，通过提供适配器，简化了不同模型之间的转换。本篇文章将介绍如何使用LangChain的适配器与OpenAI集成，以便轻松切换模型提供商</div> </li> <li><a href="/article/1835497411179540480.htm" title="深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具" target="_blank">深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具</a> <span class="text-muted">nseejrukjhad</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/python/1.htm">python</a> <div>深入理解MultiQueryRetriever：提升向量数据库检索效果的强大工具引言在人工智能和自然语言处理领域，高效准确的信息检索一直是一个关键挑战。传统的基于距离的向量数据库检索方法虽然广泛应用，但仍存在一些局限性。本文将介绍一种创新的解决方案：MultiQueryRetriever，它通过自动生成多个查询视角来增强检索效果，提高结果的相关性和多样性。MultiQueryRetriever的工</div> </li> <li><a href="/article/1835497283932745728.htm" title="利用LangChain的StackExchange组件实现智能问答系统" target="_blank">利用LangChain的StackExchange组件实现智能问答系统</a> <span class="text-muted">nseejrukjhad</span> <a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</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/python/1.htm">python</a> <div>利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件</div> </li> <li><a href="/article/1835497077891756032.htm" title="想明白这个问题，你才能写下去" target="_blank">想明白这个问题，你才能写下去</a> <span class="text-muted">文自拾</span> <div>春节放假的时候，又有一天梦见她，第二天她冒着漫天大雪，傻傻地跑来见我。她说，见见傻傻的我，天很冷，心很暖。她回去后，我写了一篇文章，题目叫——从此梦中只有你。我们没在一起的很长一段时间里，她都在我的心底，一次次出现在我的梦里。我对她说，在一起之前，是胆小且闷骚，在一起之后，我变得不要脸了。不要脸的——去爱你。那文章没写完，火车上，给她看了。我有点小失望，花了好几个小时写，她分分钟就看完，很希望她逐</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业\|游景点介绍\|旅游风景区\|家乡介绍\|等网站的设计与制作\|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍\|旅游风景区\|家乡介绍\|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835495644123459584.htm" title="Day1笔记-Python简介&标识符和关键字&输入输出" target="_blank">Day1笔记-Python简介&标识符和关键字&输入输出</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/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a> <div>大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程</div> </li> <li><a href="/article/1835493753557708800.htm" title="每日算法&面试题，大厂特训二十八天——第二十天（树）" target="_blank">每日算法&面试题，大厂特训二十八天——第二十天（树）</a> <span class="text-muted">肥学</span> <a class="tag" taget="_blank" href="/search/%E2%9A%A1%E7%AE%97%E6%B3%95%E9%A2%98%E2%9A%A1%E9%9D%A2%E8%AF%95%E9%A2%98%E6%AF%8F%E6%97%A5%E7%B2%BE%E8%BF%9B/1.htm">⚡算法题⚡面试题每日精进</a><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/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章</div> </li> <li><a href="/article/1835493626688401408.htm" title="Python快速入门 —— 第三节：类与对象" target="_blank">Python快速入门 —— 第三节：类与对象</a> <span class="text-muted">孤华暗香</span> <a class="tag" taget="_blank" href="/search/Python%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/1.htm">Python快速入门</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>第三节：类与对象目标：了解面向对象编程的基础概念，并学会如何定义类和创建对象。内容：类与对象：定义类：class关键字。类的构造函数：__init__()。类的属性和方法。对象的创建与使用。示例：classStudent:def__init__(self,name,age,major):self.name&#</div> </li> <li><a href="/article/1835493374514262016.htm" title="MongoDB Oplog 窗口" target="_blank">MongoDB Oplog 窗口</a> <span class="text-muted">喝醉酒的小白</span> <a class="tag" taget="_blank" href="/search/MongoDB/1.htm">MongoDB</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>在MongoDB中，oplog（操作日志）是一个特殊的日志系统，用于记录对数据库的所有写操作。oplog允许副本集成员（通常是从节点）应用主节点上已经执行的操作，从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中，从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定：Oplog大小：oplog的大小是有限</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>