首页 › HTML论坛 › HTML/HTML5常用标签和属性

莫奈德华 發表於 2022-9-7 00:40:00

HTML/HTML5常用标签和属性

<h1 id="htmlhtml5-常用标签和属性">HTML/HTML5 常用标签和属性</h1>
<h2 id="四标题标签">四、标题标签</h2>
<p>TIP</p>
<p>h 系列标签表示 “标题” 含义，h 是 <code>headline</code> 的意思</p>
<h3 id="1h1h6-标签">1、h1~h6 标签</h3>
<table>
<thead>
<tr>
<th>标签</th>
<th>语义</th>
</tr>
</thead>
<tbody>
<tr>
<td>h1</td>
<td>一级标题</td>
</tr>
<tr>
<td>h2</td>
<td>二级标题</td>
</tr>
<tr>
<td>h3</td>
<td>三级标题</td>
</tr>
<tr>
<td>h4</td>
<td>四级标题</td>
</tr>
<tr>
<td>h5</td>
<td>五级标题</td>
</tr>
<tr>
<td>h6</td>
<td>六级标题</td>
</tr>
</tbody>
</table>
<p>关于 h 标签详细解读</p>
<ul>
<li><code>&lt;h1&gt;&lt;/h1&gt;</code>标签的内容对于搜索引擎来说非常重要，相当于一篇文章的标题（主题）</li>
<li>应该将当前页面重要的内容放到 <code>&lt;h1&gt;&lt;/h1&gt;</code>标签中</li>
<li>关于<code>h1 ~ h6</code> 标签的使用 以百度百科</li>
</ul>
<p> </p>
<ul>
<li> (opens new window)为标准</li>
<li><code>&lt;h1&gt;&lt;/h1&gt;</code>标签在一个网页中只能放置一个，否则会被搜索引擎视为作弊</li>
</ul>
<pre><code class="language-html">&lt;h1&gt;我是h1标题标签&lt;/h1&gt;
&lt;h2&gt;我是h2标题标签&lt;/h2&gt;
&lt;h3&gt;我是h3标题标签&lt;/h3&gt;
&lt;h4&gt;我是h4标题标签&lt;/h4&gt;
&lt;h5&gt;我是h5标题标签&lt;/h5&gt;
&lt;h6&gt;我是h6标题标签&lt;/h6&gt;
</code></pre>
<h3 id="2h-标签在-seo-优化中的设置技巧">2、h 标签在 SEO 优化中的设置技巧</h3>
<p>① 不同类型页面的设置</p>
<ul>
<li><strong>首页</strong>：网站首页的 H1 通常是网站 logo，强调 alt 的内容，而 alt 属性是网站首页标题，包含核心关键词，H2 标注分类页面，H3 标注内容页面标题链接。</li>
<li><strong>列表页（栏目页）</strong>：H1 设置为分类名称，H2 是子分类名称，H3 设置为内容页面标题链接。</li>
<li><strong>内容页（产品详情页、文章页）</strong>：H1 设置文章标题名称，H2 标注列表名称，H3 标注相关文章。</li>
</ul>
<p><strong>② H 标签包含关键词</strong></p>
<ul>
<li>H 标签是一个强调性的标签，因此，H1 标签中，必须包含核心关键词，H2、H3 标签可以适当的包含长尾关键词</li>
</ul>
<p><strong>③ 页面 H 标签的数量。</strong></p>
<ul>
<li>一个页面上只能有 1 个 H1 标签，可以包含不等的 H2-H6 标签。从结构化的角度看，有 H3 就要有 H1、H2。</li>
</ul>
<p>详细解读，h 标签的 SEO 优化 👆</p>
<h2 id="五段落标签">五、段落标签</h2>
<p>关于 p 标签详细解读</p>
<ul>
<li><code>&lt;p&gt;&lt;/p&gt;</code>标签表示<code>段落标签</code>，p 是英语 <code>Paragraph</code>的意思</li>
<li>任何段落都要放到 p 标签中，因为 HTML 代码中即使代码换行了，页面显示效果也不会换行，必须写在 <code>&lt;p&gt;&lt;/p&gt;</code>中</li>
<li><code>&lt;p&gt;&lt;/p&gt;</code>标签中<code>不能嵌套</code> h 标签、其他 p 标签和其他块级元素</li>
</ul>
<p>p 标签中可可嵌套的标签有： <img src="https://www.arryblog.com/assets/img/pppppp.2dd52f76.png"></p>
<p>模仿百度百科，写一个 h 标签和 p 标签的综合案例 ，以 "前端开发</p>
<p> </p>
<p> (opens new window)" 为例。效果如下：</p>
<p><img src="https://www.arryblog.com/assets/img/image-20211120221214045.a164d24c.png"></p>
<h2 id="六div-标签">六、div 标签</h2>
<p>关于 div 标签详细解读</p>
<ul>
<li><code>&lt;div&gt;&lt;/div&gt;</code>标签 是英语 <code>division</code> “分隔” 的缩写</li>
<li>div 标签对是用来将相关内容组合到一起，以和其他内容分隔，使文档结构更清晰</li>
</ul>
<p><strong>比如：一般网页布局 头部，内容区，底部 都会通过 div 进行分隔</strong></p>
<ul>
<li><code>&lt;div&gt;&lt;/div&gt;</code> 是最常见的 HTML 标签，因为它会结合 CSS 来使用，实现网页的布局，这种布局形式叫做 <code>DIV+CSS</code></li>
<li><code>&lt;div&gt;&lt;/div&gt;</code> 像一个容器，什么都可以容纳，因此工程师们习惯称呼 div 为 <code>盒子</code></li>
</ul>
<p><strong>事例如下：通过 Google 开发者工具查看网页的 DIV 布局</strong></p>
<p><img src="https://www.arryblog.com/assets/img/image-20211120233431632.ca4f8099.png"></p>
<p><strong>编写练习案例效果：</strong></p>
<p><img src="https://www.arryblog.com/assets/img/image-20211120234301486.0cca998e.png"></p>
<h2 id="七html5-特性">七、HTML5 特性</h2>
<h3 id="1空白折叠现象">1、空白折叠现象</h3>
<p>TIP</p>
<ul>
<li>文字和文字之间的多个空格、换行会被折叠成一个空格</li>
<li>标签 <code>内壁</code> 和 文字之间的空格会被忽略</li>
</ul>
<pre><code class="language-html">&lt;body&gt;
&lt;h1&gt;HTML5特性：空白折叠现象&lt;/h1&gt;

&lt;h2&gt;文字和文字之间的多个空格、换行会被折叠成一个空格&lt;/h2&gt;
&lt;p&gt;文本内容 文本内容&lt;/p&gt;

&lt;h2&gt;标签 内壁 和 文字之间的空格会被忽略&lt;/h2&gt;
&lt;p&gt;文本内容文本&lt;/p&gt;
&lt;/body&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211120235244134.50c6ac2d.png"></p>
<h3 id="2常用转义符">2、常用转义符</h3>
<table>
<thead>
<tr>
<th style="text-align: left">显示结果</th>
<th style="text-align: left">描述</th>
<th style="text-align: left">实体名称</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"></td>
<td style="text-align: left">空格</td>
<td style="text-align: left"><code> </code></td>
</tr>
<tr>
<td style="text-align: left">&lt;</td>
<td style="text-align: left">小于号</td>
<td style="text-align: left"><code>&lt;</code></td>
</tr>
<tr>
<td style="text-align: left">&gt;</td>
<td style="text-align: left">大于号</td>
<td style="text-align: left"><code>&gt;</code></td>
</tr>
<tr>
<td style="text-align: left">&amp;</td>
<td style="text-align: left">&amp;符号</td>
<td style="text-align: left"><code>&amp;</code></td>
</tr>
<tr>
<td style="text-align: left">"</td>
<td style="text-align: left">双引号</td>
<td style="text-align: left"><code>"</code></td>
</tr>
<tr>
<td style="text-align: left">©</td>
<td style="text-align: left">版权</td>
<td style="text-align: left"><code>©</code></td>
</tr>
<tr>
<td style="text-align: left">®</td>
<td style="text-align: left">已注册商标</td>
<td style="text-align: left"><code>®</code></td>
</tr>
</tbody>
</table>
<pre><code class="language-html">&lt;body&gt;
&lt;h1&gt;HTML常用转义符&lt;/h1&gt;

&lt;p&gt;空格：&amp;nbsp;&amp;nbsp;&amp;nbsp; 这是三个空格&lt;/p&gt;
&lt;p&gt;大于号：&amp;gt;&lt;/p&gt;
&lt;p&gt;小于号：&amp;lt;&lt;/p&gt;
&lt;p&gt;&amp;符号：&amp;amp;&lt;/p&gt;
&lt;p&gt;“双引号：&amp;quot;&lt;/p&gt;
&lt;p&gt;版权符号：&amp;copy;&lt;/p&gt;
&lt;p&gt;已注册商标：&amp;reg;&lt;/p&gt;

&lt;p&gt;在网页中直接显示原标签:&lt;/p&gt;

显示p标签 &amp;lt;p&gt;&amp;lt;/p&gt; &lt;br /&gt;&lt;br /&gt;

显示div标签：&amp;lt;div&amp;gt;&amp;lt;/div&amp;gt;
&lt;/body&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211121001254290.3557e8f1.png"></p>
<h3 id="3html-的注释">3、HTML 的注释</h3>
<p>对于 程序开发人员最讨厌的两件事：</p>
<ul>
<li>讨厌自己加注释</li>
<li>讨厌别人的代码不加注释</li>
</ul>
<p><strong>添加注释的重要性：</strong></p>
<ul>
<li>提高代码的可阅读性，方便自己阅读或他人阅读</li>
<li>增强代码的可维护性</li>
</ul>
<p><strong>注：</strong></p>
<ul>
<li>注释在网页中是不显示的，只有自己能看到</li>
</ul>
<p><strong>HTML 注释的语法：</strong></p>
<pre><code class="language-html">&lt;!--注释内容--&gt;
</code></pre>
<p>在 Vscode 中，可以使用快捷键 <code>Ctrl + /</code> 添</p>
<h2 id="八列表标签">八、列表标签</h2>
<p>HTML5 中提供了三种列表标签</p>
<table>
<thead>
<tr>
<th style="text-align: left">标签</th>
<th style="text-align: left">语义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>&lt;ul&gt;&lt;/ul&gt;</code></td>
<td style="text-align: left">无序列表 （没有刻意的顺序）</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;ol&gt;&lt;/ol&gt;</code></td>
<td style="text-align: left">有序列表</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;dl&gt;&lt;/dl&gt;</code></td>
<td style="text-align: left">定义列表</td>
</tr>
</tbody>
</table>
<h3 id="1无序列表---基础语法">1、无序列表 - 基础语法</h3>
<p>语法</p>
<ul>
<li>无序列表使用 <code>&lt;ul&gt;&lt;/ul&gt;</code>标签，是英文单词<code>unordered list（不排序列表）</code> 缩写</li>
<li>每个列表项都是 <code>&lt;li&gt;&lt;/li&gt;</code>标签，是英文单词 <code>list item（列表项目）</code>缩写</li>
<li>无序列表是一个父子组合标签，上阵父子兵，不能单独出现</li>
<li><code>&lt;ul&gt;</code> 父标签，<code>li</code> 子标签</li>
</ul>
<pre><code class="language-html">&lt;h1&gt;无序列表&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;小炒肉&lt;/li&gt;
&lt;li&gt;小龙虾&lt;/li&gt;
&lt;li&gt;剁椒鱼头&lt;/li&gt;
&lt;li&gt;酸辣白菜&lt;/li&gt;
&lt;li&gt;7分熟牛排&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>注：</p>
<ul>
<li>ul ，li 标签是嵌套形式，li 标签必须要缩进（一个 Tab）</li>
<li>li 标签不能单独使用</li>
<li>ul 的子标签只能是 li</li>
<li>li 标签中是可以放任何标签的</li>
</ul>
<h3 id="2无序列表---列表嵌套">2、无序列表 - 列表嵌套</h3>
<pre><code class="language-html">&lt;h1&gt;无序列表-嵌套&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;
    &lt;h2&gt;北京市&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;海淀区&lt;/li&gt;
      &lt;li&gt;东城区&lt;/li&gt;
      &lt;li&gt;朝阳区&lt;/li&gt;
      &lt;li&gt;石景山区&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
    &lt;h2&gt;上海市&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;黄浦区&lt;/li&gt;
      &lt;li&gt;浦东新区&lt;/li&gt;
      &lt;li&gt;徐汇区&lt;/li&gt;
      &lt;li&gt;静安区&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211121171039437-16568724612073.34643d12.png"></p>
<h3 id="3无序列表的-type-属性">3、无序列表的 type 属性</h3>
<p>type 属性</p>
<ul>
<li>无序列表有 type 属性，可以定义前导符号的样式，但在 HTML5 中已经被废弃，建议使用 CSS 替代</li>
<li>只作为学习和了解即可</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">type</td>
<td style="text-align: left">disc</td>
<td style="text-align: left">默认值，实心圆</td>
</tr>
<tr>
<td style="text-align: left">type</td>
<td style="text-align: left">square</td>
<td style="text-align: left">实心正方形</td>
</tr>
<tr>
<td style="text-align: left">type</td>
<td style="text-align: left">circle</td>
<td style="text-align: left">空心圆</td>
</tr>
</tbody>
</table>
<p>注意:</p>
<p>在 HTML 4 中的 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>
<pre><code class="language-html">&lt;h1&gt;无序列表标签&lt;/h1&gt;
&lt;p&gt;ul的type属性在HTML5中已经废弃&lt;/p&gt;

&lt;h2&gt;type="square" 实心正方形&lt;/h2&gt;
&lt;ul type="square"&gt;
&lt;li&gt;小炒肉&lt;/li&gt;
&lt;li&gt;小龙虾&lt;/li&gt;
&lt;li&gt;剁椒鱼头&lt;/li&gt;
&lt;li&gt;酸辣白菜&lt;/li&gt;
&lt;li&gt;7分熟牛排&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;type="circle" 空心圆&lt;/h2&gt;
&lt;ul type="circle"&gt;
&lt;li&gt;小炒肉&lt;/li&gt;
&lt;li&gt;小龙虾&lt;/li&gt;
&lt;li&gt;剁椒鱼头&lt;/li&gt;
&lt;li&gt;酸辣白菜&lt;/li&gt;
&lt;li&gt;7分熟牛排&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211121172542621-16568724944295.65a540d2.png"></p>
<p>注：</p>
<p>在 HTML5 中使用 CSS 代替来定义不同类型的无序列表</p>
<pre><code class="language-html">&lt;h1&gt;无序列表标签&lt;/h1&gt;
&lt;p&gt;ul的type属性在HTML5中已经废弃，使用CSS替代&lt;/p&gt;

&lt;h2&gt;style="list-style-type:disc" 实心圆&lt;/h2&gt;
&lt;ul style="list-style-type:disc"&gt;
&lt;li&gt;小炒肉&lt;/li&gt;
&lt;li&gt;小龙虾&lt;/li&gt;
&lt;li&gt;剁椒鱼头&lt;/li&gt;
&lt;li&gt;酸辣白菜&lt;/li&gt;
&lt;li&gt;7分熟牛排&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;style="list-style-type:square" 实心正方形&lt;/h2&gt;
&lt;ul style="list-style-type:square"&gt;
&lt;li&gt;小炒肉&lt;/li&gt;
&lt;li&gt;小龙虾&lt;/li&gt;
&lt;li&gt;剁椒鱼头&lt;/li&gt;
&lt;li&gt;酸辣白菜&lt;/li&gt;
&lt;li&gt;7分熟牛排&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;style="list-style-type:circle" 空心圆&lt;/h2&gt;
&lt;ul style="list-style-type:circle"&gt;
&lt;li&gt;小炒肉&lt;/li&gt;
&lt;li&gt;小龙虾&lt;/li&gt;
&lt;li&gt;剁椒鱼头&lt;/li&gt;
&lt;li&gt;酸辣白菜&lt;/li&gt;
&lt;li&gt;7分熟牛排&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211121172959993-16568725093787.c36c897d.png"></p>
<h3 id="4无序列表在开发中的使用">4、无序列表在开发中的使用</h3>
<p>TIP</p>
<ul>
<li>导航栏</li>
<li>各种页面 list 列表</li>
<li>..... 基本常见网站导航、列表页都会使用 ul li 无序列表标签</li>
</ul>
<p><img src="https://www.arryblog.com/assets/img/image-20220704150756466.433e47d6.png"></p>
<h3 id="5有序列表---基础语法">5、有序列表 - 基础语法</h3>
<blockquote>
<p>有刻意顺序的列表就叫做 有序列表</p>
</blockquote>
<p><img src="https://www.arryblog.com/assets/img/image-20211121174020363-16568724127571.cc33102b.png"></p>
<p>关于有序列表</p>
<ul>
<li>有序列表使用 <code>&lt;ol&gt;&lt;/ol&gt;</code>标签，每个列表项都是<code>&lt;li&gt;&lt;/li&gt;</code>标签</li>
<li><code>&lt;ol&gt;</code>标签是英文 <code>ordered list（排序列表）</code> 缩写</li>
<li>ol 的特性与 ul li 同理</li>
</ul>
<pre><code class="language-html">&lt;h1&gt;编程语言排行榜&lt;/h1&gt;
&lt;ol&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;Python&lt;/li&gt;
&lt;li&gt;C/C++&lt;/li&gt;
&lt;li&gt;Java&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211121174947822-16568725304449.a7841f6a.png"></p>
<h3 id="6有序列表-ol-的-type-属性">6、有序列表 ol 的 type 属性</h3>
<blockquote>
<p>ol 标签可以设置 type 属性，用来设置编号的类型</p>
</blockquote>
<table>
<thead>
<tr>
<th style="text-align: left">type 属性值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">1</td>
<td style="text-align: left">数字编号（默认值）</td>
</tr>
<tr>
<td style="text-align: left">A</td>
<td style="text-align: left">大写英文字母编号</td>
</tr>
<tr>
<td style="text-align: left">a</td>
<td style="text-align: left">小写英文字母编号</td>
</tr>
<tr>
<td style="text-align: left">I</td>
<td style="text-align: left">大写罗马数字编号</td>
</tr>
<tr>
<td style="text-align: left">i</td>
<td style="text-align: left">小写罗马数字编号</td>
</tr>
</tbody>
</table>
<pre><code class="language-html">&lt;h1&gt;编程语言排行榜&lt;/h1&gt;
&lt;p&gt;ol type属性值&lt;/p&gt;

&lt;ol type="1"&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;Python&lt;/li&gt;
&lt;li&gt;C/C++&lt;/li&gt;
&lt;li&gt;Java&lt;/li&gt;
&lt;/ol&gt;

&lt;ol type="A"&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;Python&lt;/li&gt;
&lt;li&gt;C/C++&lt;/li&gt;
&lt;li&gt;Java&lt;/li&gt;
&lt;/ol&gt;

.......
</code></pre>
<h3 id="7有序列表-ol-的-start-属性">7、有序列表 ol 的 start 属性</h3>
<p>start 属性</p>
<ul>
<li><code>start</code>属性值必须是一个整数，制定了列表编号的起始值</li>
<li>此属性的值<code>阿拉伯数字</code>，即使 ol 指定了 type 属性值</li>
</ul>
<pre><code class="language-html">&lt;h1&gt;编程语言排行榜&lt;/h1&gt;
&lt;p&gt;ol type属性值 和 start属性值&lt;/p&gt;

&lt;ol type="1" start="3"&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;Python&lt;/li&gt;
&lt;li&gt;C/C++&lt;/li&gt;
&lt;li&gt;Java&lt;/li&gt;
&lt;/ol&gt;

&lt;ol type="A" start="2"&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;Python&lt;/li&gt;
&lt;li&gt;C/C++&lt;/li&gt;
&lt;li&gt;Java&lt;/li&gt;
&lt;/ol&gt;

&lt;ol type="a" start="6"&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;Python&lt;/li&gt;
&lt;li&gt;C/C++&lt;/li&gt;
&lt;li&gt;Java&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211121185255670-165687317743611.0943272c.png"></p>
<h3 id="8有序列表-ol-的-reversed-属性">8、有序列表 ol 的 reversed 属性</h3>
<p>reversed 属性</p>
<ul>
<li>reversed 属性是 HTML5 中的新属性</li>
<li>reversed 属性是一个布尔属性</li>
<li>reversed 属性指定列表中的条目是否是倒序排列的</li>
<li>reversed 属性不需要值，只需要写 reversed 单词即可</li>
</ul>
<pre><code class="language-html">&lt;h1&gt;有序列表 ol的reversed属性（倒序排列）&lt;/h1&gt;
&lt;ol type="1" reversed&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;Python&lt;/li&gt;
&lt;li&gt;C/C++&lt;/li&gt;
&lt;li&gt;Java&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
<h3 id="9定义列表">9、定义列表</h3>
<p>需要逐条给出定义描述的列表，就是定义列表</p>
<ul>
<li>定义列表使用 <code>&lt;dl&gt;&lt;/dl&gt;</code>标签，是英文单词<code>definition list（定义列表）</code> 缩写</li>
<li><code>&lt;dt&gt;&lt;/dt&gt;</code>标签，是英文单词 <code>data term（数据项）</code>缩写</li>
<li><code>&lt;dd&gt;&lt;/dd&gt;</code>标签，是英文单词 <code>data definition (数据定义)</code>缩写</li>
<li><code>dd 标签</code>内容是对<code>dt 标签</code>的解释说明</li>
<li>案例以<code>小米官网</code>首页 底部</li>
</ul>
<p><img src="https://www.arryblog.com/assets/img/image-20211121204849666-165687320818613.4f3372c4.png"></p>
<blockquote>
<p><code>&lt;dl&gt;</code>是定义列表标签，内容交替出现 <code>&lt;dt&gt;、&lt;dd&gt;</code>标签</p>
</blockquote>
<pre><code class="language-html">&lt;h1&gt;定义列表 - dt dd标签交替出现&lt;/h1&gt;
&lt;dl&gt;
&lt;dt&gt;服务支持&lt;/dt&gt;
&lt;dd&gt;售后政策&lt;/dd&gt;
&lt;dd&gt;关注我们&lt;/dd&gt;
&lt;dd&gt;自助服务&lt;/dd&gt;

&lt;dt&gt;关注我们&lt;/dt&gt;
&lt;dd&gt;新浪微博&lt;/dd&gt;
&lt;dd&gt;官方微信&lt;/dd&gt;
&lt;dd&gt;关于我们&lt;/dd&gt;
&lt;/dl&gt;
</code></pre>
<blockquote>
<ul>
<li>也允许 dt 和 dd <code>不交替出现</code>，而是分别处于不同定义列表 dl 中</li>
<li>这么写，可以有更多的 dl ，可以更好的服务 css 样式</li>
</ul>
</blockquote>
<pre><code class="language-html">&lt;h1&gt;定义列表 dt dd 不交替出现&lt;/h1&gt;

&lt;dl&gt;
&lt;dt&gt;服务支持&lt;/dt&gt;
&lt;dd&gt;售后政策&lt;/dd&gt;
&lt;dd&gt;关注我们&lt;/dd&gt;
&lt;dd&gt;自助服务&lt;/dd&gt;
&lt;/dl&gt;

&lt;dl&gt;
&lt;dt&gt;关注我们&lt;/dt&gt;
&lt;dd&gt;新浪微博&lt;/dd&gt;
&lt;dd&gt;官方微信&lt;/dd&gt;
&lt;dd&gt;关于我们&lt;/dd&gt;
&lt;/dl&gt;
</code></pre>
<h2 id="九多媒体标签">九、多媒体标签</h2>
<h3 id="1图片标签-img">1、图片标签 img</h3>
<p>（1）语法和基础</p>
<p><img src="https://www.arryblog.com/assets/img/image-20211121213542488-165687323244615.2cdf69a7.png"></p>
<p><strong>绝对路径</strong></p>
<ul>
<li>描述文件或文件夹的精准完整地址</li>
</ul>
<pre><code class="language-html">&lt;img src="D:\web\icoding-web\images\logo.png" /&gt;
&lt;img
src="https://www.icodingedu.com/files/system/2019/09-25/22132557f330499313.png"
/&gt;
</code></pre>
<h3 id="4超级链接---a-标签">4、超级链接 - a 标签</h3>
<h4 id="1语法和基础">（1）语法和基础</h4>
<p>超级链接是网页与网页之间链接跳转的方法</p>
<ul>
<li><code>&lt;a&gt;&lt;/a&gt;</code>标签是英语 anchor 锚的首字母</li>
<li><code>href</code> 属性是英语 <code>hypertext reference （超文本引用）</code>缩写</li>
</ul>
<pre><code class="language-html">&lt;a href="https://www.baidu.com"&gt;百度一下，你就知道&lt;/a&gt;
</code></pre>
<h4 id="2a-标签的-href-属性">（2）a 标签的 href 属性</h4>
<p>href 属性支持相对路径和绝对路径</p>
<pre><code class="language-html">&lt;a href="./index.html"&gt;进入首页&lt;/a&gt;
&lt;a href="../index.html"&gt;进入首页&lt;/a&gt;
&lt;a href="D:\web\icoding-web\index.html"&gt;进入首页&lt;/a&gt;
&lt;a href="https://www.icodingedu.com"&gt;艾编程&lt;/a&gt;
</code></pre>
<h4 id="3a-标签的-title-属性">（3）a 标签的 title 属性</h4>
<p>a 标签的 title 属性用户设置鼠标的悬停文本</p>
<pre><code class="language-html">&lt;a href="https://www.baidu.com" title="点击，进入百度官网"
&gt;百度一下，你就知道&lt;/a
&gt;
</code></pre>
<h4 id="4a-标签的-target-属性">（4）a 标签的 target 属性</h4>
<p>TIP</p>
<table>
<thead>
<tr>
<th style="text-align: left">target 属性值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">_blank / blank</td>
<td style="text-align: left">在新窗口中打开网页</td>
</tr>
<tr>
<td style="text-align: left">_self</td>
<td style="text-align: left">默认，当前页面跳转</td>
</tr>
</tbody>
</table>
<p>注：HTML4 中 blank 之前有个下划线 <code>_blank</code> 都可使用</p>
<pre><code class="language-html">&lt;h1&gt;超级链接 - a标签&lt;/h1&gt;

&lt;a href="https://www.baidu.com"&gt;百度一下，你就知道&lt;/a&gt;

&lt;h2&gt;a 标签的 target 属性&lt;/h2&gt;

&lt;a href="https://www.baidu.com" target="blank"&gt;_blank：新窗口打开&lt;/a
&gt;&lt;br /&gt;&lt;br /&gt;
&lt;a href="https://www.baidu.com" target="_self"&gt;_self：默认，当前页面跳转&lt;/a&gt;
</code></pre>
<p>给图片添加超级链接：点击图片标签跳转连接</p>
<pre><code class="language-html">&lt;a href="https://www.baidu.com" target="blank"&gt;
&lt;img src="images/logo.png" /&gt;
&lt;/a&gt;
</code></pre>
<h4 id="5页面锚点">（5）页面锚点</h4>
<p>TIP</p>
<ul>
<li>对于很长的页面，可以对应的标签添加 <code>id属性</code>，将它变成页面的 "锚点"</li>
<li>当点击锚点连接时，浏览器地址栏就会出现 <code>#id属性名称</code> 页面就会自动滚动到锚点处</li>
<li>从其他页面页面点击带#号的链接，就可以直接定位到锚点位置</li>
</ul>
<pre><code class="language-html">&lt;h1&gt;页面锚点链接&lt;/h1&gt;

&lt;p&gt;
&lt;a href="#phone"&gt;小米手机&lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;a href="#zn"&gt;智能穿戴&lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;a href="#jd"&gt;家电&lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;a href="#sh"&gt;生活电器&lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;a href="#cf"&gt;厨房电器&lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;a href="#jj"&gt;智能家居&lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;a href="#cx"&gt;出行搭配&lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;a href="#bh"&gt;日用百货&lt;/a&gt;
&lt;/p&gt;

&lt;h2 id="phone"&gt;小米手机&lt;/h2&gt;
&lt;img src="images/1.webp" alt="" /&gt;

&lt;h2 id="zn"&gt;智能穿戴&lt;/h2&gt;
&lt;img src="images/2.webp" alt="" /&gt;

&lt;h2 id="jd"&gt;家电&lt;/h2&gt;
&lt;img src="images/3.webp" alt="" /&gt;

&lt;h2 id="sh"&gt;生活电器&lt;/h2&gt;
&lt;img src="images/4.webp" alt="" /&gt;

&lt;h2 id="cf"&gt;厨房电器&lt;/h2&gt;
&lt;img src="images/5.webp" alt="" /&gt;

&lt;h2 id="jj"&gt;智能家居&lt;/h2&gt;
&lt;img src="images/6.webp" alt="" /&gt;

&lt;h2 id="cx"&gt;出行搭配&lt;/h2&gt;
&lt;img src="images/7.webp" alt="" /&gt;

&lt;h2 id="bh"&gt;日用百货&lt;/h2&gt;
&lt;img src="images/8.webp" alt="" /&gt;

&lt;p&gt;
&lt;a href="#top"&gt;回到顶部&lt;/a&gt;
&lt;/p&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211121224128869-165687325399317.b6ed1c25.png"></p>
<p>注：</p>
<p>在 HTML5 中 直接使用 <code>#top</code>即可回到顶部，不用定义 <code>id="top"</code></p>
<pre><code class="language-html">&lt;a href="#top"&gt;回到顶部&lt;/a&gt;
</code></pre>
<h4 id="6特殊链接下载邮件电话">（6）特殊链接（下载、邮件、电话）</h4>
<p>下载链接</p>
<p>指向 exe、zip、rar、word、excel 等文件格式的链接，将自动成为下载链接</p>
<pre><code class="language-html">&lt;h1&gt;特殊链接&lt;/h1&gt;

&lt;h2&gt;下载链接&lt;/h2&gt;

&lt;a href="doc/1.zip"&gt;web前端学习资料zip下载地址&lt;/a&gt;

&lt;br /&gt;&lt;br /&gt;

&lt;a href="doc/1.doc"&gt;学习资料doc文档&lt;/a&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211121225420879-165687328187819.7d2f8d37.png"></p>
<p>邮件链接</p>
<ul>
<li><code>mailto:</code> 前缀的链接 即 邮件链接</li>
<li>系统将自动打开 email 相关软件，即可发送邮件</li>
</ul>
<pre><code class="language-html">&lt;a href="mailto:arry@icodingedu.com"&gt;给arry老师发邮件&lt;/a&gt;
</code></pre>
<p><strong>电话链接</strong></p>
<ul>
<li><code>tel:</code>前缀的链接 即 电话链接</li>
<li>系统将自动打开手机拨号键</li>
</ul>
<pre><code class="language-html">&lt;a href="tel:18966666666"&gt;给arry老师打电话&lt;/a&gt;
</code></pre>
<h3 id="5音频和视频">5、音频和视频</h3>
<p>TIP</p>
<ul>
<li>早年在网页中插入音视频需要使用 Flash 技术，当下基本已经淘汰</li>
<li>可直接使用 HTML5 标签轻松在网页中像插入图片一样插入音频和视频即可</li>
</ul>
<h4 id="1音频标签">（1）音频标签</h4>
<p>TIP</p>
<ul>
<li><code>&lt;audio&gt;</code>标签可直接在网页中插入音频，并自动生成默认的编辑器</li>
<li><code>controls</code> 属性 ，显示播放空间</li>
<li><code>src</code> 音频路径</li>
<li><code>标签对中</code>对不兼容 audio 标签的浏览器所显示的文字</li>
<li>浏览器中常用的音频格式：mp3 和 ogg 格式</li>
</ul>
<pre><code class="language-html">&lt;audio controls src="mp3/不错哟.mp3"&gt;
亲爱的，您的浏览器不支持audio标签，请升级您的浏览器哟 ^_^
&lt;/audio&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211121231307959-165687330190921.9cfc6845.png"></p>
<p><strong>音频标签部分属性：</strong></p>
<ul>
<li><code>autoplay</code> 音频自动播放，不会等待整个音频文件下载完成</li>
<li><code>loop</code> 循环播放音频</li>
</ul>
<pre><code class="language-html">&lt;audio controls src="mp3/不错哟.mp3" autoplay loop&gt;
抱歉，您的浏览器不支持audio标签，请升级您的浏览器哟 ^_^
&lt;/audio&gt;
</code></pre>
<h4 id="2音频标签-audio-的子标签">（2）音频标签 <code>audio</code> 的子标签</h4>
<p>TIP</p>
<p>source 标签为媒体元素定义媒体资源，该标签允许定义多个格式的音视频文件，供浏览器选择自己支持的媒体类型进行播放</p>
<table>
<thead>
<tr>
<th style="text-align: left">Format</th>
<th style="text-align: left">MIME-type</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">MP3</td>
<td style="text-align: left">audio/mpeg</td>
<td style="text-align: left">一种音频压缩技术，用来大幅度的降低音频数据量</td>
</tr>
<tr>
<td style="text-align: left">Ogg</td>
<td style="text-align: left">audio/ogg</td>
<td style="text-align: left">一种新的音频压缩格式，是完全免费、开发和没有专利限制的</td>
</tr>
<tr>
<td style="text-align: left">Wav</td>
<td style="text-align: left">audio/wav</td>
<td style="text-align: left">微软公司开发的一种声音文件格式，声音文件质量和 CD 相差无几</td>
</tr>
</tbody>
</table>
<ul>
<li>浏览器需要选择它支持格式的源文件进行播放，如果都支持则任选一个（默认选择第一个）</li>
</ul>
<pre><code class="language-html">&lt;h2&gt;audio 子标签 source&lt;/h2&gt;

&lt;audio controls&gt;
&lt;source src="audio/不错哟.mp3" type="audio/mpeg" /&gt;
&lt;source src="audio/不错哟.ogg" type="audio/ogg" /&gt;
&lt;source src="audio/不错哟.wav" type="audio/wav" /&gt;
亲爱的，您的浏览器不支持audio标签，请升级您的浏览器哟 ^_^
&lt;/audio&gt;
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2941972/202209/2941972-20220906231047220-2085384750.png"></p>
<h4 id="3视频标签-video-的子标签">（3）视频标签 <code>video</code> 的子标签</h4>
<p>TIP</p>
<table>
<thead>
<tr>
<th style="text-align: left">Format</th>
<th style="text-align: left">MIME-type</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">mp4</td>
<td style="text-align: left">video/mp4</td>
<td style="text-align: left">MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器</td>
</tr>
<tr>
<td style="text-align: left">webm</td>
<td style="text-align: left">video/webm</td>
<td style="text-align: left">WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器</td>
</tr>
<tr>
<td style="text-align: left">avi</td>
<td style="text-align: left">video/avi</td>
<td style="text-align: left">avi 文件支持 256 色和 RLE 压缩，他对视频文件采用了一种有损压缩方式</td>
</tr>
<tr>
<td style="text-align: left">ogv</td>
<td style="text-align: left">video/ogv</td>
<td style="text-align: left">Ogg 文件使用 Theora 视频编解码器和 Vorbis 音频编解码器</td>
</tr>
</tbody>
</table>
<ul>
<li>浏览器需要选择它支持格式的源文件进行播放，如果都支持则任选一个（默认选择第一个）</li>
</ul>
<pre><code class="language-html">&lt;h2&gt;video 子标签 source&lt;/h2&gt;

&lt;video controls width="500"&gt;
&lt;source src="video/1.mp4" type="video/mp4" /&gt;
&lt;source src="video/1.webm" type="video/webm" /&gt;
&lt;source src="video/1.ogv" type="video/ogv" /&gt;
&lt;source src="video/1.avi" type="video/avi" /&gt;
亲爱的，您的浏览器不支持video标签，请升级您的浏览器哟 ^_^
&lt;/video&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211122001122438-165687333470325.d4bc647b.png"></p>
<h2 id="十语义化标签">十、语义化标签</h2>
<h3 id="1html-文本格式化标签">1、HTML 文本格式化标签</h3>
<h4 id="1span-标签">（1）span 标签</h4>
<p>TIP</p>
<ul>
<li><code>&lt;span&gt;</code>标签是文本中的<code>区块标签</code>，没有任何显示的效果，可以结合 css 来定位区块的样式</li>
<li>需要被特殊标记的元素也会使用 span 标签</li>
</ul>
<pre><code class="language-html">&lt;h1&gt;语义化标签&lt;/h1&gt;

&lt;h2&gt;span 标签&lt;/h2&gt;

&lt;p&gt;
商品价格：
&lt;span&gt;368&lt;/span&gt;元，优惠价：&lt;span&gt;298&lt;/span&gt;元
&lt;/p&gt;
</code></pre>
<h4 id="2文本格式化标签">（2）文本格式化标签</h4>
<table>
<thead>
<tr>
<th style="text-align: left">标签</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>&lt;b&gt;</code></td>
<td style="text-align: left">定义粗体文本 （已被 CSS 替代）</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;em&gt;</code></td>
<td style="text-align: left">定义着重文字 （被强调的文本）</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;i&gt;</code></td>
<td style="text-align: left">定义斜体字（已被 CSS 替代）</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;u&gt;</code></td>
<td style="text-align: left">定义文字的下划线（已被 CSS 替代）</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;strong&gt;</code></td>
<td style="text-align: left">定义加重语气，表示特别重要的文字</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;sub&gt;</code></td>
<td style="text-align: left">定义下标字</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;sup&gt;</code></td>
<td style="text-align: left">定义上标字</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;del&gt;</code></td>
<td style="text-align: left">定义删除字</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;pre&gt;</code></td>
<td style="text-align: left">定义预格式文本。被包围在 pre 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 pre 标签的一个常见应用就是用来表示计算机的源代码。</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;mark&gt;</code></td>
<td style="text-align: left">一段需要被高亮的文本（HTML5 新标签）</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;figure&gt;</code></td>
<td style="text-align: left">代表一段独立的内容，与说明 figcaption 标签配合使用。figure 标签规定独立的流内容（图像、图表、照片、代码等等）。</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;figcaption&gt;</code></td>
<td style="text-align: left">一个独立的引用单元，标签为<code>&lt;figure&gt;</code> 元素定义标题</td>
</tr>
</tbody>
</table>
<pre><code class="language-html">&lt;h1&gt;语义化标签&lt;/h1&gt;

&lt;h2&gt;span 标签&lt;/h2&gt;
&lt;p&gt;
商品价格：
&lt;span&gt;368&lt;/span&gt;元，优惠价：&lt;span&gt;298&lt;/span&gt;元
&lt;/p&gt;

&lt;h2&gt;文本格式化标签&lt;/h2&gt;
b标签：&lt;b&gt;定义粗体文本&lt;/b&gt; &lt;br /&gt;&lt;br /&gt;
em标签：&lt;em&gt;表示被强调的文本&lt;/em&gt; &lt;br /&gt;&lt;br /&gt;
i标签：&lt;i&gt;斜体&lt;/i&gt; &lt;br /&gt;&lt;br /&gt;
u标签：&lt;u&gt;定义文本下划线&lt;/u&gt; &lt;br /&gt;&lt;br /&gt;
strong标签：&lt;strong&gt;定义加重语气，表示特别重要的文字&lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;
del标签：&lt;del&gt;定义删除字 &lt;/del&gt;&lt;br /&gt;&lt;br /&gt;
mark标签：&lt;mark&gt;一段需要被高亮的文本&lt;/mark&gt;

&lt;h3&gt;sub 标签&lt;/h3&gt;
&lt;p&gt;碳在氧气中充分燃烧：C + O&lt;sub&gt;2&lt;/sub&gt; = CO&lt;sub&gt;2&lt;/sub&gt;&lt;/p&gt;
&lt;p&gt;铁在氧气中燃烧： 3Fe + 2O&lt;sub&gt;2&lt;/sub&gt; = Fe&lt;sub&gt;3&lt;/sub&gt;O&lt;sub&gt;4&lt;/sub&gt;&lt;/p&gt;

&lt;h3&gt;sup 标签&lt;/h3&gt;
&lt;p&gt;2&lt;sup&gt;3&lt;/sup&gt; + 3&lt;sup&gt;2&lt;/sup&gt; = 17&lt;/p&gt;

&lt;h3&gt;pre 预格式化文本&lt;/h3&gt;
&lt;pre&gt;
预格式化文本

被包围在 pre标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

pre 标签的一个常见应用就是用来表示计算机的源代码。

&lt;/pre&gt;

&lt;h3&gt;figure、figcaption 标签&lt;/h3&gt;
&lt;p&gt;
代表一段独立的内容，与figcaption配合使用。figure
标签规定独立的流内容（图像、图表、照片、代码等等）。一个独立的引用单元，标签为figure
元素定义标题
&lt;/p&gt;
&lt;p&gt;
&lt;figure&gt;
    &lt;img src="images/6.webp" alt="" /&gt;
    &lt;figcaption&gt;小米智能家居，智能门锁&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;figure&gt;
    &lt;img src="images/7.webp" alt="" /&gt;
    &lt;figcaption&gt;小米智能家居，平衡车&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211122204318903-165687335464827.d89109fd.png"></p>
<h3 id="2html5-区块标签">2、HTML5 区块标签</h3>
<table>
<thead>
<tr>
<th style="text-align: left">标签</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>&lt;section&gt;</code></td>
<td style="text-align: left">文档的区域，语义比 div 大</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;article&gt;</code></td>
<td style="text-align: left">文档的核心文章内容，会被搜索引擎主要抓取</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;aside&gt;</code></td>
<td style="text-align: left">文档的非必要相关内容，比如：广告 等</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;nav&gt;</code></td>
<td style="text-align: left">导航条</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;header&gt;</code></td>
<td style="text-align: left">页头</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;main&gt;</code></td>
<td style="text-align: left">网页核心部分</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;footer&gt;</code></td>
<td style="text-align: left">页脚</td>
</tr>
</tbody>
</table>
<pre><code class="language-html">&lt;!-- 网页的头部 --&gt;
&lt;header&gt;
&lt;div&gt;
    &lt;h1&gt;网页的logo&lt;/h1&gt;
&lt;/div&gt;
&lt;!-- 导航栏 --&gt;
&lt;nav&gt;网页的导航&lt;/nav&gt;
&lt;/header&gt;

&lt;!-- 网页的核心 --&gt;
&lt;main&gt;
&lt;!-- banner广告栏 --&gt;
&lt;aside&gt;banner广告&lt;/aside&gt;

&lt;!-- 商品信息 --&gt;
&lt;article&gt;
    &lt;h2&gt;商品标题&lt;/h2&gt;
    &lt;section&gt;商品信息1&lt;/section&gt;
    &lt;section&gt;商品信息2&lt;/section&gt;
    &lt;section&gt;商品信息3&lt;/section&gt;
&lt;/article&gt;
&lt;/main&gt;

&lt;!-- 页脚 --&gt;
&lt;footer&gt;&lt;/footer&gt;
</code></pre>
<h2 id="十一表单元素">十一、表单元素</h2>
<p>TIP</p>
<ul>
<li>HTML 表单用于收集不同类型的用户输入</li>
<li>如：登录、注册、发布、提交、编辑信息 等等</li>
</ul>
<p>类似效果如下图：</p>
<p><img src="https://www.arryblog.com/assets/img/image-20211122220956417-165687337494729.198ce453.png"></p>
<h3 id="1html-表单基本用法">1、HTML 表单基本用法</h3>
<p>TIP</p>
<ul>
<li>所有的 HTML 表单都是以一个 <code>&lt;form&gt;</code>元素包裹</li>
<li><code>action</code>属性：提交表单时向何处发送表单数据</li>
<li><code>method</code>属性：规定用于发送表单数据的 HTTP 方法</li>
</ul>
<pre><code class="language-html">&lt;h1&gt;HTML的form表单&lt;/h1&gt;

&lt;form action="/user/login" method="get"&gt;......&lt;/form&gt;
</code></pre>
<h3 id="2单行文本框">2、单行文本框</h3>
<p>TIP</p>
<table>
<thead>
<tr>
<th style="text-align: left">标签</th>
<th style="text-align: left">属性</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">type="text"</td>
<td style="text-align: left">单行文本框，单标签</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">value="艾编程"</td>
<td style="text-align: left">文本框的值</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">placeholder="请输入用户名 ..."</td>
<td style="text-align: left">提示文本，以浅灰色显示在文本框中，并不是文本框中的值</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">disabled</td>
<td style="text-align: left">表示用户不能与元素交互，即：禁用</td>
</tr>
</tbody>
</table>
<pre><code class="language-html">&lt;form action="/user" method="POST"&gt;
&lt;p&gt;用户名：&lt;input type="text" /&gt;&lt;/p&gt;
&lt;p&gt;真实姓名：&lt;input type="text" placeholder="请输入您的真实姓名 ..." /&gt;&lt;/p&gt;
&lt;p&gt;所在城市：&lt;input type="text" value="北京市海淀区" disabled /&gt;&lt;/p&gt;
&lt;/form&gt;
</code></pre>
<h3 id="3密码框">3、密码框</h3>
<p>TIP</p>
<ul>
<li>与单行文本框类似，其属性为 <code>type="password"</code> 显示内容为 隐藏</li>
</ul>
<pre><code class="language-html">请输入密码：&lt;input type="password" /&gt;
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2941972/202209/2941972-20220906231047252-1560361086.png"></p>
<h3 id="4单选按钮">4、单选按钮</h3>
<p>TIP</p>
<table>
<thead>
<tr>
<th style="text-align: left">标签</th>
<th style="text-align: left">属性</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">type="radio"</td>
<td style="text-align: left">单选按钮</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">name="自定义名称"</td>
<td style="text-align: left">设置 <code>互斥</code> ，需将多个 name 属性为相同的值</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">value=""</td>
<td style="text-align: left">向服务器提交的值</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">checked</td>
<td style="text-align: left">表示默认被选中</td>
</tr>
</tbody>
</table>
<pre><code class="language-html">性别： &lt;input type="radio" name="sex" /&gt; 男 &lt;input type="radio" name="sex" /&gt; 女
&lt;input type="radio" name="sex" checked /&gt; 保密
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2941972/202209/2941972-20220906231047240-951164156.png"></p>
<ul>
<li>以上代码，点击 文字时，不能选中按钮，需要使用 <code>label</code>标签</li>
</ul>
<h3 id="5label-标签">5、label 标签</h3>
<p>用来将文字和单选按钮进行绑定</p>
<p>当用户单击文字时，等于点击了单选按钮 ，<code>在HTML5中直接使用 label 标签包裹 单选按钮和文字 即可</code></p>
<pre><code class="language-html">性别：
&lt;label&gt; &lt;input type="radio" name="sex" /&gt; 男 &lt;/label&gt;
&lt;label&gt; &lt;input type="radio" name="sex" /&gt; 女 &lt;/label&gt;
&lt;label&gt; &lt;input type="radio" name="sex" checked /&gt; 保密 &lt;/label&gt;
</code></pre>
<p><strong>在 HTML4 中</strong></p>
<ul>
<li>label 标签是通过 for 属性和单选按钮的 id 属性进行绑定的</li>
</ul>
<pre><code class="language-html">所在城市：
&lt;input type="radio" name="city" id="beijing" /&gt;
&lt;label for="beijing"&gt;北京市&lt;/label&gt;

&lt;input type="radio" name="city" id="shanghai" /&gt;
&lt;label for="shanghai"&gt;上海市&lt;/label&gt;

&lt;input type="radio" name="city" id="shenzhen" /&gt;
&lt;label for="shenzhen"&gt;深圳市&lt;/label&gt;
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2941972/202209/2941972-20220906231047307-1034462908.png"></p>
<h3 id="6复选框">6、复选框</h3>
<table>
<thead>
<tr>
<th style="text-align: left">标签</th>
<th style="text-align: left">属性</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">type="checkbox"</td>
<td style="text-align: left">复选框</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">name="自定义名称"</td>
<td style="text-align: left">同组复选框应该设置 name 为相同值</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">value=""</td>
<td style="text-align: left">向服务器提交的值</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">checked</td>
<td style="text-align: left">表示默认被选中</td>
</tr>
</tbody>
</table>
<pre><code class="language-html">兴趣爱好：
&lt;label&gt;
&lt;input type="checkbox" name="hobby" checked value="篮球" /&gt; 篮球
&lt;/label&gt;
&lt;label&gt; &lt;input type="checkbox" name="hobby" value="乒乓球" /&gt; 乒乓球 &lt;/label&gt;
&lt;label&gt; &lt;input type="checkbox" name="hobby" value="书法" /&gt; 书法 &lt;/label&gt;
&lt;label&gt;
&lt;input type="checkbox" name="hobby" value="跑步健身" /&gt; 跑步健身
&lt;/label&gt;
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2941972/202209/2941972-20220906231047307-1531576244.png"></p>
<h3 id="7下拉菜单">7、下拉菜单</h3>
<p>TIP</p>
<ul>
<li><code>&lt;select&gt;</code>标签，即 下拉菜单</li>
<li><code>&lt;option&gt;</code>是内部选项</li>
</ul>
<pre><code class="language-html">请选择 省：
&lt;select&gt;
&lt;option value="湖北省"&gt;湖北省&lt;/option&gt;
&lt;option value="湖南省"&gt;湖南省&lt;/option&gt;
&lt;option value="安徽省"&gt;安徽省&lt;/option&gt;
&lt;option value="陕西省"&gt;陕西省&lt;/option&gt;
&lt;/select&gt;
市：
&lt;select&gt;
&lt;option value="西安市"&gt;西安市&lt;/option&gt;
&lt;/select&gt;
区：
&lt;select&gt;
&lt;option value="雁塔区"&gt;高新区&lt;/option&gt;
&lt;/select&gt;
</code></pre>
<h3 id="8多行文本框">8、多行文本框</h3>
<p>TIP</p>
<ul>
<li><code>&lt;textarea&gt;</code> 表示多行文本框</li>
<li>有 <code>rows</code>和<code>cols</code>属性，用于定义多行文本框的行数和列数</li>
</ul>
<pre><code class="language-html">用户评论： &lt;textarea cols="100" rows="10"&gt;&lt;/textarea&gt;
</code></pre>
<h3 id="9按钮">9、按钮</h3>
<table>
<thead>
<tr>
<th style="text-align: left">标签</th>
<th style="text-align: left">属性</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">type="button"</td>
<td style="text-align: left">普通按钮，也可以简写为 <code>&lt;button&gt;&lt;/button&gt;</code></td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">type="submit"</td>
<td style="text-align: left">提交按钮</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">type="reset"</td>
<td style="text-align: left">重置按钮</td>
</tr>
</tbody>
</table>
<pre><code class="language-html">&lt;button&gt;我是一个button标签，是一个普通按钮&lt;/button&gt;
&lt;input type="button" value="我是一个普通按钮" /&gt;
&lt;input type="submit" value="提交表单信息" /&gt;
&lt;input type="reset" value="重 置" /&gt;
</code></pre>
<p><strong>总结，常用表单控件</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">标签</th>
<th style="text-align: left">type 属性</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">text</td>
<td style="text-align: left">单行文本框</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">radio</td>
<td style="text-align: left">单选按钮</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">checkbox</td>
<td style="text-align: left">复选框</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">password</td>
<td style="text-align: left">密码框</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">button</td>
<td style="text-align: left">普通按钮，也可以简写为 <code>&lt;button&gt;&lt;/button&gt;</code></td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">submit</td>
<td style="text-align: left">提交按钮</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">reset</td>
<td style="text-align: left">重置按钮</td>
</tr>
</tbody>
</table>
<p><img src="https://www.arryblog.com/assets/img/image-20211123001408783-165687345772739.9e92791a.png"></p>
<h3 id="10html5-新增表单控件">10、HTML5 新增表单控件</h3>
<table>
<thead>
<tr>
<th style="text-align: left">标签</th>
<th style="text-align: left">type 属性</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">color</td>
<td style="text-align: left">颜色选择控件</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">date、time</td>
<td style="text-align: left">日期、时间选择控件</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">email</td>
<td style="text-align: left">电子邮件输入控件</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">file</td>
<td style="text-align: left">文件选择控件</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">number</td>
<td style="text-align: left">数字输入控件</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">range</td>
<td style="text-align: left">拖拽条控件</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">search</td>
<td style="text-align: left">搜索框</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;input&gt;</code></td>
<td style="text-align: left">url</td>
<td style="text-align: left">网址输入控件</td>
</tr>
</tbody>
</table>
<blockquote>
<p>注：兼容到 IE9，手机端完全兼容</p>
</blockquote>
<pre><code class="language-html">&lt;h1&gt;HTML5新增表单控件&lt;/h1&gt;

&lt;form&gt;
&lt;p&gt;
    颜色选择：
    &lt;input type="color" /&gt;
&lt;/p&gt;
&lt;p&gt;
    日期选择：
    &lt;input type="date" /&gt;
&lt;/p&gt;
&lt;p&gt;
    时间选择：
    &lt;input type="time" /&gt;
&lt;/p&gt;
&lt;p&gt;
    电子邮件（提交自动校验）：
    &lt;input type="email" /&gt;
&lt;/p&gt;
&lt;p&gt;
    必填项：
    &lt;input type="text" required /&gt;
&lt;/p&gt;
&lt;p&gt;
    数字（min最小值，max最大值）：
    &lt;input type="number" min="2" max="10" /&gt;
&lt;/p&gt;
&lt;p&gt;
    拖拽条：
    &lt;input type="range" min="10" max="50" /&gt;
&lt;/p&gt;
&lt;p&gt;
    搜索框（多一个清空按钮）：
    &lt;input type="search" /&gt;
&lt;/p&gt;
&lt;p&gt;
    网址：
    &lt;input type="url" /&gt;
&lt;/p&gt;
&lt;p&gt;
    &lt;input type="submit" value="提交表单信息" /&gt;
&lt;/p&gt;
&lt;/form&gt;
</code></pre>
<p>datalist 控件</p>
<p>为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能提示感应</p>
<pre><code class="language-html">datalist 控件：
&lt;input type="text" list="language-list" /&gt;
&lt;datalist id="language-list"&gt;
&lt;option value="Java"&gt;Java&lt;/option&gt;
&lt;option value="JavaScript"&gt;JavaScript&lt;/option&gt;
&lt;option value="Python"&gt;Python&lt;/option&gt;
&lt;option value="Go"&gt;Go&lt;/option&gt;
&lt;option value="C++"&gt;C++&lt;/option&gt;
&lt;/datalist&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211123001444728-165687347530741.b5464b55.png"></p>
<h2 id="十二表格">十二、表格</h2>
<p><img src="https://www.arryblog.com/assets/img/image-20211123172639286-165687348817143.0d969898.png"></p>
<h3 id="1html-表格标签">1、HTML 表格标签</h3>
<table>
<thead>
<tr>
<th style="text-align: left">标签</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>&lt;table&gt;</code></td>
<td style="text-align: left">定义表格</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;th&gt;</code></td>
<td style="text-align: left">定义表格的表头</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;tr&gt;</code></td>
<td style="text-align: left">定义表格的行</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;td&gt;</code></td>
<td style="text-align: left">定义表格单元</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;caption&gt;</code></td>
<td style="text-align: left">定义表格标题（作为 table 的第一个子元素出现）</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;thead&gt;</code></td>
<td style="text-align: left">定义表格的页眉</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;tbody&gt;</code></td>
<td style="text-align: left">定义表格的主体</td>
</tr>
<tr>
<td style="text-align: left"><code>&lt;tfoot&gt;</code></td>
<td style="text-align: left">定义表格的页脚</td>
</tr>
</tbody>
</table>
<h3 id="2table-标签属性">2、table 标签属性</h3>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>border</code></td>
<td style="text-align: left">表格的边框</td>
</tr>
<tr>
<td style="text-align: left"><code>width</code></td>
<td style="text-align: left">表格的宽度（HTML5 不支持）</td>
</tr>
<tr>
<td style="text-align: left"><code>cellpadding</code></td>
<td style="text-align: left">单元边沿与其内容之间的空白（HTML5 不支持）</td>
</tr>
<tr>
<td style="text-align: left"><code>cellspacing</code></td>
<td style="text-align: left">单元格之间的空白（HTML5 不支持）</td>
</tr>
</tbody>
</table>
<blockquote>
<p>注：在 HTML5 中 table 标签的大部分属性<code>已经废弃</code>，全部用 CSS 代替了</p>
</blockquote>
<pre><code class="language-html">&lt;h1&gt;table标签&lt;/h1&gt;

&lt;table border="1" width="500" cellpadding="10" cellspacing="0"&gt;
&lt;!-- caption标签，表格标题 --&gt;
&lt;caption&gt;
    同学通讯录
&lt;/caption&gt;
&lt;tr&gt;
    &lt;!-- th，表头 --&gt;
    &lt;th&gt;姓名&lt;/th&gt;
    &lt;th&gt;性别&lt;/th&gt;
    &lt;th&gt;年龄&lt;/th&gt;
    &lt;th&gt;所在城市&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;arry&lt;/td&gt;
    &lt;td&gt;男&lt;/td&gt;
    &lt;td&gt;18&lt;/td&gt;
    &lt;td&gt;北京&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;豆豆&lt;/td&gt;
    &lt;td&gt;女&lt;/td&gt;
    &lt;td&gt;21&lt;/td&gt;
    &lt;td&gt;上海&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;翠花&lt;/td&gt;
    &lt;td&gt;19&lt;/td&gt;
    &lt;td&gt;男&lt;/td&gt;
    &lt;td&gt;深圳&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211123215826885-165687350528245.5c0889a5.png"></p>
<h3 id="3table-标签跨行跨列">3、table 标签跨行、跨列</h3>
<p><code>td 标签 或 th标签</code>的属性</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>colspan</code></td>
<td style="text-align: left">number</td>
<td style="text-align: left">规定单元格可横跨的列数</td>
</tr>
<tr>
<td style="text-align: left"><code>rowspan</code></td>
<td style="text-align: left">number</td>
<td style="text-align: left">设置单元格可纵跨的行数</td>
</tr>
</tbody>
</table>
<p>注：td 标签的其他属性在 HTML5 中已不支持，直接使用 css 即可</p>
<p>跨列</p>
<pre><code class="language-html">&lt;h2&gt;表格实战 - 跨列&lt;/h2&gt;

&lt;table border="1" width="800"&gt;
&lt;caption&gt;
    学生个人信息登记表
&lt;/caption&gt;
&lt;tr&gt;
    &lt;th colspan="8"&gt;高新一中初三一班学生信息登记表&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;th colspan="8"&gt;学生基础信息&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;姓名&lt;/td&gt;
    &lt;td&gt;XXX&lt;/td&gt;
    &lt;td&gt;国籍/地区&lt;/td&gt;
    &lt;td&gt;中国&lt;/td&gt;
    &lt;td&gt;姓名拼音&lt;/td&gt;
    &lt;td&gt;XXX&lt;/td&gt;
    &lt;td&gt;班内学号&lt;/td&gt;
    &lt;td&gt;20211101&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;性别&lt;/td&gt;
    &lt;td&gt;女&lt;/td&gt;
    &lt;td&gt;身份证件类型&lt;/td&gt;
    &lt;td&gt;本地居民&lt;/td&gt;
    &lt;td&gt;曾用名&lt;/td&gt;
    &lt;td&gt;无&lt;/td&gt;
    &lt;td&gt;班级&lt;/td&gt;
    &lt;td&gt;初三（1）班&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;出生日期&lt;/td&gt;
    &lt;td&gt;2002年9月1日&lt;/td&gt;
    &lt;td&gt;民族&lt;/td&gt;
    &lt;td&gt;汉&lt;/td&gt;
    &lt;td&gt;户口所在地&lt;/td&gt;
    &lt;td&gt;北京&lt;/td&gt;
    &lt;td&gt;入学年份&lt;/td&gt;
    &lt;td&gt;2015年&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;出生地&lt;/td&gt;
    &lt;td&gt;北京&lt;/td&gt;
    &lt;td&gt;政治面貌&lt;/td&gt;
    &lt;td&gt;团员&lt;/td&gt;
    &lt;td&gt;户口性质&lt;/td&gt;
    &lt;td&gt;城镇户口&lt;/td&gt;
    &lt;td&gt;入学方式&lt;/td&gt;
    &lt;td&gt;普通入学&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;籍贯&lt;/td&gt;
    &lt;td&gt;海淀区&lt;/td&gt;
    &lt;td&gt;健康状况&lt;/td&gt;
    &lt;td&gt;良好&lt;/td&gt;
    &lt;td&gt;特长&lt;/td&gt;
    &lt;td&gt;书法&lt;/td&gt;
    &lt;td&gt;就读方式&lt;/td&gt;
    &lt;td&gt;走读&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;身份证号&lt;/td&gt;
    &lt;td colspan="3"&gt;&lt;/td&gt;
    &lt;td&gt;身份证有效期&lt;/td&gt;
    &lt;td colspan="3"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;th colspan="8"&gt;学生个人联系信息&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;现住址&lt;/td&gt;
    &lt;td colspan="7"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;家庭地址&lt;/td&gt;
    &lt;td colspan="7"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;联系电话&lt;/td&gt;
    &lt;td colspan="7"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;电子信箱&lt;/td&gt;
    &lt;td colspan="7"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211123220132116-165687352104347.cc6d5593.png"></p>
<p>跨行、跨列</p>
<pre><code class="language-html">&lt;h2&gt;表格实战 - 跨行跨列&lt;/h2&gt;

&lt;table border="1" width="800"&gt;
&lt;caption&gt;
    版本规划任务分配表
&lt;/caption&gt;
&lt;tr&gt;
    &lt;th colspan="2"&gt;需求：V0.3版本规划&lt;/th&gt;
    &lt;th&gt;优先级&lt;/th&gt;
    &lt;th&gt;任务分解&lt;/th&gt;
    &lt;th&gt;产品负责人&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td rowspan="3"&gt;功能模块1&lt;/td&gt;
    &lt;td&gt;具体事项1&lt;/td&gt;
    &lt;td&gt;3&lt;/td&gt;
    &lt;td&gt;任务1&lt;/td&gt;
    &lt;td rowspan="3"&gt;@翠花&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td rowspan="2"&gt;具体事项2&lt;/td&gt;
    &lt;td&gt;4&lt;/td&gt;
    &lt;td&gt;任务2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;任务3&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td rowspan="6"&gt;功能模块2&lt;/td&gt;
    &lt;td&gt;具体事项1&lt;/td&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td&gt;任务1&lt;/td&gt;
    &lt;td rowspan="6"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td rowspan="4"&gt;具体事项2&lt;/td&gt;
    &lt;td&gt;3&lt;/td&gt;
    &lt;td&gt;任务1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td&gt;任务2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;任务3&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;4&lt;/td&gt;
    &lt;td&gt;任务4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;具体事项3&lt;/td&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;任务1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;th colspan="5"&gt;备注信息&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td colspan="5"&gt;...&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211123220227307-165687353660549.88056c1b.png"></p>
<h3 id="4theadtbodytfoot-标签">4、thead，tbody，tfoot 标签</h3>
<pre><code class="language-html">&lt;h2&gt;表格：thead、tbody、tfoot标签&lt;/h2&gt;

&lt;table border="1" width="500"&gt;
&lt;thead&gt;
    &lt;caption&gt;
      同学通讯录
    &lt;/caption&gt;
    &lt;tr&gt;
      &lt;th&gt;专业&lt;/th&gt;
      &lt;th&gt;姓名&lt;/th&gt;
      &lt;th&gt;性别&lt;/th&gt;
      &lt;th&gt;年龄&lt;/th&gt;
      &lt;th&gt;所在城市&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;

&lt;tbody&gt;
    &lt;tr&gt;
      &lt;th&gt;计算机&lt;/th&gt;
      &lt;td&gt;arry&lt;/td&gt;
      &lt;td&gt;男&lt;/td&gt;
      &lt;td&gt;18&lt;/td&gt;
      &lt;td&gt;北京&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;外语&lt;/th&gt;
      &lt;td&gt;豆豆&lt;/td&gt;
      &lt;td&gt;女&lt;/td&gt;
      &lt;td&gt;21&lt;/td&gt;
      &lt;td&gt;上海&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;市场营销&lt;/th&gt;
      &lt;td&gt;翠花&lt;/td&gt;
      &lt;td&gt;19&lt;/td&gt;
      &lt;td&gt;男&lt;/td&gt;
      &lt;td&gt;深圳&lt;/td&gt;
    &lt;/tr&gt;
&lt;/tbody&gt;

&lt;tfoot&gt;
    &lt;tr&gt;
      &lt;th&gt;备注&lt;/th&gt;
      &lt;td colspan="4"&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;
</code></pre>
<p><img src="https://www.arryblog.com/assets/img/image-20211123221724473-165687355222551.8d335914.png"></p><br><br>
来源：https://www.cnblogs.com/1jiayi/p/jiayi_HTML5_2.html

查看完整版本: HTML/HTML5常用标签和属性