玄子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/1891164024142360576.htm" title="Python数据永生秘籍：从菜鸟到存储大师的5层通关攻略" target="_blank">Python数据永生秘籍：从菜鸟到存储大师的5层通关攻略</a> <span class="text-muted">李智 - 重庆</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E7%B2%BE%E8%AE%B2%E7%B2%BE%E7%BB%83/1.htm">精讲精练</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%AE%9E%E6%88%98/1.htm">从入门到实战</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%A1%88%E4%BE%8B%E5%AD%A6%E4%B9%A0/1.htm">案例学习</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E8%80%83%E8%AF%95%E9%80%9A%E5%85%B3/1.htm">考试通关</a><a class="tag" taget="_blank" href="/search/%E9%94%99%E8%AF%AF%E5%88%86%E6%9E%90/1.htm">错误分析</a> <div>Python数据永生秘籍：从菜鸟到存储大师的5层通关攻略内容简介本系列文章是为Python3学习者精心设计的一套全面、实用的学习指南，旨在帮助读者从基础入门到项目实战，全面提升编程能力。文章结构由5个版块组成，内容层层递进，逻辑清晰。基础速通：n个浓缩提炼的核心知识点，夯实编程基础；经典范例：10个贴近实际的应用场景，深入理解Python3的编程技巧和应用方法；避坑宝典：10个典型错误解析，提供解</div> </li> <li><a href="/article/1891161000409886720.htm" title="阿里云RDS到亚马逊云RDS的实时数据同步方案详解" target="_blank">阿里云RDS到亚马逊云RDS的实时数据同步方案详解</a> <span class="text-muted">ivwdcwso</span> <a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/aws/1.htm">aws</a><a class="tag" taget="_blank" href="/search/kda/1.htm">kda</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%90%8C%E6%AD%A5/1.htm">数据同步</a> <div>1.需求背景在当今的多云环境中,企业经常需要在不同云平台之间同步数据。本文将详细介绍如何实现从阿里云RDSMySQL数据库到亚马逊云RDSMySQL数据库的实时数据同步。这种同步对于数据备份、跨区域数据访问、数据分析等场景都非常有用。2.方案概述我们将使用AWSKinesisDataAnalytics(KDA)作为核心组件来实现这个实时同步方案。KDA基于ApacheFlink,支持使用SQL或J</div> </li> <li><a href="/article/1891160872944988160.htm" title="Mooncake：kimi后端推理服务的架构设计" target="_blank">Mooncake：kimi后端推理服务的架构设计</a> <span class="text-muted">风生水气</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%BA%94%E7%94%A8%E6%8A%80%E6%9C%AF%E6%A0%88/1.htm">大模型应用技术栈</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/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><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>前言本文依托论文《Mooncake:AKVCache-centricDisaggregatedArchitectureforLLMServing》来讲解kimi的后端服务架构Mooncake，并按照自己的思路来梳理论文中的一些关键信息。背景服务端面临的问题随着大模型技术越来越强，很多应用都是以Maas（ModelasaService)的方式对外提供服务，服务端的能力受模型的能力约束。对于C端应用来</div> </li> <li><a href="/article/1891158479473799168.htm" title="为什么CORS（跨域资源共享）只需要后端进行设置，之后浏览器发送请求就可以跨域了呢？" target="_blank">为什么CORS（跨域资源共享）只需要后端进行设置，之后浏览器发送请求就可以跨域了呢？</a> <span class="text-muted">qq_29781527</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a> <div>CORS（跨域资源共享）的实现确实有点反直觉，因为它看起来像是浏览器限制了跨域请求，而后端却能通过设置响应头来“绕过”这种限制。我个人在之前也一直没能参透其中的道理，只是一味地照抄解决办法。今天偶然u有碰到这个问题，干脆直接刨根问底，梳理一下到底是为什么只需要后端处理就可以让浏览器进行跨域请求的。其实，CORS并不是绕过浏览器的同源策略，而是浏览器和后端协作的一种机制。下面我会详细解释CORS的工</div> </li> <li><a href="/article/1891158227224162304.htm" title="KTransformers：告别天价显卡！国产框架让单卡24G显存跑DeepSeek-R1 671B大模型：推理速度飙升28倍" target="_blank">KTransformers：告别天价显卡！国产框架让单卡24G显存跑DeepSeek-R1 671B大模型：推理速度飙升28倍</a> <span class="text-muted">蚝油菜花</span> <a class="tag" taget="_blank" href="/search/%E6%AF%8F%E6%97%A5/1.htm">每日</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E4%B8%8E%E5%BA%94%E7%94%A8%E5%AE%9E%E4%BE%8B/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><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a> <div>❤️如果你也关注AI的发展现状，且对AI应用开发感兴趣，我会每日分享大模型与AI领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！微信公众号｜搜一搜：蚝油菜花“还在为千亿模型租天价显卡？清华团队用CPU/GPU协同计算，让4090跑起671B参数全量模型！”大家好，我是蚝油菜花。如果你也经历过——看着API调用账单瑟瑟发抖，微调一次模型吃掉半月算力预算️盯着OOM报错抓狂，为了</div> </li> <li><a href="/article/1891158100845588480.htm" title="【大模型实战】零门槛入门AgentScope多智能体游戏开发：和Agent玩飞花令" target="_blank">【大模型实战】零门槛入门AgentScope多智能体游戏开发：和Agent玩飞花令</a> <span class="text-muted">南七小僧</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%BC%80%E5%8F%91/1.htm">服务器开发</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91/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><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>1.项目起因最近，阿里开源了一款全新的多智能体协同的Multi-Agent应用框架-AgentScope，早先的单智能体还只能完成对话类等一些简单的应用，通过调用外部API（如搜索绘画配音等）也只是拓展了单智能体的能力边界。如果能够调用多个智能体，并做好多个智能体之间的协同配合，就能够打造出内容和样式更加丰富的应用。中国古典诗词中的经典游戏（如飞花令尾字接龙即景联诗九宫格）等，非常考验选手的知识储</div> </li> <li><a href="/article/1891157343631110144.htm" title="实战探析：云数据库 RDS SQL Server 版的优点与应用案例" target="_blank">实战探析：云数据库 RDS SQL Server 版的优点与应用案例</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/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>实战探析：云数据库RDSSQLServer版的优点与应用案例背景：随着云计算技术的不断发展，越来越多的企业开始将数据库迁移到云端，以降低成本、提高可用性和灵活性。而在云数据库的选择上，AmazonRDS（RelationalDatabaseService）SQLServer版本成为了众多企业的首选之一。本文将深入探讨在实际应用中，利用云数据库RDSSQLServer版所带来的优点及其实战应用。云数</div> </li> <li><a href="/article/1891156083381170176.htm" title="HTML5(十二)——一文读懂 WebSocket 原理" target="_blank">HTML5(十二)——一文读懂 WebSocket 原理</a> <span class="text-muted">m0_70646989</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>二、WebSocket通信过程================WebSocket协议可分为两部分：握手阶段和数据通信阶段。WebSocket为应用层协议，定义在TCP/IP协议栈之上，连接服务器的url是以ws或wss开头的。ws开头的默认TCP端口为80，wss开头的默认端口为443。ws（websocket）是不安全的，容易被窃听，只要别人知道你的ip和端口号，任何人都可以去连接通讯。wss（</div> </li> <li><a href="/article/1891155201344204800.htm" title="MongoDB入门与实践" target="_blank">MongoDB入门与实践</a> <span class="text-muted">风中凌乱的猿</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>MongoDB是一个NoSQL数据库，它采用文档模型来存储数据，具有高性能、易扩展、灵活的特点。以下是MongoDB的入门指南和一些基本的实践示例，帮助你开始使用MongoDB。1.安装和基本配置安装MongoDB具体安装方法取决于你的操作系统。以Ubuntu为例，可以通过以下命令安装MongoDB：sudoaptupdatesudoaptinstall-ymongodb启动MongoDB安装完成</div> </li> <li><a href="/article/1891154570692849664.htm" title="Spring注解深入解析：@Bean与@Component共存的奥秘" target="_blank">Spring注解深入解析：@Bean与@Component共存的奥秘</a> <span class="text-muted">一休哥助手</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>引言Spring框架自发布以来，凭借其强大的功能和便捷的开发体验，迅速成为Java开发领域的佼佼者。它不仅简化了企业级应用的开发，还提供了一套完整的解决方案，从数据访问、事务管理到安全等各个方面都有涵盖。其灵活性和可扩展性使得它成为众多企业和开发者的首选技术栈。在Spring框架中，注解起着至关重要的作用。它们提供了一种简洁、优雅的方式来配置和管理Spring应用的组件和行为。相较于传统的XML配</div> </li> <li><a href="/article/1891152047177265152.htm" title="高效高并发调度架构" target="_blank">高效高并发调度架构</a> <span class="text-muted">之群害马</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>以下是从架构层面为你提供的适合多核CPU、多GPU环境下API客户端、服务端高级调度，以实现高效并发大规模与用户交互的技术栈：通信协议gRPC：基于HTTP/2协议，具有高性能、低延迟的特点，支持二进制序列化（通常搭配Protobuf），非常适合高并发场景。它提供了流式通信和多路复用功能，可有效减少网络开销。常用于微服务之间的通信，例如机器学习模型服务与前端应用之间的交互。RSocket：是一种基</div> </li> <li><a href="/article/1891151795032485888.htm" title="《Python编程轻松进阶》干货整理" target="_blank">《Python编程轻松进阶》干货整理</a> <span class="text-muted">KLZZ66</span> <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/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/jupyter/1.htm">jupyter</a> <div>《Python编程轻松进阶》干货整理最近把《Python编程轻松进阶》看完了，看得过程中顺便整理了一些自己觉得比较重要的点，分享出来，共同进步！文章目录《Python编程轻松进阶》干货整理第一章处理错误和寻求帮助1.1如何查看模块版本第二章环境设置和命令行2.1使用pathlib库可以让Python脚本跨平台兼容2.2Path常用命令2.3命令行参数2.3.1/?2.3.2python-c2.3.</div> </li> <li><a href="/article/1891149146732163072.htm" title="Spring Boot（8）深入理解 @Autowired 注解：使用场景与实战示例" target="_blank">Spring Boot（8）深入理解 @Autowired 注解：使用场景与实战示例</a> <span class="text-muted">綦枫Maple</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Spring/1.htm">Spring</a><a class="tag" taget="_blank" href="/search/Boot/1.htm">Boot</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>搞个引言在Spring框架的开发中，依赖注入（DependencyInjection，简称DI）是它的一个核心特性，它能够让代码更加模块化、可测试，并且易于维护。而@Autowired注解作为Spring实现依赖注入的关键工具，给咱们开发者提供了极大的便利。本文将通过具体的示例详细介绍@Autowired注解的多种使用场景，帮助你更好地掌握这一重要注解~一、构造函数注入1.1基本原理当一个类依赖于</div> </li> <li><a href="/article/1891146498545086464.htm" title="鸿蒙HarmonyOS APP 开发入门2--事件_鸿蒙os 按钮事件(1)" target="_blank">鸿蒙HarmonyOS APP 开发入门2--事件_鸿蒙os 按钮事件(1)</a> <span class="text-muted">xcbyaya</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a> <div>文章目录系列文章目录三、事件学习1.单击事件（常用）2.事件的四种写法3.双击事件4.长按事件5.滑动事件总结三、事件学习设计APP的时候最重要的知识就是事件，APP的组件之间的交互等，都需要通过事件来进行实现。事件就是可以被识别的操作。常见的事件有：单击、双击、长按、还有触摸事件。我们可以给文本、按钮等添加不同的事件。比如添加了单击事件之后，当我们再次点击文本、按钮，就可以运行对应的代码了。为了</div> </li> <li><a href="/article/1891145868430602240.htm" title="netfilter和iptables--netfilter源码篇" target="_blank">netfilter和iptables--netfilter源码篇</a> <span class="text-muted">Estrella-q</span> <a class="tag" taget="_blank" href="/search/linux%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE%E6%A0%88/1.htm">linux网络协议栈</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>netfilter和iptables–netfilter源码篇防火墙是保护服务器和基础设施的重要工具，在Linux系统下，目前广泛使用的防火墙工具是iptables，但实际进行规则实施并产生实际作用的是Netfilter，iptables与内核中的netfilter框架中Hook协同工作，实现IP数据包的控制与过滤，本次将基于Linux6.5从源码视角分析。总视角下网络通信协议栈模式如下：图中各个</div> </li> <li><a href="/article/1891145489915637760.htm" title="Lua 从基础入门到精通（非常详细）" target="_blank">Lua 从基础入门到精通（非常详细）</a> <span class="text-muted">gorgor在码农</span> <a class="tag" taget="_blank" href="/search/Redis/1.htm">Redis</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录什么是Lua？Lua环境安装Lua基本语法注释数据类型nil（空）Booleannumber（数字）string（字符串）function（函数）userdatathreadtable（表）流程控制运算符循环详解string库Lua模块与包案例实战什么是Lua？Lua是一种轻量小巧的脚本语言，它用标准C语言编写并以源代码形式开放。这意味着什么呢？这意味着Lua虚拟机可以很方便的嵌入别的程序里，</div> </li> <li><a href="/article/1891143599966449664.htm" title="【vLLM 学习】安装" target="_blank">【vLLM 学习】安装</a> <span class="text-muted"></span> <div>vLLM是一款专为大语言模型推理加速而设计的框架，实现了KV缓存内存几乎零浪费，解决了内存管理瓶颈问题。更多vLLM中文文档及教程可访问→https://vllm.hyper.ai/vLLM是一个Python库，包含预编译的C++和CUDA(12.1)二进制文件。依赖环境操作系统：LinuxPython：3.8-3.12GPU：计算能力7.0或更高（例如V100、T4、RTX20xx、A100、L</div> </li> <li><a href="/article/1891143222214848512.htm" title="uniapp开发小程序实现-获取手机号码（二）" target="_blank">uniapp开发小程序实现-获取手机号码（二）</a> <span class="text-muted">故里2130</span> <a class="tag" taget="_blank" href="/search/%E5%8C%85%E6%95%99%E4%BC%9A%E4%B8%93%E6%A0%8F/1.htm">包教会专栏</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1/1.htm">微信</a> <div>一共3篇文章，共同描述，看序号进行寻找。真机效果图1.前提获取手机号码，一定要企业账号，不是企业账号会出现下面提示所以没有企业账号的，就可以不用看了，申请企业账号去官网申请就行了，申请成功了后，我们接着看。2.代码代码参考文章获取手机号\|微信开放文档<</div> </li> <li><a href="/article/1891142591269892096.htm" title="ArrayList 和 LinkedList区别" target="_blank">ArrayList 和 LinkedList区别</a> <span class="text-muted">sillyyyy</span> <a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/1.htm">链表</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>ArrayList和LinkedList是Java集合框架中两种不同的List实现，它们的区别如下：底层数据结构不同：ArrayList是基于动态数组实现的，而LinkedList是基于双向链表实现的。因此，在对数据进行随机访问或者遍历时，ArrayList的性能要优于LinkedList，而在对数据进行插入或者删除操作时，LinkedList的性能要优于ArrayList。内存使用方式不同：由于</div> </li> <li><a href="/article/1891140953968799744.htm" title="Cursor 小白入门" target="_blank">Cursor 小白入门</a> <span class="text-muted">迪小莫学AI</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7/1.htm">工具</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>Cursor简介什么是Cursor？Cursor是一款基于AI的智能代码编辑器，结合了强大的代码编辑功能和AI技术，旨在通过AI驱动的智能补全、聊天功能和代理帮助开发者提高工作效率。它基于VSCode构建，拥有用户熟悉的界面和功能，同时通过深度集成的AI功能，极大提升开发过程中的生产力。核心功能1.Tab（智能代码补全）Tab是Cursor提供的智能代码补全功能，能够根据上下文智能推荐代码，帮助用</div> </li> <li><a href="/article/1891139697187549184.htm" title="Python 潮流周刊#89：Python 3.14 的新型解释器！（摘要）" target="_blank">Python 潮流周刊#89：Python 3.14 的新型解释器！（摘要）</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>本周刊由Python猫出品，精心筛选国内外的250+信息源，为你挑选最值得分享的文章、教程、开源项目、软件工具、播客和视频、热门话题等内容。愿景：帮助所有读者精进Python技术，并增长职业和副业的收入。分享了12篇文章，12个开源项目，2则热门讨论以下是本期摘要：文章&教程①Python3.14新特性：一种新型解释器②高效扩展Python：PyO3与Rust实战③使用uv开发和安装PythonC</div> </li> <li><a href="/article/1891139692166967296.htm" title="Unity入门" target="_blank">Unity入门</a> <span class="text-muted">七七喝椰奶</span> <a class="tag" taget="_blank" href="/search/Unity/1.htm">Unity</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>摘要本文是为那些缺乏Unity使用经验的读者设立的，会对Unity游戏开发的大致流程以及一些属于进行说明Unity的游戏开发，大体可以分为三个步骤将美术素材和各种逻辑功能整合在一起，创建出角色摆放好各个角色，创建出场景创建好所有需要的场景根据我们的经验可以知道，在游戏中，玩家操作的角色以及敌方角色，还有作为游戏舞台的背景等都会显示在画面上。游戏中的那些角色可以通过鼠标或者触屏来操作，也可以根据自己</div> </li> <li><a href="/article/1891138556173283328.htm" title="（萌新入门）如何从起步阶段开始学习STM32 ——2 我应该学习HAL库还是寄存器库？" target="_blank">（萌新入门）如何从起步阶段开始学习STM32 ——2 我应该学习HAL库还是寄存器库？</a> <span class="text-muted">charlie114514191</span> <a class="tag" taget="_blank" href="/search/%E7%B2%89%E4%B8%9D%E8%AF%B7%E6%B1%82/1.htm">粉丝请求</a><a class="tag" taget="_blank" href="/search/STM32%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">STM32学习笔记</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/STM32/1.htm">STM32</a><a class="tag" taget="_blank" href="/search/HAL/1.htm">HAL</a><a class="tag" taget="_blank" href="/search/%E5%BA%93%E5%AF%84%E5%AD%98%E5%99%A8/1.htm">库寄存器</a> <div>概念笔者下面需要介绍的是库寄存器和HAL库两个重要的概念，在各位看完之后，需要决定自己的学习路线到底是学习HAL呢？还是寄存器呢？还是两者都学习呢？库寄存器库寄存器就是简单的封装了我们对寄存器的操作，至少，不用咔咔访问结构体去嗯改里面的数据，否则开发效率会低到发指。库寄存器的特征如下：低层级：直接操作硬件寄存器，代码与硬件紧密相关。高效：由于直接操作寄存器，代码执行效率高，资源占用少。灵活性：我们</div> </li> <li><a href="/article/1891135276382744576.htm" title="python后端调用Deep Seek API" target="_blank">python后端调用Deep Seek API</a> <span class="text-muted">YY_oot</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a> <div>python后端调用DeepSeekAPI需要依次下载●Ollama●DeepseekR1LLM模型●嵌入模型nomic-embed-text/bge-m3●AnythingLLM参考教程：DeepseekR1打造本地化RAG知识库:安装部署使用详细教程手把手教你：deepseekR1基于AnythingLLMAPI调用本地知识库python调用anythingllm的APIimportreque</div> </li> <li><a href="/article/1891133639043903488.htm" title="大数据之-hdfs+hive+hbase+kudu+presto集群(6节点)" target="_blank">大数据之-hdfs+hive+hbase+kudu+presto集群(6节点)</a> <span class="text-muted">管哥的运维私房菜</span> <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/hdfs/1.htm">hdfs</a><a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/kudu/1.htm">kudu</a><a class="tag" taget="_blank" href="/search/presto/1.htm">presto</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>几个主要软件的下载地址：prestohttps://prestosql.io/docs/current/index.htmlkudurpm包地址https://github.com/MartinWeindel/kudu-rpm/releaseshivehttp://mirror.bit.edu.cn/apache/hive/hdfshttp://archive.apache.org/dist/ha</div> </li> <li><a href="/article/1891132504803438592.htm" title="多python环境配置搞不定看这篇就够了" target="_blank">多python环境配置搞不定看这篇就够了</a> <span class="text-muted">Nothi.C</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%8E%AF%E5%A2%83/1.htm">环境</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>环境配置一直都是难倒无数入门选手的关键问题。如何在一台电脑中运行多个版本？本文章以virtualenv构建虚拟环境为例子首先，下载相对应的Python，windows版本下载完成后如若遇到PYTHON和PIP已安装却系统无法执行：此电脑高级设置—>环境变量->系统PATH->新建->粘贴PYTHON路径（为指定Python）和PYTHON\Scripts（为指定pip）或者执行命令setPATH=</div> </li> <li><a href="/article/1891132125315395584.htm" title="JVM内存模型与Java线程内存模型的区别" target="_blank">JVM内存模型与Java线程内存模型的区别</a> <span class="text-muted">我心向阳iu</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95-%E5%9C%BA%E6%99%AF%E5%BA%94%E7%94%A8%E9%A2%98/1.htm">面试-场景应用题</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JVM/1.htm">JVM</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">Java多线程</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录JVM内存模型与Java线程内存模型的区别JVM内存模型1.程序计数器（ProgramCounterRegister）2.Java虚拟机栈（JavaVirtualMachineStacks）3.本地方法栈（NativeMethodStack）4.Java堆（JavaHeap）5.方法区（MethodArea）6.运行时常量池（RuntimeConstantPool）7.直接内存（Direc</div> </li> <li><a href="/article/1891130865065455616.htm" title="简析 .NET Core 构成体系" target="_blank">简析 .NET Core 构成体系</a> <span class="text-muted">weixin_30613727</span> <a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/runtime/1.htm">runtime</a> <div>简析.NETCore构成体系出处：http://www.cnblogs.com/vipyoumay/p/5613373.htmlhttps://github.com/PrismLibrary/Prism是一个用于在WPF，Windows10UWP和XamarinForms中构建松散耦合，可维护和可测试的XAML应用程序的框架。https://docs.microsoft.com/en-us/pre</div> </li> <li><a href="/article/1891126453307764736.htm" title="JVM调优-学习篇" target="_blank">JVM调优-学习篇</a> <span class="text-muted">m0_74825172</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>概述公司的江南白衣写了一篇关键业务系统的JVM参数推荐(2016热冬版)的文章,大牛的文章总是需要细细品读。这篇文章介绍大量的JVM调优参数,内容也比较多,本文只是列出我自己能理解的一些参数,暂时理解不了的参数就只能等以后自己实力到家了,再慢慢补充上来。性能调优参数-XX:AutoBoxCacheMaxJAVA进程启动的时候,会加载rt.jar这个核心包的,rt.jar包里的Integer自然也是</div> </li> <li><a href="/article/1891124438259265536.htm" title="【python学习】深度解析 Python 的 .env配置与最佳实践：温格高的环境变量配置之道" target="_blank">【python学习】深度解析 Python 的 .env配置与最佳实践：温格高的环境变量配置之道</a> <span class="text-muted">NLP仙人</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%AD%A6%E4%B9%A0/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><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>1.文章简介在开发和部署Python项目时，环境变量配置对于管理敏感信息如数据库连接字符串、API密钥至关重要。本文将以温格高（2023年环法冠军）的项目为例，详细介绍如何通过.env文件简化环境配置，并分享多环境管理、Docker集成等热门功能。我们还将覆盖一些小技巧和常见错误，帮助你避免开发中的踩坑。2.使用.env文件的好处温格高团队正在开发一个记录自行车赛事的应用，涉及多个开发环境和敏感信</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>