0%

2

自动摘要: 简单的HTML基础 ```html <!DOCTYPEhtml> <metacharset=”utf8”> HTML基础 ……..

简单的HTML基础

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML基础</title>
</head>
<body>
<!--标题通过<h1>-<h6>标签来定义-->
<h1>我的第一个标题</h1>
<h2>我的第二个标题</h2>
<!--段落通过<p>标签来定义-->
<p>我的第一个段落。</p>
<!--图像通过<img>标签来定义,图像的名称尺寸是以属性的形式提供的-->
<img src="/images/logo.jpg" width="255" height="255"/><br>
<!--链接通过<a>标签来定义,在href属性中指定链接的地址-->
<a href="www.baidu.com">百度</a>
</body>
</html>
标签 描述
定义 HTML 文档
定义文档的主体

-

定义 HTML 标题

定义水平线
定义注释

插入换行

定义一个段落

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!DOCTYPE html>
    <html>

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

    </html>
    <!--上述代码中包含三个元素-->

HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,**比如:name=”value”**。

下面列出了适用于大多数 HTML 元素的属性:

属性 描述
class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式(inline style)
title 描述了元素的额外信息 (作为工具条使用)

HTML 文本格式化标签

标签 描述
定义粗体文本
定义着重文字
定义斜体字
定义小号字
定义加重语气
定义下标字
定义上标字
定义插入字
定义删除字

HTML “计算机输出” 标签

标签 描述
定义计算机代码
定义键盘码
定义计算机代码样本
定义变量
定义预格式文本

HTML 引文, 引用, 及标签定义

标签 描述
定义缩写
定义地址
定义文字方向
定义长的引用
定义短的引用语
定义引用、引证
定义一个定义项目。

HTML 链接

href属性:指定链接的地址target属性:使用 target 属性,你可以定义被链接的文档在何处显示。id属性:id 属性可用于创建一个 HTML 文档书签。

HTML head 元素

标签 描述
定义了文档的信息
</a></td> <td>定义了文档的标题</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-base.html"><base></a></td> <td>定义了页面链接标签的默认链接地址</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-link.html"><link></a></td> <td>定义了一个文档和外部资源之间的关系</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-meta.html"><meta></a></td> <td>定义了HTML文档中的元数据</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-script.html"><script></a></td> <td>定义了客户端的脚本文件</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-style.html"><style></a></td> <td>定义了HTML文档的样式文件</td> </tr> </tbody></table> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"><span class="comment"><!--可以添加在头部区域的元素标签为: </span></span><br><span class="line"><span class="comment"><title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>--></span></span><br><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span> </span><br><span class="line"><span class="comment"><!--为搜索引擎定义关键词--></span></span><br><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"keywords"</span> <span class="attr">content</span>=<span class="string">"HTML,CSS,XML,XHTML,JavaScript"</span>></span></span><br><span class="line"><span class="comment"><!--为网页定义描述内容--></span></span><br><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"description"</span> <span class="attr">content</span>=<span class="string">"免费 Web & 编程 教程"</span>></span></span><br><span class="line"><span class="comment"><!--定义网页作者--></span></span><br><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"author"</span> <span class="attr">content</span>=<span class="string">"Runoob"</span>></span></span><br><span class="line"><span class="comment"><!--每30秒刷新当前页面--></span></span><br><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"refresh"</span> <span class="attr">content</span>=<span class="string">"30"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="comment"><!--<title>标签定义了浏览器工具栏的标题,收藏夹中的标题,显示在搜索引擎中的标题--></span></span><br><span class="line"><span class="tag"><<span class="name">title</span>></span>文档标题<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="comment"><!--<base> 标签描述了基本的链接地址/链接目标,</span></span><br><span class="line"><span class="comment">该标签作为HTML文档中所有的链接标签的默认链接:--></span></span><br><span class="line"><span class="tag"><<span class="name">base</span> <span class="attr">href</span>=<span class="string">"http://www.runoob.com/images/"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>></span></span><br><span class="line"><span class="comment"><!--<link> 标签定义了文档与外部资源之间的关系</span></span><br><span class="line"><span class="comment">标签通常用于链接到样式表--></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"mystyle.css"</span>></span></span><br><span class="line"><span class="comment"><!--<style> 标签定义了HTML文档的样式文件引用地址.--></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-tag">body</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>:yellow;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> <span class="selector-tag">p</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">color</span>:blue</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="comment"><!--加载脚本文件--></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> </span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line">文档内容......</span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"> </span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure> <h1 id="HTML-CSS"><a href="#HTML-CSS" class="headerlink" title="HTML CSS"></a>HTML CSS</h1><h2 id="内部样式表"><a href="#内部样式表" class="headerlink" title="内部样式表"></a>内部样式表</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-tag">body</span> {<span class="attribute">background-color</span>:yellow;}</span></span><br><span class="line"><span class="language-css"><span class="selector-tag">p</span> {<span class="attribute">color</span>:blue;}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br></pre></td></tr></table></figure> <h2 id="外部样式表"><a href="#外部样式表" class="headerlink" title="外部样式表"></a>外部样式表</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"mystyle.css"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br></pre></td></tr></table></figure> <h1 id="HTML-图像"><a href="#HTML-图像" class="headerlink" title="HTML 图像"></a>HTML 图像</h1><h2 id="插入图像"><a href="#插入图像" class="headerlink" title="插入图像"></a>插入图像</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span>></span>一张动态图<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/gif.png"</span> <span class="attr">alt</span>=<span class="string">"Sorry!"</span> <span class="attr">width</span>=<span class="string">"200"</span> <span class="attr">height</span>=<span class="string">"200"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>一张静态图<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/discover.jpg"</span> <span class="attr">alt</span>=<span class="string">"Sorry!"</span> <span class="attr">width</span>=<span class="string">"200"</span> <span class="attr">height</span>=<span class="string">"200"</span>></span></span><br></pre></td></tr></table></figure> <h2 id="从不同位置插入图像"><a href="#从不同位置插入图像" class="headerlink" title="从不同位置插入图像"></a>从不同位置插入图像</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span>></span>从不同的位置插入图片<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"http://www.runoob.com/images/logo.png"</span> <span class="attr">alt</span>=<span class="string">"Sorry!"</span> <span class="attr">width</span>=<span class="string">"336"</span> <span class="attr">height</span>=<span class="string">"69"</span>></span></span><br></pre></td></tr></table></figure> <h2 id="设置图像链接"><a href="#设置图像链接" class="headerlink" title="设置图像链接"></a>设置图像链接</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span>></span>创建图片链接</span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.runoob.com/html/html-tutorial.html"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">border</span>=<span class="string">"5"</span> <span class="attr">src</span>=<span class="string">"images/gif.png"</span> <span class="attr">alt</span>=<span class="string">"Sorry!"</span> <span class="attr">width</span>=<span class="string">"100"</span> <span class="attr">height</span>=<span class="string">"100"</span>></span></span><br><span class="line"> <span class="comment"><!--border设置的是图像的边框--></span></span><br><span class="line"> <span class="tag"></<span class="name">a</span>></span></span><br><span class="line"><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure> <h2 id="创建图像映射"><a href="#创建图像映射" class="headerlink" title="创建图像映射"></a>创建图像映射</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span>></span>点击太阳或其他行星,注意变化:<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"planets.gif"</span> <span class="attr">width</span>=<span class="string">"145"</span> <span class="attr">height</span>=<span class="string">"126"</span> <span class="attr">alt</span>=<span class="string">"Planets"</span> <span class="attr">usemap</span>=<span class="string">"#planetmap"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">map</span> <span class="attr">name</span>=<span class="string">"planetmap"</span>></span></span><br><span class="line"> <span class="comment"><!--shape指的是点击区域的形状,coords指的是链接区域在图片中的坐标--></span></span><br><span class="line"> <span class="tag"><<span class="name">area</span> <span class="attr">shape</span>=<span class="string">"rect"</span> <span class="attr">coords</span>=<span class="string">"0,0,82,126"</span> <span class="attr">alt</span>=<span class="string">"Sun"</span> <span class="attr">href</span>=<span class="string">"sun.htm"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">area</span> <span class="attr">shape</span>=<span class="string">"circle"</span> <span class="attr">coords</span>=<span class="string">"90,58,3"</span> <span class="attr">alt</span>=<span class="string">"Mercury"</span> <span class="attr">href</span>=<span class="string">"mercur.htm"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">area</span> <span class="attr">shape</span>=<span class="string">"circle"</span> <span class="attr">coords</span>=<span class="string">"124,58,8"</span> <span class="attr">alt</span>=<span class="string">"Venus"</span> <span class="attr">href</span>=<span class="string">"venus.htm"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">map</span>></span></span><br></pre></td></tr></table></figure> <h1 id="HTML-表格"><a href="#HTML-表格" class="headerlink" title="HTML 表格"></a>HTML 表格</h1><h2 id="HTML-表格标签"><a href="#HTML-表格标签" class="headerlink" title="HTML 表格标签"></a>HTML 表格标签</h2><p><strong>table标签是不建议作为布局工具使用的 - 表格不是布局工具。</strong></p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody><tr> <td><a href="https://www.runoob.com/tags/tag-table.html"><table></a></td> <td>定义表格</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-th.html"><th></a></td> <td>定义表格的表头</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-tr.html"><tr></a></td> <td>定义表格的行</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-td.html"><td></a></td> <td>定义表格单元</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-caption.html"><caption></a></td> <td>定义表格标题</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-colgroup.html"><colgroup></a></td> <td>定义表格列的组</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-col.html"><col></a></td> <td>定义用于表格列的属性</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-thead.html"><thead></a></td> <td>定义表格的页眉</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-tbody.html"><tbody></a></td> <td>定义表格的主体</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-tfoot.html"><tfoot></a></td> <td>定义表格的页脚</td> </tr> </tbody></table> <h2 id="基础表格"><a href="#基础表格" class="headerlink" title="基础表格"></a>基础表格</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span> <span class="attr">cellpadding</span>=<span class="string">"10"</span> <span class="attr">cellspacing</span>=<span class="string">"5"</span>></span></span><br><span class="line"> <span class="comment"><!--border设置的是表格边框,cell padding设置的是单元格边距,cell spacing设置的是单元格间距--></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="comment"><!--th设置的是表头--></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>First Name<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>Last Name<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>Points<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Jill<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Smith<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>50<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Eve<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Jackson<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>90<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>John<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Doe<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>80<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Adam<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Johnson<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>67<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure> <p><img src="/images/1663149913436-8f7c812a-3923-412d-a59e-9837805166ef.png"></p> <h2 id="跨行或跨列的表格单元格"><a href="#跨行或跨列的表格单元格" class="headerlink" title="跨行或跨列的表格单元格"></a>跨行或跨列的表格单元格</h2><p><strong>单元格跨列用colspan,单元格跨列用rowspan</strong></p> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">h4</span>></span>单元格跨两列:<span class="tag"></<span class="name">h4</span>></span></span><br><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>Name<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="comment"><!--单元格跨列用colspan--></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span> <span class="attr">colspan</span>=<span class="string">"2"</span>></span>Telephone<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Bill Gates<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>555 77 854<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>555 77 855<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">h4</span>></span>单元格跨两行:<span class="tag"></<span class="name">h4</span>></span></span><br><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>First Name:<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Bill Gates<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="comment"><!--单元格跨列用rowspan--></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span> <span class="attr">rowspan</span>=<span class="string">"2"</span>></span>Telephone:<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>555 77 854<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>555 77 855<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br><span class="line"></span><br></pre></td></tr></table></figure> <p>HTML<img src="/images/1663150012496-cd49826e-1dea-4d6b-89f7-163ad15f4f9f.png"></p> <h2 id="表格内的标签"><a href="#表格内的标签" class="headerlink" title="表格内的标签"></a>表格内的标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>这是一个段落<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>这是另一个段落<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>这个单元格包含一个表格:</span><br><span class="line"> <span class="tag"><<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>A<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>B<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>C<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>D<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">table</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>这个单元格包含一个列表</span><br><span class="line"> <span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>apples<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>bananas<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>pineapples<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>HELLO<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure> <p><img src="/images/1663150079824-6fa0f4c7-d932-41f1-9edd-a9f9c2e98e10.png"></p> <h1 id="HTML-列表"><a href="#HTML-列表" class="headerlink" title="HTML 列表"></a>HTML 列表</h1><h2 id="不同类型的无序列表"><a href="#不同类型的无序列表" class="headerlink" title="不同类型的无序列表"></a>不同类型的无序列表</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">h4</span>></span>不同类型的无序列表<span class="tag"></<span class="name">h4</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h5</span>></span>圆点列表:<span class="tag"></<span class="name">h5</span>></span></span><br><span class="line"><span class="tag"><<span class="name">ul</span> <span class="attr">style</span>=<span class="string">"list-style-type: disc"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>tea<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h5</span>></span>圆圈列表<span class="tag"></<span class="name">h5</span>></span></span><br><span class="line"><span class="tag"><<span class="name">ul</span> <span class="attr">style</span>=<span class="string">"list-style-type: circle"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>tea<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h5</span>></span>正方形列表<span class="tag"></<span class="name">h5</span>></span></span><br><span class="line"><span class="tag"><<span class="name">ul</span> <span class="attr">style</span>=<span class="string">"list-style-type: square"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>tea<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br></pre></td></tr></table></figure> <p><img src="/images/1663221634057-e430ea46-a9c2-4f0a-9f62-de9902506ce8.png"></p> <h2 id="不同类型的有序列表"><a href="#不同类型的有序列表" class="headerlink" title="不同类型的有序列表"></a>不同类型的有序列表</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">h4</span>></span>不同类型的有序列表<span class="tag"></<span class="name">h4</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h5</span>></span>编号列表<span class="tag"></<span class="name">h5</span>></span></span><br><span class="line"><span class="tag"><<span class="name">ol</span> <span class="attr">type</span>=<span class="string">"1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>tea<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ol</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h5</span>></span>大写字母列表<span class="tag"></<span class="name">h5</span>></span></span><br><span class="line"><span class="tag"><<span class="name">ol</span> <span class="attr">type</span>=<span class="string">"A"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>tea<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ol</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h5</span>></span>小写字母列表<span class="tag"></<span class="name">h5</span>></span></span><br><span class="line"><span class="tag"><<span class="name">ol</span> <span class="attr">type</span>=<span class="string">"a"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>tea<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ol</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h5</span>></span>罗马字母列表<span class="tag"></<span class="name">h5</span>></span></span><br><span class="line"><span class="tag"><<span class="name">ol</span> <span class="attr">type</span>=<span class="string">"I"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>tea<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ol</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h5</span>></span>小写罗马字母列表<span class="tag"></<span class="name">h5</span>></span></span><br><span class="line"><span class="tag"><<span class="name">ol</span> <span class="attr">type</span>=<span class="string">"i"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>tea<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ol</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h5</span>></span>编号列表的编号从20起<span class="tag"></<span class="name">h5</span>></span></span><br><span class="line"><span class="tag"><<span class="name">ol</span> <span class="attr">start</span>=<span class="string">"20"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>tea<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ol</span>></span></span><br></pre></td></tr></table></figure> <p><img src="/images/1663221728411-c78c9469-9406-42b9-beaf-0db297f8607e.png"></p> <h2 id="嵌套列表"><a href="#嵌套列表" class="headerlink" title="嵌套列表"></a>嵌套列表</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">h4</span>></span>嵌套列表<span class="tag"></<span class="name">h4</span>></span></span><br><span class="line"><span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>milk</span><br><span class="line"> <span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>china<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>ck</span><br><span class="line"> <span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>abc<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>ooo<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>tea<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br></pre></td></tr></table></figure> <p><img src="/images/1663221776604-b470d994-90b6-4cd3-815f-bbb9173c1ab9.png"></p> <h2 id="自定义列表"><a href="#自定义列表" class="headerlink" title="自定义列表"></a>自定义列表</h2><p>自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。</p> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">h4</span>></span>一个自定义列表<span class="tag"></<span class="name">h4</span>></span></span><br><span class="line"><span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>coffee<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>-black hot drink<span class="tag"></<span class="name">dd</span>></span> <span class="comment"><!--<dd>标签表示的是列表项的定义--></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>milk<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>-white cold drink<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"><span class="tag"></<span class="name">dl</span>></span></span><br></pre></td></tr></table></figure> <p><img src="/images/1663221838106-194ec742-45c9-4284-b025-57490f5139e3.png"></p> <h1 id="HTML-布局"><a href="#HTML-布局" class="headerlink" title="HTML 布局"></a>HTML 布局</h1><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 500px;"</span> ></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"header"</span> <span class="attr">style</span>=<span class="string">"background-color: burlywood;"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span> <span class="attr">style</span>=<span class="string">"margin-bottom: 0;"</span>></span>主要的网页标题<span class="tag"></<span class="name">h1</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"menu"</span> <span class="attr">style</span>=<span class="string">"background-color: chocolate; width: 100px;height:200px;float: left"</span> ></span></span><br><span class="line"> <span class="tag"><<span class="name">b</span>></span>菜单<span class="tag"></<span class="name">b</span>></span><span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> HTML <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> CSS <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> JavaScript<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"content"</span> <span class="attr">style</span>=<span class="string">"background-color:#EEEEEE;height:200px;width:400px;float:left;"</span>></span></span><br><span class="line"> 内容在这里<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"author"</span> <span class="attr">style</span>=<span class="string">"background-color: burlywood;clear: both;text-align: center"</span>></span></span><br><span class="line"> 作者<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure> <p><img src="/images/1663224906472-83011e2f-3fcb-4248-956f-fae0eb503b48.png"></p> <h1 id="HTML-表单"><a href="#HTML-表单" class="headerlink" title="HTML 表单"></a>HTML 表单</h1><p>表单是一个包含表单元素的区域。表单元素允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox)等等。</p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody><tr> <td><a href="https://www.runoob.com/tags/tag-form.html"><form></a></td> <td>定义供用户输入的表单</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-input.html"><input></a></td> <td>定义输入域</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-textarea.html"><textarea></a></td> <td>定义文本域 (一个多行的输入控件)</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-label.html"><label></a></td> <td>定义了 <input> 元素的标签,一般为输入标题</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-fieldset.html"><fieldset></a></td> <td>定义了一组相关的表单元素,并使用外框包含起来</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-legend.html"><legend></a></td> <td>定义了 <fieldset> 元素的标题</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-select.html"><select></a></td> <td>定义了下拉选项列表</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-optgroup.html"><optgroup></a></td> <td>定义选项组</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-option.html"><option></a></td> <td>定义下拉列表中的选项</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-button.html"><button></a></td> <td>定义一个点击按钮</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-datalist.html"><datalist></a></td> <td>指定一个预先定义的输入控件选项列表</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-keygen.html"><keygen></a></td> <td>定义了表单的密钥对生成器字段</td> </tr> <tr> <td><a href="https://www.runoob.com/tags/tag-output.html"><output></a></td> <td>定义一个计算结果</td> </tr> </tbody></table> <h2 id="带边框的表单"><a href="#带边框的表单" class="headerlink" title="带边框的表单"></a>带边框的表单</h2><p><strong>表单的动作属性 action 定义了服务端的文件名。****action 属性会对接收到的用户输入数据进行相关的处理</strong></p> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">""</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">fieldset</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">legend</span>></span>Personal information<span class="tag"></<span class="name">legend</span>></span></span><br><span class="line"> Name:<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">size</span>=<span class="string">"30"</span>></span><span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> E-mail:<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span>></span><span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> Date of birth:<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">size</span>=<span class="string">"10"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">fieldset</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure> <h2 id="单选按钮、复选框、下拉列表、文本域、按钮"><a href="#单选按钮、复选框、下拉列表、文本域、按钮" class="headerlink" title="单选按钮、复选框、下拉列表、文本域、按钮"></a>单选按钮、复选框、下拉列表、文本域、按钮</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">""</span>></span></span><br><span class="line"> <span class="comment"><!--输入单选按钮--></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"sex"</span> <span class="attr">value</span>=<span class="string">"Male"</span>></span>Male <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"sex"</span> <span class="attr">value</span>=<span class="string">"Female"</span>></span>Female <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="comment"><!--输入复选框--></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"vehicle"</span> <span class="attr">value</span>=<span class="string">"Bike"</span>></span>I like a bike <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"vehicle"</span> <span class="attr">value</span>=<span class="string">"Car"</span>></span>I like a car <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="comment"><!--下拉列表--></span></span><br><span class="line"> <span class="tag"><<span class="name">select</span> <span class="attr">name</span>=<span class="string">"cars"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"volvo"</span>></span>Volvo<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"saab"</span>></span>Saab<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"fiat"</span>></span>Fiat<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"audi"</span>></span>Audi<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">select</span>></span></span><br><span class="line"> <span class="comment"><!--预选下拉列表,在预选的值后面加selected--></span></span><br><span class="line"> <span class="comment"><!--文本域--></span></span><br><span class="line"> <span class="tag"><<span class="name">textarea</span> <span class="attr">rows</span>=<span class="string">"10"</span> <span class="attr">cols</span>=<span class="string">"30"</span>></span></span><br><span class="line"> 我是一个文本框</span><br><span class="line"> <span class="tag"></<span class="name">textarea</span>></span></span><br><span class="line"> <span class="comment"><!--按钮--></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"提交"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure> <h1 id="HTML-脚本"><a href="#HTML-脚本" class="headerlink" title="HTML 脚本"></a>HTML 脚本</h1><h2 id="标签"><a href="#标签" class="headerlink" title="标签"></a><script>标签</h2><script> 标签用于定义客户端脚本,比如 JavaScript。<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。JavaScript 最常用于图片操作、表单验证以及内容动态更新。 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">"Hello World!"</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure> ## <noscript>标签 <noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容: <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">"Hello World!"</span>)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">noscript</span>></span>抱歉,你的浏览器不支持 JavaScript!<span class="tag"></<span class="name">noscript</span>></span></span><br></pre></td></tr></table></figure> HTML 字符实体 ## HTML字符实体 ![](/images/1663229277600-e09b4bfc-75a6-4fdb-ab1a-88c5b6dfc8e4.png) 实体名称对字符大小写敏感 | 显示结果 | 描述 | 实体名称 | 实体编号 | | --- | --- | --- | --- | | | 空格 |   |   | | < | 小于号 | < | < | | > | 大于号 | > | > | | & | 和号 | & | & | | " | 引号 | " | " | | ' | 撇号 | ' (IE不支持) | ' | | ¢ | 分 | ¢ | ¢ | | £ | 镑 | £ | £ | | ¥ | 人民币/日元 | ¥ | ¥ | | € | 欧元 | € | € | | § | 小节 | § | § | | © | 版权 | © | © | | ® | 注册商标 | ® | ® | | ™ | 商标 | ™ | ™ | | × | 乘号 | × | × | | ÷ | 除号 | ÷ | ÷ | **虽然 html 不区分大小写,但实体字符对大小写敏感。** # [HTML 速查列表](https://www.runoob.com/html/html-quicklist.html) # HTML5 新元素 ## <canvas> 新元素 | 标签 | 描述 | | --- | --- | | [<canvas>](https://www.runoob.com/tags/tag-canvas.html) | 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API | **<canvas> 标签只是图形容器,必须使用脚本来绘制图形。** ## 新多媒体元素 | 标签 | 描述 | | --- | --- | | [<audio>](https://www.runoob.com/tags/tag-audio.html) | 定义音频内容 | | [<video>](https://www.runoob.com/tags/tag-video.html) | 定义视频(video 或者 movie) | | [<source>](https://www.runoob.com/tags/tag-source.html) | 定义多媒体资源 <video> 和 <audio> | | [<embed>](https://www.runoob.com/tags/tag-embed.html) | 定义嵌入的内容,比如插件。 | | [<track>](https://www.runoob.com/tags/tag-track.html) | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 | ## 新表单元素 | 标签 | 描述 | | --- | --- | | [<datalist>](https://www.runoob.com/tags/tag-datalist.html) | 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 | | [<keygen>](https://www.runoob.com/tags/tag-keygen.html) | 规定用于表单的密钥对生成器字段。 | | [<output>](https://www.runoob.com/tags/tag-output.html) | 定义不同类型的输出,比如脚本的输出。 | ## 新的语义和结构元素 HTML5提供了新的元素来创建更好的页面结构: | 标签 | 描述 | | --- | --- | | [<article>](https://www.runoob.com/tags/tag-article.html) | 定义页面独立的内容区域。 | | [<aside>](https://www.runoob.com/tags/tag-aside.html) | 定义页面的侧边栏内容。 | | [<bdi>](https://www.runoob.com/tags/tag-bdi.html) | 允许您设置一段文本,使其脱离其父元素的文本方向设置。 | | [<command>](https://www.runoob.com/tags/tag-command.html) | 定义命令按钮,比如单选按钮、复选框或按钮 | | [<details>](https://www.runoob.com/tags/tag-details.html) | 用于描述文档或文档某个部分的细节 | | [<dialog>](https://www.runoob.com/tags/tag-dialog.html) | 定义对话框,比如提示框 | | [<summary>](https://www.runoob.com/tags/tag-summary.html) | 标签包含 details 元素的标题 | | [<figure>](https://www.runoob.com/tags/tag-figure.html) | 规定独立的流内容(图像、图表、照片、代码等等)。 | | [<figcaption>](https://www.runoob.com/tags/tag-figcaption.html) | 定义 <figure> 元素的标题 | | [<footer>](https://www.runoob.com/tags/tag-footer.html) | 定义 section 或 document 的页脚。 | | [<header>](https://www.runoob.com/tags/tag-header.html) | 定义了文档的头部区域 | | [<mark>](https://www.runoob.com/tags/tag-mark.html) | 定义带有记号的文本。 | | [<meter>](https://www.runoob.com/tags/tag-meter.html) | 定义度量衡。仅用于已知最大和最小值的度量。 | | [<nav>](https://www.runoob.com/tags/tag-nav.html) | 定义导航链接的部分。 | | [<progress>](https://www.runoob.com/tags/tag-progress.html) | 定义任何类型的任务的进度。 | | [<ruby>](https://www.runoob.com/tags/tag-ruby.html) | 定义 ruby 注释(中文注音或字符)。 | | [<rt>](https://www.runoob.com/tags/tag-rt.html) | 定义字符(中文注音或字符)的解释或发音。 | | [<rp>](https://www.runoob.com/tags/tag-rp.html) | 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。 | | [<section>](https://www.runoob.com/tags/tag-section.html) | 定义文档中的节(section、区段)。 | | [<time>](https://www.runoob.com/tags/tag-time.html) | 定义日期或时间。 | | [<wbr>](https://www.runoob.com/tags/tag-wbr.html) | 规定在文本中的何处适合添加换行符。 | # HTML5 Canvas ## 什么是canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 ## 创建一个画布(Canvas) 一个画布在网页中是一个矩形框,通过<canvas>绘制注意:在默认情况下<canvas>元素是没有边框没有内容的<canvas>简单实例如下: <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">canvas</span> <span class="attr">id</span>=<span class="string">"myCanvas"</span> <span class="attr">width</span>=<span class="string">"200"</span> <span class="attr">height</span>=<span class="string">"100"</span>></span><span class="tag"></<span class="name">canvas</span>></span></span><br><span class="line"><span class="comment"><!--width和height定义了画布的大小,可以使用style属性添加画布边框--></span></span><br><span class="line"><span class="tag"><<span class="name">canvas</span> <span class="attr">id</span>=<span class="string">"myCanvas"</span> <span class="attr">width</span>=<span class="string">"200"</span> <span class="attr">height</span>=<span class="string">"100"</span></span></span><br><span class="line"><span class="tag"><span class="attr">style</span>=<span class="string">"border:1px solid #000000;"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">canvas</span>></span></span><br></pre></td></tr></table></figure> **提示:**你可以在HTML页面中使用多个 <canvas> 元素. ## 使用JavaScript来绘制图像 canvas本身没有绘图能力,所有绘制工作都必须在JavaScript内部完成. <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">canvas</span> <span class="attr">id</span>=<span class="string">"myCanvas"</span> <span class="attr">width</span>=<span class="string">"200px"</span> <span class="attr">height</span>=<span class="string">"200px"</span> <span class="attr">style</span>=<span class="string">"border: 1px solid gray;background-color: burlywood"</span>></span><span class="tag"></<span class="name">canvas</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//首先,找到<canvas>元素</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> c=<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"myCanvas"</span>);</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//创建context对象</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> ctx=c.<span class="title function_">getContext</span>(<span class="string">"2d"</span>);</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//绘制一个红色矩形</span></span></span><br><span class="line"><span class="language-javascript"> ctx.<span class="property">fillStyle</span>=<span class="string">"#FF0000"</span>;</span></span><br><span class="line"><span class="language-javascript"> ctx.<span class="title function_">fillRect</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">150</span>,<span class="number">75</span>); <span class="comment">//在画布上绘制一个150*75的矩形,从左上角(0,0)开始</span></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure> **getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。****设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。****fillRect(**_**x,y,width,height**_**) 方法定义了矩形当前的填充方式。** ## Canvas 坐标 - canvas 是一个二维网格。 - canvas 的左上角坐标为 (0,0) ## Canvas 路径 在Canvas上画线,我们将使用以下两种方法: - moveTo(_x,y_) 定义线条开始坐标 - lineTo(_x,y_) 定义线条结束坐标 绘制线条我们必须使用到 "ink" 的方法,就像stroke(). <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">var</span> c=<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"myCanvas"</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">var</span> ctx=c.<span class="title function_">getContext</span>(<span class="string">"2d"</span>);</span></span><br><span class="line"><span class="language-javascript">ctx.<span class="title function_">moveTo</span>(<span class="number">0</span>,<span class="number">0</span>);</span></span><br><span class="line"><span class="language-javascript">ctx.<span class="title function_">lineTo</span>(<span class="number">200</span>,<span class="number">100</span>);</span></span><br><span class="line"><span class="language-javascript">ctx.<span class="title function_">stroke</span>();</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure> 绘制圆形时,用arc(x,y,r,start,stop) <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript"><span class="keyword">var</span> c=<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"myCanvas"</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">var</span> ctx=c.<span class="title function_">getContext</span>(<span class="string">"2d"</span>);</span></span><br><span class="line"><span class="language-javascript">ctx.<span class="title function_">beginPath</span>();</span></span><br><span class="line"><span class="language-javascript">ctx.<span class="title function_">arc</span>(<span class="number">95</span>,<span class="number">50</span>,<span class="number">40</span>,<span class="number">0</span>,<span class="number">2</span>*<span class="title class_">Math</span>.<span class="property">PI</span>);</span></span><br><span class="line"><span class="language-javascript">ctx.<span class="title function_">stroke</span>();</span></span><br><span class="line"><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure> ## Canvas - 文本 使用 canvas 绘制文本,重要的属性和方法如下: - font - 定义字体 - fillText(_text,x,y_) - 在 canvas 上绘制实心的文本 - strokeText(_text,x,y_) - 在 canvas 上绘制空心的文本 ## Canvas - 渐变 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同的方式来设置Canvas渐变: - createLinearGradient(_x,y,x1,y1_) - 创建线条渐变 - createRadialGradient(_x,y,r,x1,y1,r1_) - 创建一个径向/圆渐变 当我们使用渐变对象,必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">var</span> c=<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"myCanvas"</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">var</span> ctx=c.<span class="title function_">getContext</span>(<span class="string">"2d"</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">//创建渐变</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">var</span> grd=ctx.<span class="title function_">createLinearGradient</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">200</span>,<span class="number">0</span>);</span></span><br><span class="line"><span class="language-javascript">grd.<span class="title function_">addColorStop</span>(<span class="number">0</span>,<span class="string">"red"</span>);</span></span><br><span class="line"><span class="language-javascript">grd.<span class="title function_">addColorStop</span>(<span class="number">1</span>,<span class="string">"white"</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">//填充渐变</span></span></span><br><span class="line"><span class="language-javascript">ctx.<span class="property">fillStyle</span>=grd;</span></span><br><span class="line"><span class="language-javascript">ctx.<span class="title function_">fillRect</span>(<span class="number">10</span>,<span class="number">10</span>,<span class="number">150</span>,<span class="number">80</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure> ![](/images/1663311228972-f59ba94c-b9f0-41ae-94d1-437090d07619.png) ## Canvas - 图像 把一幅图像放置到画布上, 使用以下方法: - drawImage(_image,x,y_) <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Image to use:<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">id</span>=<span class="string">"scream"</span> <span class="attr">src</span>=<span class="string">"img_the_scream.jpg"</span> <span class="attr">alt</span>=<span class="string">"The Scream"</span> <span class="attr">width</span>=<span class="string">"220"</span> <span class="attr">height</span>=<span class="string">"277"</span>></span><span class="tag"><<span class="name">p</span>></span>Canvas:<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">canvas</span> <span class="attr">id</span>=<span class="string">"myCanvas"</span> <span class="attr">width</span>=<span class="string">"250"</span> <span class="attr">height</span>=<span class="string">"300"</span> <span class="attr">style</span>=<span class="string">"border:1px solid #d3d3d3;"</span>></span></span><br><span class="line">您的浏览器不支持 HTML5 canvas 标签。<span class="tag"></<span class="name">canvas</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">var</span> c=<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"myCanvas"</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">var</span> ctx=c.<span class="title function_">getContext</span>(<span class="string">"2d"</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">var</span> img=<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"scream"</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">img.<span class="property">onload</span> = <span class="keyword">function</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> ctx.<span class="title function_">drawImage</span>(img,<span class="number">10</span>,<span class="number">10</span>);</span></span><br><span class="line"><span class="language-javascript">} </span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure> ## HTML Canvas 参考手册 标签的完整属性可以参考[Canvas 参考手册.](https://www.runoob.com/tags/ref-canvas.html) # HTML5 SVG SVG 有多种绘制路径、框、圆、文本和图形图像的方法。 ## 什么是SVG? - SVG 指可伸缩矢量图形 (Scalable Vector Graphics) - SVG 用于定义用于网络的基于矢量的图形 - SVG 使用 XML 格式定义图形 - SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 - SVG 是万维网联盟的标准 ## SVG优势 与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于: - SVG 图像可通过文本编辑器来创建和修改 - SVG 图像可被搜索、索引、脚本化或压缩 - SVG 是可伸缩的 - SVG 图像可在任何的分辨率下被高质量地打印 - SVG 可在图像质量不下降的情况下被放大 ## 把 SVG 直接嵌入 HTML 页面 ### SVG 圆形 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">svg</span> <span class="attr">xmlns</span>=<span class="string">"http://www.w3.org/2000/svg"</span> <span class="attr">version</span>=<span class="string">"1.1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">circle</span> <span class="attr">cx</span>=<span class="string">"100"</span> <span class="attr">cy</span>=<span class="string">"50"</span> <span class="attr">r</span>=<span class="string">"40"</span> <span class="attr">stroke</span>=<span class="string">"black"</span> <span class="attr">stroke-width</span>=<span class="string">"2"</span> <span class="attr">fill</span>=<span class="string">"red"</span> /></span></span><br><span class="line"><span class="tag"></<span class="name">svg</span>></span> </span><br><span class="line"> </span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure> ![](/images/1663313027069-ed4a9c08-a970-4d11-b1ea-99b51a569c58.png) ## SVG 五角星 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> </span><br><span class="line"><span class="tag"><<span class="name">svg</span> <span class="attr">xmlns</span>=<span class="string">"http://www.w3.org/2000/svg"</span> <span class="attr">version</span>=<span class="string">"1.1"</span> <span class="attr">height</span>=<span class="string">"190"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">polygon</span> <span class="attr">points</span>=<span class="string">"100,10 40,180 190,60 10,60 160,180"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">style</span>=<span class="string">"fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">svg</span>></span></span><br><span class="line"> </span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure> ![](/images/1663313640996-1c67578e-e957-4e9a-b06e-83c83e8004fc.png) ## SVG 与 Canvas两者间的区别 - SVG 是一种使用 XML 描述 2D 图形的语言。 - Canvas 通过 JavaScript 来绘制 2D 图形。 **canvas 与 SVG 之间的一些不同之处。** | Canvas | SVG | | --- | --- | | - 依赖分辨率- 不支持事件处理器- 弱的文本渲染能力- 能够以 .png 或 .jpg 格式保存结果图像- 最适合图像密集型的游戏,其中的许多对象会被频繁重绘 | - 不依赖分辨率- 支持事件处理器- 最适合带有大型渲染区域的应用程序(比如谷歌地图)- 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)- 不适合游戏应用 | # HTML5 拖放 # HTML5 Video(视频) - <video> 元素提供了 播放、暂停和音量控件来控制视频。 - 同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸。 - <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。 - <video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。 - 浏览器将使用第一个可识别的格式. <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">video</span> <span class="attr">width</span>=<span class="string">"320"</span> <span class="attr">height</span>=<span class="string">"240"</span> <span class="attr">controls</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"movie.mp4"</span> <span class="attr">type</span>=<span class="string">"video/mp4"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"movie.ogg"</span> <span class="attr">type</span>=<span class="string">"video/ogg"</span>></span></span><br><span class="line"> 您的浏览器不支持 HTML5 video 标签。</span><br><span class="line"><span class="tag"></<span class="name">video</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure> # HTML5 Audio(音频) <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">audio</span> <span class="attr">controls</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"horse.ogg"</span> <span class="attr">type</span>=<span class="string">"audio/ogg"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"horse.mp3"</span> <span class="attr">type</span>=<span class="string">"audio/mpeg"</span>></span></span><br><span class="line">您的浏览器不支持 audio 元素。</span><br><span class="line"><span class="tag"></<span class="name">audio</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure> # HTML5 Input类型 新的输入类型: tips - color 用在input字段主要用于选取颜色 - date 允许从一个日期选择器选择一个日期 - datetime 允许选择一个日期(UTC 时间) - datetime-local 允许选择一个日期和时间 (无时区). - email 用于应该包含 e-mail 地址的输入域 - month 允许选择一个月份 - number 用于应该包含数值的输入域,还能够设定对所接受的数字的限定. - range 用于应该包含一定范围内数字值的输入域,显示为滑动条. - search 用于搜索域,比如站点搜索或 Google 搜索。 - tel 定义输入电话号码字段 - time 允许选择一个时间 - url 用于应该包含 URL 地址的输入域,在提交表单时,会自动验证 url 域的值。 - week 允许选择周和年 # 页面-demo ![](/images/1663665324463-7b87f2f9-2b3b-4b4f-9d01-b5a7fa01974b.png) HTML </div> <div class="reward-container"> <div></div> <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';"> 打赏 </button> <div id="qr" style="display: none;"> <div style="display: inline-block;"> <img src="/images/wechatpay.png" alt="SindreYang 微信支付"> <p>微信支付</p> </div> <div style="display: inline-block;"> <img src="/images/alipay.png" alt="SindreYang 支付宝"> <p>支付宝</p> </div> </div> </div> <div> <ul class="post-copyright"> <li class="post-copyright-author"> <strong>本文作者: </strong>SindreYang </li> <li class="post-copyright-link"> <strong>本文链接:</strong> <a href="http://blog.mviai.com/2025/2._%E5%AD%A6%E4%B9%A0HTML%EF%BC%95/" title="2">http://blog.mviai.com/2025/2._学习HTML5/</a> </li> <li class="post-copyright-license"> <strong>版权声明: </strong>本博客所有文章除特别声明外,均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="fa fa-fw fa-creative-commons"></i>BY-NC-SA</span> 许可协议。转载请注明出处! </li> </ul> </div> <div class="followme"> <p>欢迎关注我的其它发布渠道</p> <div class="social-list"> <div class="social-item"> <a target="_blank" class="social-link" href="/images/wechat.png"> <span class="icon"> <i class="fa fa-wechat"></i> </span> <span class="label">WeChat</span> </a> </div> </div> </div> <footer class="post-footer"> <div class="post-nav"> <div class="post-nav-item"> <a href="/2025/2._%E7%86%9F%E6%82%89Git%E6%93%8D%E4%BD%9C/" rel="prev" title="2"> <i class="fa fa-chevron-left"></i> 2 </a></div> <div class="post-nav-item"> <a href="/2025/17._WebGL/" rel="next" title="17"> 17 <i class="fa fa-chevron-right"></i> </a></div> </div> </footer> </article> </div> <div class="comments"> <div id="SOHUCS"></div> </div> <script> window.addEventListener('tabs:register', () => { let { activeClass } = CONFIG.comments; if (CONFIG.comments.storage) { activeClass = localStorage.getItem('comments_active') || activeClass; } if (activeClass) { let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`); if (activeTab) { activeTab.click(); } } }); if (CONFIG.comments.storage) { window.addEventListener('tabs:click', event => { if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return; let commentClass = event.target.classList[1]; localStorage.setItem('comments_active', commentClass); }); } </script> </div> <div class="toggle sidebar-toggle"> <span class="toggle-line toggle-line-first"></span> <span class="toggle-line toggle-line-middle"></span> <span class="toggle-line toggle-line-last"></span> </div> <aside class="sidebar"> <div class="sidebar-inner"> <ul class="sidebar-nav motion-element"> <li class="sidebar-nav-toc"> 文章目录 </li> <li class="sidebar-nav-overview"> 站点概览 </li> </ul> <!--noindex--> <div class="post-toc-wrap sidebar-panel"> <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%AE%80%E5%8D%95%E7%9A%84HTML%E5%9F%BA%E7%A1%80"><span class="nav-number">1.</span> <span class="nav-text">简单的HTML基础</span></a></li><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-number">2.</span> <span class="nav-text"> - </span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link"><span class="nav-number">2.0.0.0.0.1.</span> <span class="nav-text"></span></a></li></ol></li></ol></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTML-%E5%85%83%E7%B4%A0%E8%AF%AD%E6%B3%95"><span class="nav-number">3.</span> <span class="nav-text">HTML 元素语法</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTML-%E5%B1%9E%E6%80%A7"><span class="nav-number">4.</span> <span class="nav-text">HTML 属性</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTML-%E6%96%87%E6%9C%AC%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A0%87%E7%AD%BE"><span class="nav-number">5.</span> <span class="nav-text">HTML 文本格式化标签</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTML-%E2%80%9C%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%BE%93%E5%87%BA%E2%80%9D-%E6%A0%87%E7%AD%BE"><span class="nav-number">6.</span> <span class="nav-text">HTML “计算机输出” 标签</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTML-%E5%BC%95%E6%96%87-%E5%BC%95%E7%94%A8-%E5%8F%8A%E6%A0%87%E7%AD%BE%E5%AE%9A%E4%B9%89"><span class="nav-number">7.</span> <span class="nav-text">HTML 引文, 引用, 及标签定义</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTML-%E9%93%BE%E6%8E%A5"><span class="nav-number">8.</span> <span class="nav-text">HTML 链接</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTML-head-%E5%85%83%E7%B4%A0"><span class="nav-number">9.</span> <span class="nav-text">HTML head 元素</span></a></li></ol></div> </div> <!--/noindex--> <div class="site-overview-wrap sidebar-panel"> <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"> <img class="site-author-image" itemprop="image" alt="SindreYang" src="/images/avatar.png"> <p class="site-author-name" itemprop="name">SindreYang</p> <div class="site-description" itemprop="description">沉淀后我愿意做一个温暖的人。有自己的喜好,有自己的原则,有自己的信仰,不急功近利,不浮夸轻薄,宠辱不惊,淡定安逸,心静如水。------不忘初心,方得始终</div> </div> <div class="site-state-wrap motion-element"> <nav class="site-state"> <div class="site-state-item site-state-posts"> <a href="/archives/"> <span class="site-state-item-count">321</span> <span class="site-state-item-name">日志</span> </a> </div> <div class="site-state-item site-state-categories"> <a href="/categories/"> <span class="site-state-item-count">72</span> <span class="site-state-item-name">分类</span></a> </div> </nav> </div> <div class="links-of-author motion-element"> <span class="links-of-author-item"> <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL1NpbmRyZVlhbmc=" title="GitHub → https://github.com/SindreYang"><i class="fa fa-fw fa-github"></i>GitHub</span> </span> <span class="links-of-author-item"> <span class="exturl" data-url="bWFpbHRvOnl4QG12aWFpLmNvbQ==" title="E-Mail → mailto:yx@mviai.com"><i class="fa fa-fw fa-envelope"></i>E-Mail</span> </span> </div> <div class="cc-license motion-element" itemprop="license"> <span class="exturl cc-opacity" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></span> </div> </div> </div> </aside> <div id="sidebar-dimmer"></div> </div> </main> <footer class="footer"> <div class="footer-inner"> <div class="languages"> <label class="lang-select-label"> <i class="fa fa-language"></i> <span>简体中文</span> <i class="fa fa-angle-up" aria-hidden="true"></i> </label> <select class="lang-select" data-canonical=""> <option value="zh-CN" data-href="/2025/2._%E5%AD%A6%E4%B9%A0HTML%EF%BC%95/" selected=""> 简体中文 </option> <option value="en" data-href="/en/2025/2._%E5%AD%A6%E4%B9%A0HTML%EF%BC%95/" selected=""> English </option> </select> </div> <div class="copyright"> © 2018 – <span itemprop="copyrightYear">2025</span> <span class="with-love"> <i class="fa fa-user"></i> </span> <span class="author" itemprop="copyrightHolder">SindreYang</span> </div><!-- 页面点击小红心 --> <script type="text/javascript" src="/js/love.js"></script> <!-- 背景波浪 --> <script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script> <!-- 腾讯企业邮箱 --> <style> .bizmail_loginpanel { font-size: 12px; width: 300px; height: auto; background: transparent; margin-left: auto; margin-right: auto; } .bizmail_LoginBox { padding: 10px 15px; } .bizmail_loginpanel form { margin: 0; padding: 0; } .bizmail_loginpanel input.text { font-size: 12px; width: 100px; height: 20px; margin: 0 2px; background-color: transparent; border:1px solid transparent; box-shadow: none; color: black; } .bizmail_loginpanel .bizmail_column { height: 28px; } .bizmail_loginpanel .bizmail_column label { display: block; float: left; width: 30px; height: 24px; line-height: 24px; font-size: 12px; } .bizmail_loginpanel .bizmail_column .bizmail_inputArea { float: left; width: 240px; } .bizmail_loginpanel .bizmail_column span { font-size: 12px; word-wrap: break-word; margin-left: 2px; line-height: 200%; } .bizmail_loginpanel .bizmail_SubmitArea { margin-left: 30px; clear: both; } .bizmail_loginpanel .bizmail_SubmitArea a { font-size: 12px; margin-left: 5px; } .bizmail_loginpanel select { width: 110px; height: 20px; margin: 0 2px; } .bizmail_loginpanel input { background-color: rgba(83, 126, 236, 0.562); } </style> <script type="text/javascript"> function checkInput() { var e = document.form1.uin, i = document.form1.pwd; return 0 == e.value.length ? e.focus() : 0 == i.value.length ? i.focus() : (document.form1.submit(), setTimeout(" document.form1.pwd.value = '' ", 500)), !1 } function writeLoginPanel(e) { if (e && e.domainlist && -1 != e.domainlist.indexOf(".")) { var a = "return checkInput()", t = '<div id="divLoginpanelHor" class="bizmail_loginpanel" style="width:550px;"><div class="bizmail_LoginBox"><form name="form1" action="https://exmail.qq.com/cgi-bin/login" target="_blank" method="post" onsubmit="' + a + '"><input type="hidden" name="firstlogin" value="false" /><input type="hidden" name="errtemplate" value="dm_loginpage" /><input type="hidden" name="aliastype" value="other" /><input type="hidden" name="dmtype" value="bizmail" /><input type="hidden" name="p" value="" /><label>\u8d26\u53f7:</label><input type="text" name="uin" class="text" value="" />@#domainlist#<label>   \u5bc6\u7801:</label><input type="password" name="pwd" class="text" value="" /><input type="submit" class="" name="" value="\u767b\u5f55" /> <a href="https://exmail.qq.com/cgi-bin/readtemplate?check=false&t=biz_rf_portal#recovery" target="_blank">\u5fd8\u8bb0\u5bc6\u7801\uff1f</a></form></div></div>', n = '<div id="divLoginpanelVer" class="bizmail_loginpanel"><div class="bizmail_LoginBox"><form name="form1" action="https://exmail.qq.com/cgi-bin/login" target="_blank" method="post" onsubmit="' + a + '"><input type="hidden" name="firstlogin" value="false" /><input type="hidden" name="errtemplate" value="dm_loginpage" /><input type="hidden" name="aliastype" value="other" /><input type="hidden" name="dmtype" value="bizmail" /><input type="hidden" name="p" value="" /><div class="bizmail_column"><label>\u8d26\u53f7:</label><div class="bizmail_inputArea"><input type="text" name="uin" class="text" value="" />@#domainlist#</div></div><div class="bizmail_column"><label>\u5bc6\u7801:</label><div class="bizmail_inputArea"><input type="password" name="pwd" class="text" value="" /></div></div><div class="bizmail_SubmitArea"><input type="submit" class="" name="" style="width:66px;" value="\u767b\u5f55" /><a href="https://exmail.qq.com/cgi-bin/readtemplate?check=false&t=biz_rf_portal#recovery" target="_blank">\u5fd8\u8bb0\u5bc6\u7801\uff1f</a></div></form></div></div>', l = e.domainlist.split(";"); if (1 == l.length) var m = '<span>#domain#</span><input type="hidden" name="domain" value="#domain#" />'.replace(/#domain#/g, l[0]); else { m = '<select name="domain">'; for (i = 0; i < l.length; i++) m += '<option value="' + l[i] + '">' + l[i] + "</option>"; m += "</select>" } e.mode && "vertical" != e.mode && "both" != e.mode || document.write(n.replace(/#domainlist#/g, m)), "horizontal" != e.mode && "both" != e.mode || document.write(t.replace(/#domainlist#/g, m)) } } </script> <script type="text/javascript"> writeLoginPanel({domainlist:"mviai.com", mode:"horizontal"});</script> </div> </footer> </div> <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script> <script src="/lib/anime.min.js"></script> <script src="//cdn.jsdelivr.net/npm/medium-zoom@1/dist/medium-zoom.min.js"></script> <script src="/lib/velocity/velocity.min.js"></script> <script src="/lib/velocity/velocity.ui.min.js"></script> <script src="/js/utils.js"></script> <script src="/js/motion.js"></script> <script src="/js/schemes/pisces.js"></script> <script src="/js/next-boot.js"></script> <script defer src="/lib/three/three.min.js"></script> <script defer src="/lib/three/three-waves.min.js"></script> <script src="/js/local-search.js"></script> <script> document.querySelectorAll('.pdfobject-container').forEach(element => { let url = element.dataset.target; let pdfOpenParams = { navpanes : 0, toolbar : 0, statusbar: 0, pagemode : 'thumbs', view : 'FitH' }; let pdfOpenFragment = '#' + Object.entries(pdfOpenParams).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&'); let fullURL = `/lib/pdf/web/viewer.html?file=${encodeURIComponent(url)}${pdfOpenFragment}`; if (NexT.utils.supportsPDFs()) { element.innerHTML = `<embed class="pdfobject" src="${url + pdfOpenFragment}" type="application/pdf" style="height: ${element.dataset.height};">`; } else { element.innerHTML = `<iframe src="${fullURL}" style="height: ${element.dataset.height};" frameborder="0"></iframe>`; } }); </script> <script> NexT.utils.loadComments(document.querySelector('#SOHUCS'), () => { var appid = 'cyxmItxjS'; var conf = 'e5e71132d9086bb54aeeba6e88e87df9'; var width = window.innerWidth || document.documentElement.clientWidth; if (width < 960) { window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } }); </script> <script src="https://cy-cdn.kuaizhan.com/upload/plugins/plugins.count.js"></script> <script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/z16.model.json"},"display":{"position":"left","width":75,"height":150},"mobile":{"show":true},"log":false});</script></body> </html>