HTML5

仲龙發表於 2022-4-2 13:41:00

<h2>一、初识HTML5</h2>
<h3>1、HTML</h3>
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
概念1：超文本
所谓的超文本，有两层含义：
（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。
（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。
概念2：标记语言
HTML不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：
（1）标记语言是一套标记标签。比如：标签<code><a></code>表示超链接、标签<code><img></code>表示图片、标签<code><h1></code>表示一级标题等等，它们都是属于 HTML 标签。
说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。
（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。
<h3 dir="auto">2、HTML的专有名词</h3>
<ul dir="auto">
<li>网页：由各种标记组成的一个页面就叫网页。</li>
<li>网站：在因特网上根据一定的规则，使用 HTML 等语言制作的用于展示特定内容相关的网页集合。</li>
<li>主页（首页）：一个网站的起始页面或者导航页面。</li>
<li>标记：比如<code></code>称为开始标记，<code></code>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。</li>
<li>元素：比如<code>内容</code>称为元素.</li>
<li>属性：给每一个标签所做的辅助信息。</li>
<li>XHTML：符合XML语法标准的HTML。</li>
<li>DHTML：动态的。<code>javascript + css + html</code>合起来的页面就是一个 DHTML。</li>
<li>HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。</li>
</ul>
<h3>3、HTML文档的后缀名</h3>
<ul>
<li>.html</li>
<li>.htm</li>
</ul>
以上两种后缀名没有区别，都可以使用。
<h3>4、常用浏览器</h3>
微软IE和Edge、火狐（Firefox）、谷歌（Chrome）、苹果Safari和欧朋Opera，平时称为五大浏览器。
<img src="https://img2023.cnblogs.com/blog/520426/202303/520426-20230309171513007-769898509.png"> 
浏览器内核（渲染引擎）
<ul>
<li style="text-align: left">负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。</li>
</ul>
<img src="https://img2023.cnblogs.com/blog/520426/202303/520426-20230309171753709-1991841303.png">
<h3>5、HTML5</h3>
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
<h3>6、HTML5 是如何起步的？</h3>
HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG指Web Hypertext Application Technology Working Group（网页超文本应用技术工作小组）。
WHATWG致力于web表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
HTML5 中的一些有趣的新特性：
<ul>
<li>用于绘画的 canvas 元素</li>
<li>用于媒介回放的 video 和 audio 元素</li>
<li>对本地离线存储的更好的支持</li>
<li>新的特殊内容元素，比如 article、footer、header、nav、section</li>
<li>新的表单控件，比如 calendar、date、time、email、url、search</li>
</ul>
<h3>7、W3C</h3>
聊到网页我们就不得不提起一个组织：W3C。
W3C：World Wide Web Consortium，万维网联盟组织，用来制定web标准的机构（组织）。
W3C组织就类似于现实世界中的联合国。W3C就是网页世界的老大，规则都是由其来定的。所以我们在写网页的时候就需要遵守他的规则。
为什么要遵循WEB标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。
<blockquote>
规则并不是用于约束小白的，而是用于约束高手的，因为高手会的太多，掌握太多他人所不会的。为了方便管理，所以需要规则加以约束。
</blockquote>
<h3>8、Web标准</h3>
Web标准：制作网页要遵循的规范。
Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。
Web标准包括三个方面：
<ul>
<li>结构标准（HTML）：用于对网页元素进行整理和分类。</li>
<li>表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。</li>
<li>行为标准（JavaScript）：用于定义网页的交互和行为。</li>
</ul>
根据上面的Web标准，可以将 Web前端分为三层：
<ul>
<li>HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。</li>
<li>CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。</li>
<li>JS：JavaScript。从交互的角度描述页面的行为。相当于人的动作，让人有生命力。</li>
</ul>
<h3>9、第一个HTML5文档</h3>
下面是我们写的第一个简单的HTML5文档。
我们新建一个文本文件，将扩展名改为.html，主文件自己定义，我们这里定义为：第一个网页.html
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220402131503968-1743159820.png">
右键使用记事本或其他文本编辑工具（我使用的是Sublime Text）打开，输入以下文件内容如下：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8" />
　　<title>第一个HTML5文档</title>
</head>
<body>
　　道虽迩，不行不至。事虽小，不为不成。——《荀子·修身》
</body>
</html></pre>
</div>
<blockquote>
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
</blockquote>
现在直接双击这个文件就可以用浏览器打开了。
微软IE浏览器
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220402134917826-121669137.png">
谷歌Chrome浏览器
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220402135555836-11748672.png">
<h2 dir="auto">二、HTML结构</h2>
观察HTML文档的层级结构，我们发现是这样一种结构：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220402161332054-2103148645.png">
<h3>1、文档声明<!DOCTYPE></h3>
任何一个标准的HTML页面，第一行一定是一个以<code><!DOCTYPE ……></code>开头的语句。
这一行，就是文档声明，即 DocType Declaration，简称DTD。
DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
<!DOCTYPE> 声明必须位于HTML5文档中的第一行，使用非常简单：
<div class="example">
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre><!DOCTYPE html></pre>
</div>
在HTML4.01中写作：
</div>
<div class="hl-main">
<div class="cnblogs_code">
<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></pre>
</div>
<blockquote>
可以看出，HTML5对于文档声明做了极大的简化。
</blockquote>
</div>
<h3 class="hl-main">2、根标签<html></h3>
<div class="hl-main">
<html>标签可告知浏览器其自身是一个 HTML 文档。
<html>与</html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。
我们可以给<html>标签指定lang属性，来设置语言。
<div class="cnblogs_code">
<pre><html lang="zh-CN">
<head>
<title>标题</title>
</head>
<body>
</body>
</html></pre>
</div>
 lang属性用于指定页面语言，最常见的语言类型有两种：
<ul>
<li>en：定义页面语言为英语。 </li>
<li>zh-CN：定义页面语言为中文。</li>
</ul>
</div>
<blockquote>
<div class="hl-main">注意：即使 html 元素是文档的根元素，它也不包含 DOCTYPE 元素。DOCTYPE 元素必须位于 html 元素之前。</div>
</blockquote>
<div class="hl-main">
HTML 标签是由尖括号包围的关键词，例如 <html>。
HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。
双标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如 ，我们称为单标签。
标签的关系
双标签关系可以分为两类：包含关系和并列关系
包含标签：
<div class="cnblogs_code">
<pre><head>
<title></title>
</head></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202303/520426-20230309172700672-452935641.png">
并列关系：
<div class="cnblogs_code">
<pre><head>
</head>
<body>
</body></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202303/520426-20230309172810193-657367828.png">
<h3 dir="auto">3、头标签<head></h3>
html5 的比较完整的骨架：
</div>
<div class="hl-main">
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>


<meta charset="UTF-8" />

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<meta name="Author" content="lihuawei" />

<meta name="Keywords" content="网页,HTML" />

<meta name="Description" content="这是我们的第一个网页" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>
</head>

<body>
我们的第一个网页
</body>
</html></pre>
</div>
头标签内部的常见标签有：
<ul>
<li><code><title></code>：指定整个网页的标题，在浏览器最上方显示。</li>
<li><code><base></code>：为页面上的所有链接规定默认地址或默认目标。</li>
<li><code><meta></code>：提供有关页面的基本信息。</li>
<li><code><style></code>：用于为HTML文档定义样式。</li>
<li><code><link></code>：定义文档与外部资源的关系。</li>
</ul>
</div>
<div class="hl-main">
一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
</div>
<div class="hl-main">1.<meta>标签：</div>
</div>
</div>
meta表示“元”。“元”配置，就是表示基本的配置项目。
常见的几种<meta>标签如下：
（1）字符集 charset：
<div class="cnblogs_code">
<pre><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></pre>
</div>
字符集用meta标签中的charset定义，charset就是character set（即“字符集”），即网页的编码方式。
字符集（Character set）是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
上面这行代码非常关键，是必须要写的代码，否则可能导致乱码。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
utf-8是目前最常用的字符集编码方式，是针对Unicode的一种可变长度字符编码，它可以用来表示Unicode标准中的任何字符，是优先采用的编码。
常用的字符集编码方式还有gbk和gb2312等。
（2）视口 viewport：
<div class="cnblogs_code">
<pre><meta name="viewport" content="width=device-width, initial-scale=1.0" /></pre>
</div>
width=device-width ：表示视口宽度等于屏幕宽度。
viewport 这个知识点，初学者还比较难理解，以后学 Web 移动端的时候会用到。
（3）关键词 Keywords：
<div class="cnblogs_code">
<pre><meta name="Keywords" content="新闻,邮箱,游戏,培训,体育,娱乐,亚运,论坛,短信" /></pre>
</div>
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
（4）页面描述 Description：
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
<div class="cnblogs_code">
<pre><meta name="Description" content="做一名优秀的人民教师。" /></pre>
</div>
（5）刷新 Refresh：
3秒之后，自动刷新/跳转到百度页面。
<div class="cnblogs_code">
<pre><meta http-equiv="Refresh" content="3;http://www.baidu.com"></pre>
</div>
2.<style>标签
内嵌样式标签
语法格式：
<div class="cnblogs_code">
<pre><style 属性="属性值">样式内容</style></pre>
</div>
这里最常用的属性是type，相应的属性值是text/css
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>style标记的使用</title>
 <style type="text/css">
 h2 {
 color: red;
 }

 p {
 color: blue;
 }
 </style>
</head>
<body>
 <h2>设置h2标题为红色字体</h2>
 <p>设置p段落为蓝色字体</p>
</body>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202303/520426-20230327094134203-1812879691.png">
3.<link>标签
引用外部文件标记
语法格式：
<div class="cnblogs_code">
<pre><link 属性="属性值" /></pre>
</div>
例如，
<div class="cnblogs_code">
<pre><link rel="stylesheet" type="text/css" href="style.css" /></pre>
</div>
上述代码，标识引用当前HTML5页面所在文件夹中的“style.css”样式表文件。
<h3>4、主体标签<body></h3>
<body>标签定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
<body> 标签的属性有：
<ul dir="auto">
<li><code>bgcolor</code>：设置整个网页的背景颜色。</li>
<li><code>background</code>：设置整个网页的背景图片。</li>
<li><code>text</code>：设置网页中的文本颜色。</li>
<li><code>leftmargin</code>：网页的左边距。IE浏览器默认是8个像素。</li>
<li><code>topmargin</code>：网页的上边距。</li>
<li><code>rightmargin</code>：网页的右边距。</li>
<li><code>bottommargin</code>：网页的下边距。</li>
</ul>
<body> 标签另外还有一些属性，这里用个例子来解释：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一个HTML5文档</title>
</head>
<body link="red" alink="blue" vlink="green">
<a href="#">点我点我</a>
<br>
哈哈
</body>
</html></pre>
</div>
上方代码中，当我们对“<code>点我点我”</code>这几个字使用超链接时，
<ul>
<li><code>link</code>属性：表示默认显示的颜色</li>
<li><code>alink</code>属性：表示鼠标点击但是还没有松开时的颜色</li>
<li><code>vlink</code>属性：表示点击完成之后显示的颜色</li>
</ul>
一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。
<h2>三、HTML规范</h2>
1、所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例： <h1><font></font></h1> 
2、标记不区分大小写。
3、所有的属性值必须加引号。 <font color="red"></font> 
　　HTML5允许属性值不使用单引号，但是我们建议大家必须加引号。
4、所有的属性必须有值。 <hr noshade="noshade"> 、 <input type="radio" checked="checked" /> <code></code>
　　HTML5允许部分属性值省略，但是我们建议大家初学阶段都写出来。　　
<div class="cnblogs_code">
<pre><input type="checkbox" checked />
<input type="text" readonly/></pre>
</div>
5、HTML对换行不敏感，对tab不敏感
HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。
也就是说，HTML不是依靠缩进来表示嵌套的，而是看标签的嵌套关系。但是，我们发现有良好的缩进，代码更易读。建议大家都正确缩进标签。
6、空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一个HTML5文档</title>
</head>
<body link="red" alink="blue" vlink="green">
<a href="#">点我点我</a>
<br>
哈哈
 我喜
 欢编

 程
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220402232540018-165028550.png">
7、所有的标签都必须闭合。
<ul>
<li>
双标签：<code></code>
</li>
<li>
单标签：<code> </code> 建议写成 <code> </code> <code><hr></code> 建议转成 <code><hr /></code>，还有<code><img src=“URL” /></code>
</li>
</ul>
标签不闭合的结果是灾难性的。
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220402232845498-649131348.png">
由于<title>标签没有封闭，导致了“第一个HTML5文档”后面的所有内容都被误认为是标题。
<h2>四、标记的属性</h2>
属性是 HTML 标记提供的附加信息。
<h3>1、HTML 属性</h3>
<ul>
<li>HTML 标记可以设置属性</li>
<li>属性可以在标记中添加附加信息</li>
<li>属性一般描述于开始标签</li>
<li>属性总是以键/值对的形式出现，比如：name="value"。</li>
</ul>
例如，HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<div class="cnblogs_code">
<pre><a href="http://www.baidu.com">这是一个链接</a></pre>
</div>
<h3>2、使用引号引用属性值</h3>
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
<blockquote>
注意: 在某些个别的情况下，如果属性值本身就含有双引号，那么您必须使用单引号，例如：name='李华伟的"博客园"文章'
</blockquote>
<h3>3、推荐使用小写属性</h3>
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 HTML 要求使用小写属性。
<h3>4、HTML 属性参考手册</h3>
查看完整的HTML属性列表: HTML 参考手册。
下面列出了适用于大多数 HTML 标记的属性：
<table class="reference" style="height: 173px; width: 546px">
<tbody>
<tr><th style="text-align: center" align="left" width="15%">属性</th><th style="text-align: center" align="left" width="85%">描述</th></tr>
<tr>
<td style="text-align: center">class</td>
<td>为html元素定义一个或多个类名（classname）(类名从样式文件引入)</td>
</tr>
<tr>
<td style="text-align: center">id</td>
<td>定义元素的唯一id</td>
</tr>
<tr>
<td style="text-align: center">style</td>
<td>规定元素的行内样式（inline style）</td>
</tr>
<tr>
<td style="text-align: center">title</td>
<td>描述了元素的额外信息 (作为工具条使用)</td>
</tr>
</tbody>
</table>
更多标准属性说明： HTML 标准属性参考手册.
<h2>五、HTML文本控制标记</h2>
<h3>1、标题<h1>...<h6> </h3>
标题使用<h1>至<h6>标记进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
 <h1>这是一个H1标题</h1>
<h2>这是一个H2标题</h2>
<h3>这是一个H3标题</h3>
<h4>这是一个H4标题</h4>
<h5>这是一个H5标题</h5>
<h6>这是一个H6标题</h6>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403084720207-189099890.png">
<blockquote>
注意：浏览器会自动地在标题的前后添加空行。
</blockquote>
标题很重要
请确保将【 HTML 标题】标记只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为我们的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
如果想让标题文字右对齐或者居中对齐，就需要使用align属性设置对齐方式。其取值如下：
<ul>
<li>left：设置标题文字左对齐（默认）。</li>
<li>center：设置标题文字居中对齐。</li>
<li>right：设置标题文字右对齐。</li>
</ul>
<h3>2、段落</h3>
段落，是英语“paragraph”的缩写。
可以把 HTML 文档分割为若干段落。在网页中如果要把文字有条理地显示出来，离不开段落标签。
就如同我们平常写文章一样，整个网页也可以分为若干个段落。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落</title>
</head>
<body>
 <p>这是一段。</p>
<p>这是另一段。</p>
<p>又来一段。</p>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403093505573-1015786898.png">
<blockquote>
注意：浏览器会自动地在段落的前后添加空行。（ 是块级元素）
</blockquote>
属性：
<ul dir="auto">
<li><code>align="属性值"</code>：对齐方式。属性值包括left、center、right。</li>
</ul>
 代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落</title>
</head>
<body>
 <p>这是一段。</p>
<p align="center">这是另一段。</p>
<p align="right">又来一段。</p>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403093834900-820645333.png">
一定不要忘记结束标签
虽然即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：
<div class="example">
代码：
<div class="hl-main">
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落</title>
</head>
<body>
 <p>这是一段。
<p>这是另一段。
<p>又来一段。
</body>
</html></pre>
</div>
上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。
</div>
</div>
HTML标签是分等级的，HTML将所有的标签分为两种：
<ul dir="auto">
<li>
文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
</li>
<li>
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
</li>
</ul>
我们要牢牢记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。
错误写法：例如，尝试把 h 放到 p 里。代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落</title>
</head>
<body>
 <p>
 我是一个小段落
 <h1>我是一级标题</h1>
</p>
</body>
</html></pre>
</div>
效果：
 <img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403155354201-446855695.png">
 上图显示，浏览器不允许你这么做，我们使用Chrome的F12开发者工具发现，浏览器自己把p封闭掉了，不让你去包裹h1。
<blockquote>
注意：Chrome浏览器是HTML5支持度最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。开发者工具功能的快捷键是F12。
</blockquote>
<h3 dir="auto">3、水平线<hr /></h3>
水平，是英语“horizontal”的缩写。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平线</title>
</head>
<body>
 <p>宝剑锋从磨砺出，梅花香自苦寒来</p>
<hr />
<p>要想拥有珍贵品质或美好才华等是需要不断的努力、修炼、克服一定的困难才能达到的。</p>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403174939478-936477298.png">
属性介绍：
<ul dir="auto">
<li><code>align="属性值"</code>：设定线条置放位置。属性值可选择：left、right、center。</li>
<li><code>size="2"</code>：设定线条粗细。以像素为单位，内定为2。</li>
<li><code>width="500"</code>或<code>width="70%"</code>：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。</li>
<li><code>color="#0000FF"</code>：设置线条颜色。</li>
<li><code>noshade</code>：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。</li>
</ul>
 代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平线</title>
</head>
<body>
<p>宝剑锋从磨砺出，梅花香自苦寒来</p>
<hr size="5" width="500" color="#FF0000" />
<p>要想拥有珍贵品质或美好才华等是需要不断的努力、修炼、克服一定的困难才能达到的。</p>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403175352108-121748957.png">
<h3 dir="auto">4、换行 </h3>
如果您希望某段文本在不产生一个新段落的情况下进行强制换行（新行），就需要使用换行标签   。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平线</title>
</head>
<body>
<p>宝剑锋从磨砺出<br />梅花香自苦寒来</p>
<hr/>
<p>要想拥有珍贵品质或美好才华等是需要不断的努力、修炼、克服一定的困难才能达到的。</p>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403175548750-1993308803.png">
<h3>5、区块和<div></h3>
<div>和是非常重要的标记，div的语义是division“分割、分区”；span的语义就是span“范围、跨度”。想必你应该听说过“div + css”布局，多数情况都要配合CSS样式来使用。
<div>和的介绍：
<ul dir="auto">
<li>
<div>标签：可以把标签中的内容分割为独立的区块，必须单独占据一行。可以容纳段落、标题、表格、图像等各种网页元素。还可以嵌套<div>。
</li>
<li>
标签：是来修饰文字的，不换行。也叫内联标签。
</li>
</ul>
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div和span</title>
</head>
<body>
 <div>div标记1</div>
<div>div标记2</div>
<span>span标记1</span>
<span>span标记2</span>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403192936093-591354530.png">
div标签的属性：
<ul dir="auto">
<li><code>align="属性值"</code>：设置块的位置。属性值可选择：left、right、center。</li>
</ul>
div和span的区别：
<code></code>和<code><div></code>唯一的区别在于：<code></code>是不换行的，而<code><div></code>是换行的。
如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS可以来实现各种样式。
div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
span也是表达“小区域、小跨度”的标签，但只是一个文本级的标签。
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
span代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div和span</title>
</head>
<body>
 <p>
 简介简介简介简介简介简介简介简介
 <span>
 <a href="">详细信息</a>
 <a href="">购买</a>
 </span>
</p>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403193539077-846565140.png">
div代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div和span</title>
 <style type="text/css">
 .header {background-color:yellow;color:blue;}
 .nav {color:red;}
 .content {background-color:blue;color:green;}
 .footer {font-weight:bold;font-family: 仿宋;}
</style>
</head>
<body>
 <div class="header">
 <div class="logo">LOGO</div>
 <div class="nav">导航</div>
</div>
<div class="content">
 <div class="guanggao">广告</div>
 <div class="zhengwen">具体内容</div>
</div>
<div class="footer">页脚</div>
</body>
</html></pre>
</div>
效果演示：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403194433789-1429563000.png">
我们亲切地称这种模式叫做“div+css”：
<ul>
<li>div标记负责布局、结构、分块</li>
<li>css负责样式 </li>
</ul>
<h3>6、内容居中<center></h3>
此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容居中</title>
</head>
<body>
 <center>
 <p>宝剑锋从磨砺出</p>
 <p>梅花香自苦寒来</p>
</center>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403194836743-1862812753.png">
<blockquote>
注意：在HTML5里面，<center>标签不建议使用，建议使用css布局来实现。
</blockquote>
<h3>7、预定义（预格式化）<pre></h3>
被包围在 <pre> 标记中的文本通常会保留空格和换行符。原封不动地输出结果（告诉浏览器不要忽略空格和空行）。
说明：真正排网页过程中，<code><pre></code>标签几乎用不着。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>预定义</title>
</head>
<body>
 <p>不断努力</p>
<pre>
 宝剑锋从磨砺出


 梅花香自苦寒来
</pre>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403195641273-79361571.png">
<h2>六、文本格式化</h2>
<h3 dir="auto">1、字体标签</h3>
属性：
<ul dir="auto">
<li>
color="red"或color="#ff00cc"：设置字体颜色。设置方式：单词 \ #ff00cc 
</li>
<li>
size：设置字体大小。取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。
</li>
<li>
face="微软雅黑"：设置字体类型。
</li>
</ul>
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体</title>
</head>
<body>
 <font face="微软雅黑" color="#FF0000" size="10">字体标记</font>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403221048448-1500393183.png">
<h3 style="text-align: left" dir="auto">2、其他文本格式化标记</h3>
<div style="text-align: center"> </div>
<table class="reference notranslate" style="height: 348px; width: 435px">
<tbody>
<tr>
<td style="width: 30px; text-align: center" scope="colgroup">标签</td>
<td style="width: 80px; text-align: center" scope="colgroup">描述</td>
</tr>
<tr>
<td style="width: 30px; text-align: center" scope="colgroup"></td>
<td style="width: 80px" scope="colgroup">bold，定义粗体文本</td>
</tr>
<tr>
<td style="width: 30px; text-align: center" scope="colgroup"></td>
<td style="width: 80px" scope="colgroup">定义以斜体字突出显示</td>
</tr>
<tr>
<td style="width: 30px; text-align: center" scope="colgroup"></td>
<td style="width: 80px" scope="colgroup">italic，定义斜体字</td>
</tr>
<tr>
<td style="width: 30px; text-align: center" scope="colgroup"></td>
<td style="width: 80px" scope="colgroup">定义小号字</td>
</tr>
<tr>
<td style="width: 30px; text-align: center" scope="colgroup"></td>
<td style="width: 80px" scope="colgroup">定义以粗体字突出显示</td>
</tr>
<tr>
<td style="width: 30px; text-align: center" scope="colgroup"></td>
<td style="width: 80px" scope="colgroup">定义下标字</td>
</tr>
<tr>
<td style="width: 30px; text-align: center" scope="colgroup"></td>
<td style="width: 80px" scope="colgroup">定义上标字</td>
</tr>
<tr>
<td style="width: 30px; text-align: center" scope="colgroup"><ins></td>
<td style="width: 80px" scope="colgroup">定义插入字，下划线</td>
</tr>
<tr>
<td style="width: 30px; text-align: center" scope="colgroup"><del></td>
<td style="width: 80px" scope="colgroup">定义删除字，删除线</td>
</tr>
</tbody>
</table>
<div> </div>
<div>代码：</div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体</title>
</head>
<body>
 <b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
<br />
<ins>这个文本是插入的</ins>
<br />
<del>这个文本是删除的</del>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403215001331-1275707914.png">
<h2>七、字符实体</h2>
HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
<h3>1、HTML 实体</h3>
在 HTML 中，某些字符是预留的。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
例如，在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
字符实体类似这样：
&entity_name;  
或
&#entity_number;
例如，需要显示小于号，我们必须这样写：&lt; 或 &#60; 或 &#060;
<blockquote>
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
</blockquote>
<h3>2、不间断空格（Non-breaking Space）</h3>
HTML 中的常用字符实体是不间断空格(&nbsp;)。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。
如需在页面中增加空格的数量，您需要使用 &nbsp; 字符实体。
<h3>3、结合音标符</h3>
发音符号是加到字母上的一个"glyph(字形)"。
一些变音符号, 如尖音符 ( ̀) 和抑音符 ( ́) 。
变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。
变音符号可以与字母、数字字符的组合来使用。
以下是一些实例：
<table class="reference notranslate" style="height: 299px; width: 395px">
<tbody>
<tr><th style="text-align: center">音标符</th><th style="text-align: center">字符</th><th style="text-align: center">组合</th><th style="text-align: center">输出结果</th></tr>
<tr>
<td style="text-align: center">  ̀</td>
<td style="text-align: center">a</td>
<td style="text-align: center">a&#768;</td>
<td style="text-align: center">à</td>
</tr>
<tr>
<td style="text-align: center">  ́</td>
<td style="text-align: center">a</td>
<td style="text-align: center">a&#769;</td>
<td style="text-align: center">á</td>
</tr>
<tr>
<td style="text-align: center">̂</td>
<td style="text-align: center">a</td>
<td style="text-align: center">a&#770;</td>
<td style="text-align: center">â</td>
</tr>
<tr>
<td style="text-align: center">  ̃</td>
<td style="text-align: center">a</td>
<td style="text-align: center">a&#771;</td>
<td style="text-align: center">ã</td>
</tr>
<tr>
<td style="text-align: center">  ̀</td>
<td style="text-align: center">O</td>
<td style="text-align: center">O&#768;</td>
<td style="text-align: center">Ò</td>
</tr>
<tr>
<td style="text-align: center">  ́</td>
<td style="text-align: center">O</td>
<td style="text-align: center">O&#769;</td>
<td style="text-align: center">Ó</td>
</tr>
<tr>
<td style="text-align: center">̂</td>
<td style="text-align: center">O</td>
<td style="text-align: center">O&#770;</td>
<td style="text-align: center">Ô</td>
</tr>
<tr>
<td style="text-align: center">  ̃</td>
<td style="text-align: center">O</td>
<td style="text-align: center">O&#771;</td>
<td style="text-align: center">Õ</td>
</tr>
</tbody>
</table>
<h3>4、HTML字符实体</h3>
<blockquote>
注意：实体名称对大小写敏感！
</blockquote>
<table class="reference" style="height: 587px; width: 374px">
<tbody>
<tr><th>显示结果</th><th>描述</th><th>实体名称</th><th>实体编号</th></tr>
<tr>
<td style="text-align: center"> </td>
<td style="text-align: center">空格</td>
<td style="text-align: center">&nbsp;</td>
<td style="text-align: center">&#160;</td>
</tr>
<tr>
<td style="text-align: center"><</td>
<td style="text-align: center">小于号</td>
<td style="text-align: center">&lt;</td>
<td style="text-align: center">&#60;</td>
</tr>
<tr>
<td style="text-align: center">></td>
<td style="text-align: center">大于号</td>
<td style="text-align: center">&gt;</td>
<td style="text-align: center">&#62;</td>
</tr>
<tr>
<td style="text-align: center">&</td>
<td style="text-align: center">和号</td>
<td style="text-align: center">&amp;</td>
<td style="text-align: center">&#38;</td>
</tr>
<tr>
<td style="text-align: center">"</td>
<td style="text-align: center">引号</td>
<td style="text-align: center">&quot;</td>
<td style="text-align: center">&#34;</td>
</tr>
<tr>
<td style="text-align: center">'</td>
<td style="text-align: center">撇号 </td>
<td style="text-align: center">&apos;</td>
<td style="text-align: center">&#39;</td>
</tr>
<tr>
<td style="text-align: center">￠</td>
<td style="text-align: center">分</td>
<td style="text-align: center">&cent;</td>
<td style="text-align: center">&#162;</td>
</tr>
<tr>
<td style="text-align: center">£</td>
<td style="text-align: center">镑</td>
<td style="text-align: center">&pound;</td>
<td style="text-align: center">&#163;</td>
</tr>
<tr>
<td style="text-align: center">¥</td>
<td style="text-align: center">人民币/日元</td>
<td style="text-align: center">&yen;</td>
<td style="text-align: center">&#165;</td>
</tr>
<tr>
<td style="text-align: center">€</td>
<td style="text-align: center">欧元</td>
<td style="text-align: center">&euro;</td>
<td style="text-align: center">&#8364;</td>
</tr>
<tr>
<td style="text-align: center">§</td>
<td style="text-align: center">小节</td>
<td style="text-align: center">&sect;</td>
<td style="text-align: center">&#167;</td>
</tr>
<tr>
<td style="text-align: center">©</td>
<td style="text-align: center">版权</td>
<td style="text-align: center">&copy;</td>
<td style="text-align: center">&#169;</td>
</tr>
<tr>
<td style="text-align: center">®</td>
<td style="text-align: center">注册商标</td>
<td style="text-align: center">&reg;</td>
<td style="text-align: center">&#174;</td>
</tr>
<tr>
<td style="text-align: center">™</td>
<td style="text-align: center">商标</td>
<td style="text-align: center">&trade;</td>
<td style="text-align: center">&#8482;</td>
</tr>
<tr>
<td style="text-align: center">×</td>
<td style="text-align: center">乘号</td>
<td style="text-align: center">&times;</td>
<td style="text-align: center">&#215;</td>
</tr>
<tr>
<td style="text-align: center">÷</td>
<td style="text-align: center">除号</td>
<td style="text-align: center">&divide;</td>
<td style="text-align: center">&#247;</td>
</tr>
</tbody>
</table>
虽然 html 不区分大小写，但实体字符对大小写敏感。
重点记住：空格、大于号、小于号 这三个，其余的使用很少，如果需要回头查阅即可。
想查看完整的HTML实体：请点击 HTML 实体参考手册。
<h2>八、超链接</h2>
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到超链接。点击超链接可以从一个页面跳转到另一个页面。
<h3>1、HTML 超链接（链接）</h3>
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。
可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当把鼠标指针移动到网页中的某个超链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述超链接的地址。
a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
href（hypertext reference）：超文本地址。读作“喝瑞夫”，不要读作“喝夫”。
默认情况下，超链接将以以下形式出现在浏览器中：
<ul>
<li>一个未访问过的超链接显示为蓝色字体并带有下划线。</li>
<li>访问过的超链接显示为紫色并带有下划线。</li>
<li>点击超链接时，链接显示为红色并带有下划线。</li>
</ul>
<blockquote>
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
</blockquote>
<h3>2、超链接语法</h3>
链接的 HTML 代码很简单：
<div class="cnblogs_code">
<pre><a href="url">链接文本</a></pre>
</div>
href 属性：描述了链接的目标。.
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体</title>
</head>
<body>
 <a href="http://www.baidu.com/">访问百度</a>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403224345002-2133921901.png"> 
<blockquote>
注意： "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
</blockquote>
<h3>3、超链接的形式</h3>
超链接有三种形式：
<h4>（1）外部链接：</h4>
链接到外部文件。
代码：
<div class="cnblogs_code">
<pre><a href="hello.html">点击进入另外一个文件</a></pre>
</div>
我们也可以直接点击链接，访问一个网址。
代码：
<div class="cnblogs_code">
<pre><a href="http://www.baidu.com/" target="_blank">访问百度</a></pre>
</div>
<h4>（2）锚链接</h4>
给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。
比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就可以利用锚链接。
首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
 <a name="top">顶部</a>
<pre>


</pre>
<a href="#top">回到顶部</a>
</body>
</html></pre>
</div>
效果：
<h3 style="text-align: center"><img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403231135226-1062346842.png"></h3>
顶部这个锚的名字叫做top。然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了#top）。
注意底部超链接的#号不要忘记了，表示跳到名为top的特定位置，这是规定。
如果少了#号，点击之后，就会跳到top这个文件或者top这个文件夹中去。
如果我们将底部超链接的href写成：
<div class="cnblogs_code">
<pre><a href="hello.html#top">回到顶部</a></pre>
</div>
那就表示，点击之后，跳转到hello.html页面的top锚点中去。
<blockquote>
注意：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。
</blockquote>
<h4>（3）邮件链接</h4>
代码：
<div class="cnblogs_code">
<pre><a href="mailto:li_huawei@163.com">点击进入我的邮箱</a></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403231638147-79735878.png">
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403231657080-674281959.png">
点击之后，Windows10会让你选择”邮件“，作用不大。
<h3>4、超链接的属性</h3>
（1）href：目标URL
（2）id：主要用于设置一个锚点的名称。
        name：主要用于设置一个锚点的名称。
（3）target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
<ul>
<li>_self：在同一个网页中显示（默认值）</li>
<li>_blank：在新的窗口中打开。</li>
<li>_parent：在父窗口中显示</li>
<li>_top：在顶级窗口中显示</li>
</ul>
blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，无需解释。
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。
（4）title：悬停文本。
代码：
<div class="cnblogs_code">
<pre><a href="mailto:li_huawei@163.com" title="可以给我发邮件哦">点击进入我的邮箱</a></pre>
</div>
效果：
<h3 style="text-align: center"><img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220403232136517-2079874495.png"></h3>
<h3>5、注意事项</h3>
<div class="cnblogs_code">
<pre><a href="https://www.runoob.com/html/" >学习</a></pre>
</div>
请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。
这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。
<h2>九、图片</h2>
img：英文全称 image（图片、图像），代表的是一张图片。
如果要想在网页中显示图像，就可以使用img 标签，它是一个单标签。语法如下：
<div class="cnblogs_code">
<pre><img src="图片的URL" /></pre>
</div>
能插入的图片类型
<ul dir="auto">
<li>
能够插入的图片类型是：jpg（jpeg）、gif、png、bmp等。
</li>
<li>
不能往网页中插入的图片格式是：psd、ai等。
</li>
</ul>
HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。
<h3>1、img标签的src属性</h3>
src属性：指图片的路径。英文名称 source。
在写图片的路径时，有两种写法：相对路径、绝对路径
<h4>（1）图片的相对路径</h4>
相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和上一层目录。
例1：
<div class="cnblogs_code">
<pre>
<img src="2.jpg">
<img src="./2.jpg">


<img src="../2.jpg">


<img src="../../2.jpg"></pre>
</div>
相对路径不会出现这种情况：
aaa/../bbb/1.jpg
../要么不写，要么就写在开头。
例2：
<div class="cnblogs_code">
<pre><img src="images/code.jpg"></pre>
</div>
上方代码的意思是说，当前html页面有一个并列的文件夹images，在文件夹images中存放了一张图片code.jpg。
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220404224909520-1571343911.png"><img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220404225146431-2043565578.png">
【测试题】现有如下文件层级图：
 <img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220404225332751-758026477.png">
问题：如果想在index.html中插入1.png，那么对应的img语句应该怎么写？
分析：
现在document是最大的文件夹，里面有两个文件夹work和photo。
work中又有一个文件夹叫做myweb，myweb文件夹里面有index.html。所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。
通过document文件夹当做一个中转站，进入photo文件夹，就看到了1.png。
答案：
<div class="cnblogs_code">
<pre><img src="../../photo/1.png" /></pre>
</div>
<h4>（2）图片的绝对路径</h4>
绝对路径包括以下两种：
1）以盘符开始的绝对路径。
<div class="cnblogs_code">
<pre><img src="D:\workspace\web\images\code.jpg" /></pre>
</div>
2）网络路径。
<div class="cnblogs_code">
<pre><img src="http://www.baidu.com/img/bd_logo1.png" /></pre>
</div>
<blockquote>
注意：如果代表的是windows文件路径，则使用斜杆/ 和反斜杠\ 是一样的；如果代表的是网络文件路径，则必须使用斜杆/。
</blockquote>
<h4>（3）相对路径和绝对路径的总结</h4>
相对路径的好处：
站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。
总结一下：
无论是在 a 标签还是 img 标签上，如果要用路径。只有两种路径能用，就是相对路径和绝对路径：
相对路径从自己出发，找到别人。
绝对路径，就是http://或者https://开头的路径。
<h3>2、img标签的其他属性</h3>
<h4>（1）width、height 属性</h4>
width：图像的宽度。
height：图像的高度。
width和height，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。
重要提示：如果要想保证图片等比例缩放，请只设置width和height中其中一个。
<h4>（2）alt 属性</h4>
alt：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。
代码：
<div class="cnblogs_code">
<pre><img src="http://www.baidu.com/img/123.png" alt="百度LOGO" /></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220404231248820-1086053452.png">
如上图所示：当图片 src 不可用的时候，显示文字。这样做，至少能让用户知道，这个图片大概是什么内容。
<h4>（3）title 属性</h4>
title：提示性文本。鼠标悬停时出现的文本。
title 属性不该被用作一幅图片在 alt 之外的补充说明信息。如果一幅图片需要小标题，使用 figure 或 figcaption 元素。
<div class="cnblogs_code">
<pre><figure>
<figcaption>百度</figcaption>
<img src="http://www.baidu.com/img/bd_logo.png" />
</figure></pre>
</div>
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 标签为 <figure> 元素定义标题。
<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。
title属性的值一般作为提示条（tooltip）呈现给用户，在光标于图片上停下后显示出来。
尽管这确实能给用户提供更多的信息，但我们不该假定用户真的能看到，用户有可能只有键盘或触摸屏，没有鼠标这类设备。
如果要把特别重要的信息提供给用户，可以选择上面提供的方法将其内联显示，而不是使用 title。
代码：
<div class="cnblogs_code">
<pre><img src="http://www.baidu.com/img/bd_logo.png" title="百度网站"/></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220404232625572-1117373253.png">
<h4>（4）align 属性</h4>
图片的align属性表示图片和周围文字的相对位置。
属性取值可以是：bottom（默认）、center、top、left、right。
如果想实现图文混排的效果，请使用align属性，取值为left或right。
我们来分别看一下这align属性的这几个属性值的区别。
1）align=""（为空）或者不添加align属性（默认情况），图片和文字底端对齐。
代码：
<div class="cnblogs_code">
<pre>上海<img src="bridge.jpg" align="" />大桥</pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405000934914-11582792.png">
2）align="center"：图片和文字水平方向上居中对齐。
程序：
<div class="cnblogs_code">
<pre>上海<img src="bridge.jpg" align="center" />大桥</pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405001109557-1350497989.png">
3）align="top"：图片与文字顶端对齐。
代码：
<div class="cnblogs_code">
<pre>上海<img src="bridge.jpg" align="top" />大桥</pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405001258381-568440802.png">
4）align="left"：图片在文字的左边。
代码：
<div class="cnblogs_code">
<pre>上海<img src="bridge.jpg" align="left" />大桥</pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405001448121-449412354.png">
5）align="right"：图片在文字的右边。
代码：
<div class="cnblogs_code">
<pre>上海<img src="bridge.jpg" align="right" />大桥</pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405001618679-403699817.png">
（5）border属性
给图片加边框，单位是像素，边框的颜色默认黑色。
该属性已废弃，替换为 border这个CSS属性。 
<h2>十、列表</h2>
列表标签分为三种，无序列表、有序列表和定义列表。
<h3>1、无序列表<ul></h3>
无序列表的各个列表项之间没有顺序级别之分，通常是并列的。
无序列表中的每一项是<li>
英文单词解释如下：
ul：unordered list，“无序列表”的意思。
li：list item，“列表项”的意思。
代码：
<div class="cnblogs_code">
<pre><ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul></pre>
</div>
在上述的代码中，<ul></ul>标记用于定义无序列表范围，<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项，每对<ul></ul>中至少应包含一对<li></li>标记。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<font size="5">课程<font><br/>
 <ul>
 <li>web前端</li>
 <li type="disc">JAVA</li>
 <li type="square">PHP</li>
 <li type="circle">.NET</li>
</ul>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405004358133-1658574282.png">
在上述的代码中，<li></li>标记的type属性用来指定列表项目符号，type常用的属性值有3种：实心圆disc、实心方框square和空心圆circle，它们的显示效果分别是●、■和○，type属性的默认值是disc。
另外，还可以通过给<ul></ul>标签直接指定type属性，使其内部的所有项目符号统一。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<font size="5">课程<font><br/>
<ul type="square">
 <li>web前端</li>
 <li>JAVA</li>
 <li>PHP</li>
 <li>.NET</li>
</ul>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405004834992-2133700081.png">
列表还可以嵌套使用：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
 <ul>
 <li>咖啡</li>
 <li>茶
 <ul>
 <li>红茶</li>
 <li>绿茶
 <ul>
 <li>中国茶</li>
 <li>非洲茶</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>牛奶</li>
</ul>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405010435710-2110865821.png">
<h3 align="left">2、有序列表<ol></h3>
有序列表（ordered list）中的项目是有一定顺序的。
使用<ol></ol>标记，<li></li>标记嵌套在<ol></ol>标记中。属性也有type（项目编号）：设置排序的方式，1（默认）、a、A、i、I。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<font size="5">课程<font><br/>
 <ol>
 <li>web前端</li>
 <li>JAVA</li>
 <li>PHP</li>
 <li>.NET</li>
</ol>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405011103758-488686387.png">
罗马序号：
<div class="cnblogs_code">
<pre><ol type="i">
<li>web前端</li>
<li>JAVA</li>
<li>PHP</li>
<li>.NET</li>
</ol></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405011214142-2094111698.png">
start属性
<ol>标签还有个属性start可以指定起始的序号。
代码：
<div class="cnblogs_code">
<pre><ol type="A" start="4">
<li>web前端</li>
<li>JAVA</li>
<li>PHP</li>
<li>.NET</li>
</ol></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405011338255-8676537.png">
有序列表也可以嵌套使用，默认各级序号都是1。
<h3 align="left">3、定义列表<dl></h3>
带有项目和描述的描述列表。
<dl> 标签定义了定义列表（definition list），表示列表范围
<dl> 标签与 <dt>和 <dd>一起使用：
<dt></dt>：definition title 列表的标题，表示上层内容，这个标签是必须的。
<dd></dd>：definition description 列表的列表项，表示下层内容，如果不需要它，可以不加。
<blockquote>
注意：<dt>、<dd>只能在<dl>里面；<dl>里面只能有<dt>、<dd>。
</blockquote>
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
 <dl>
 <dt>山东商务职业学院</dt>
 <dd>信息工程学院</dd>
 <dd>艺术设计学院</dd>
 <dd>会计金融学院</dd>
 <dd>经济管理学院</dd>
</dl>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405011611283-1468013241.png">
定义列表<dl>的应用：
（1）条目清晰
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定义列表</title>
</head>
<body>
 <dl>
 <dt>第一条</dt>
 <dd>你若是觉得你有实力和我玩，良辰不介意奉陪到底</dd>
 <dd>我会让你明白，我从不说空话</dd>
 <dd>我是本地的，我有一百种方式让你呆不下去；而你，无可奈何</dd>

 <dt>第二条</dt>
 <dd>良辰最喜欢对那些自认能力出众的人出手</dd>
 <dd>你可以继续我行我素，不过，你的日子不会很舒心</dd>
 <dd>你只要记住，我叫叶良辰</dd>
 <dd>不介意陪你玩玩</dd>
 <dd>良辰必有重谢</dd>
</dl>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405204430167-322770897.png">
上图可以看出，定义列表表达的语义是两层：
<ul dir="auto">
<li>是一个列表，列出了几个<dt>项目</li>
<li>每一个项目，都有自己的描述项<dd>。</li>
</ul>
备注：<dd>是描述<dt>的。
（2）可以一个<dl>包含很多<dt>，然后一个<dt>配很多<dd>：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定义列表</title>
</head>
<body>
 <dl>
 <dt>北京</dt>
 <dd>国家首都，政治文化中心</dd>
 <dd>上班很费时，天天挤地铁</dd>
 <dt>上海</dt>
 <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
 <dt>广州</dt>
 <dd>中国南大门，有珠江、小蛮腰</dd>
</dl>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405205007441-1272568065.png">
（3）可以多个<dl>，让每一个<dl>里面只有一个<dt>和多个<dd>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定义列表</title>
</head>
<body>
 <dl>
 <dt>北京</dt>
 <dd>国家首都，政治文化中心</dd>
 <dd>上班很费时，天天挤地铁</dd>
</dl>
<dl>
 <dt>上海</dt>
 <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
</dl>
<dl>
 <dt>广州</dt>
 <dd>中国南大门，有珠江、小蛮腰</dd>
</dl>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405205451732-564594106.png">
（4）类似京东网站
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405211546796-1206255089.png">
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东购物</title>
</head>
<body>
 <dl>
 <dt>购物指南</dt>
 <dd>
 <a href="#">购物流程</a> 
 <a href="#">会员介绍</a> 
 <a href="#">生活旅行/团购</a> 
 <a href="#">常见问题</a> 
 <a href="#">大家电</a> 
 <a href="#">联系客服</a> 
 </dd>
</dl>
<dl>
 <dt>配送方式</dt>
 <dd>
 <a href="#">上门自提</a> 
 <a href="#">211限时达</a> 
 <a href="#">配送服务查询</a> 
 <a href="#">配送费收取标准</a> 
 <a href="#">海外配送</a> 
 </dd>
</dl>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405211814422-402087799.png">
<h2>十一、结构标签</h2>
<h3>1、<header>、<footer>标签</h3>
<header>和<footer>标签用户描述网页结构中的页眉部分（顶部）和页脚部分（底部）。
<header>标签通常用来存放整个页面或者页面内的一个区块的标题，也可以包含网站Logo图像、搜索表单或者其他头部信息内容。
<footer>标签通常用来存放分页部分等尾部信息内容。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>HTML5新增标签</title>
 <style>
 #main {
 width: 480px;
 margin: 0 auto;
 color: white;
 font-size: 40px;
 }

 header {
 height: 100px;
 background: red;
 }

 footer {
 height: 100px;
 background: blue;
 }
 </style>
</head>

<body>
 <div id="main">
 <header>页眉：页面的头部</header>
 <footer>页脚：页面的尾部</footer>
 </div>
</body>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427101031493-303810307.png">
注意：<header>标签不是<head>标签。
在HTML5中，并不限制<header>和<footer>标签的个数，一个网页中可以有多个<header>和<footer>标签，也可以为每一个内容块添加<header>和<footer>标签。
<h3>2、<hgroup>、<nav>标签</h3>
<hgroup>标签用于标题组合，即一个标题和一个子标题，或者标语的组合。
<nav>标签用于页面的导航结构部分。 
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>HTML5新增标签</title>
 <style>
 .clear:after {
 content: "";
 display: block;
 clear: both;
 }

 #main {
 width: 480px;
 margin: 0 auto;
 color: white;
 font-weight: bold;
 }

 header {
 height: 170px;
 background: red;
 padding: 10px 0;
 }

 footer {
 height: 50px;
 background: blue;
 padding: 10px 0;
 }

 nav li {
 float: left;
 margin-right: 100px;
 }
 </style>
</head>

<body>
 <div id="main">
 <header>
 页眉：页面的头部
 <hgroup>
 <h1>主标题</h1>
 <h2>副标题</h2>
 </hgroup>
 <nav>
 <ul>
 <li>导航1</li>
 <li>导航2</li>
 <li>导航3</li>
 </ul>
 </nav>
 </header>
 <footer>页脚：页面的尾部</footer>
 </div>
</body>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427101237251-1544763964.png"> 
<h3>3、<article>、<aside>标签</h3>
<article>标签表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。可包含其他语义化标签。
例如，可以是论坛帖子、杂志或新闻的文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
给定文档中可以包含多篇文章，例如，阅读器在博客上滚动时一个接一个地显示每篇文章的文本，每个帖子将包含在<article>标签中，通常包含一个或多个<section>标签。
<div>
<div>
<aside>标签表示一个和当前页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。
用于<article>标签以外的内容，其通常表现为辅助信息或侧边栏。例如：目录、索引等。
</div>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>HTML5新增标签</title>
 <style>
 .clear:after {
 content: "";
 display: block;
 clear: both;
 }

 #main {
 width: 480px;
 margin: 0 auto;
 color: white;
 font-weight: bold;
 }

 header {
 height: 170px;
 background: red;
 padding: 10px 0;
 }

 footer {
 height: 50px;
 background: blue;
 padding: 10px 0;
 clear: both;
 }

 nav li {
 float: left;
 margin-right: 100px;
 }

 article {
 width: 300px;
 height: 200px;
 color: black;
 border: 1px #000 solid;
 float: left;
 padding: 10px 0;
 }

 aside {
 width: 170px;
 height: 200px;
 color: black;
 border: 1px #000 solid;
 float: right;
 padding: 10px 0;
 }
 </style>
</head>

<body>
 <div id="main">
 <header>
 页眉：页面的头部
 <hgroup>
 <h1>主标题</h1>
 <h2>副标题</h2>
 </hgroup>
 <nav>
 <ul>
 <li>导航1</li>
 <li>导航2</li>
 <li>导航3</li>
 </ul>
 </nav>
 </header>
 <article>主体信息</article>
 <aside>辅助信息</aside>
 <footer>页脚：页面的尾部</footer>
 </div>
</body>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427102318649-1457296575.png"> 
<h3>4、<section>、<figure>标签</h3>
<section>标签用于描述页面上的板块，划分页面上的不同区域。
<figure>标签用于描述图像或视频，其包含的一个子标签<figcaption>用于描述图像或视频的标题部分。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>HTML5新增标签</title>
 <style>
 .clear:after {
 content: "";
 display: block;
 clear: both;
 }

 #main {
 width: 480px;
 margin: 0 auto;
 color: white;
 font-weight: bold;
 }

 header {
 height: 170px;
 background: red;
 padding: 10px 0;
 }

 footer {
 height: 50px;
 background: blue;
 padding: 10px 0;
 clear: both;
 }

 nav li {
 float: left;
 margin-right: 100px;
 }

 article {
 width: 300px;
 height: 150px;
 color: black;
 border: 1px #000 solid;
 float: left;
 padding: 10px 0;
 }

 aside {
 width: 170px;
 height: 150px;
 color: black;
 border: 1px #000 solid;
 float: right;
 padding: 10px 0;
 }

 section {
 width: 140px;
 height: 70px;
 border: 1px #000 solid;
 float: left;
 margin: 4px;
 }

 figure {
 width: 100%;
 height: 100%;
 margin: 0;
 }

 figure img {
 width: 100%;
 height: 50%;
 }
 </style>
</head>

<body>
 <div id="main">
 <header>
 页眉：页面的头部
 <hgroup>
 <h1>主标题</h1>
 <h2>副标题</h2>
 </hgroup>
 <nav>
 <ul>
 <li>导航1</li>
 <li>导航2</li>
 <li>导航3</li>
 </ul>
 </nav>
 </header>
 <article>
 <section>
 <figure>
 <img src="images/picture.jpg" alt="">
 <figcaption>图片简介信息</figcaption>
 </figure>
 </section>
 <section>板块2</section>
 <section>板块3</section>
 <section>板块4</section>
 </article>
 <aside>辅助信息</aside>
 <footer>页脚：页面的尾部</footer>
 </div>
</body>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427102531013-1765177574.png"> 
<h2>十二、表格</h2>
表格标记用<code><table></code>表示。一个表格<code><table></code>是由每行<code><tr></code>组成的，每行是由每个单元格<code><td></code>组成的。
tr：table row，指表格中的行。
td：table data，指表格数据，即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
 <table border="0">
 <tr>
 <td>姓名</td>
 <td>语文</td>
 <td>数学</td>
 <td>英语</td>
 </tr>
 <tr>
 <td>张三</td>
 <td>88</td>
 <td>76</td>
 <td>91</td>
 </tr>
 <tr>
 <td>李四</td>
 <td>95</td>
 <td>80</td>
 <td>90</td>
 </tr>
</table>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405212956725-803220494.png">
上图中的表格好像没看到边框呀，接下来看看<code><table></code>标签的属性。
<h3>1、border属性</h3>
<table>标记的border属性是为单元格设置边框的，并用边框围绕表格。
如果将border设置为1，单位是像素，表示该表格边框的宽度是1像素。
但是如果border属性值设置为5，那么只有围绕表格的边框尺寸发生变化，表格内部的边框还是1像素宽。
如果将border属性设置为0或者删除border属性，表格将没有边框。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="5">
 <tr>
 <td>姓名</td>
 <td>语文</td>
 <td>数学</td>
 <td>英语</td>
 </tr>
 <tr>
 <td>张三</td>
 <td>88</td>
 <td>76</td>
 <td>91</td>
 </tr>
 <tr>
 <td>李四</td>
 <td>95</td>
 <td>80</td>
 <td>90</td>
 </tr>
</table>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405213213735-921544958.png"> 
<h3>2、<table>其他属性</h3>
<ul>
<li>bordercolor：表格的边框颜色，"red"、"#00ffff"。</li>
<li>width：宽度。像素为单位，"400"。</li>
<li>height：高度。像素为单位，"200"。</li>
<li>style="border-collapse:collapse;"：单元格的线和表格的边框线合并（表格的两边框合并为一条）</li>
<li>align：表格的水平对齐方式。属性值可以填：left right center。注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）</li>
<li>bgcolor：表格的背景颜色，"red"、"#00ffff"。</li>
<li>background：背景图片，"image\bg.jpg"。背景图片的优先级大于背景颜色。</li>
<li>bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色。</li>
<li>bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色。这两个属性的目的是为了设置3D的效果。</li>
<li>dir：公有属性，单元格内容的排列方式(direction)。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）。既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。</li>
<li>cellpadding：内边距，单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。</li>
<li>cellspacing：外边距，单元格和单元格之间的距离，像素为单位。默认情况下的值为0。</li>
</ul>
 <img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405215754769-1171235218.png">
<h3> 3、<tr>的属性</h3>
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：
<ul>
<li>ltr：从左到右（left to right，默认）</li>
<li>rtl：从右到左（right to left）</li>
</ul>
bgcolor：设置这一行的单元格的背景色。注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
height：一行的高度。
align：一行的内容水平对齐方式，取值：left、center、right。
valign：一行的内容垂直对齐方式，取值：top、middle、bottom。
<h3>4、<td>标签中的对齐方式</h3>
align：内容的水平对齐方式。属性值可以填：left、center、right。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
valign：内容的垂直对齐方式。属性值可以填：top、middle、bottom。
width：单元格的宽度，绝对值或者相对值(%)。
height：单元格的高度。
bgcolor：设置这个单元格的背景色。
background：设置这个单元格的背景图片。
<h3>5、<th>标记</h3>
单元格<td>我们还可以使用<th>来表示，这样可以同时达到加粗和居中的效果，相当于<code><td></code> + <code></code>。
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405215644986-320227048.png">
<h3>6、<td>的colspan和rowspan属性</h3>
<td>标记还有两个非常重要的属性：colspan（跨列）和rowspan（跨行）
（1）colspan（跨列）
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="5" bordercolor="red" cellspacing="0" width="400" height="200">
 <tr align="center">
 <td colspan="4">成绩表</td>
 </tr>
 <tr align="center">
 <td>姓名</td>
 <td>语文</td>
 <td>数学</td>
 <td>英语</td>
 </tr>
 <tr align="center">
 <td>张三</td>
 <td>88</td>
 <td>76</td>
 <td>91</td>
 </tr>
 <tr align="center">
 <td>李四</td>
 <td>95</td>
 <td>80</td>
 <td>90</td>
 </tr>
</table>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405215132688-2105299166.png">
（2）rowspan（跨行）
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="5" bordercolor="red" cellspacing="0" width="400" height="200">
 <tr align="center">
 <td colspan="5">成绩表</td>
 </tr>
 <tr align="center">
 <td>班级</td>
 <td>姓名</td>
 <td>语文</td>
 <td>数学</td>
 <td>英语</td>
 </tr>
 <tr align="center">
 <td rowspan="2">一班</td>
 <td>张三</td>
 <td>88</td>
 <td>76</td>
 <td>91</td>
 </tr>
 <tr align="center">
 <td>李四</td>
 <td>95</td>
 <td>80</td>
 <td>90</td>
 </tr>
</table>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405215326106-33362807.png">
<h3>7、<caption>标记</h3>
这是表格的标记，表示表格的标题。使用时和<tr>标记并列。
属性：align，表示标题相对于表格的位置。
属性取值可以是：left、center、right、top、bottom 。
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="5" bordercolor="red" cellspacing="0" width="400" height="200">
 <caption>成绩表</caption>
 <tr align="center">
 <td>班级</td>
 <td>姓名</td>
 <td>语文</td>
 <td>数学</td>
 <td>英语</td>
 </tr>
 <tr align="center">
 <td rowspan="2">一班</td>
 <td>张三</td>
 <td>88</td>
 <td>76</td>
 <td>91</td>
 </tr>
 <tr align="center">
 <td>李四</td>
 <td>95</td>
 <td>80</td>
 <td>90</td>
 </tr>
</table>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220405232806011-703876277.png"> 
<h2>十三、表单</h2>
表单标记用<code><form></code>表示，用于与服务器的交互。表单就是用于收集用户信息的，就是让用户填写的、选择的。语法如下：
<div class="cnblogs_code">
<pre><form>
...
<input />标记
....
</form></pre>
</div>
属性：
<ul dir="auto">
<li><code>name</code>：表单的名称，用于JavaScript来操作或控制表单时使用。</li>
<li><code>id</code>：表单的名称，用于JavaScript来操作或控制表单时使用。</li>
<li><code>action</code>：指定表单数据的处理程序，表单将提交到哪里，如：action=“XXXServlet”或“xxx.jsp”。</li>
<li><code>method</code>：表单数据的提交方式，一般取值：get(默认)和post。</li>
</ul>
注意：表单和表格嵌套时，是在<code><form></code>标记中套<code><table></code>标记。
get提交和post提交的区别：
GET方式：将表单数据，以键值对“name=value”形式追加到action指定的处理程序的后面，两者间用“?”隔开，每一个“name=value”间用“&”号隔开。
特点：只适合提交少量信息，并且不太安全（不要提交敏感数据）、提交的数据类型只限于ASCII字符。
POST方式：将表单数据隐藏发送（通过请求正文）到action指定的处理程序。表面上，POST发送的数据不可见。action指定的处理程序可以获取到表单数据。
特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的（Word、Excel、rar、img）。
<h3 dir="auto">1、<input>输入标记（文本框）</h3>
用于接收用户输入。多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
<div class="highlight highlight-text-html-basic position-relative overflow-auto">
<pre><input type="text" /></pre>
</div>
属性：
<ul dir="auto">
<li>
<code>type="属性值"</code>：文本类型。属性值可以是：
<ul dir="auto">
<li><code>text</code>（默认）：文本域。</li>
<li><code>password</code>：密码字段，密码字段字符不会明文显示，而是以星号或圆点替代。</li>
<li><code>radio</code>：单选按钮，name（名字）属性相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字” ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了，所以叫做radio。</li>
<li><code>checkbox</code>：多选按钮，name 属性值相同的按钮作为一组进行选择。用户需要从若干给定的选择中选取一个或若干选项。</li>
<li><code>hidden</code>：隐藏框，在表单中包含不希望用户看见的信息。</li>
<li><code>button</code>：普通按钮，结合JavaScript代码进行使用，触发JavaScript代码。</li>
<li><code>submit</code>：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面或者程序中去。</li>
<li><code>reset</code>：重置按钮，清空当前表单的内容，并设置为最初的默认值。</li>
<li><code>image</code>：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。</li>
<li><code>file</code>：文件选择框。提示：如果要限制上传文件的类型，需要配合JavaScript来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。</li>
</ul>
</li>
<li>
<code>value="内容"</code>：文本框里的默认内容（已经被填好了的）。
</li>
<li>
<code>size="50"</code>：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。注意size属性值的单位不是像素，是个数。
</li>
<li>
<code>readonly</code>：设置文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
</li>
<li>
<code>disabled</code>：文本框只读，禁用不能编辑，光标点不进去。属性值可以不写。
</li>
<li><code>checked</code>：将单选按钮或多选按钮默认处于选中状态。当<code><input></code>标签设置为<code>type="radio"</code>或者<code>type=checkbox</code>时，可以用这个属性。属性值也是checked，可以省略。</li>
</ul>
程序：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
 <form>
 姓名：<input value="呵呵" />张三<br />
 昵称：<input value="哈哈" readonly="" /><br />
 名字：<input type="text" value="name" disabled="" /><br />
 密码：<input type="password" value="pwd" size="50" /><br />
 性别：<input type="radio" name="gender" id="radio1" value="male" checked="" />男
 <input type="radio" name="gender" id="radio2" value="female" />女<br />
 爱好：<input type="checkbox" name="love" value="eat" />吃饭
 <input type="checkbox" name="love" value="sleep" />睡觉
 <input type="checkbox" name="love" value="bat" />打豆豆<br />
 <input type="button" value="普通按钮" /><br />
 <input type="submit"value="提交按钮" /><br />
 <input type="reset" value="重置按钮" /><br />
 <input type="image" value="图片按钮1" /><br />
 <input type="image" src="bd_logo.png" width="200" value="图片按钮2" /><br />
 <input type="file" value="文件选择框" /><br />
</form>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220407093129959-1017525201.png">
<h3>2、<select>下拉列表标记</h3>
<code><select></code>标记里面的每一项用<code><option></code>表示。select意思是“选择”，option意思是“选项”。
select标记和ul、ol、dl一样，都是组标记。
属性：
<table class="reference notranslate" style="height: 427px; width: 730px">
<tbody>
<tr><th style="text-align: center" align="left" width="20%">属性</th><th style="text-align: center" align="left" width="20%">值</th><th style="text-align: center" align="left" width="60%">描述</th></tr>
<tr>
<td>autofocusNew</td>
<td>autofocus</td>
<td>规定当页面加载时，文本区域自动获得焦点。</td>
</tr>
<tr>
<td>cols</td>
<td>number</td>
<td>规定文本区域内可见的宽度。</td>
</tr>
<tr>
<td>disabled</td>
<td>disabled</td>
<td>规定禁用文本区域。</td>
</tr>
<tr>
<td>formNew</td>
<td>form_id</td>
<td>定义文本区域所属的一个或多个表单。</td>
</tr>
<tr>
<td>maxlengthNew</td>
<td>number</td>
<td>规定文本区域允许的最大字符数。</td>
</tr>
<tr>
<td>name</td>
<td>text</td>
<td>规定文本区域的名称。</td>
</tr>
<tr>
<td>placeholderNew</td>
<td>text</td>
<td>规定一个简短的提示，描述文本区域期望的输入值。</td>
</tr>
<tr>
<td>readonly</td>
<td>readonly</td>
<td>规定文本区域为只读。</td>
</tr>
<tr>
<td>requiredNew</td>
<td>required</td>
<td>规定文本区域是必需的/必填的。</td>
</tr>
<tr>
<td>rows</td>
<td>number</td>
<td>规定文本区域内可见的行数。</td>
</tr>
<tr>
<td>wrapNew</td>
<td>hard soft</td>
<td>规定当提交表单时，文本区域中的文本应该怎样换行。</td>

</tr>

</tbody>

</table>
<div> </div>
<div>常用的属性：</div>
<ul dir="auto">
<li><code>multiple</code>：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 <code>multiple=""</code>，也可以写成<code>multiple="multiple"</code>。</li>
<li><code>size="3"</code>：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。</li>

</ul>
<code><option></code>标记的属性：
<ul dir="auto">
<li><code>selected</code>：预选中。没有属性值。</li>

</ul>
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
 <form>
 <select>
 <option>小学</option>
 <option>初中</option>
 <option>高中</option>
 <option>大学</option>
 <option selected="">研究生</option>
 </select>
 <br /><br />
 <select size="3">
 <option>小学</option>
 <option>初中</option>
 <option>高中</option>
 <option>大学</option>
 <option>研究生</option>
 </select>
 <br /><br />
 <select multiple="">
 <option>小学</option>
 <option>初中</option>
 <option selected="">高中</option>
 <option selected="">大学</option>
 <option>研究生</option>
 </select>
 <br /><br />
</form>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220407093544291-1498715345.png"> 
<h3>3、<textarea>标记：多行文本输入框</h3>
属性：
<table class="reference notranslate" style="height: 428px; width: 728px">
<tbody>
<tr><th style="text-align: center" align="left" width="20%">属性</th><th style="text-align: center" align="left" width="20%">值</th><th style="text-align: center" align="left" width="60%">描述</th></tr>
<tr>
<td>autofocusNew</td>
<td>autofocus</td>
<td>规定当页面加载时，文本区域自动获得焦点。</td>
</tr>
<tr>
<td>cols</td>
<td>number</td>
<td>规定文本区域内可见的宽度。</td>
</tr>
<tr>
<td>disabled</td>
<td>disabled</td>
<td>规定禁用文本区域。</td>
</tr>
<tr>
<td>formNew</td>
<td>form_id</td>
<td>定义文本区域所属的一个或多个表单。</td>
</tr>
<tr>
<td>maxlengthNew</td>
<td>number</td>
<td>规定文本区域允许的最大字符数。</td>
</tr>
<tr>
<td>name</td>
<td>text</td>
<td>规定文本区域的名称。</td>
</tr>
<tr>
<td>placeholderNew</td>
<td>text</td>
<td>规定一个简短的提示，描述文本区域期望的输入值。</td>
</tr>
<tr>
<td>readonly</td>
<td>readonly</td>
<td>规定文本区域为只读。</td>
</tr>
<tr>
<td>requiredNew</td>
<td>required</td>
<td>规定文本区域是必需的/必填的。</td>
</tr>
<tr>
<td>rows</td>
<td>number</td>
<td>规定文本区域内可见的行数。</td>
</tr>
<tr>
<td>wrapNew</td>
<td>hard soft</td>
<td>规定当提交表单时，文本区域中的文本应该怎样换行。</td>

</tr>

</tbody>

</table>
常用的属性：
<ul dir="auto">
<li><code>rows="4"</code>：指定文本区域的行数。</li>
<li><code>cols="20"</code>：指定文本区域的列数。</li>
<li><code>readonly</code>：只读。</li>

</ul>
代码：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
 <form>
 <textarea name="txtInfo" rows="4" cols="20">1、不爱摄影不懂设计的程序猿不是一个好的产品经理。</textarea>
</form>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220407093900432-1731897359.png">
<h3>4、<fieldset>分组标记</h3>
比如，我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用<fieldset>分组标记。 
<fieldset> 标记可以将表单内的相关元素分组。<fieldset> 标记会在相关表单元素周围绘制边框。
<legend> 标记为 <fieldset> 元素定义标题。
程序：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
 <fieldset>
 <legend>账号信息</legend>
 姓名：<input value="呵呵" />张三<br />
 密码：<input type="password" value="pwd" size="50"/><br />
 </fieldset>
 <fieldset>
 <legend>其他信息</legend>
 性别：<input type="radio" name="gender" id="male" value="male" checked="" />男
 <input type="radio" name="gender" id="female" value="female" />女
 <br />
 爱好：<input type="checkbox" name="love" value="eat" />吃饭
 <input type="checkbox" name="love" value="sleep" />睡觉
 <input type="checkbox" name="love" value="bat" />打豆豆
 </fieldset>
</form>
</body>
</html></pre>
</div>
效果：
<img src="https://img2022.cnblogs.com/blog/520426/202204/520426-20220408092651829-968146408.png">
<h3>5、<lable>定义标注标记</h3>
<label> 标记是为 input 元素定义标注的标记。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<div class="cnblogs_code">
<pre><input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女</pre>
</div>
对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，但点击“男”、“女”这两个文字时是无法选中的；于是，<label>标记派上了用场。
本质上来讲，“男”、“女”这两个文字和<input>标签时没有关系的，而<label>标记就是解决这个问题的。我们可以通过<label>把<input>和汉字包裹起来作为整体。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
程序：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
 <fieldset>
 <legend>账号信息</legend>
 姓名：<input value="呵呵" />张三<br />
 密码：<input type="password" value="pwd" size="50"/><br />
 </fieldset>
 <fieldset>
 <legend>其他信息</legend>
 性别：<input type="radio" name="gender" id="male" value="male" />
 <label for="male">男</label>
 <input type="radio" name="gender" id="female" value="female" />
 <label for="female">女</label>
 <br />
 爱好：<input type="checkbox" name="love" value="eat" />吃饭
 <input type="checkbox" name="love" value="sleep" />睡觉
 <input type="checkbox" name="love" value="bat" />打豆豆
 </fieldset>
</form>
</body>
</html></pre>
</div>
加上<label>标记后，我们点击“男”或“女”这两个文字，也可以选中radio了。 
<h2>十四、页面交互</h2>
<h3>1、<details>标签和<summary>标签</h3>
 <details>标签用于描述文档或文档某个部分的细节。
与<summary>标签配合使用可以为details定义标题。
标题是可见的，当用户单击标题时，会显示出details的内容。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 <details>
 <summary>显示列表</summary>
 <ul>
 <li>列表1</li>
 <li>列表2</li>
 <li>列表3</li>
 </ul>
 </details>
</body>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427134902228-731052888.png">
<h3>2、<progress>标签</h3>
<progress>标签用于定义运行中的进度或进程。
一般需要配合JavaScript来展示进度条的动态效果。
有两个可选的属性，max属性表示完成的值，value属性表示当前的值。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 <progress id='progress1' value="0" max="100"></progress>
 <button onclick="start_run(100)">下载</button>
</body>
<script>
 function start_run(n) {
 if (n == 0) {
 alert("下载完成")
 }
 var progress1 = document.getElementById("progress1")
 n = n - 1
 cur_task = 100 - n
 progress1.value = cur_task
 setTimeout("start_run(" + n + ")", 100)// 在指定的毫秒数后调用函数
 }
</script>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427133539528-2031192147.gif">
<h3>3、<meter>标签</h3>
<meter>标签用于定义度量衡，仅用于已知最大和最小值的度量。浏览器会使用图形方式表现<meter>标签。
<meter>标签的属性说明如下。
<ul>
<li>high：定义度量的值位于哪个点，被界定为高的值。</li>
<li>low：定义度量的值位于哪个点，被界定为低的值。</li>
<li>max：定义最大值。默认值是1。</li>
<li>min：定义最小值。默认值是0。</li>
<li>optimum：定义什么样的度量值是最佳的值。如果该值高于high属性的值，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好。</li>
<li>value：定义度量的值。 </li>
</ul>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>meter</title>
</head>
<body>
 <meter min="0" max="20" value="5"></meter><br>
 <meter value="0.1"></meter><br>
 <meter value="0.3" optimum="1" high="0.9" low="0.1" max="1" min="0"></meter>
 <span>30%</span><br>
 <meter min="0" max="100" value="80"></meter><br>
 <meter min="0" max="100" value="100"></meter>
</body>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427132734384-470695167.png"> 
<h2>十五、文本层次语义</h2>
为了使HTML页面中的文本内容更加形象生动，需要使用一些特殊的元素来突出文本之间的层次关系，这样的元素被称为层次语义元素。
文本的层次语义元素主要包括time元素、mark元素和cite元素。
<h3>1、time元素</h3>
time元素用于定义时间或日期，可以代表24小时中的某一时间。
time元素不会在浏览器中呈现任何特殊效果，但是该元素能以机器可读的方式对日期和时间进行编码，这样用户就能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。
time元素有两个属性。
<ul>
<li data-pid="WYZfxFMv">datetime: 用于定义相应的时间或日期。取值为具体时间（如14：00）或具体日期（如2022-11-27），不定义该属性时，由元素的内容给定日期/时间。</li>
<li data-pid="cPBEYdIT">pubdate：用于定义time元素中的日期/时间是文档（或article元素）的发布日期，取值一般为”pubdate“</li>
</ul>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 <p>我们的上课时间是<time>8:00</time>，下课时间是<time>5:30</time>，中午休息2小时。</p>
 <p>今年的<time datetime="2023-5-01">五一</time>我们外出春游。</p>
 <time datetime="2023-4-28" pubdate="pubdate">
 本消息发布于2023年4月28日!
 </time>
</body>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427151903736-827895994.png">
<h3>2、mark元素</h3>
mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。
该元素的用法与em和strong有相似之处，但是使用mark元素在突出显示样式时更加随意灵活。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 <p>
 要获得更多的<mark>自由时间</mark>，
 就需要对选择的<mark>专业领域、工作性质、职业路径以及与雇主达成的交易类型 </mark>做出审慎的判断。
 一旦做出正确的决策，你就无须担心时间管理的问题了。
 于我而言，我希望单纯靠判断力来获得报酬，而不是靠劳作。
 我想让机器人、资本或计算机完成实际工作，而我只靠判断力赚钱。
 </p>
</body>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427152313845-2106478450.png">
<h3>3、cite元素</h3>
cite元素可创建一个引用标记，用于对文档参考文献的引用说明，一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 <p>
 爱情无药可医，唯有爱得更深！
 </p>
 <cite>——瓦尔登湖</cite>
</body>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427152555641-947357906.png"> 
<h2>十六、全局属性</h2>
全局属性是指在任何元素中都可以使用的属性，在HTML5中常用的全局属性有draggable（可拖拽到）、hidden（隐藏）、spellcheck（用拼写检查程序检查）和contenteditable（让文本处于可编辑状态)。
<h3>1、draggable属性</h3>
draggable属性用来定义元素是否可以拖动，该属性有两个值：true和false，默认为false，当值为true时表示选中之后进行拖拽操作，否则不能拖动。
注意：本案例中在网页内的效果并不能拖动，如果想要真正实现拖动功能，必须与JavaScript结合使用。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 <h3>元素拖动属性</h3>
 <article draggable="true">这些文字可以被拖动</article>
 可拖动的图片<img src="./images/001.jpg" draggable="true">
</body>
</html></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427153248016-1341847759.png">
<h3 data-pid="UeKcDJz0">2、hidden属性</h3>
在HTML5中，大多数元素都支持hidden属性，该属性有两个属性值：true和false。
当hidden属性取值为true，元素将会被隐藏，反之则会显示。
元素中的内容是通过浏览器创建的，页面装载后允许使用JavaScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也及时显示出来。
<h3 data-pid="xJqgvQNq">3、spellcheck属性</h3>
spellcheck属性主要针对于Input元素和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。
spellcheck属性有两个值：true（默认）和false，值为true时检测输入框中的值，反之不检测。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 <h3>输入框语法检测</h3>
 <p>
 spellcheck属性为true：<br />
 <textarea spellcheck=true>html5</textarea>
 </p>
 <p>
 spellcheck属性为false：<br />
 <textarea spellcheck="false">html5</textarea>
 </p>
</body>
</html></pre>
</div>
第一个文本框内文字的下面出现红色波浪线，说明检测生效。
不同的浏览器可能检测生效也不一样，我的遨游浏览器可以检测，Edge和Chrome不检测。
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427154043339-480097338.png">
<h3 data-pid="JY12P7QZ">4、contenteditable属性</h3>
contentediatbale属性规定是否可编辑元素的内容，但是前提是该元素可以获得鼠标焦点并且内容不是只读。
在HTML5之前的版本中，如果直接在页面上编辑文本需要编写比较复杂的JavaScript代码，但是在HTML5中只要指定该属性的值即可。
该属性有两个值，如果为true表示可编辑，为false表示不可编辑。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 <h3>可编辑的列表</h3>
 <ul contenteditable="true">
 <li>列表1</li>
 <li>列表2</li>
 <li>列表3</li>
 </ul>
</body>
</html></pre>
</div>
我们可以在列表后添加水果名称，说明可contenteditable属性生效。
<img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427154416536-987528021.png"><img src="https://img2023.cnblogs.com/blog/520426/202304/520426-20230427154819244-1199384910.png"> 
  
来源：https://www.cnblogs.com/lihuawei/p/16091636.html

頁: [1]

琼殿技术论坛's Archiver

HTML5