HTML笔记
HTML 教程
What/Why/How
What:HTML是超文本标记语言(Hyper Text Markup Language)
Why:HTML可以用来创建你自己的网站
How:且看我慢慢道来
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>这是一个DEMO页面</title> </head> <body> </body> </html>
<!DOCTYPE html>声明定义了该文档是一个 HTML5 文档`<html>元素是HTML页面的根元素<head>元素包含 HTML 页面的元信息<title>元素指定 HTML 页面的标题(显示在浏览器的标题栏或页面标签中)<body>元素定义文档的主体,是所有可见内容的容器,例如标题、段落、图像、超链接、表格、列表等。<h1>元素定义一个大标题<p>元素定义一个段落
什么是 HTML 元素?
HTML 元素由开始标签、一些内容和结束标签定义
<tagname> 内容在此处... </tagname>
HTML 元素是从开始标签到结束标签的所有内容
<h1>我的第一个标题</h1> <p>我的第一个段落。</p>v
**注意:**有些 HTML 元素没有内容(例如 <br> 元素)。这些元素称为空元素。空元素没有结束标签!
Web 浏览器
Web 浏览器(Chrome、Edge、Firefox、Safari)的目的是读取 HTML 文档并正确显示它们。
浏览器不显示 HTML 标签,而是使用它们来确定如何显示文档

HTML 页面结构
以下是 HTML 页面结构的可视化
<html> <head> <title>页面标题</title> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
注意:
部分中的内容将在浏览器中显示。 <title>
元素中的内容将显示在浏览器的标题栏或页面标签中。
HTML 基础
HTML 文档
所有 HTML 文档都必须以文档类型声明开头:<!DOCTYPE html>
HTML 文档本身以 <html> 开始,以 </html> 结束。
HTML 文档的可见部分位于 <body> 和 </body> 之间。
<!DOCTYPE html> <html> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
<!DOCTYPE> 声明
声明 <!DOCTYPE> 代表文档类型,并帮助浏览器正确显示网页。
它必须只出现一次,位于页面顶部(在任何 HTML 标签之前)。
声明 <!DOCTYPE> 不区分大小写。
HTML5 的 <!DOCTYPE> 声明是:
<!DOCTYPE html>
HTML 标题(heading)
HTML 标题使用 <h1> 到 <h6> 标签定义。
<h1> 定义最重要的标题。 <h6> 定义最不重要的标题
<h2>这是标题 2</h2> <h3>这是标题 3</h3>
HTML 段落(paragraph)
HTML 段落使用 <p> 标签定义
<p>这是一个段落。</p> <p>这是另一个段落。</p>
HTML 链接(anchor)
HTML 链接使用 <a> 标签定义
链接的目的地在 href 属性中指定。
属性用于为 HTML 元素提供额外信息。
<a href="https://xiaoniba.com">这是一个链接</a>
HTML 图像(image)
HTML 图像使用 <img> 标签定义。
源文件(src(source))、替代文本(alt(alternative))、width 和 height 作为属性提供。
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
您是否曾见过一个网页并想知道”嘿!他们是怎么做到的?”
查看 HTML 源代码
在 HTML 页面中按 CTRL + U,或右键单击页面并选择”查看页面源代码”。这将打开一个新选项卡,其中包含页面的 HTML 源代码。
检查 HTML 元素
右键单击元素(或空白区域),然后选择”检查”以查看元素是由什么组成的(您将看到 HTML 和 CSS)。您还可以在打开的”元素”或”样式”面板中即时编辑 HTML 或 CSS。
HTML 元素
HTML 元素由一个开始标签、一些内容和一个结束标签定义。
<tagname>内容放在这里...</tagname>
一些 HTML 元素的示例
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
开始标签 元素内容 结束标签
我的第一个标题 我的第一个段落。
<br>{=html} none none
**注意:**有些 HTML 元素没有内容(例如 <br> 元素)。这些元素称为空元素。空元素没有结束标签!
嵌套的 HTML 元素
HTML 元素可以嵌套(这意味着元素可以包含其他元素)。
所有 HTML 文档都由嵌套的 HTML 元素组成。
以下示例包含四个 HTML 元素(<html>、<body>、<h1> 和 <p>)。
<!DOCTYPE html> <html> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
切勿省略结束标签
有些 HTML 元素即使您忘记了结束标签也会正确显示。
但是,永远不要依赖这一点!如果忘记结束标签,可能会出现意外的结果和错误!
<html> <body> <p>这是一个段落 <p>这是一个段落 </body> </html>
空的 HTML 元素
没有内容的 HTML 元素称为空元素。
<p>这是一个带有换行的段落。<br>
The <br> tag defines a line break, and is an empty element without a closing tag
(<br>标记定义了一个换行符,并且是一个没有结束标记的空元素)
HTML 不区分大小写
HTML 标签不区分大小写:<P> 与 <p> 含义相同。
HTML 标准不要求小写标签,但 W3C 建议在 HTML 中使用小写,并且对于更严格的文档类型(如 XHTML)要求使用小写。
HTML 属性
HTML 属性提供了关于 HTML 元素的额外信息。
HTML 属性
所有 HTML 元素都可以拥有 属性
属性提供关于元素的附加信息
属性始终在起始标签中指定
属性通常以名称/值对的形式出现,例如:name=“value”
href 属性(Hypertext Reference)
标签 <a> 定义一个超链接。 href 属性指定链接指向的页面的 URL
<a href="https://xiaoniba.com">访问 xnb</a>
src 属性(source)
标签 <img> 用于在 HTML 页面中嵌入图像。 src 属性指定要显示的图像的路径
<img src="img_girl.jpg">
在 src 属性中有两种指定 URL(Uniform Resource Locator) 的方法
1. 绝对 URL - 链接到托管在另一个网站上的外部图像。例如:src=“https://w3schools.org.cn/images/img_girl.jpg"。
**注意:**外部图像可能受版权保护。如果您未获得使用许可,您可能会侵犯版权法。此外,您无法控制外部图像;它可能会突然被移除或更改。
2. 相对 URL - 链接到托管在网站内的图像。这里,URL 不包含域名。如果 URL 不以斜杠开头,则它相对于当前页面。例如:src=“img_girl.jpg”。如果 URL 以斜杠开头,则它相对于域名。例如:src=”/images/img_girl.jpg”。
**提示:**几乎总是最好使用相对 URL。如果您更改域名,它们不会中断。
(There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website. Example: src=“https://www.w3schools.com/images/img_girl.jpg”.
Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src=“img_girl.jpg”. If the URL begins with a slash, it will be relative to the domain. Example: src=”/images/img_girl.jpg”.
Tip: It is almost always best to use relative URLs. They will not break if you change domain.)
width 和 height 属性
标签 <img> 也应包含 width 和 height 属性,它们指定图像的宽度和高度(以像素为单位)
<img src="img_girl.jpg" width="500" height="600">
alt 属性(alternative)
标签 <img> 所需的 alt 属性为图像指定了替代文本,以防图像因某种原因无法显示。这可能是由于连接速度慢、src 属性错误,或者用户使用了屏幕阅读器。
<img src="img_girl.jpg" alt="戴着夹克的女孩"> <img src="img_typo.jpg" alt="戴着夹克的女孩">
style 属性
style 属性用于向元素添加样式,例如颜色、字体、大小等。
<p style="color:red;">这是一个红色段落。</p>
lang 属性(language)
您应该始终在 <html> 标签内包含 lang 属性,以声明网页的语言。这旨在帮助搜索引擎和浏览器。
以下示例指定英语作为语言
<!DOCTYPE html> <html> <body> ... </body> </html>
在 lang 属性中也可以为语言代码添加国家代码。因此,前两个字符定义了 HTML 页面的语言,后两个字符定义了国家。
以下示例指定英语作为语言,美国作为国家
<!DOCTYPE html> <html> <body> ... </body> </html>
title 属性
title 属性定义了关于元素的额外信息。
当您将鼠标悬停在元素上时,title 属性的值将显示为工具提示
<p title="我是一个工具提示">这是一个段落。</p>
始终使用小写属性
HTML 标准不要求小写属性名。
title 属性(以及所有其他属性)可以用大写或小写编写,例如 title 或 TITLE。
然而,W3C 建议在 HTML 中使用小写属性,并要求在更严格的文档类型(如 XHTML)中使用小写属性。
始终引用属性值
HTML 标准不要求在属性值周围加引号。
然而,W3C 建议在 HTML 中使用引号,并要求在更严格的文档类型(如 XHTML)中使用引号。
好 <a href="https://w3schools.org.cn/html/">访问我们的 HTML 教程</a> 坏 <a href=https://w3schools.org.cn/html/>访问我们的 HTML 教程</a>
有时您必须使用引号。此示例将无法正确显示 title 属性,因为它包含一个空格
<p title=About W3Schools>
单引号还是双引号?
在 HTML 中,双引号最常用于属性值,但也可以使用单引号。
在某些情况下,当属性值本身包含双引号时,必须使用单引号
<p title='John "ShotGun" Nelson'>
反之亦然
<p title="John 'ShotGun' Nelson">
Chapter Summary(章节概要)
所有 HTML 元素都可以拥有属性
<a>的href属性指定链接指向的页面的 URL<img>的src属性指定要显示的图像的路径<img>的width和height属性为图像提供尺寸信息<img>的alt属性为图像提供替代文本style属性用于向元素添加样式,例如颜色、字体、大小等<html>标签的lang属性声明了网页的语言title属性定义了关于元素的额外信息
HTML 属性参考
所有 HTML 元素的完整属性列表,列在我们的:HTML 属性参考中。
HTML 标题
HTML 标题是您想在网页上显示的标题或副标题。
HTML 标题使用 <h1> 到 <h6> 标签定义。
<h1> 定义最重要的标题。 <h6> 定义最重要的标题。
注意: 浏览器会自动在标题前后添加一些空白(外边距)。
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
标题很重要
搜索引擎使用标题来索引您网页的结构和内容。
用户经常通过标题来浏览页面。使用标题来显示文档结构很重要。
<h1> 标题应用于主标题,其次是 <h2> 标题,然后是次要的 <h3>,以此类推。
注意: 仅将 HTML 标题用于标题。不要使用标题来使文本变大或加粗。
更大的标题
每个 HTML 标题都有一个默认大小。但是,您可以使用 style 属性,通过 CSS font-size 属性来指定任何标题的大小。
<h1 style="font-size:60px;">一级标题</h1>
HTML 段落
段落总是以新行开始,通常是一段文本。
HTML 段落
HTML <p> 元素定义了一个段落。
段落总是以新行开始,浏览器会自动在段落前后添加一些空白(边距)。
<p>这是一个段落。</p> <p>这是另一个段落。</p>
HTML 显示
你无法确定 HTML 将如何显示。
屏幕大小不同,窗口大小调整也会导致不同的结果。
使用 HTML,你无法通过在 HTML 代码中添加额外的空格或额外行来更改显示。
浏览器在显示页面时会自动删除所有额外的空格和行。
<p> 这个段落 包含了很多行 在源代码中, 但是浏览器 忽略了它。 </p> <p> 这个段落 包含 很多空格 在源代码 中, 但是 浏览器 忽略了它。 </p>
HTML 水平分割线(Horizontal Rule)
HTML 页面中的 <hr> 标签定义了一个主题分隔,通常显示为一条水平线。
<hr> 元素用于分隔 HTML 页面中的内容(或定义一个更改)。
<h1>这是标题 1</h1> <p>这是文本。</p> <hr> <h2>这是标题 2</h2> <p>这是另一段文本。</p> <hr>
HTML 换行
HTML <br> 元素定义了一个换行。
如果你想换行(新的一行)而不开始新段落,请使用 <br>。
<p>这是<br>一段<br>包含换行的段落。</p>
<br> 标签是一个空标签,意味着它没有结束标签。
诗歌问题
这首诗将显示在单行上
<p> 我的邦妮在海洋那边。 我的邦妮在海洋那边。 我的邦妮在海洋那边。 哦,带回我的邦妮给我。 </p>
解决方案 - HTML <pre>元素(preformatted text)
HTML <pre> 元素定义了预格式化文本。
<pre> 元素内的文本以固定宽度的字体(通常是 Courier)显示,并且它保留了空格和换行。
<pre> 我的邦妮在海洋那边。 我的邦妮在海洋那边。 我的邦妮在海洋那边。 哦,带回我的邦妮给我。 </pre>
lorem可以随意生成
HTML 样式
HTML style 属性用于为元素添加样式,例如颜色、字体、大小等。
<p>I am normal</p> <p style="color:red;">I am red</p> <p style="color:blue;">I am blue</p> <p style="font-size:50px;">I am big</p>
HTML 样式属性
HTML 元素的样式设置可以通过 style 属性来完成。
HTML style 属性的语法如下:
<标签名 style=”属性:值;”>
属性 是一个 CSS 属性。值 是一个 CSS 值。
背景颜色
CSS background-color 属性定义 HTML 元素的背景颜色。
将页面背景色设置为粉蓝色 <body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>这是一个段落。</p> </body>
为两个不同元素设置背景颜色 <body> <h1 style="background-color:powderblue;">这是一个标题</h1> <p style="background-color:tomato;">这是一个段落。</p> </body>
文本颜色
CSS color 属性定义 HTML 元素的文本颜色。
<h1 style="color:blue;">这是一个标题</h1> <p style="color:red;">这是一个段落。</p>
字体
CSS font-family 属性定义 HTML 元素使用的字体。
<h1 style="font-family:verdana;">这是一个标题</h1> <p style="font-family:courier;">这是一个段落。</p>
文字大小
CSS font-size 属性定义 HTML 元素的文本大小。
<h1 style="font-size:300%;">这是一个标题</h1> <p style="font-size:160%;">这是一个段落。</p>
文本对齐
CSS text-align 属性定义 HTML 元素的水平文本对齐方式。
<h1 style="text-align:center;">居中标题</h1> <p style="text-align:center;">居中段落。</p>
Chapter Summary
使用
style属性来设置 HTML 元素的样式。使用
background-color设置背景颜色。使用
color设置文本颜色。使用
font-family设置文本字体。使用
font-size设置文本大小。使用
text-align设置文本对齐。
HTML 文本格式化
HTML 包含多个用于定义具有特殊含义的文本的元素。
<body> <p><b>This text is bold</b></p> <p><i>This text is italic</i></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body>
HTML 格式化元素
格式化元素旨在显示特殊类型的文本
<b>(Bold)- 粗体文本<strong>- 重要文本<i>(Italic)- 斜体文本<em>(Emphasis)- 强调文本<mark>- 标记文本<small>- 更小的文本<del>(Delete)- 删除文本<ins>(Insert)- 插入文本<sub>(Subscript)- 下标文本<sup>(Superscript)- 上标文本
HTML <b> 和 <strong> 元素
HTML <b> 元素定义粗体文本,不带任何额外的重要性。
<b>此文本是粗体</b> <strong>此文本很重要!</strong>
HTML <i> 和 <em> 元素
HTML <i> 元素定义文本中具有不同语调或情绪的部分。内部内容通常显示为斜体。
提示: <i> 标签通常用于表示技术术语、外语短语、想法、船名等。
HTML <em> 元素定义强调文本。内部内容通常显示为斜体。
提示: 屏幕阅读器将以强调的方式(使用口头重音)朗读 <em> 中的单词。
<i>此文本是斜体</i> <em>此文本已强调</em>
HTML <small> 元素
HTML <small> 元素定义更小的文本
<small>这是一些更小的文本。</small>
HTML <mark> 元素
HTML <mark> 元素定义应标记或突出显示的文本
<p>今天不要忘记买<mark>牛奶</mark>。</p>
HTML <del> 元素
HTML <del> 元素定义已从文档中删除的文本。浏览器通常会在删除的文本上划一条线
<p>我最喜欢的颜色是<del>蓝色</del> 红色。</p>
HTML <ins> 元素
HTML <ins> 元素定义已插入到文档中的文本。浏览器通常会在插入的文本下划线
<p>我最喜欢的颜色是<del>蓝色</del> <ins>红色</ins>。</p>
HTML <sub> 元素
HTML <sub> 元素定义下标文本。下标文本出现在正常行下方半个字符处,有时会以较小的字体呈现。下标文本可用于化学公式,例如 H2O
<p>这是<sub>下标</sub>文本。</p>
HTML <sup> 元素
HTML <sup> 元素定义上标文本。上标文本出现在正常行上方半个字符处,有时会以较小的字体呈现。上标文本可用于脚注,例如 WWW[1]
<p>这是<sub>下标</sub>文本。</p>
HTML 引用和引证元素
在本章中,我们将学习 <blockquote>、<q>、<abbr>、<address>、<cite> 和 <bdo> HTML 元素。
HTML <blockquote> 用于引用
HTML <blockquote> 元素定义了一个从其他来源引用的部分。
浏览器通常会缩进 <blockquote> 元素。
<p>以下是世界自然基金会网站上的一段引用:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> 60 年来,世界自然基金会一直致力于帮助人类和自然共同繁荣。作为全球领先的环保组织,世界自然基金会在近 100 个国家开展工作。我们与世界各地的人们在各个层面进行合作,开发并提供创新的解决方案,以保护社区、野生动物及其栖息地。 </blockquote>
HTML <q>(quote) 用于短引用
HTML <q> 标签定义了一个短引用。
浏览器通常会在引用周围插入引号。
<p>世界自然基金会的目标是:<q>构建一个人类与自然和谐共处的未来。</q></p>
HTML <abbr>(abbreviation) 用于缩写
HTML <abbr> 标签定义了缩写或首字母缩略词,例如”HTML”、“CSS”、“Mr.”、“Dr.”、“ASAP”、“ATM”。
标记缩写可以为浏览器、翻译系统和搜索引擎提供有用的信息。
**提示:**使用全局 title 属性,在鼠标悬停在元素上时显示缩写/首字母缩略词的描述。
<p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948 年。</p>
HTML <address> 用于联系信息
HTML <address> 标签定义了文档或文章作者/所有者的联系信息。
联系信息可以是电子邮件地址、URL、物理地址、电话号码、社交媒体句柄等。
<address> 元素中的文本通常以斜体呈现,并且浏览器总会在 <address> 元素前后添加换行符。
<address> 作者:John Doe。<br> 请访问我们:<br> Example.com<br> Disneyland, Box 564<br> USA </address>
HTML <cite>(citation) 用于作品标题
HTML <cite> 标签定义了创意作品的标题(例如书籍、诗歌、歌曲、电影、绘画、雕塑等)。
**注意:**人名不是作品的标题。
<cite> 元素中的文本通常以斜体呈现。
<p>爱德华·蒙克 (Edvard Munch) 的《<cite>呐喊</cite>》。作于 1893 年。</p>
HTML <bdo> 用于双向覆盖
BDO 是 Bi-Directional Override(双向覆盖)的缩写。
HTML <bdo> 标签用于覆盖当前的文本方向
<bdo dir="rtl">这段文本将从右到左书写</bdo>
HTML 注释
HTML 注释不会在浏览器中显示,但它们可以帮助你记录 HTML 源代码。
HTML 注释标签
你可以使用以下语法为 HTML 源代码添加注释
请注意,开始标签中有一个感叹号 (!),但结束标签中没有。
注意: 浏览器不会显示注释,但它们可以帮助你记录 HTML 源代码。
添加注释
通过注释,你可以在 HTML 代码中放置通知和提醒
<!-- 这是一个注释 --> <p>这是一个段落。</p> <!-- 记住在这里添加更多信息 -->
隐藏内容
注释可用于隐藏内容。
这对于临时隐藏内容可能很有用
<p>这是一个段落。</p> <!-- <p>这是另一个段落 </p> --> <p>这也是一个段落。</p>
你还可以隐藏多行。介于 <!-- 和 --> 之间的所有内容都将从显示中隐藏。
隐藏 HTML 代码段 <p>这是一个段落。</p> <!-- <p>看看这张很酷的图片:</p> <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> <p>这也是一个段落。</p>
注释对于调试 HTML 也非常有用,因为你可以一次注释掉一行 HTML 代码来查找错误。
隐藏内联内容
注释可用于隐藏 HTML 代码中间的部分。
隐藏段落的一部分 <p>这个 <!-- 很棒的文本 --> 是一个段落。</p>
HTML 颜色
HTML 颜色通过预定义的颜色名称、RGB、HEX、HSL、RGBA 或 HSLA 值来指定。
颜色名称
在 HTML 中,可以使用颜色名称来指定颜色
HTML 支持 140 种标准颜色名称。
背景颜色
你可以为 HTML 元素设置背景颜色
<h1 style="background-color:DodgerBlue;">你好世界</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
文本颜色
你可以设置文本颜色
<h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
边框颜色
你可以设置边框颜色
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
颜色值
在 HTML 中,颜色也可以使用 RGB 值、HEX 值、HSL 值、RGBA 值和 HSLA 值来指定。
以下三个 <div> 元素的背景颜色分别通过 RGB、HEX 和 HSL 值设置。
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
以下两个 <div> 元素的背景颜色通过 RGBA 和 HSLA 值设置,它们为颜色添加了一个 Alpha 通道(这里我们设置了 50% 的透明度)。
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
CSS 颜色缩写全称
RGB → Red Green Blue 红、绿、蓝,三原色,格式:
rgb(255,0,0)HEX → Hexadecimal 十六进制,十六进制数,格式:
#ff0000HSL → Hue Saturation Lightness 色相、饱和度、亮度,格式:
hsl(0,100%,50%)RGBA → Red Green Blue Alpha 红、绿、蓝 + Alpha 透明度,格式:
rgba(255,0,0,0.5)HSLA → Hue Saturation Lightness Alpha 色相、饱和度、亮度 + Alpha 透明度,格式:
hsla(0,100%,50%,0.5)
小笔记
Alpha:透明度,取值
0~1,0 完全透明,1 完全不透明HEX 没有自带透明,现代 CSS 支持
#ff000080最后两位代表透明度
HTML RGB 和 RGBA 颜色
RGB 颜色值代表红色 (RED)、绿色 (GREEN) 和蓝色 (BLUE) 光源。
RGBA 颜色值是 RGB 的扩展,包含一个 Alpha 通道(不透明度)。
RGB 颜色值
在 HTML 中,可以使用以下公式指定颜色为 RGB 值:
rgb(红, 绿, 蓝)
每个参数(红色、绿色和蓝色)都使用 0 到 255 之间的值来定义颜色的强度。
这意味着有 256 x 256 x 256 = 16777216 种可能的颜色!
例如,rgb(255, 0, 0) 显示为红色,因为红色设置为最高值 (255),而另外两个(绿色和蓝色)设置为 0。
另一个例子,rgb(0, 255, 0) 显示为绿色,因为绿色设置为最高值 (255),而另外两个(红色和蓝色)设置为 0。
要显示黑色,请将所有颜色参数设置为 0,例如:rgb(0, 0, 0)。
要显示白色,请将所有颜色参数设置为 255,如下所示:rgb(255, 255, 255)。
灰色调
灰色通常使用三个参数相等的值来定义
RGBA 颜色值
RGBA 颜色值是 RGB 颜色值的扩展,包含一个 Alpha 通道 — 指定颜色的不透明度。
RGBA 颜色值指定为
rgba(红, 绿, 蓝, alpha)
alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
HTML HEX 颜色
十六进制颜色通过以下方式指定: #RRGGBB,其中 RR(红)、GG(绿)和 BB(蓝)的十六进制整数指定颜色的分量。
HEX 颜色值
在 HTML 中,颜色可以使用十六进制值指定,格式为
#rrggbb
其中 rr(红)、gg(绿)和 bb(蓝)是介于 00 和 ff(相当于十进制 0-255)之间的十六进制值。
例如,#ff0000 显示为红色,因为红色被设置为其最高值 (ff),而其他两个(绿色和蓝色)被设置为 00。
另一个例子,#00ff00 显示为绿色,因为绿色被设置为其最高值 (ff),而其他两个(红色和蓝色)被设置为 00。
要显示黑色,请将所有颜色参数设置为 00,如下所示:#000000。
要显示白色,请将所有颜色参数设置为 ff,如下所示:#ffffff。
HTML HSL 和 HSLA 颜色
HSL 代表色相(hue)、饱和度(saturation)和亮度(lightness)。
HSLA 颜色值是 HSL 的扩展,增加了一个 Alpha 通道(透明度)。
HSL 颜色值
在 HTML 中,颜色可以用色相、饱和度和亮度(HSL)的形式指定:
hsl(色相, 饱和度, 亮度)
色相是色轮上的度数,范围从 0 到 360。0 代表红色,120 代表绿色,240 代表蓝色。
饱和度是一个百分比值。0% 表示灰色,100% 表示全色。
亮度也是一个百分比值。0% 表示黑色,100% 表示白色。
饱和度
饱和度可以被描述为颜色的强度。
100% 是纯色,没有灰色调。
50% 是 50% 的灰色,但你仍然可以看到颜色。
0% 是完全的灰色;你再也看不到颜色了。
亮度
颜色的亮度可以描述为您希望为颜色提供的光量,其中 0% 表示无光(黑色),50% 表示 50% 光(既不暗也不亮),100% 表示全亮度(白色)。
灰色调
灰色调通常通过将色相和饱和度设置为 0,然后调整亮度从 0% 到 100% 来获得更暗/更亮的色调。
HSLA 颜色值
HSLA 颜色值是 HSL 颜色值的扩展,增加了一个 Alpha 通道,该通道指定颜色的不透明度。
HSLA 颜色值指定如下:
hsla(色相, 饱和度, 亮度, alpha)
alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
HTML 样式 - CSS(Cascading Style Sheets)
CSS代表层叠样式表。
CSS节省了很多工作。它可以一次控制多个网页的布局。
什么是CSS
层叠样式表(CSS)用于格式化网页的布局。
使用CSS,您可以控制颜色、字体、文本大小、元素之间的间距、元素的定位和布局方式、要使用的背景图像或背景颜色、针对不同设备和屏幕大小的不同显示方式等等!
提示:“级联”一词意味着应用于父元素的样式也将应用于父元素中的所有子元素。因此,如果你将正文的颜色设置为”蓝色”,那么正文中的所有标题、段落和其他文本元素也将获得相同的颜色(除非你指定了其他颜色)!
内联CSS
内联CSS用于将独特的样式应用于单个HTML元素。内联CSS使用HTML元素的style属性。下面的示例将<h1>元素的文本颜色设置为蓝色,将<p>元素的文本颜色设置为红色
<h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p>
内部的CSS
内部CSS用于定义单个HTML页面的样式。内部CSS定义在HTML页面的<head>部分,在<style>元素中。下面的示例将该页面上所有<h1>元素的文本颜色设置为蓝色,并将所有<p>元素的文本颜色设置为红色。此外,页面将以”粉蓝色”为背景颜色显示:
<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> </body> </html>外部CSS
外部样式表用于定义许多HTML页面的样式。要使用外部样式表,请在每个HTML页面的<head>部分中添加指向它的链接
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> </body> </html>
外部样式表可以在任何文本编辑器中编写。该文件不能包含任何HTML代码,并且必须以.css扩展名保存。下面是”styles.css”文件的样子
"styles.css" body { background-color: powderblue; } h1 { color: blue; } p { color: red; }提示:使用外部样式表,您可以通过更改一个文件来更改整个网站的外观!
CSS颜色,字体和大小
在这里,我们将演示一些常用的CSS属性。稍后您将了解更多有关它们的信息。CSS color属性定义要使用的文本颜色。CSS font-family属性定义要使用的字体。CSS font-size属性定义要使用的文本大小。
使用CSS颜色,字体族和字体大小属性 <!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> </body> </html>CSS Border(边框)
CSS border属性定义了HTML元素周围的边框。
提示:您可以为几乎所有HTML元素定义边框。
CSS border属性的使用: p { border: 2px solid powderblue; }CSS 内边距
CSS padding属性定义了文本和边框之间的填充(空白)。
使用CSS边框和填充属性 p { border: 2px solid powderblue; padding: 30px; }CSS Margin
CSS margin属性定义了边框外的空白(空白)。
使用CSS边框和边距属性 p { border: 2px solid powderblue; margin: 50px; }链接到外部CSS
外部样式表可以使用完整的URL或相对于当前网页的路径来引用。
本例使用完整的URL链接到样式表 <link rel="stylesheet"href="https://w3schools.org.cn/html/styles.css">
下面的示例链接到当前网站的html文件夹中的样式表: <link rel="stylesheet" href="/html/styles.css">
此示例链接到与当前页面位于同一文件夹中的样式表 <link rel="stylesheet" href="styles.css">
你可以在HTML文件路径章节中阅读更多关于文件路径的信息。
文章总结
使用内联样式的HTML样式属性
使用HTML <style>元素定义内部CSS
使用HTML <link>元素来引用一个外部CSS文件
使用HTML <head>元素来存储<style>和<link>元素
使用CSS color属性文本颜色
使用的CSS font-family属性文本字体
使用的CSS border属性文本大小使用CSS边框属性边界
使用CSS padding属性空间边界内
使用CSS margin属性设置内联样式
提示:你可以在我们的CSS教程中学到更多关于CSS的知识。
HTML 链接
链接几乎存在于所有网页中。链接允许用户点击从一个页面跳转到另一个页面。
HTML 链接 - 超链接
HTML 链接是超链接。
您可以点击一个链接并跳转到另一个文档。
当您将鼠标移到链接上时,鼠标箭头将变成一个小手。
**注意:**链接不一定是文本。链接可以是图片或其他 HTML 元素!
HTML 链接 - 语法
HTML <a> 标签定义一个超链接。它的语法如下:
<a href="url">链接文本</a>
<a> 元素最重要的属性是 href 属性,它指示链接的目标。
链接文本是读者将看到的文本。
点击链接文本会将读者发送到指定的 URL 地址。
此示例展示了如何创建到 W3Schools.com 的链接: <a href="https://w3schools.org.cn/">访问 W3Schools.com!</a>
默认情况下,链接在所有浏览器中将如下显示:
未访问过的链接显示为蓝色下划线
已访问过的链接显示为紫色下划线
活动的链接显示为红色下划线
**提示:**链接当然可以用 CSS 进行样式设置,以获得不同的外观!
HTML 链接 - target 属性
默认情况下,链接的页面将在当前浏览器窗口中显示。要更改此行为,您必须为链接指定另一个目标。
target 属性指定在哪里打开链接的文档。
target 属性可以具有以下值之一:
_self- 默认。在点击的同一窗口/标签页中打开文档_blank- 在新窗口或标签页中打开文档_parent- 在父框架中打开文档_top- 在窗口的整个主体中打开文档
使用 target="_blank" 在新的浏览器窗口或标签页中打开链接的文档。 <a href="https://w3schools.org.cn/" target="_blank">访问 W3Schools!</a>
绝对 URL 与相对 URL
上面的两个示例都在 href 属性中使用了绝对 URL(完整的网络地址)。
本地链接(指向同一网站内的页面的链接)使用相对 URL(不带 “https://www” 部分)指定。
<h2>绝对 URL</h2> <p><a href="https://www.w3.org/">W3C</a></p> <p><a href="https://www.google.com/">Google</a></p> <h2>相对 URL</h2> <p><a href="html_images.asp">HTML 图片</a></p> <p><a href="/css/default.asp">CSS 教程</a></p>
HTML 链接 - 将图片用作链接
要将图片用作链接,只需将 <img> 标签放在 <a> 标签内。
<a href="default.asp"> <img src="smiley.gif" alt="HTML 教程" style="width:42px;height:42px;"> </a>
链接到电子邮件地址
在 href 属性中使用 mailto: 来创建链接,该链接将打开用户的电子邮件程序(让他们发送新电子邮件)。
<a href="mailto:someone@example.com">发送邮件</a>
按钮作为链接
要将 HTML 按钮用作链接,您需要添加一些 JavaScript 代码。
JavaScript 允许您在特定事件(如按钮点击)发生时指定要执行的操作。
<button>
**提示:**在我们的 JavaScript 教程 中了解更多关于 JavaScript 的知识。
链接标题
title 属性指定有关元素的额外信息。这些信息在鼠标悬停在元素上时通常会显示为工具提示文本。
<a href="https://w3schools.org.cn/html/" title="转到 W3Schools HTML 部分">访问我们的 HTML 教程</a>
更多关于绝对 URL 和相对 URL
使用完整的 URL 链接到网页: <a href="https://w3schools.org.cn/html/default.asp">HTML 教程</a>
链接到当前页面所在文件夹中的页面: <a href="default.asp">HTML 教程</a>
链接到当前网站 html 文件夹中的页面: <a href="/html/default.asp">HTML 教程</a>
你可以在HTML文件路径章节中阅读更多关于文件路径的信息。
Chapter Summary
使用
<a>元素定义链接。使用
href属性定义链接地址。使用
target属性定义链接文档的打开位置。使用
<img>元素(在<a>中)将图片用作链接。在
href属性中使用mailto:方案来创建链接,该链接将打开用户的电子邮件程序。
HTML 链接 - 不同颜色
HTML 链接根据其是否被访问、未被访问或处于活动状态,会以不同的颜色显示。
HTML 链接颜色
默认情况下,链接将如下所示(在所有浏览器中):
未访问过的链接显示为蓝色下划线
已访问过的链接显示为紫色下划线
活动的链接显示为红色下划线
您可以使用 CSS 更改链接状态的颜色:
在这里,未访问的链接将是绿色且没有下划线。已访问的链接将是粉色且没有下划线。活动链接将是黄色并带有下划线。此外,当鼠标悬停在链接上时(a:hover),它将变为红色并带有下划线: <style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style>链接按钮
链接也可以通过使用 CSS 设置样式,使其看起来像一个按钮:
<style> a:link, a:visited { background-color: #f44336; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } </style>要了解更多关于 CSS 的信息,请访问我们的 CSS 教程。
HTML 链接 - 创建书签
HTML 链接可用于创建书签,以便读者可以跳转到网页的特定部分。
在 HTML 中创建书签
如果网页很长,书签会很有用。
要创建书签 - 首先创建书签,然后添加链接。
点击链接时,页面将滚动到带有书签的位置。
首先,使用 id(identifier;标识符) 属性创建书签 <h2 id="C4">第 4 章</h2> 然后,在同一页面内添加一个指向该书签的链接(“跳转到第 4 章”) <a href="#C4">跳转到第 4 章</a> 您还可以添加指向另一个页面上书签的链接 <a href="html_demo.html#C4">跳转到第 4 章</a>
Chapter Summary
使用
id属性 (id=”值”) 在页面中定义书签使用
href属性 (href=”#值”) 链接到书签
HTML 图像
图像可以改善网页的设计和外观。
<img src="pic_trulli.jpg" alt="意大利特鲁利"> <img src="img_girl.jpg" alt="穿夹克的女孩"> <img src="img_chania.jpg" alt="克里特岛的鲜花">
HTML 图像语法
HTML <img> 标签用于在网页中嵌入图像。
图像实际上并未插入到网页中;而是链接到网页。 <img> 标签创建了一个用于引用图像的占位符。
<img> 标签是空的,它只包含属性,并且没有结束标签。
<img> 标签有两个必需的属性:
src - 指定图像的路径
alt - 指定图像的替代文本
<img src="URL" alt="替代文本">
src 属性
必需的 src 属性指定图像的路径(URL)。
**注意:**当网页加载时,它是在那一刻由浏览器从 Web 服务器获取图像并将其插入到页面中的。因此,请确保图像与网页保持在同一位置,否则您的访问者将看到一个损坏的链接图标。如果浏览器找不到图像,则会显示损坏的链接图标和 alt 文本。
alt 属性
必需的 alt 属性为图像提供了一个替代文本,如果用户因任何原因无法查看图像(例如,由于连接缓慢、src 属性错误或用户使用屏幕阅读器)。
alt 属性的值应描述图像。 <img src="img_chania.jpg" alt="克里特岛的鲜花"> 如果浏览器找不到图像,它将显示 alt 属性的值。 <img src="wrongname.gif" alt="克里特岛的鲜花">
**提示:**屏幕阅读器是一种朗读 HTML 代码的软件程序,允许用户”听”内容。屏幕阅读器对视障或有学习障碍的人很有用。
图像尺寸 - 宽度和高度
您可以使用 style 属性来指定图像的宽度和高度。
<img src="img_girl.jpg" alt="穿夹克的女孩" style="width:500px;height:600px;"> 或者,您可以使用 width 和 height 属性: <img src="img_girl.jpg" alt="穿夹克的女孩" width="500" height="600">
width 和 height 属性始终以像素为单位定义图像的宽度和高度。
**注意:**始终指定图像的宽度和高度。如果未指定宽度和高度,则网页在图像加载时可能会闪烁。
宽度和高度,还是 Style?
width、height 和 style 属性在 HTML 中都是有效的。
但是,我们建议使用 style 属性。它可以防止样式表更改图像的大小。
<!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 图标" width="128" height="128"> <img src="html5.gif" alt="HTML5 图标" style="width:128px;height:128px;"> </body> </html>另一个文件夹中的图像
如果您的图像在子文件夹中,则必须在 src 属性中包含文件夹名称。
<img src="/images/html5.gif" alt="HTML5 图标" style="width:128px;height:128px;">
另一个服务器/网站上的图像
一些网站指向另一个服务器上的图像。
要指向另一个服务器上的图像,您必须在 src 属性中指定绝对(完整)URL。
<img src="https://w3schools.org.cn/images/w3schools_green.jpg" alt="W3Schools.com">
**关于外部图像的注意事项:**外部图像可能受版权保护。如果您没有获得使用许可,您可能侵犯了版权法。此外,您无法控制外部图像;它们可能会突然被删除或更改。
动画图像
HTML 支持动画 GIF(Graphics Interchange Format;图形交换格式)。
<img src="programming.gif" alt="电脑人" style="width:48px;height:48px;">
将图像用作链接
要将图像用作链接,请将 <img> 标签放在 <a> 标签内。
<a href="default.asp"> <img src="smiley.gif" alt="HTML 教程" style="width:42px;height:42px;"> </a>
图像浮动
使用 CSS float 属性可以让图像向右或向左浮动于文本。
<p><img src="smiley.gif" alt="笑脸" style="float:right;width:42px;height:42px;"> 图像将向右浮动于文本。</p> <p><img src="smiley.gif" alt="笑脸" style="float:left;width:42px;height:42px;"> 图像将向左浮动于文本。</p>
常用图像格式
以下是最常见的图像文件类型,所有浏览器(Chrome、Edge、Firefox、Safari、Opera)都支持这些类型:
缩写 文件格式 文件扩展名
APNG 动画便携式网络图形 .apng GIF 图形交换格式 .gif ICO Microsoft 图标 .ico, .cur JPEG 联合照片专家组图像 .jpg, .jpeg, .jfif, .pjpeg, .pjp PNG 便携式网络图形 .png SVG 可缩放矢量图形 .svg
Chapter Summary
使用 HTML
<img>元素定义图像。使用 HTML
src属性定义图像的 URL。使用 HTML
alt属性为图像定义备用文本,以防其无法显示。使用 HTML
width和height属性或 CSSwidth和height属性来定义图像的大小。使用 CSS
float属性让图像向左或向右浮动。
**注意:**加载大图像需要时间,并且会减慢您的网页速度。请谨慎使用图像。
HTML 图像映射
使用 HTML 图像映射,您可以在图像上创建可点击的区域。
图像映射
HTML <map> 标签定义一个图像映射。图像映射是一个带有可点击区域的图像。区域使用一个或多个 <area> 标签定义。
请尝试点击下方图片中的电脑、电话或咖啡杯

这是上方图像映射的 HTML 源代码 <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map>
它是如何工作的?
图像映射的理念是,您可以根据在图像的哪个位置点击来执行不同的操作。
要创建图像映射,您需要一张图像,以及一些描述可点击区域的 HTML 代码。
图像
图像使用 <img> 标签插入。与其他图像的唯一区别是,您必须添加一个 usemap 属性
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
usemap 值以井号 # 开头,后跟图像映射的名称,用于在图像和图像映射之间创建关联。
提示: 您可以使用任何图像作为图像映射!
创建图像映射
然后,添加一个 <map> 元素。
<map> 元素用于创建图像映射,并通过使用必需的 name 属性与图像关联
<map name="workmap">
name 属性的值必须与 <img> 的 usemap 属性值相同。
区域
然后,添加可点击的区域。
可点击区域使用 <area> 元素定义。
形状
您必须定义可点击区域的形状,可以选择以下值之一
rect- 定义一个矩形区域circle- 定义一个圆形区域poly- 定义一个多边形区域default- 定义整个区域
您还必须定义一些坐标才能将可点击区域放置在图像上。
Shape=“rect”
shape="rect" 的坐标成对出现,一对用于 x 轴,一对用于 y 轴。
所以,坐标 34,44 位于距离左边距 34 像素和距离顶部 44 像素的位置
坐标 270,350 位于距离左边距 270 像素和距离顶部 350 像素的位置

现在我们有足够的数据来创建一个可点击的矩形区域
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Shape=“circle”
要添加圆形区域,请先找到圆心的坐标
337,300
然后指定圆的半径
44 像素
现在您有足够的数据来创建一个可点击的圆形区域
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Shape=“poly”
shape="poly" 包含多个坐标点,这些点构成由直线(多边形)形成的形状。
这可以用来创建任何形状。
比如一个可颂形状!
我们如何让下图的可颂饼成为可点击的链接?

我们必须找到可颂饼所有边缘的 x 和 y 坐标

坐标成对出现,一对用于 x 轴,一对用于 y 轴
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
这是变得可点击并将用户发送到页面 “croissant.htm” 的区域

图像映射和 JavaScript
可点击区域也可以触发 JavaScript 函数。
在 <area> 元素中添加 click 事件来执行 JavaScript 函数
在这里,我们使用 onclick 属性在区域被点击时执行 JavaScript 函数 <map name="workmap"> <area shape="circle" coords="337,300,44" href="coffee.htm">Chapter Summary
使用 HTML
<map>元素定义图像映射使用 HTML
<area>元素定义图像映射中的可点击区域使用
<img>元素的 HTMLusemap属性指向一个图像映射
HTML 背景图片
几乎任何 HTML 元素都可以指定背景图片。
HTML 元素的背景图片
要为 HTML 元素添加背景图片,请使用 HTML 的 style 属性和 CSS 的 background-image 属性。
为 HTML 元素添加背景图片 <p style="background-image: url('img_girl.jpg');">您也可以在 <head> 部分的 <style> 元素中指定背景图片。
在 <style> 元素中指定背景图片 <style> p { background-image: url('img_girl.jpg'); } </style>页面背景图片
如果您想让整个页面都有背景图片,则必须在 <body> 元素上指定背景图片。
为整个页面添加背景图片 <style> body { background-image: url('img_girl.jpg'); } </style>背景重复
如果背景图片比元素小,图片将水平和垂直地重复自身,直到到达元素的末尾。
<style> body { background-image: url('example_img_girl.jpg'); } </style>要避免背景图片重复,请将 background-repeat 属性设置为 no-repeat。
<style> body { background-image: url('example_img_girl.jpg'); background-repeat: no-repeat; } </style>背景覆盖
如果您希望背景图片覆盖整个元素,可以将 background-size 属性设置为 cover.。
此外,为了确保整个元素始终被覆盖,请将 background-attachment 属性设置为 fixed:。
这样,背景图片将覆盖整个元素,而不会拉伸(图片将保持其原始比例)。
<style> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } </style>背景拉伸
如果您希望背景图片拉伸以适应整个元素,可以将 background-size 属性设置为 100% 100%。
尝试调整浏览器窗口的大小,您会看到图片会拉伸,但始终覆盖整个元素。
<style> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } </style>了解更多 CSS
从上面的示例中,您已经了解到背景图片可以通过 CSS 的 background 属性进行样式设置。
要了解更多关于 CSS background 属性的信息,请学习我们的 CSS 背景教程。
HTML <picture> 元素
HTML <picture> 元素允许您为不同的设备或屏幕尺寸显示不同的图片。

HTML <picture> 元素
HTML <picture> 元素为 Web 开发人员提供了更灵活的指定图像资源的方式。
该 <picture> 元素包含一个或多个 <source> 元素,每个元素都通过 srcset 属性引用不同的图像。这样,浏览器就可以选择最适合当前视图和/或设备的图像。
每个 <source> 元素都有一个 media 属性,该属性定义了何时图像最合适。
为不同屏幕尺寸显示不同图片 <picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg"> </picture>
**注意:**始终将 <img> 元素作为 <picture> 元素的最后一个子元素。不支持 <picture> 元素的浏览器,或者没有 <source> 标签匹配时,浏览器将使用 <img> 元素。
何时使用 Picture 元素
该 <picture> 元素有两个主要用途:
1. 带宽
如果您使用小屏幕或设备,则无需加载大图像文件。浏览器将使用第一个具有匹配属性值的 <source> 元素,并忽略任何后续元素。
2. 格式支持
某些浏览器或设备可能不支持所有图像格式。通过使用 <picture> 元素,您可以添加所有格式的图像,浏览器将使用它识别的第一个格式,并忽略任何后续元素。
浏览器将使用它识别的第一个图像格式 <picture> <source srcset="img_avatar.png"> <source srcset="img_girl.jpg"> <img src="img_beatles.gif" alt="Beatles" style="width:auto;"> </picture>
**注意:**浏览器将使用第一个具有匹配属性值的 <source> 元素,并忽略任何后续的 <source> 元素。
HTML 网站图标
网站图标是一个显示在浏览器选项卡中页面标题旁边的小图像。
如何在 HTML 中添加网站图标
您可以选择任何您喜欢的图像作为您的网站图标。您也可以在类似 https://www.favicon.cc 这样的网站上创建自己的网站图标。
提示: 网站图标是一个小图像,所以它应该是一个对比度高且简单的图像。
网站图标图像会显示在浏览器选项卡中页面标题的左侧,如下所示:
![]()
要为您的网站添加网站图标,请将您的网站图标图像保存在 Web 服务器的根目录中,或者在根目录中创建一个名为 images 的文件夹,并将您的网站图标图像保存在该文件夹中。网站图标图像的常用名称是 “favicon.ico”。
接下来,在您的 “index.html” 文件中,在 <title> 元素之后,添加一个 <link> 元素,如下所示:
<!DOCTYPE html> <html> <head> <title>我的页面标题</title> <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html>
现在,保存 “index.html” 文件并在浏览器中重新加载。您的浏览器选项卡现在应该会在页面标题的左侧显示您的网站图标图像。
网站图标文件格式支持
下表显示了网站图标图像的文件格式支持:
浏览器 ICO PNG GIF JPEG SVG
Edge 是 是 是 是 是 Chrome 是 是 是 是 是 Firefox 是 是 是 是 是 Opera 是 是 是 是 是 Safari 是 是 是 是 是
Chapter Summary
使用 HTML
<link>元素插入网站图标
HTML 页面标题
每个网页都应该有一个页面标题来描述页面的含义。
<title> 元素为您的页面添加标题
<!DOCTYPE html> <html> <head> <title>HTML 教程</title> </head> <body> 文档内容...... </body> </html>
标题显示在浏览器的标题栏中

标题应描述页面的内容和含义。
页面标题对于搜索引擎优化 (SEO) 非常重要。搜索引擎算法使用该文本来决定在搜索结果中列出页面的顺序。
<title> 元素
定义浏览器工具栏中的标题
当页面添加到收藏夹时提供页面的标题
在搜索引擎结果中显示页面标题
因此,请尽量使标题尽可能准确和有意义!
HTML 表格
HTML 表格允许 Web 开发者将数据排列成行和列。
Company(公司) 联系 Country
Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Laughing Bacchus Winecellars Yoshi Tannamuri 加拿大 Magazzini Alimentari Riuniti Giovanni Rovelli Italy
定义一个 HTML 表格
HTML 表格由行中的单元格和列组成。
一个简单的 HTML 表格 <table> <tr> <th>公司</th> <th>联系人</th> <th>国家</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table>
表格单元格
每个表格单元格由 <td> 和 </td> 标签定义。
td 代表表格数据 (table data)。
介于 <td> 和 </td> 之间的所有内容是表格单元格的内容。
<table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> </table>
注意: 表格单元格可以包含各种 HTML 元素:文本、图片、列表、链接、其他表格等。
表格行
每一行表格都以 <tr> 开始,以 </tr> 结束。
tr 代表表格行 (table row)。
<table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table>
您可以在一个表格中包含任意多行;只需确保每一行的单元格数量相同。
注意: 有时一行可以比另一行少或多单元格。您将在后面的章节中学习相关知识。
表格标题
有时您希望您的单元格是表格的标题单元格。在这种情况下,请使用 <th> 标签而不是 <td> 标签。
th 代表表格标题 (table header)。
将第一行设为表格标题单元格 <table> <tr> <th>Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table>
默认情况下,<th> 元素中的文本是粗体且居中的,但您可以使用 CSS 更改它。
HTML 表格边框
HTML 表格可以具有不同样式和形状的边框。
如何添加边框
要添加边框,请在 table、th 和 td 元素上使用 CSS border 属性。
table, th, td { border: 1px solid black; }合并表格边框
要避免出现上面示例中的双重边框,请将 CSS border-collapse 属性设置为 collapse。
这将使边框合并为单个边框。
table, th, td { border: 1px solid black; border-collapse: collapse; }样式化表格边框
如果为每个单元格设置背景色,并将边框设置为白色(与文档背景色相同),则会产生边框不可见的现象。
table, th, td { border: 1px solid white; border-collapse: collapse; } th, td { background-color: #96D4D4; }圆角表格边框
使用 border-radius 属性,边框将获得圆角
table, th, td { border: 1px solid black; border-radius: 10px; }通过从 CSS 选择器中省略 table 来跳过表格周围的边框。
th, td { border: 1px solid black; border-radius: 10px; }虚线表格边框
使用 border-style 属性,您可以设置边框的外观。
允许的值如下:
dotted(有斑点的)dashed(虚线的)solid(牢固的)double(双重的)groove(凹槽)ridge(隆起)inset(嵌入)outset(包帖)none(没有)hidden(隐藏)
th, td { border-style: dotted; }边框颜色
使用 border-color 属性,您可以设置边框的颜色。
th, td { border-color: #96D4D4; }HTML 表格大小
HTML 表格可以为每一列、每一行或整个表格设置不同的尺寸。
使用 style 属性和 width 或 height 属性来指定表格、行或列的大小。
HTML 表格宽度
要设置表格的宽度,请在 <table> 元素上添加 style 属性
将表格宽度设置为 100% <table style="width:100%"> <tr> <th>名字</th> <th>姓氏</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
**注意:**使用百分比作为宽度的尺寸单位意味着该元素相对于其父元素(在此例中为 <body> 元素)的宽度。
HTML 表格列宽
要设置特定列的大小,请在 <th> 或 <td> 元素上添加 style 属性
将第一列的宽度设置为 70% <table style="width:100%"> <tr> <th style="width:70%">Firstname</th> <th>姓氏</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
HTML 表格行高
要设置特定行的高度,请在表格行元素上添加 style 属性
将第二行的高度设置为 200 像素 <table style="width:100%"> <tr> <th>名字</th> <th>姓氏</th> <th>年龄</th> </tr> <tr style="height:200px"> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
HTML 表头
HTML 表可以为每一列或每一行,或者多列/多行设置表头。
HTML 表头
表头是通过 th 元素定义的。每个 th 元素代表一个表单元格。
<table> <tr> <th>名字</th> <th>姓氏</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
垂直表头
要将第一列用作表头,请将每行中的第一个单元格定义为 <th> 元素
<table> <tr> <th>名字</th> <td>Jill</td> <td>Eve</td> </tr> <tr> <th>姓氏</th> <td>Smith</td> <td>Jackson</td> </tr> <tr> <th>年龄</th> <td>94</td> <td>50</td> </tr> </table>
对齐表头
默认情况下,表头是粗体居中的
要将表头左对齐,请使用 CSS 的 text-align 属性
th { text-align: left; }多列表头
你可以有一个跨越两列或更多列的表头。
要做到这一点,请在 <th> 元素上使用 colspan 属性
<table> <tr> <th colspan="2">姓名</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
你将在 表 colspan & rowspan 章节学习更多关于 colspan 和 rowspan 的知识。
表标题
你可以添加一个作为整个表格标题的标题。
要为表格添加标题,请使用 <caption> 标签
<table style="width:100%"> <caption>每月储蓄</caption> <tr> <th>月份</th> <th>储蓄</th> </tr> <tr> <td>一月</td> <td>$100</td> </tr> <tr> <td>二月</td> <td>50 美元</td> </tr> </table>
注意: <caption> 标签应插入在 <table> 标签之后。
HTML 表格内边距和间距
HTML 表格可以调整单元格内的内边距,以及单元格之间的间距。
HTML 表格 - 单元格内边距
单元格内边距是单元格边缘和单元格内容之间的空间。
默认情况下,内边距设置为 0。
要在表格单元格中添加内边距,请使用 CSS padding 属性。
th, td { padding: 15px; }仅在内容上方添加内边距,请使用 padding-top 属性。
其他侧边则使用 padding-bottom、padding-left 和 padding-right 属性。
th, td { padding-top: 10px; padding-bottom: 20px; padding-left: 30px; padding-right: 40px; }HTML 表格 - 单元格间距
单元格间距是每个单元格之间的空间。
默认情况下,间距设置为 2 像素。
要更改表格单元格之间的间距,请在 table 元素上使用 CSS border-spacing 属性。
table { border-spacing: 30px; }HTML 表格的 Colspan & Rowspan
HTML 表格可以包含跨越多个行和/或列的单元格。
HTML 表格 - Colspan
要使一个单元格跨越多个列,请使用 colspan 属性
<table> <tr> <th colspan="2">姓名</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>43</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>57</td> </tr> </table>
注意: colspan 属性的值表示要跨越的列数。
HTML 表格 - Rowspan
要使一个单元格跨越多个行,请使用 rowspan 属性
<table> <tr> <th>姓名</th> <td>Jill</td> </tr> <tr> <th rowspan="2">电话</th> <td>555-1234</td> </tr> <tr> <td>555-8745</td> </tr> </table>
注意: rowspan 属性的值表示要跨越的行数。
HTML 表格样式
使用 CSS 使您的表格更美观。
HTML 表格 - 斑马条纹
如果为每隔一行表格行添加背景颜色,您将获得漂亮的斑马条纹效果。
要为每隔一个表格行元素设置样式,请使用 :nth-child(even) 选择器,如下所示:
tr:nth-child(even) { background-color: #D6EEEE; }注意: 如果使用 (odd) 而不是 (even),则样式将应用于第 1、3、5 行等,而不是第 2、4、6 行等。
HTML 表格 - 垂直斑马条纹
要创建垂直斑马条纹,请为每隔一个列设置样式,而不是每隔一行。
如下为表格数据元素设置 :nth-child(even):
td:nth-child(even), th:nth-child(even) { background-color: #D6EEEE; }注意: 如果要同时为表头和常规表格单元格设置样式,请将 :nth-child() 选择器同时应用于 th 和 td 元素。
组合垂直和水平斑马条纹
您可以组合以上两个示例的样式,这样每隔一行和每隔一列都会有条纹。
如果使用透明颜色,您将获得重叠效果。
使用 rgba() 颜色指定颜色的透明度
tr:nth-child(even) { background-color: rgba(150, 212, 212, 0.4); } th:nth-child(even),td:nth-child(even) { background-color: rgba(150, 212, 212, 0.4); }水平分隔线
如果仅在每行表格行的底部指定边框,您将得到一个带有水平分隔线的表格。
为所有 tr 元素添加 border-bottom 属性以获得水平分隔线
鼠标悬停表格
使用 tr 上的 :hover 选择器在鼠标悬停时突出显示表格行
tr:hover {background-color: #D6EEEE;}
HTML 表格 <colgroup> 标签
<colgroup> 标签用于设置表格中特定列的样式。
HTML 表格 <colgroup> 标签
如果要为表格的前两列设置样式,请使用 <colgroup> 和 <col> 标签。
<colgroup> 标签应作为列规格的容器。
每个组由 <col> 标签指定。
span 属性指定了多少列将应用样式。
style 属性指定了要为列设置的样式。
注意: colgroup 可用的 CSS 属性非常有限。
<table> <colgroup> <col span="2" style="background-color: #D6EEEE"> </colgroup> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> ...
注意: <colgroup> 标签必须是 <table> 元素的子元素,并且应放在任何其他表格元素(如 <thead>、<tr>、<td> 等)之前,但在 <caption> 元素(如果存在)之后。
允许的 CSS 属性
只有非常有限的 CSS 属性允许在 colgroup 中使用
width 属性 visibility 属性 background 属性 border 属性
所有其他 CSS 属性都将对您的表格无效。
多个 Col 元素
如果要为更多列设置不同的样式,请在 <colgroup> 中使用更多 <col> 元素
<table> <colgroup> <col span="2" style="background-color: #D6EEEE"> <col span="3" style="background-color: pink"> </colgroup> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> ...
空的 Colgroups
如果要设置表格中间列的样式,请在前面的列之前插入一个”空”的 <col> 元素(不带样式)
<table> <colgroup> <col span="3"> <col span="2" style="background-color: pink"> </colgroup> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> ...
隐藏列
您可以使用 visibility: collapse 属性隐藏列
<table> <colgroup> <col span="2"> <col span="3" style="visibility: collapse"> </colgroup> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> ...
HTML 列表
HTML 列表允许 Web 开发人员将一组相关的项目分组到列表中。
无序 HTML 列表
项目
项目
项目
项目
有序 HTML 列表
First item
Second item
Third item
Fourth item
无序 HTML 列表
无序列表以 <ul> 标签开头。每个列表项以 <li> 标签开头。
默认情况下,列表项将用项目符号(小的黑点)标记。
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
有序 HTML 列表
有序列表以 <ol> 标签开头。每个列表项以 <li> 标签开头。
默认情况下,列表项将用数字标记。
<ol> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol>
HTML 定义列表
HTML 也支持定义列表。
定义列表是术语列表,其中包含每个术语的描述。
<dl>(Definition List) 标签定义描述列表,<dt>(Definition Term) 标签定义术语(名称),<dd>(Definition Description) 标签描述每个术语。
<dl> <dt>咖啡</dt> <dd>- 黑色热饮</dd> <dt>牛奶</dt> <dd>- 白色冷饮</dd> </dl>
HTML 无序列表
HTML <ul> 标签定义了一个无序(项目符号)列表。
无序 HTML 列表
无序列表以 <ul> 标签开始。每个列表项以 <li> 标签开始。
默认情况下,列表项将用项目符号(小黑圆圈)标记。
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
无序 HTML 列表 - 选择列表项标记
CSS list-style-type 属性用于定义列表项标记的样式。它可以有以下值之一:
值 描述
disc 将列表项标记设置为项目符号(默认) circle 将列表项标记设置为圆圈 square 将列表项标记设置为正方形 none 列表项将不被标记
<ul style="list-style-type:disc;"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
<ul style="list-style-type:circle;"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
<ul style="list-style-type:square;"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
<ul style="list-style-type:none;"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
嵌套 HTML 列表
列表可以嵌套(列表内部的列表)
<ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>牛奶</li> </ul>
**注意:**列表项(<li>)可以包含新的列表以及其他 HTML 元素,例如图像和链接等。
使用 CSS 的水平列表
HTML 列表可以通过 CSS 以多种不同方式进行样式设置。
一种流行的方式是水平样式化列表,以创建导航菜单
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } </style> </head> <body> <ul> <li><a href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系我们</a></li> <li><a href="#about">关于</a></li> </ul> </body> </html>Chapter Summary
使用 HTML
<ul>元素定义无序列表使用 CSS
list-style-type属性定义列表项标记使用 HTML
<li>元素定义列表项列表可以嵌套
列表项可以包含其他 HTML 元素
使用 CSS 属性
float:left以水平方式显示列表
HTML 有序列表
<ol> 标签定义一个有序列表。有序列表可以是数字或字母的
有序 HTML 列表
有序列表以 <ol> 标签开始。每个列表项以 <li> 标签开始。
列表项默认会用数字标记
Chapter Summary
块级元素总是从新行开始,并占据所有可用宽度
行内元素不会从新行开始,并且只占据必要的宽度
<div>元素是块级元素,通常用作其他 HTML 元素的容器<span>元素是一个行内容器,用于标记文本的一部分或文档的一部分
Chapter Summary
HTML
class属性为元素指定一个或多个类名。类名用于 CSS 和 JavaScript 来选择和访问特定元素。
class属性可用于任何 HTML 元素。类名区分大小写。
不同的 HTML 元素可以指向同一个类名。
JavaScript 可以使用
getElementsByClassName()方法来访问具有特定类名的元素。
Chapter Summary
The
idattribute is used to specify a unique id for an HTML element (id 属性用于为 HTML 元素指定一个唯一的 id。)The value of the
idattribute must be unique within the HTML document (id 属性的值在 HTML 文档中必须是唯一的。)The
idattribute is used by CSS and JavaScript to style/select a specific element (id 属性被 CSS 和 JavaScript 用于样式化/选择特定元素。)The value of the
idattribute is case sensitive (id 属性的值区分大小写。)The
idattribute is also used to create HTML bookmarks (id 属性也用于创建 HTML 书签。)JavaScript 可以使用
getElementById()方法访问具有特定 ID 的元素。
Chapter Summary
HTML
<iframe>标签定义了一个内联框架src属性定义了要嵌入的页面的 URL始终包含
title属性(用于屏幕阅读器)height和width属性指定了 iframe 的大小使用
border:none;来移除 iframe 周围的边框
HTML JavaScript
JavaScript 使 HTML 页面更具动态性和交互性。
HTML <script> 标签
HTML <script> 标签用于定义客户端脚本(JavaScript)。
元素 <script> 要么包含脚本语句,要么通过 src 属性指向一个外部脚本文件。
JavaScript 的常见用途包括图像处理、表单验证和动态内容更改。
要选择一个 HTML 元素,JavaScript 通常使用 document.getElementById() 方法。
此 JavaScript 示例将”Hello JavaScript!“写入 id 为”demo”的 HTML 元素中。
< script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>JavaScript 简介
以下是一些 JavaScript 可以做什么的示例
JavaScript 可以更改内容 document.getElementById("demo").innerHTML = "Hello JavaScript!";JavaScript 可以更改样式 document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow";JavaScript 可以更改属性 document.getElementById("image").src = "picture.gif";HTML <noscript> 标签
HTML <noscript> 标签为禁用了浏览器脚本的用户或不支持脚本的浏览器用户定义了备用内容。
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript>抱歉,您的浏览器不支持 JavaScript!</noscript>HTML 文件路径
文件路径描述了网站文件夹结构中文件的位置。
文件路径示例
路径 描述
<img src="picture.jpg">{=html} “picture.jpg”文件与当前页面位于同一文件夹中
<img src="images/picture.jpg">{=html} “picture.jpg”文件位于当前文件夹下的 images 文件夹中
<img src="/images/picture.jpg">{=html} “picture.jpg”文件位于当前网站根目录下的 images 文件夹中
<img src="../picture.jpg">{=html} “picture.jpg”文件位于当前文件夹上一级文件夹中
HTML 文件路径
文件路径描述了网站文件夹结构中文件的位置。
文件路径用于链接到外部文件,例如:
网页
图片
样式表
JavaScripts
绝对文件路径
绝对文件路径是文件的完整 URL
<img src="https://w3schools.org.cn/images/picture.jpg" alt="Mountain">
相对文件路径
相对文件路径是指相对于当前页面的文件。
在以下示例中,文件路径指向位于当前网站根目录下的 images 文件夹中的文件
<img src="/images/picture.jpg" alt="Mountain">
在以下示例中,文件路径指向位于当前文件夹下的 images 文件夹中的文件
<img src="images/picture.jpg" alt="Mountain">
在以下示例中,文件路径指向位于当前文件夹上一级文件夹下的 images 文件夹中的文件
<img src="../images/picture.jpg" alt="Mountain">
最佳实践
最好使用相对文件路径(如果可能)。
使用相对文件路径时,您的网页将不会与您当前的基础 URL 绑定。所有链接都可以在您自己的计算机(localhost)以及您当前和未来的公共域上正常工作。
HTML - Head 元素
HTML <head> 元素是以下元素的容器: <title>、<style>、<meta>、<link>、<script> 和 <base>。
HTML <head> 元素
HTML 元数据是关于 HTML 文档的数据。元数据不会显示。
元数据通常定义文档标题、字符集、样式、脚本和其他元信息。
HTML <title> 元素
<title> 元素定义文档的标题。标题必须是纯文本,并且显示在浏览器的标题栏或页面的选项卡中。
HTML 文档需要 <title> 元素!
页面标题的内容对搜索引擎优化(SEO)非常重要!搜索引擎算法使用页面标题来决定在搜索结果中列出页面的顺序。
<title> 元素
定义浏览器工具栏中的标题
当页面添加到收藏夹时提供页面的标题
在搜索引擎结果中为页面显示标题
因此,请尽量使标题尽可能准确和有意义!
一个简单的 HTML 文档
<!DOCTYPE html> <html> <head> <title>一个有意义的页面标题</title> </head> <body> 文档内容...... </body> </html>
HTML <style> 元素
<style> 元素用于定义单个 HTML 页面的样式信息。
<style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style>HTML <link> 元素
<link> 元素定义当前文档与外部资源之间的关系。
<link> 标签通常用于链接到外部样式表。
<link rel="stylesheet" href="mystyle.css">
HTML <meta> 元素
<meta> 元素通常用于指定字符集、页面描述、关键字、文档作者和视口设置。
元数据不会在页面上显示,但会被浏览器(如何显示内容或重新加载页面)、搜索引擎(关键字)和其他 Web 服务使用。
定义使用的字符集
<meta charset="UTF-8">
为搜索引擎定义关键字
<meta name="keywords" content="HTML, CSS, JavaScript">
定义您的网页的描述
<meta name="description" content="Free Web tutorials">
定义页面的作者
<meta name="author" content="John Doe">
每 30 秒刷新文档
<meta http-equiv="refresh" content="30">
设置视口,使您的网站在所有设备上看起来都很好
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> 标签示例
<meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe">
设置视口
视口是用户可见的网页区域。它随设备而异 - 在手机上比在电脑屏幕上小。
您应该在所有网页中包含以下 <meta> 元素
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这会给浏览器指令,告知如何控制页面的尺寸和缩放。
width=device-width 部分将页面的宽度设置为与设备的屏幕宽度一致(这将因设备而异)。
initial-scale=1.0 部分设置了浏览器首次加载页面时的初始缩放级别。
这是一个没有视口 meta 标签的网页示例,以及同一个网页有视口 meta 标签的示例。
**提示:**如果您正在用手机或平板电脑浏览此页面,可以点击下面的两个链接来查看差异。
HTML <script> 元素
<script>元素用于定义客户端 JavaScript。
以下 JavaScript 将”Hello JavaScript!“写入 ID 为”demo”的 HTML 元素中。
<script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script>HTML <base> 元素
<base> 元素为页面中的所有相对 URL 指定基本 URL 和/或目标。
<base> 标签必须包含 href 或 target 属性,或两者都包含。
文档中只能有一个 <base> 元素!
为页面上的所有链接指定一个默认 URL 和默认目标 <head> <base href="https://w3schools.org.cn/" target="_blank"> </head> <body> <img src="images/stickman.gif" width="24" height="39" alt="Stickman"> <a href="tags/tag_base.asp">HTML base 标签</a> </body>
Chapter Summary
The
<head>element is a container for metadata (data about data)The
<head>element is placed between the<html>tag and the<body>tagThe
<title>element is required and it defines the title of the documentThe
<style>element is used to define style information for a single document<link>标签通常用于链接到外部样式表。The
<meta>element is typically used to specify the character set, page description, keywords, author of the document, and viewport settingsThe
<script>element is used to define client-side JavaScriptsThe
<base>element specifies the base URL and/or target for all relative URLs in a page
HTML 布局元素和技术
网站通常以多列显示内容(像杂志或报纸)。
HTML 布局元素
HTML 有几个语义元素,用于定义网页的不同部分
<header>- 定义文档或章节的头部<nav>- 定义一组导航链接<section>- 定义文档中的一个章节<article>- 定义独立、自包含的内容<aside>- 定义内容之外的内容(如侧边栏)<footer>- 定义文档或章节的页脚<details>- 定义用户可以按需打开和关闭的附加详细信息<summary>- 定义<details>元素的标题
HTML 布局技术
有四种不同的技术可以创建多列布局。每种技术都有其优缺点
CSS 框架
CSS float 属性
CSS flexbox
CSS grid
CSS 框架
如果您想快速创建布局,可以使用 CSS 框架,例如 W3.CSS 或 Bootstrap。
CSS 浮动布局
使用 CSS float 属性进行整个网页布局很常见。浮动很容易学习——您只需要记住 float 和 clear 属性的工作原理。**缺点:**浮动元素与文档流绑定,这可能会损害灵活性。在我们的 CSS 浮动与清除章节中了解更多关于浮动的信息。
CSS Flexbox 布局
使用 flexbox 可确保在页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素的行为可预测。在我们的 CSS Flexbox 章节中了解更多关于 flexbox 的信息。
CSS Grid 布局
CSS 网格布局模块提供了一个基于网格的布局系统,包含行和列,使网页设计更容易,而无需使用浮动和定位。
HTML 响应式网页设计
响应式网页设计是为了让网页在所有设备上都能良好显示!
响应式网页设计将自动适应不同的屏幕尺寸和视口。

什么是响应式网页设计?
响应式网页设计是使用 HTML 和 CSS 来自动调整、隐藏、收缩或放大网站,使其在所有设备(桌面、平板电脑和手机)上看起来都很棒。
设置视口
要创建响应式网站,请在所有网页中添加以下 <meta> 标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这将设置页面的视口,它将为浏览器提供关于如何控制页面尺寸和缩放的指示。
响应式图片
响应式图片是可以很好地适应任何浏览器尺寸的图片。
使用 width 属性
如果 CSS width 属性设置为 100%,则图像将是响应式的,并会向上和向下缩放。
<img src="img_girl.jpg" style="width:100%;">
请注意,在上面的示例中,图像可以放大到大于其原始尺寸。在许多情况下,更好的解决方案是改用 max-width 属性。
使用 max-width 属性
如果 max-width 属性设置为 100%,图像将向下缩放(如果需要),但绝不会放大到大于其原始尺寸。
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
根据浏览器宽度显示不同的图片
HTML <picture> 元素允许您为不同的浏览器窗口大小定义不同的图像。
<picture> <source srcset="img_smallflower.jpg" media="(max-width: 600px)"> <source srcset="img_flowers.jpg" media="(max-width: 1500px)"> <source srcset="flowers.jpg"> <img src="img_smallflower.jpg" alt="Flowers"> </picture>
响应式文本大小
文本大小可以使用”vw”单位设置,表示”视口宽度”。
这样,文本大小将跟随浏览器窗口的大小。
<h1 style="**font-size:10vw**">Hello World</h1>
HTML 教程
What/Why/How
What:HTML是超文本标记语言(Hyper Text Markup Language)
Why:HTML可以用来创建你自己的网站
How:且看我慢慢道来
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>这是一个DEMO页面</title> </head> <body> </body> </html>
<!DOCTYPE html>声明定义了该文档是一个 HTML5 文档`<html>元素是HTML页面的根元素<head>元素包含 HTML 页面的元信息<title>元素指定 HTML 页面的标题(显示在浏览器的标题栏或页面标签中)<body>元素定义文档的主体,是所有可见内容的容器,例如标题、段落、图像、超链接、表格、列表等。<h1>元素定义一个大标题<p>元素定义一个段落
什么是 HTML 元素?
HTML 元素由开始标签、一些内容和结束标签定义
<tagname> 内容在此处... </tagname>
HTML 元素是从开始标签到结束标签的所有内容
<h1>我的第一个标题</h1> <p>我的第一个段落。</p>v
**注意:**有些 HTML 元素没有内容(例如 <br> 元素)。这些元素称为空元素。空元素没有结束标签!
Web 浏览器
Web 浏览器(Chrome、Edge、Firefox、Safari)的目的是读取 HTML 文档并正确显示它们。
浏览器不显示 HTML 标签,而是使用它们来确定如何显示文档

HTML 页面结构
以下是 HTML 页面结构的可视化
<html> <head> <title>页面标题</title> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
注意:
部分中的内容将在浏览器中显示。 <title>
元素中的内容将显示在浏览器的标题栏或页面标签中。
HTML 基础
HTML 文档
所有 HTML 文档都必须以文档类型声明开头:<!DOCTYPE html>
HTML 文档本身以 <html> 开始,以 </html> 结束。
HTML 文档的可见部分位于 <body> 和 </body> 之间。
<!DOCTYPE html> <html> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
<!DOCTYPE> 声明
声明 <!DOCTYPE> 代表文档类型,并帮助浏览器正确显示网页。
它必须只出现一次,位于页面顶部(在任何 HTML 标签之前)。
声明 <!DOCTYPE> 不区分大小写。
HTML5 的 <!DOCTYPE> 声明是:
<!DOCTYPE html>
HTML 标题(heading)
HTML 标题使用 <h1> 到 <h6> 标签定义。
<h1> 定义最重要的标题。 <h6> 定义最不重要的标题
<h2>这是标题 2</h2> <h3>这是标题 3</h3>
HTML 段落(paragraph)
HTML 段落使用 <p> 标签定义
<p>这是一个段落。</p> <p>这是另一个段落。</p>
HTML 链接(anchor)
HTML 链接使用 <a> 标签定义
链接的目的地在 href 属性中指定。
属性用于为 HTML 元素提供额外信息。
<a href="https://xiaoniba.com">这是一个链接</a>
HTML 图像(image)
HTML 图像使用 <img> 标签定义。
源文件(src(source))、替代文本(alt(alternative))、width 和 height 作为属性提供。
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
您是否曾见过一个网页并想知道”嘿!他们是怎么做到的?”
查看 HTML 源代码
在 HTML 页面中按 CTRL + U,或右键单击页面并选择”查看页面源代码”。这将打开一个新选项卡,其中包含页面的 HTML 源代码。
检查 HTML 元素
右键单击元素(或空白区域),然后选择”检查”以查看元素是由什么组成的(您将看到 HTML 和 CSS)。您还可以在打开的”元素”或”样式”面板中即时编辑 HTML 或 CSS。
HTML 元素
HTML 元素由一个开始标签、一些内容和一个结束标签定义。
<tagname>内容放在这里...</tagname>
一些 HTML 元素的示例
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
开始标签 元素内容 结束标签
我的第一个标题 我的第一个段落。
<br>{=html} none none
**注意:**有些 HTML 元素没有内容(例如 <br> 元素)。这些元素称为空元素。空元素没有结束标签!
嵌套的 HTML 元素
HTML 元素可以嵌套(这意味着元素可以包含其他元素)。
所有 HTML 文档都由嵌套的 HTML 元素组成。
以下示例包含四个 HTML 元素(<html>、<body>、<h1> 和 <p>)。
<!DOCTYPE html> <html> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
切勿省略结束标签
有些 HTML 元素即使您忘记了结束标签也会正确显示。
但是,永远不要依赖这一点!如果忘记结束标签,可能会出现意外的结果和错误!
<html> <body> <p>这是一个段落 <p>这是一个段落 </body> </html>
空的 HTML 元素
没有内容的 HTML 元素称为空元素。
<p>这是一个带有换行的段落。<br>
The <br> tag defines a line break, and is an empty element without a closing tag
(<br>标记定义了一个换行符,并且是一个没有结束标记的空元素)
HTML 不区分大小写
HTML 标签不区分大小写:<P> 与 <p> 含义相同。
HTML 标准不要求小写标签,但 W3C 建议在 HTML 中使用小写,并且对于更严格的文档类型(如 XHTML)要求使用小写。
HTML 属性
HTML 属性提供了关于 HTML 元素的额外信息。
HTML 属性
所有 HTML 元素都可以拥有 属性
属性提供关于元素的附加信息
属性始终在起始标签中指定
属性通常以名称/值对的形式出现,例如:name=“value”
href 属性(Hypertext Reference)
标签 <a> 定义一个超链接。 href 属性指定链接指向的页面的 URL
<a href="https://xiaoniba.com">访问 xnb</a>
src 属性(source)
标签 <img> 用于在 HTML 页面中嵌入图像。 src 属性指定要显示的图像的路径
<img src="img_girl.jpg">
在 src 属性中有两种指定 URL(Uniform Resource Locator) 的方法
1. 绝对 URL - 链接到托管在另一个网站上的外部图像。例如:src=“https://w3schools.org.cn/images/img_girl.jpg"。
**注意:**外部图像可能受版权保护。如果您未获得使用许可,您可能会侵犯版权法。此外,您无法控制外部图像;它可能会突然被移除或更改。
2. 相对 URL - 链接到托管在网站内的图像。这里,URL 不包含域名。如果 URL 不以斜杠开头,则它相对于当前页面。例如:src=“img_girl.jpg”。如果 URL 以斜杠开头,则它相对于域名。例如:src=”/images/img_girl.jpg”。
**提示:**几乎总是最好使用相对 URL。如果您更改域名,它们不会中断。
(There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website. Example: src=“https://www.w3schools.com/images/img_girl.jpg”.
Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src=“img_girl.jpg”. If the URL begins with a slash, it will be relative to the domain. Example: src=”/images/img_girl.jpg”.
Tip: It is almost always best to use relative URLs. They will not break if you change domain.)
width 和 height 属性
标签 <img> 也应包含 width 和 height 属性,它们指定图像的宽度和高度(以像素为单位)
<img src="img_girl.jpg" width="500" height="600">
alt 属性(alternative)
标签 <img> 所需的 alt 属性为图像指定了替代文本,以防图像因某种原因无法显示。这可能是由于连接速度慢、src 属性错误,或者用户使用了屏幕阅读器。
<img src="img_girl.jpg" alt="戴着夹克的女孩"> <img src="img_typo.jpg" alt="戴着夹克的女孩">
style 属性
style 属性用于向元素添加样式,例如颜色、字体、大小等。
<p style="color:red;">这是一个红色段落。</p>
lang 属性(language)
您应该始终在 <html> 标签内包含 lang 属性,以声明网页的语言。这旨在帮助搜索引擎和浏览器。
以下示例指定英语作为语言
<!DOCTYPE html> <html> <body> ... </body> </html>
在 lang 属性中也可以为语言代码添加国家代码。因此,前两个字符定义了 HTML 页面的语言,后两个字符定义了国家。
以下示例指定英语作为语言,美国作为国家
<!DOCTYPE html> <html> <body> ... </body> </html>
title 属性
title 属性定义了关于元素的额外信息。
当您将鼠标悬停在元素上时,title 属性的值将显示为工具提示
<p title="我是一个工具提示">这是一个段落。</p>
始终使用小写属性
HTML 标准不要求小写属性名。
title 属性(以及所有其他属性)可以用大写或小写编写,例如 title 或 TITLE。
然而,W3C 建议在 HTML 中使用小写属性,并要求在更严格的文档类型(如 XHTML)中使用小写属性。
始终引用属性值
HTML 标准不要求在属性值周围加引号。
然而,W3C 建议在 HTML 中使用引号,并要求在更严格的文档类型(如 XHTML)中使用引号。
好 <a href="https://w3schools.org.cn/html/">访问我们的 HTML 教程</a> 坏 <a href=https://w3schools.org.cn/html/>访问我们的 HTML 教程</a>
有时您必须使用引号。此示例将无法正确显示 title 属性,因为它包含一个空格
<p title=About W3Schools>
单引号还是双引号?
在 HTML 中,双引号最常用于属性值,但也可以使用单引号。
在某些情况下,当属性值本身包含双引号时,必须使用单引号
<p title='John "ShotGun" Nelson'>
反之亦然
<p title="John 'ShotGun' Nelson">
Chapter Summary(章节概要)
所有 HTML 元素都可以拥有属性
<a>的href属性指定链接指向的页面的 URL<img>的src属性指定要显示的图像的路径<img>的width和height属性为图像提供尺寸信息<img>的alt属性为图像提供替代文本style属性用于向元素添加样式,例如颜色、字体、大小等<html>标签的lang属性声明了网页的语言title属性定义了关于元素的额外信息
HTML 属性参考
所有 HTML 元素的完整属性列表,列在我们的:HTML 属性参考中。
HTML 标题
HTML 标题是您想在网页上显示的标题或副标题。
HTML 标题使用 <h1> 到 <h6> 标签定义。
<h1> 定义最重要的标题。 <h6> 定义最重要的标题。
注意: 浏览器会自动在标题前后添加一些空白(外边距)。
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
标题很重要
搜索引擎使用标题来索引您网页的结构和内容。
用户经常通过标题来浏览页面。使用标题来显示文档结构很重要。
<h1> 标题应用于主标题,其次是 <h2> 标题,然后是次要的 <h3>,以此类推。
注意: 仅将 HTML 标题用于标题。不要使用标题来使文本变大或加粗。
更大的标题
每个 HTML 标题都有一个默认大小。但是,您可以使用 style 属性,通过 CSS font-size 属性来指定任何标题的大小。
<h1 style="font-size:60px;">一级标题</h1>
HTML 段落
段落总是以新行开始,通常是一段文本。
HTML 段落
HTML <p> 元素定义了一个段落。
段落总是以新行开始,浏览器会自动在段落前后添加一些空白(边距)。
<p>这是一个段落。</p> <p>这是另一个段落。</p>
HTML 显示
你无法确定 HTML 将如何显示。
屏幕大小不同,窗口大小调整也会导致不同的结果。
使用 HTML,你无法通过在 HTML 代码中添加额外的空格或额外行来更改显示。
浏览器在显示页面时会自动删除所有额外的空格和行。
<p> 这个段落 包含了很多行 在源代码中, 但是浏览器 忽略了它。 </p> <p> 这个段落 包含 很多空格 在源代码 中, 但是 浏览器 忽略了它。 </p>
HTML 水平分割线(Horizontal Rule)
HTML 页面中的 <hr> 标签定义了一个主题分隔,通常显示为一条水平线。
<hr> 元素用于分隔 HTML 页面中的内容(或定义一个更改)。
<h1>这是标题 1</h1> <p>这是文本。</p> <hr> <h2>这是标题 2</h2> <p>这是另一段文本。</p> <hr>
HTML 换行
HTML <br> 元素定义了一个换行。
如果你想换行(新的一行)而不开始新段落,请使用 <br>。
<p>这是<br>一段<br>包含换行的段落。</p>
<br> 标签是一个空标签,意味着它没有结束标签。
诗歌问题
这首诗将显示在单行上
<p> 我的邦妮在海洋那边。 我的邦妮在海洋那边。 我的邦妮在海洋那边。 哦,带回我的邦妮给我。 </p>
解决方案 - HTML <pre>元素(preformatted text)
HTML <pre> 元素定义了预格式化文本。
<pre> 元素内的文本以固定宽度的字体(通常是 Courier)显示,并且它保留了空格和换行。
<pre> 我的邦妮在海洋那边。 我的邦妮在海洋那边。 我的邦妮在海洋那边。 哦,带回我的邦妮给我。 </pre>
lorem可以随意生成
HTML 样式
HTML style 属性用于为元素添加样式,例如颜色、字体、大小等。
<p>I am normal</p> <p style="color:red;">I am red</p> <p style="color:blue;">I am blue</p> <p style="font-size:50px;">I am big</p>
HTML 样式属性
HTML 元素的样式设置可以通过 style 属性来完成。
HTML style 属性的语法如下:
<标签名 style=”属性:值;”>
属性 是一个 CSS 属性。值 是一个 CSS 值。
背景颜色
CSS background-color 属性定义 HTML 元素的背景颜色。
将页面背景色设置为粉蓝色 <body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>这是一个段落。</p> </body>
为两个不同元素设置背景颜色 <body> <h1 style="background-color:powderblue;">这是一个标题</h1> <p style="background-color:tomato;">这是一个段落。</p> </body>
文本颜色
CSS color 属性定义 HTML 元素的文本颜色。
<h1 style="color:blue;">这是一个标题</h1> <p style="color:red;">这是一个段落。</p>
字体
CSS font-family 属性定义 HTML 元素使用的字体。
<h1 style="font-family:verdana;">这是一个标题</h1> <p style="font-family:courier;">这是一个段落。</p>
文字大小
CSS font-size 属性定义 HTML 元素的文本大小。
<h1 style="font-size:300%;">这是一个标题</h1> <p style="font-size:160%;">这是一个段落。</p>
文本对齐
CSS text-align 属性定义 HTML 元素的水平文本对齐方式。
<h1 style="text-align:center;">居中标题</h1> <p style="text-align:center;">居中段落。</p>
Chapter Summary
使用
style属性来设置 HTML 元素的样式。使用
background-color设置背景颜色。使用
color设置文本颜色。使用
font-family设置文本字体。使用
font-size设置文本大小。使用
text-align设置文本对齐。
HTML 文本格式化
HTML 包含多个用于定义具有特殊含义的文本的元素。
<body> <p><b>This text is bold</b></p> <p><i>This text is italic</i></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body>
HTML 格式化元素
格式化元素旨在显示特殊类型的文本
<b>(Bold)- 粗体文本<strong>- 重要文本<i>(Italic)- 斜体文本<em>(Emphasis)- 强调文本<mark>- 标记文本<small>- 更小的文本<del>(Delete)- 删除文本<ins>(Insert)- 插入文本<sub>(Subscript)- 下标文本<sup>(Superscript)- 上标文本
HTML <b> 和 <strong> 元素
HTML <b> 元素定义粗体文本,不带任何额外的重要性。
<b>此文本是粗体</b> <strong>此文本很重要!</strong>
HTML <i> 和 <em> 元素
HTML <i> 元素定义文本中具有不同语调或情绪的部分。内部内容通常显示为斜体。
提示: <i> 标签通常用于表示技术术语、外语短语、想法、船名等。
HTML <em> 元素定义强调文本。内部内容通常显示为斜体。
提示: 屏幕阅读器将以强调的方式(使用口头重音)朗读 <em> 中的单词。
<i>此文本是斜体</i> <em>此文本已强调</em>
HTML <small> 元素
HTML <small> 元素定义更小的文本
<small>这是一些更小的文本。</small>
HTML <mark> 元素
HTML <mark> 元素定义应标记或突出显示的文本
<p>今天不要忘记买<mark>牛奶</mark>。</p>
HTML <del> 元素
HTML <del> 元素定义已从文档中删除的文本。浏览器通常会在删除的文本上划一条线
<p>我最喜欢的颜色是<del>蓝色</del> 红色。</p>
HTML <ins> 元素
HTML <ins> 元素定义已插入到文档中的文本。浏览器通常会在插入的文本下划线
<p>我最喜欢的颜色是<del>蓝色</del> <ins>红色</ins>。</p>
HTML <sub> 元素
HTML <sub> 元素定义下标文本。下标文本出现在正常行下方半个字符处,有时会以较小的字体呈现。下标文本可用于化学公式,例如 H2O
<p>这是<sub>下标</sub>文本。</p>
HTML <sup> 元素
HTML <sup> 元素定义上标文本。上标文本出现在正常行上方半个字符处,有时会以较小的字体呈现。上标文本可用于脚注,例如 WWW[1]
<p>这是<sub>下标</sub>文本。</p>
HTML 引用和引证元素
在本章中,我们将学习 <blockquote>、<q>、<abbr>、<address>、<cite> 和 <bdo> HTML 元素。
HTML <blockquote> 用于引用
HTML <blockquote> 元素定义了一个从其他来源引用的部分。
浏览器通常会缩进 <blockquote> 元素。
<p>以下是世界自然基金会网站上的一段引用:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> 60 年来,世界自然基金会一直致力于帮助人类和自然共同繁荣。作为全球领先的环保组织,世界自然基金会在近 100 个国家开展工作。我们与世界各地的人们在各个层面进行合作,开发并提供创新的解决方案,以保护社区、野生动物及其栖息地。 </blockquote>
HTML <q>(quote) 用于短引用
HTML <q> 标签定义了一个短引用。
浏览器通常会在引用周围插入引号。
<p>世界自然基金会的目标是:<q>构建一个人类与自然和谐共处的未来。</q></p>
HTML <abbr>(abbreviation) 用于缩写
HTML <abbr> 标签定义了缩写或首字母缩略词,例如”HTML”、“CSS”、“Mr.”、“Dr.”、“ASAP”、“ATM”。
标记缩写可以为浏览器、翻译系统和搜索引擎提供有用的信息。
**提示:**使用全局 title 属性,在鼠标悬停在元素上时显示缩写/首字母缩略词的描述。
<p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948 年。</p>
HTML <address> 用于联系信息
HTML <address> 标签定义了文档或文章作者/所有者的联系信息。
联系信息可以是电子邮件地址、URL、物理地址、电话号码、社交媒体句柄等。
<address> 元素中的文本通常以斜体呈现,并且浏览器总会在 <address> 元素前后添加换行符。
<address> 作者:John Doe。<br> 请访问我们:<br> Example.com<br> Disneyland, Box 564<br> USA </address>
HTML <cite>(citation) 用于作品标题
HTML <cite> 标签定义了创意作品的标题(例如书籍、诗歌、歌曲、电影、绘画、雕塑等)。
**注意:**人名不是作品的标题。
<cite> 元素中的文本通常以斜体呈现。
<p>爱德华·蒙克 (Edvard Munch) 的《<cite>呐喊</cite>》。作于 1893 年。</p>
HTML <bdo> 用于双向覆盖
BDO 是 Bi-Directional Override(双向覆盖)的缩写。
HTML <bdo> 标签用于覆盖当前的文本方向
<bdo dir="rtl">这段文本将从右到左书写</bdo>
HTML 注释
HTML 注释不会在浏览器中显示,但它们可以帮助你记录 HTML 源代码。
HTML 注释标签
你可以使用以下语法为 HTML 源代码添加注释
请注意,开始标签中有一个感叹号 (!),但结束标签中没有。
注意: 浏览器不会显示注释,但它们可以帮助你记录 HTML 源代码。
添加注释
通过注释,你可以在 HTML 代码中放置通知和提醒
<!-- 这是一个注释 --> <p>这是一个段落。</p> <!-- 记住在这里添加更多信息 -->
隐藏内容
注释可用于隐藏内容。
这对于临时隐藏内容可能很有用
<p>这是一个段落。</p> <!-- <p>这是另一个段落 </p> --> <p>这也是一个段落。</p>
你还可以隐藏多行。介于 <!-- 和 --> 之间的所有内容都将从显示中隐藏。
隐藏 HTML 代码段 <p>这是一个段落。</p> <!-- <p>看看这张很酷的图片:</p> <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> <p>这也是一个段落。</p>
注释对于调试 HTML 也非常有用,因为你可以一次注释掉一行 HTML 代码来查找错误。
隐藏内联内容
注释可用于隐藏 HTML 代码中间的部分。
隐藏段落的一部分 <p>这个 <!-- 很棒的文本 --> 是一个段落。</p>
HTML 颜色
HTML 颜色通过预定义的颜色名称、RGB、HEX、HSL、RGBA 或 HSLA 值来指定。
颜色名称
在 HTML 中,可以使用颜色名称来指定颜色
HTML 支持 140 种标准颜色名称。
背景颜色
你可以为 HTML 元素设置背景颜色
<h1 style="background-color:DodgerBlue;">你好世界</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
文本颜色
你可以设置文本颜色
<h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
边框颜色
你可以设置边框颜色
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
颜色值
在 HTML 中,颜色也可以使用 RGB 值、HEX 值、HSL 值、RGBA 值和 HSLA 值来指定。
以下三个 <div> 元素的背景颜色分别通过 RGB、HEX 和 HSL 值设置。
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
以下两个 <div> 元素的背景颜色通过 RGBA 和 HSLA 值设置,它们为颜色添加了一个 Alpha 通道(这里我们设置了 50% 的透明度)。
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
CSS 颜色缩写全称
RGB → Red Green Blue 红、绿、蓝,三原色,格式:
rgb(255,0,0)HEX → Hexadecimal 十六进制,十六进制数,格式:
#ff0000HSL → Hue Saturation Lightness 色相、饱和度、亮度,格式:
hsl(0,100%,50%)RGBA → Red Green Blue Alpha 红、绿、蓝 + Alpha 透明度,格式:
rgba(255,0,0,0.5)HSLA → Hue Saturation Lightness Alpha 色相、饱和度、亮度 + Alpha 透明度,格式:
hsla(0,100%,50%,0.5)
小笔记
Alpha:透明度,取值
0~1,0 完全透明,1 完全不透明HEX 没有自带透明,现代 CSS 支持
#ff000080最后两位代表透明度
HTML RGB 和 RGBA 颜色
RGB 颜色值代表红色 (RED)、绿色 (GREEN) 和蓝色 (BLUE) 光源。
RGBA 颜色值是 RGB 的扩展,包含一个 Alpha 通道(不透明度)。
RGB 颜色值
在 HTML 中,可以使用以下公式指定颜色为 RGB 值:
rgb(红, 绿, 蓝)
每个参数(红色、绿色和蓝色)都使用 0 到 255 之间的值来定义颜色的强度。
这意味着有 256 x 256 x 256 = 16777216 种可能的颜色!
例如,rgb(255, 0, 0) 显示为红色,因为红色设置为最高值 (255),而另外两个(绿色和蓝色)设置为 0。
另一个例子,rgb(0, 255, 0) 显示为绿色,因为绿色设置为最高值 (255),而另外两个(红色和蓝色)设置为 0。
要显示黑色,请将所有颜色参数设置为 0,例如:rgb(0, 0, 0)。
要显示白色,请将所有颜色参数设置为 255,如下所示:rgb(255, 255, 255)。
灰色调
灰色通常使用三个参数相等的值来定义
RGBA 颜色值
RGBA 颜色值是 RGB 颜色值的扩展,包含一个 Alpha 通道 — 指定颜色的不透明度。
RGBA 颜色值指定为
rgba(红, 绿, 蓝, alpha)
alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
HTML HEX 颜色
十六进制颜色通过以下方式指定: #RRGGBB,其中 RR(红)、GG(绿)和 BB(蓝)的十六进制整数指定颜色的分量。
HEX 颜色值
在 HTML 中,颜色可以使用十六进制值指定,格式为
#rrggbb
其中 rr(红)、gg(绿)和 bb(蓝)是介于 00 和 ff(相当于十进制 0-255)之间的十六进制值。
例如,#ff0000 显示为红色,因为红色被设置为其最高值 (ff),而其他两个(绿色和蓝色)被设置为 00。
另一个例子,#00ff00 显示为绿色,因为绿色被设置为其最高值 (ff),而其他两个(红色和蓝色)被设置为 00。
要显示黑色,请将所有颜色参数设置为 00,如下所示:#000000。
要显示白色,请将所有颜色参数设置为 ff,如下所示:#ffffff。
HTML HSL 和 HSLA 颜色
HSL 代表色相(hue)、饱和度(saturation)和亮度(lightness)。
HSLA 颜色值是 HSL 的扩展,增加了一个 Alpha 通道(透明度)。
HSL 颜色值
在 HTML 中,颜色可以用色相、饱和度和亮度(HSL)的形式指定:
hsl(色相, 饱和度, 亮度)
色相是色轮上的度数,范围从 0 到 360。0 代表红色,120 代表绿色,240 代表蓝色。
饱和度是一个百分比值。0% 表示灰色,100% 表示全色。
亮度也是一个百分比值。0% 表示黑色,100% 表示白色。
饱和度
饱和度可以被描述为颜色的强度。
100% 是纯色,没有灰色调。
50% 是 50% 的灰色,但你仍然可以看到颜色。
0% 是完全的灰色;你再也看不到颜色了。
亮度
颜色的亮度可以描述为您希望为颜色提供的光量,其中 0% 表示无光(黑色),50% 表示 50% 光(既不暗也不亮),100% 表示全亮度(白色)。
灰色调
灰色调通常通过将色相和饱和度设置为 0,然后调整亮度从 0% 到 100% 来获得更暗/更亮的色调。
HSLA 颜色值
HSLA 颜色值是 HSL 颜色值的扩展,增加了一个 Alpha 通道,该通道指定颜色的不透明度。
HSLA 颜色值指定如下:
hsla(色相, 饱和度, 亮度, alpha)
alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
HTML 样式 - CSS(Cascading Style Sheets)
CSS代表层叠样式表。
CSS节省了很多工作。它可以一次控制多个网页的布局。
什么是CSS
层叠样式表(CSS)用于格式化网页的布局。
使用CSS,您可以控制颜色、字体、文本大小、元素之间的间距、元素的定位和布局方式、要使用的背景图像或背景颜色、针对不同设备和屏幕大小的不同显示方式等等!
提示:“级联”一词意味着应用于父元素的样式也将应用于父元素中的所有子元素。因此,如果你将正文的颜色设置为”蓝色”,那么正文中的所有标题、段落和其他文本元素也将获得相同的颜色(除非你指定了其他颜色)!
内联CSS
内联CSS用于将独特的样式应用于单个HTML元素。内联CSS使用HTML元素的style属性。下面的示例将<h1>元素的文本颜色设置为蓝色,将<p>元素的文本颜色设置为红色
<h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p>
内部的CSS
内部CSS用于定义单个HTML页面的样式。内部CSS定义在HTML页面的<head>部分,在<style>元素中。下面的示例将该页面上所有<h1>元素的文本颜色设置为蓝色,并将所有<p>元素的文本颜色设置为红色。此外,页面将以”粉蓝色”为背景颜色显示:
<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> </body> </html>外部CSS
外部样式表用于定义许多HTML页面的样式。要使用外部样式表,请在每个HTML页面的<head>部分中添加指向它的链接
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> </body> </html>
外部样式表可以在任何文本编辑器中编写。该文件不能包含任何HTML代码,并且必须以.css扩展名保存。下面是”styles.css”文件的样子
"styles.css" body { background-color: powderblue; } h1 { color: blue; } p { color: red; }提示:使用外部样式表,您可以通过更改一个文件来更改整个网站的外观!
CSS颜色,字体和大小
在这里,我们将演示一些常用的CSS属性。稍后您将了解更多有关它们的信息。CSS color属性定义要使用的文本颜色。CSS font-family属性定义要使用的字体。CSS font-size属性定义要使用的文本大小。
使用CSS颜色,字体族和字体大小属性 <!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> </body> </html>CSS Border(边框)
CSS border属性定义了HTML元素周围的边框。
提示:您可以为几乎所有HTML元素定义边框。
CSS border属性的使用: p { border: 2px solid powderblue; }CSS 内边距
CSS padding属性定义了文本和边框之间的填充(空白)。
使用CSS边框和填充属性 p { border: 2px solid powderblue; padding: 30px; }CSS Margin
CSS margin属性定义了边框外的空白(空白)。
使用CSS边框和边距属性 p { border: 2px solid powderblue; margin: 50px; }链接到外部CSS
外部样式表可以使用完整的URL或相对于当前网页的路径来引用。
本例使用完整的URL链接到样式表 <link rel="stylesheet"href="https://w3schools.org.cn/html/styles.css">
下面的示例链接到当前网站的html文件夹中的样式表: <link rel="stylesheet" href="/html/styles.css">
此示例链接到与当前页面位于同一文件夹中的样式表 <link rel="stylesheet" href="styles.css">
你可以在HTML文件路径章节中阅读更多关于文件路径的信息。
文章总结
使用内联样式的HTML样式属性
使用HTML <style>元素定义内部CSS
使用HTML <link>元素来引用一个外部CSS文件
使用HTML <head>元素来存储<style>和<link>元素
使用CSS color属性文本颜色
使用的CSS font-family属性文本字体
使用的CSS border属性文本大小使用CSS边框属性边界
使用CSS padding属性空间边界内
使用CSS margin属性设置内联样式
提示:你可以在我们的CSS教程中学到更多关于CSS的知识。
HTML 链接
链接几乎存在于所有网页中。链接允许用户点击从一个页面跳转到另一个页面。
HTML 链接 - 超链接
HTML 链接是超链接。
您可以点击一个链接并跳转到另一个文档。
当您将鼠标移到链接上时,鼠标箭头将变成一个小手。
**注意:**链接不一定是文本。链接可以是图片或其他 HTML 元素!
HTML 链接 - 语法
HTML <a> 标签定义一个超链接。它的语法如下:
<a href="url">链接文本</a>
<a> 元素最重要的属性是 href 属性,它指示链接的目标。
链接文本是读者将看到的文本。
点击链接文本会将读者发送到指定的 URL 地址。
此示例展示了如何创建到 W3Schools.com 的链接: <a href="https://w3schools.org.cn/">访问 W3Schools.com!</a>
默认情况下,链接在所有浏览器中将如下显示:
未访问过的链接显示为蓝色下划线
已访问过的链接显示为紫色下划线
活动的链接显示为红色下划线
**提示:**链接当然可以用 CSS 进行样式设置,以获得不同的外观!
HTML 链接 - target 属性
默认情况下,链接的页面将在当前浏览器窗口中显示。要更改此行为,您必须为链接指定另一个目标。
target 属性指定在哪里打开链接的文档。
target 属性可以具有以下值之一:
_self- 默认。在点击的同一窗口/标签页中打开文档_blank- 在新窗口或标签页中打开文档_parent- 在父框架中打开文档_top- 在窗口的整个主体中打开文档
使用 target="_blank" 在新的浏览器窗口或标签页中打开链接的文档。 <a href="https://w3schools.org.cn/" target="_blank">访问 W3Schools!</a>
绝对 URL 与相对 URL
上面的两个示例都在 href 属性中使用了绝对 URL(完整的网络地址)。
本地链接(指向同一网站内的页面的链接)使用相对 URL(不带 “https://www” 部分)指定。
<h2>绝对 URL</h2> <p><a href="https://www.w3.org/">W3C</a></p> <p><a href="https://www.google.com/">Google</a></p> <h2>相对 URL</h2> <p><a href="html_images.asp">HTML 图片</a></p> <p><a href="/css/default.asp">CSS 教程</a></p>
HTML 链接 - 将图片用作链接
要将图片用作链接,只需将 <img> 标签放在 <a> 标签内。
<a href="default.asp"> <img src="smiley.gif" alt="HTML 教程" style="width:42px;height:42px;"> </a>
链接到电子邮件地址
在 href 属性中使用 mailto: 来创建链接,该链接将打开用户的电子邮件程序(让他们发送新电子邮件)。
<a href="mailto:someone@example.com">发送邮件</a>
按钮作为链接
要将 HTML 按钮用作链接,您需要添加一些 JavaScript 代码。
JavaScript 允许您在特定事件(如按钮点击)发生时指定要执行的操作。
<button>
**提示:**在我们的 JavaScript 教程 中了解更多关于 JavaScript 的知识。
链接标题
title 属性指定有关元素的额外信息。这些信息在鼠标悬停在元素上时通常会显示为工具提示文本。
<a href="https://w3schools.org.cn/html/" title="转到 W3Schools HTML 部分">访问我们的 HTML 教程</a>
更多关于绝对 URL 和相对 URL
使用完整的 URL 链接到网页: <a href="https://w3schools.org.cn/html/default.asp">HTML 教程</a>
链接到当前页面所在文件夹中的页面: <a href="default.asp">HTML 教程</a>
链接到当前网站 html 文件夹中的页面: <a href="/html/default.asp">HTML 教程</a>
你可以在HTML文件路径章节中阅读更多关于文件路径的信息。
Chapter Summary
使用
<a>元素定义链接。使用
href属性定义链接地址。使用
target属性定义链接文档的打开位置。使用
<img>元素(在<a>中)将图片用作链接。在
href属性中使用mailto:方案来创建链接,该链接将打开用户的电子邮件程序。
HTML 链接 - 不同颜色
HTML 链接根据其是否被访问、未被访问或处于活动状态,会以不同的颜色显示。
HTML 链接颜色
默认情况下,链接将如下所示(在所有浏览器中):
未访问过的链接显示为蓝色下划线
已访问过的链接显示为紫色下划线
活动的链接显示为红色下划线
您可以使用 CSS 更改链接状态的颜色:
在这里,未访问的链接将是绿色且没有下划线。已访问的链接将是粉色且没有下划线。活动链接将是黄色并带有下划线。此外,当鼠标悬停在链接上时(a:hover),它将变为红色并带有下划线: <style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style>链接按钮
链接也可以通过使用 CSS 设置样式,使其看起来像一个按钮:
<style> a:link, a:visited { background-color: #f44336; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } </style>要了解更多关于 CSS 的信息,请访问我们的 CSS 教程。
HTML 链接 - 创建书签
HTML 链接可用于创建书签,以便读者可以跳转到网页的特定部分。
在 HTML 中创建书签
如果网页很长,书签会很有用。
要创建书签 - 首先创建书签,然后添加链接。
点击链接时,页面将滚动到带有书签的位置。
首先,使用 id(identifier;标识符) 属性创建书签 <h2 id="C4">第 4 章</h2> 然后,在同一页面内添加一个指向该书签的链接(“跳转到第 4 章”) <a href="#C4">跳转到第 4 章</a> 您还可以添加指向另一个页面上书签的链接 <a href="html_demo.html#C4">跳转到第 4 章</a>
Chapter Summary
使用
id属性 (id=”值”) 在页面中定义书签使用
href属性 (href=”#值”) 链接到书签
HTML 图像
图像可以改善网页的设计和外观。
<img src="pic_trulli.jpg" alt="意大利特鲁利"> <img src="img_girl.jpg" alt="穿夹克的女孩"> <img src="img_chania.jpg" alt="克里特岛的鲜花">
HTML 图像语法
HTML <img> 标签用于在网页中嵌入图像。
图像实际上并未插入到网页中;而是链接到网页。 <img> 标签创建了一个用于引用图像的占位符。
<img> 标签是空的,它只包含属性,并且没有结束标签。
<img> 标签有两个必需的属性:
src - 指定图像的路径
alt - 指定图像的替代文本
<img src="URL" alt="替代文本">
src 属性
必需的 src 属性指定图像的路径(URL)。
**注意:**当网页加载时,它是在那一刻由浏览器从 Web 服务器获取图像并将其插入到页面中的。因此,请确保图像与网页保持在同一位置,否则您的访问者将看到一个损坏的链接图标。如果浏览器找不到图像,则会显示损坏的链接图标和 alt 文本。
alt 属性
必需的 alt 属性为图像提供了一个替代文本,如果用户因任何原因无法查看图像(例如,由于连接缓慢、src 属性错误或用户使用屏幕阅读器)。
alt 属性的值应描述图像。 <img src="img_chania.jpg" alt="克里特岛的鲜花"> 如果浏览器找不到图像,它将显示 alt 属性的值。 <img src="wrongname.gif" alt="克里特岛的鲜花">
**提示:**屏幕阅读器是一种朗读 HTML 代码的软件程序,允许用户”听”内容。屏幕阅读器对视障或有学习障碍的人很有用。
图像尺寸 - 宽度和高度
您可以使用 style 属性来指定图像的宽度和高度。
<img src="img_girl.jpg" alt="穿夹克的女孩" style="width:500px;height:600px;"> 或者,您可以使用 width 和 height 属性: <img src="img_girl.jpg" alt="穿夹克的女孩" width="500" height="600">
width 和 height 属性始终以像素为单位定义图像的宽度和高度。
**注意:**始终指定图像的宽度和高度。如果未指定宽度和高度,则网页在图像加载时可能会闪烁。
宽度和高度,还是 Style?
width、height 和 style 属性在 HTML 中都是有效的。
但是,我们建议使用 style 属性。它可以防止样式表更改图像的大小。
<!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 图标" width="128" height="128"> <img src="html5.gif" alt="HTML5 图标" style="width:128px;height:128px;"> </body> </html>另一个文件夹中的图像
如果您的图像在子文件夹中,则必须在 src 属性中包含文件夹名称。
<img src="/images/html5.gif" alt="HTML5 图标" style="width:128px;height:128px;">
另一个服务器/网站上的图像
一些网站指向另一个服务器上的图像。
要指向另一个服务器上的图像,您必须在 src 属性中指定绝对(完整)URL。
<img src="https://w3schools.org.cn/images/w3schools_green.jpg" alt="W3Schools.com">
**关于外部图像的注意事项:**外部图像可能受版权保护。如果您没有获得使用许可,您可能侵犯了版权法。此外,您无法控制外部图像;它们可能会突然被删除或更改。
动画图像
HTML 支持动画 GIF(Graphics Interchange Format;图形交换格式)。
<img src="programming.gif" alt="电脑人" style="width:48px;height:48px;">
将图像用作链接
要将图像用作链接,请将 <img> 标签放在 <a> 标签内。
<a href="default.asp"> <img src="smiley.gif" alt="HTML 教程" style="width:42px;height:42px;"> </a>
图像浮动
使用 CSS float 属性可以让图像向右或向左浮动于文本。
<p><img src="smiley.gif" alt="笑脸" style="float:right;width:42px;height:42px;"> 图像将向右浮动于文本。</p> <p><img src="smiley.gif" alt="笑脸" style="float:left;width:42px;height:42px;"> 图像将向左浮动于文本。</p>
常用图像格式
以下是最常见的图像文件类型,所有浏览器(Chrome、Edge、Firefox、Safari、Opera)都支持这些类型:
缩写 文件格式 文件扩展名
APNG 动画便携式网络图形 .apng GIF 图形交换格式 .gif ICO Microsoft 图标 .ico, .cur JPEG 联合照片专家组图像 .jpg, .jpeg, .jfif, .pjpeg, .pjp PNG 便携式网络图形 .png SVG 可缩放矢量图形 .svg
Chapter Summary
使用 HTML
<img>元素定义图像。使用 HTML
src属性定义图像的 URL。使用 HTML
alt属性为图像定义备用文本,以防其无法显示。使用 HTML
width和height属性或 CSSwidth和height属性来定义图像的大小。使用 CSS
float属性让图像向左或向右浮动。
**注意:**加载大图像需要时间,并且会减慢您的网页速度。请谨慎使用图像。
HTML 图像映射
使用 HTML 图像映射,您可以在图像上创建可点击的区域。
图像映射
HTML <map> 标签定义一个图像映射。图像映射是一个带有可点击区域的图像。区域使用一个或多个 <area> 标签定义。
请尝试点击下方图片中的电脑、电话或咖啡杯

这是上方图像映射的 HTML 源代码 <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map>
它是如何工作的?
图像映射的理念是,您可以根据在图像的哪个位置点击来执行不同的操作。
要创建图像映射,您需要一张图像,以及一些描述可点击区域的 HTML 代码。
图像
图像使用 <img> 标签插入。与其他图像的唯一区别是,您必须添加一个 usemap 属性
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
usemap 值以井号 # 开头,后跟图像映射的名称,用于在图像和图像映射之间创建关联。
提示: 您可以使用任何图像作为图像映射!
创建图像映射
然后,添加一个 <map> 元素。
<map> 元素用于创建图像映射,并通过使用必需的 name 属性与图像关联
<map name="workmap">
name 属性的值必须与 <img> 的 usemap 属性值相同。
区域
然后,添加可点击的区域。
可点击区域使用 <area> 元素定义。
形状
您必须定义可点击区域的形状,可以选择以下值之一
rect- 定义一个矩形区域circle- 定义一个圆形区域poly- 定义一个多边形区域default- 定义整个区域
您还必须定义一些坐标才能将可点击区域放置在图像上。
Shape=“rect”
shape="rect" 的坐标成对出现,一对用于 x 轴,一对用于 y 轴。
所以,坐标 34,44 位于距离左边距 34 像素和距离顶部 44 像素的位置
坐标 270,350 位于距离左边距 270 像素和距离顶部 350 像素的位置

现在我们有足够的数据来创建一个可点击的矩形区域
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Shape=“circle”
要添加圆形区域,请先找到圆心的坐标
337,300
然后指定圆的半径
44 像素
现在您有足够的数据来创建一个可点击的圆形区域
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Shape=“poly”
shape="poly" 包含多个坐标点,这些点构成由直线(多边形)形成的形状。
这可以用来创建任何形状。
比如一个可颂形状!
我们如何让下图的可颂饼成为可点击的链接?

我们必须找到可颂饼所有边缘的 x 和 y 坐标

坐标成对出现,一对用于 x 轴,一对用于 y 轴
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
这是变得可点击并将用户发送到页面 “croissant.htm” 的区域

图像映射和 JavaScript
可点击区域也可以触发 JavaScript 函数。
在 <area> 元素中添加 click 事件来执行 JavaScript 函数
在这里,我们使用 onclick 属性在区域被点击时执行 JavaScript 函数 <map name="workmap"> <area shape="circle" coords="337,300,44" href="coffee.htm">Chapter Summary
使用 HTML
<map>元素定义图像映射使用 HTML
<area>元素定义图像映射中的可点击区域使用
<img>元素的 HTMLusemap属性指向一个图像映射
HTML 背景图片
几乎任何 HTML 元素都可以指定背景图片。
HTML 元素的背景图片
要为 HTML 元素添加背景图片,请使用 HTML 的 style 属性和 CSS 的 background-image 属性。
为 HTML 元素添加背景图片 <p style="background-image: url('img_girl.jpg');">您也可以在 <head> 部分的 <style> 元素中指定背景图片。
在 <style> 元素中指定背景图片 <style> p { background-image: url('img_girl.jpg'); } </style>页面背景图片
如果您想让整个页面都有背景图片,则必须在 <body> 元素上指定背景图片。
为整个页面添加背景图片 <style> body { background-image: url('img_girl.jpg'); } </style>背景重复
如果背景图片比元素小,图片将水平和垂直地重复自身,直到到达元素的末尾。
<style> body { background-image: url('example_img_girl.jpg'); } </style>要避免背景图片重复,请将 background-repeat 属性设置为 no-repeat。
<style> body { background-image: url('example_img_girl.jpg'); background-repeat: no-repeat; } </style>背景覆盖
如果您希望背景图片覆盖整个元素,可以将 background-size 属性设置为 cover.。
此外,为了确保整个元素始终被覆盖,请将 background-attachment 属性设置为 fixed:。
这样,背景图片将覆盖整个元素,而不会拉伸(图片将保持其原始比例)。
<style> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } </style>背景拉伸
如果您希望背景图片拉伸以适应整个元素,可以将 background-size 属性设置为 100% 100%。
尝试调整浏览器窗口的大小,您会看到图片会拉伸,但始终覆盖整个元素。
<style> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } </style>了解更多 CSS
从上面的示例中,您已经了解到背景图片可以通过 CSS 的 background 属性进行样式设置。
要了解更多关于 CSS background 属性的信息,请学习我们的 CSS 背景教程。
HTML <picture> 元素
HTML <picture> 元素允许您为不同的设备或屏幕尺寸显示不同的图片。

HTML <picture> 元素
HTML <picture> 元素为 Web 开发人员提供了更灵活的指定图像资源的方式。
该 <picture> 元素包含一个或多个 <source> 元素,每个元素都通过 srcset 属性引用不同的图像。这样,浏览器就可以选择最适合当前视图和/或设备的图像。
每个 <source> 元素都有一个 media 属性,该属性定义了何时图像最合适。
为不同屏幕尺寸显示不同图片 <picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg"> </picture>
**注意:**始终将 <img> 元素作为 <picture> 元素的最后一个子元素。不支持 <picture> 元素的浏览器,或者没有 <source> 标签匹配时,浏览器将使用 <img> 元素。
何时使用 Picture 元素
该 <picture> 元素有两个主要用途:
1. 带宽
如果您使用小屏幕或设备,则无需加载大图像文件。浏览器将使用第一个具有匹配属性值的 <source> 元素,并忽略任何后续元素。
2. 格式支持
某些浏览器或设备可能不支持所有图像格式。通过使用 <picture> 元素,您可以添加所有格式的图像,浏览器将使用它识别的第一个格式,并忽略任何后续元素。
浏览器将使用它识别的第一个图像格式 <picture> <source srcset="img_avatar.png"> <source srcset="img_girl.jpg"> <img src="img_beatles.gif" alt="Beatles" style="width:auto;"> </picture>
**注意:**浏览器将使用第一个具有匹配属性值的 <source> 元素,并忽略任何后续的 <source> 元素。
HTML 网站图标
网站图标是一个显示在浏览器选项卡中页面标题旁边的小图像。
如何在 HTML 中添加网站图标
您可以选择任何您喜欢的图像作为您的网站图标。您也可以在类似 https://www.favicon.cc 这样的网站上创建自己的网站图标。
提示: 网站图标是一个小图像,所以它应该是一个对比度高且简单的图像。
网站图标图像会显示在浏览器选项卡中页面标题的左侧,如下所示:
![]()
要为您的网站添加网站图标,请将您的网站图标图像保存在 Web 服务器的根目录中,或者在根目录中创建一个名为 images 的文件夹,并将您的网站图标图像保存在该文件夹中。网站图标图像的常用名称是 “favicon.ico”。
接下来,在您的 “index.html” 文件中,在 <title> 元素之后,添加一个 <link> 元素,如下所示:
<!DOCTYPE html> <html> <head> <title>我的页面标题</title> <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html>
现在,保存 “index.html” 文件并在浏览器中重新加载。您的浏览器选项卡现在应该会在页面标题的左侧显示您的网站图标图像。
网站图标文件格式支持
下表显示了网站图标图像的文件格式支持:
浏览器 ICO PNG GIF JPEG SVG
Edge 是 是 是 是 是 Chrome 是 是 是 是 是 Firefox 是 是 是 是 是 Opera 是 是 是 是 是 Safari 是 是 是 是 是
Chapter Summary
使用 HTML
<link>元素插入网站图标
HTML 页面标题
每个网页都应该有一个页面标题来描述页面的含义。
<title> 元素为您的页面添加标题
<!DOCTYPE html> <html> <head> <title>HTML 教程</title> </head> <body> 文档内容...... </body> </html>
标题显示在浏览器的标题栏中

标题应描述页面的内容和含义。
页面标题对于搜索引擎优化 (SEO) 非常重要。搜索引擎算法使用该文本来决定在搜索结果中列出页面的顺序。
<title> 元素
定义浏览器工具栏中的标题
当页面添加到收藏夹时提供页面的标题
在搜索引擎结果中显示页面标题
因此,请尽量使标题尽可能准确和有意义!
HTML 表格
HTML 表格允许 Web 开发者将数据排列成行和列。
Company(公司) 联系 Country
Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Laughing Bacchus Winecellars Yoshi Tannamuri 加拿大 Magazzini Alimentari Riuniti Giovanni Rovelli Italy
定义一个 HTML 表格
HTML 表格由行中的单元格和列组成。
一个简单的 HTML 表格 <table> <tr> <th>公司</th> <th>联系人</th> <th>国家</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table>
表格单元格
每个表格单元格由 <td> 和 </td> 标签定义。
td 代表表格数据 (table data)。
介于 <td> 和 </td> 之间的所有内容是表格单元格的内容。
<table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> </table>
注意: 表格单元格可以包含各种 HTML 元素:文本、图片、列表、链接、其他表格等。
表格行
每一行表格都以 <tr> 开始,以 </tr> 结束。
tr 代表表格行 (table row)。
<table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table>
您可以在一个表格中包含任意多行;只需确保每一行的单元格数量相同。
注意: 有时一行可以比另一行少或多单元格。您将在后面的章节中学习相关知识。
表格标题
有时您希望您的单元格是表格的标题单元格。在这种情况下,请使用 <th> 标签而不是 <td> 标签。
th 代表表格标题 (table header)。
将第一行设为表格标题单元格 <table> <tr> <th>Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table>
默认情况下,<th> 元素中的文本是粗体且居中的,但您可以使用 CSS 更改它。
HTML 表格边框
HTML 表格可以具有不同样式和形状的边框。
如何添加边框
要添加边框,请在 table、th 和 td 元素上使用 CSS border 属性。
table, th, td { border: 1px solid black; }合并表格边框
要避免出现上面示例中的双重边框,请将 CSS border-collapse 属性设置为 collapse。
这将使边框合并为单个边框。
table, th, td { border: 1px solid black; border-collapse: collapse; }样式化表格边框
如果为每个单元格设置背景色,并将边框设置为白色(与文档背景色相同),则会产生边框不可见的现象。
table, th, td { border: 1px solid white; border-collapse: collapse; } th, td { background-color: #96D4D4; }圆角表格边框
使用 border-radius 属性,边框将获得圆角
table, th, td { border: 1px solid black; border-radius: 10px; }通过从 CSS 选择器中省略 table 来跳过表格周围的边框。
th, td { border: 1px solid black; border-radius: 10px; }虚线表格边框
使用 border-style 属性,您可以设置边框的外观。
允许的值如下:
dotted(有斑点的)dashed(虚线的)solid(牢固的)double(双重的)groove(凹槽)ridge(隆起)inset(嵌入)outset(包帖)none(没有)hidden(隐藏)
th, td { border-style: dotted; }边框颜色
使用 border-color 属性,您可以设置边框的颜色。
th, td { border-color: #96D4D4; }HTML 表格大小
HTML 表格可以为每一列、每一行或整个表格设置不同的尺寸。
使用 style 属性和 width 或 height 属性来指定表格、行或列的大小。
HTML 表格宽度
要设置表格的宽度,请在 <table> 元素上添加 style 属性
将表格宽度设置为 100% <table style="width:100%"> <tr> <th>名字</th> <th>姓氏</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
**注意:**使用百分比作为宽度的尺寸单位意味着该元素相对于其父元素(在此例中为 <body> 元素)的宽度。
HTML 表格列宽
要设置特定列的大小,请在 <th> 或 <td> 元素上添加 style 属性
将第一列的宽度设置为 70% <table style="width:100%"> <tr> <th style="width:70%">Firstname</th> <th>姓氏</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
HTML 表格行高
要设置特定行的高度,请在表格行元素上添加 style 属性
将第二行的高度设置为 200 像素 <table style="width:100%"> <tr> <th>名字</th> <th>姓氏</th> <th>年龄</th> </tr> <tr style="height:200px"> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
HTML 表头
HTML 表可以为每一列或每一行,或者多列/多行设置表头。
HTML 表头
表头是通过 th 元素定义的。每个 th 元素代表一个表单元格。
<table> <tr> <th>名字</th> <th>姓氏</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
垂直表头
要将第一列用作表头,请将每行中的第一个单元格定义为 <th> 元素
<table> <tr> <th>名字</th> <td>Jill</td> <td>Eve</td> </tr> <tr> <th>姓氏</th> <td>Smith</td> <td>Jackson</td> </tr> <tr> <th>年龄</th> <td>94</td> <td>50</td> </tr> </table>
对齐表头
默认情况下,表头是粗体居中的
要将表头左对齐,请使用 CSS 的 text-align 属性
th { text-align: left; }多列表头
你可以有一个跨越两列或更多列的表头。
要做到这一点,请在 <th> 元素上使用 colspan 属性
<table> <tr> <th colspan="2">姓名</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
你将在 表 colspan & rowspan 章节学习更多关于 colspan 和 rowspan 的知识。
表标题
你可以添加一个作为整个表格标题的标题。
要为表格添加标题,请使用 <caption> 标签
<table style="width:100%"> <caption>每月储蓄</caption> <tr> <th>月份</th> <th>储蓄</th> </tr> <tr> <td>一月</td> <td>$100</td> </tr> <tr> <td>二月</td> <td>50 美元</td> </tr> </table>
注意: <caption> 标签应插入在 <table> 标签之后。
HTML 表格内边距和间距
HTML 表格可以调整单元格内的内边距,以及单元格之间的间距。
HTML 表格 - 单元格内边距
单元格内边距是单元格边缘和单元格内容之间的空间。
默认情况下,内边距设置为 0。
要在表格单元格中添加内边距,请使用 CSS padding 属性。
th, td { padding: 15px; }仅在内容上方添加内边距,请使用 padding-top 属性。
其他侧边则使用 padding-bottom、padding-left 和 padding-right 属性。
th, td { padding-top: 10px; padding-bottom: 20px; padding-left: 30px; padding-right: 40px; }HTML 表格 - 单元格间距
单元格间距是每个单元格之间的空间。
默认情况下,间距设置为 2 像素。
要更改表格单元格之间的间距,请在 table 元素上使用 CSS border-spacing 属性。
table { border-spacing: 30px; }HTML 表格的 Colspan & Rowspan
HTML 表格可以包含跨越多个行和/或列的单元格。
HTML 表格 - Colspan
要使一个单元格跨越多个列,请使用 colspan 属性
<table> <tr> <th colspan="2">姓名</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>43</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>57</td> </tr> </table>
注意: colspan 属性的值表示要跨越的列数。
HTML 表格 - Rowspan
要使一个单元格跨越多个行,请使用 rowspan 属性
<table> <tr> <th>姓名</th> <td>Jill</td> </tr> <tr> <th rowspan="2">电话</th> <td>555-1234</td> </tr> <tr> <td>555-8745</td> </tr> </table>
注意: rowspan 属性的值表示要跨越的行数。
HTML 表格样式
使用 CSS 使您的表格更美观。
HTML 表格 - 斑马条纹
如果为每隔一行表格行添加背景颜色,您将获得漂亮的斑马条纹效果。
要为每隔一个表格行元素设置样式,请使用 :nth-child(even) 选择器,如下所示:
tr:nth-child(even) { background-color: #D6EEEE; }注意: 如果使用 (odd) 而不是 (even),则样式将应用于第 1、3、5 行等,而不是第 2、4、6 行等。
HTML 表格 - 垂直斑马条纹
要创建垂直斑马条纹,请为每隔一个列设置样式,而不是每隔一行。
如下为表格数据元素设置 :nth-child(even):
td:nth-child(even), th:nth-child(even) { background-color: #D6EEEE; }注意: 如果要同时为表头和常规表格单元格设置样式,请将 :nth-child() 选择器同时应用于 th 和 td 元素。
组合垂直和水平斑马条纹
您可以组合以上两个示例的样式,这样每隔一行和每隔一列都会有条纹。
如果使用透明颜色,您将获得重叠效果。
使用 rgba() 颜色指定颜色的透明度
tr:nth-child(even) { background-color: rgba(150, 212, 212, 0.4); } th:nth-child(even),td:nth-child(even) { background-color: rgba(150, 212, 212, 0.4); }水平分隔线
如果仅在每行表格行的底部指定边框,您将得到一个带有水平分隔线的表格。
为所有 tr 元素添加 border-bottom 属性以获得水平分隔线
鼠标悬停表格
使用 tr 上的 :hover 选择器在鼠标悬停时突出显示表格行
tr:hover {background-color: #D6EEEE;}
HTML 表格 <colgroup> 标签
<colgroup> 标签用于设置表格中特定列的样式。
HTML 表格 <colgroup> 标签
如果要为表格的前两列设置样式,请使用 <colgroup> 和 <col> 标签。
<colgroup> 标签应作为列规格的容器。
每个组由 <col> 标签指定。
span 属性指定了多少列将应用样式。
style 属性指定了要为列设置的样式。
注意: colgroup 可用的 CSS 属性非常有限。
<table> <colgroup> <col span="2" style="background-color: #D6EEEE"> </colgroup> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> ...
注意: <colgroup> 标签必须是 <table> 元素的子元素,并且应放在任何其他表格元素(如 <thead>、<tr>、<td> 等)之前,但在 <caption> 元素(如果存在)之后。
允许的 CSS 属性
只有非常有限的 CSS 属性允许在 colgroup 中使用
width 属性 visibility 属性 background 属性 border 属性
所有其他 CSS 属性都将对您的表格无效。
多个 Col 元素
如果要为更多列设置不同的样式,请在 <colgroup> 中使用更多 <col> 元素
<table> <colgroup> <col span="2" style="background-color: #D6EEEE"> <col span="3" style="background-color: pink"> </colgroup> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> ...
空的 Colgroups
如果要设置表格中间列的样式,请在前面的列之前插入一个”空”的 <col> 元素(不带样式)
<table> <colgroup> <col span="3"> <col span="2" style="background-color: pink"> </colgroup> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> ...
隐藏列
您可以使用 visibility: collapse 属性隐藏列
<table> <colgroup> <col span="2"> <col span="3" style="visibility: collapse"> </colgroup> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> ...
HTML 列表
HTML 列表允许 Web 开发人员将一组相关的项目分组到列表中。
无序 HTML 列表
项目
项目
项目
项目
有序 HTML 列表
First item
Second item
Third item
Fourth item
无序 HTML 列表
无序列表以 <ul> 标签开头。每个列表项以 <li> 标签开头。
默认情况下,列表项将用项目符号(小的黑点)标记。
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
有序 HTML 列表
有序列表以 <ol> 标签开头。每个列表项以 <li> 标签开头。
默认情况下,列表项将用数字标记。
<ol> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol>
HTML 定义列表
HTML 也支持定义列表。
定义列表是术语列表,其中包含每个术语的描述。
<dl>(Definition List) 标签定义描述列表,<dt>(Definition Term) 标签定义术语(名称),<dd>(Definition Description) 标签描述每个术语。
<dl> <dt>咖啡</dt> <dd>- 黑色热饮</dd> <dt>牛奶</dt> <dd>- 白色冷饮</dd> </dl>
HTML 无序列表
HTML <ul> 标签定义了一个无序(项目符号)列表。
无序 HTML 列表
无序列表以 <ul> 标签开始。每个列表项以 <li> 标签开始。
默认情况下,列表项将用项目符号(小黑圆圈)标记。
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
无序 HTML 列表 - 选择列表项标记
CSS list-style-type 属性用于定义列表项标记的样式。它可以有以下值之一:
值 描述
disc 将列表项标记设置为项目符号(默认) circle 将列表项标记设置为圆圈 square 将列表项标记设置为正方形 none 列表项将不被标记
<ul style="list-style-type:disc;"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
<ul style="list-style-type:circle;"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
<ul style="list-style-type:square;"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
<ul style="list-style-type:none;"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
嵌套 HTML 列表
列表可以嵌套(列表内部的列表)
<ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>牛奶</li> </ul>
**注意:**列表项(<li>)可以包含新的列表以及其他 HTML 元素,例如图像和链接等。
使用 CSS 的水平列表
HTML 列表可以通过 CSS 以多种不同方式进行样式设置。
一种流行的方式是水平样式化列表,以创建导航菜单
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } </style> </head> <body> <ul> <li><a href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系我们</a></li> <li><a href="#about">关于</a></li> </ul> </body> </html>Chapter Summary
使用 HTML
<ul>元素定义无序列表使用 CSS
list-style-type属性定义列表项标记使用 HTML
<li>元素定义列表项列表可以嵌套
列表项可以包含其他 HTML 元素
使用 CSS 属性
float:left以水平方式显示列表
HTML 有序列表
<ol> 标签定义一个有序列表。有序列表可以是数字或字母的
有序 HTML 列表
有序列表以 <ol> 标签开始。每个列表项以 <li> 标签开始。
列表项默认会用数字标记
Chapter Summary
块级元素总是从新行开始,并占据所有可用宽度
行内元素不会从新行开始,并且只占据必要的宽度
<div>元素是块级元素,通常用作其他 HTML 元素的容器<span>元素是一个行内容器,用于标记文本的一部分或文档的一部分
Chapter Summary
HTML
class属性为元素指定一个或多个类名。类名用于 CSS 和 JavaScript 来选择和访问特定元素。
class属性可用于任何 HTML 元素。类名区分大小写。
不同的 HTML 元素可以指向同一个类名。
JavaScript 可以使用
getElementsByClassName()方法来访问具有特定类名的元素。
Chapter Summary
The
idattribute is used to specify a unique id for an HTML element (id 属性用于为 HTML 元素指定一个唯一的 id。)The value of the
idattribute must be unique within the HTML document (id 属性的值在 HTML 文档中必须是唯一的。)The
idattribute is used by CSS and JavaScript to style/select a specific element (id 属性被 CSS 和 JavaScript 用于样式化/选择特定元素。)The value of the
idattribute is case sensitive (id 属性的值区分大小写。)The
idattribute is also used to create HTML bookmarks (id 属性也用于创建 HTML 书签。)JavaScript 可以使用
getElementById()方法访问具有特定 ID 的元素。
Chapter Summary
HTML
<iframe>标签定义了一个内联框架src属性定义了要嵌入的页面的 URL始终包含
title属性(用于屏幕阅读器)height和width属性指定了 iframe 的大小使用
border:none;来移除 iframe 周围的边框
HTML JavaScript
JavaScript 使 HTML 页面更具动态性和交互性。
HTML <script> 标签
HTML <script> 标签用于定义客户端脚本(JavaScript)。
元素 <script> 要么包含脚本语句,要么通过 src 属性指向一个外部脚本文件。
JavaScript 的常见用途包括图像处理、表单验证和动态内容更改。
要选择一个 HTML 元素,JavaScript 通常使用 document.getElementById() 方法。
此 JavaScript 示例将”Hello JavaScript!“写入 id 为”demo”的 HTML 元素中。
< script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>JavaScript 简介
以下是一些 JavaScript 可以做什么的示例
JavaScript 可以更改内容 document.getElementById("demo").innerHTML = "Hello JavaScript!";JavaScript 可以更改样式 document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow";JavaScript 可以更改属性 document.getElementById("image").src = "picture.gif";HTML <noscript> 标签
HTML <noscript> 标签为禁用了浏览器脚本的用户或不支持脚本的浏览器用户定义了备用内容。
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript>抱歉,您的浏览器不支持 JavaScript!</noscript>HTML 文件路径
文件路径描述了网站文件夹结构中文件的位置。
文件路径示例
路径 描述
<img src="picture.jpg">{=html} “picture.jpg”文件与当前页面位于同一文件夹中
<img src="images/picture.jpg">{=html} “picture.jpg”文件位于当前文件夹下的 images 文件夹中
<img src="/images/picture.jpg">{=html} “picture.jpg”文件位于当前网站根目录下的 images 文件夹中
<img src="../picture.jpg">{=html} “picture.jpg”文件位于当前文件夹上一级文件夹中
HTML 文件路径
文件路径描述了网站文件夹结构中文件的位置。
文件路径用于链接到外部文件,例如:
网页
图片
样式表
JavaScripts
绝对文件路径
绝对文件路径是文件的完整 URL
<img src="https://w3schools.org.cn/images/picture.jpg" alt="Mountain">
相对文件路径
相对文件路径是指相对于当前页面的文件。
在以下示例中,文件路径指向位于当前网站根目录下的 images 文件夹中的文件
<img src="/images/picture.jpg" alt="Mountain">
在以下示例中,文件路径指向位于当前文件夹下的 images 文件夹中的文件
<img src="images/picture.jpg" alt="Mountain">
在以下示例中,文件路径指向位于当前文件夹上一级文件夹下的 images 文件夹中的文件
<img src="../images/picture.jpg" alt="Mountain">
最佳实践
最好使用相对文件路径(如果可能)。
使用相对文件路径时,您的网页将不会与您当前的基础 URL 绑定。所有链接都可以在您自己的计算机(localhost)以及您当前和未来的公共域上正常工作。
HTML - Head 元素
HTML <head> 元素是以下元素的容器: <title>、<style>、<meta>、<link>、<script> 和 <base>。
HTML <head> 元素
HTML 元数据是关于 HTML 文档的数据。元数据不会显示。
元数据通常定义文档标题、字符集、样式、脚本和其他元信息。
HTML <title> 元素
<title> 元素定义文档的标题。标题必须是纯文本,并且显示在浏览器的标题栏或页面的选项卡中。
HTML 文档需要 <title> 元素!
页面标题的内容对搜索引擎优化(SEO)非常重要!搜索引擎算法使用页面标题来决定在搜索结果中列出页面的顺序。
<title> 元素
定义浏览器工具栏中的标题
当页面添加到收藏夹时提供页面的标题
在搜索引擎结果中为页面显示标题
因此,请尽量使标题尽可能准确和有意义!
一个简单的 HTML 文档
<!DOCTYPE html> <html> <head> <title>一个有意义的页面标题</title> </head> <body> 文档内容...... </body> </html>
HTML <style> 元素
<style> 元素用于定义单个 HTML 页面的样式信息。
<style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style>HTML <link> 元素
<link> 元素定义当前文档与外部资源之间的关系。
<link> 标签通常用于链接到外部样式表。
<link rel="stylesheet" href="mystyle.css">
HTML <meta> 元素
<meta> 元素通常用于指定字符集、页面描述、关键字、文档作者和视口设置。
元数据不会在页面上显示,但会被浏览器(如何显示内容或重新加载页面)、搜索引擎(关键字)和其他 Web 服务使用。
定义使用的字符集
<meta charset="UTF-8">
为搜索引擎定义关键字
<meta name="keywords" content="HTML, CSS, JavaScript">
定义您的网页的描述
<meta name="description" content="Free Web tutorials">
定义页面的作者
<meta name="author" content="John Doe">
每 30 秒刷新文档
<meta http-equiv="refresh" content="30">
设置视口,使您的网站在所有设备上看起来都很好
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> 标签示例
<meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe">
设置视口
视口是用户可见的网页区域。它随设备而异 - 在手机上比在电脑屏幕上小。
您应该在所有网页中包含以下 <meta> 元素
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这会给浏览器指令,告知如何控制页面的尺寸和缩放。
width=device-width 部分将页面的宽度设置为与设备的屏幕宽度一致(这将因设备而异)。
initial-scale=1.0 部分设置了浏览器首次加载页面时的初始缩放级别。
这是一个没有视口 meta 标签的网页示例,以及同一个网页有视口 meta 标签的示例。
**提示:**如果您正在用手机或平板电脑浏览此页面,可以点击下面的两个链接来查看差异。
HTML <script> 元素
<script>元素用于定义客户端 JavaScript。
以下 JavaScript 将”Hello JavaScript!“写入 ID 为”demo”的 HTML 元素中。
<script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script>HTML <base> 元素
<base> 元素为页面中的所有相对 URL 指定基本 URL 和/或目标。
<base> 标签必须包含 href 或 target 属性,或两者都包含。
文档中只能有一个 <base> 元素!
为页面上的所有链接指定一个默认 URL 和默认目标 <head> <base href="https://w3schools.org.cn/" target="_blank"> </head> <body> <img src="images/stickman.gif" width="24" height="39" alt="Stickman"> <a href="tags/tag_base.asp">HTML base 标签</a> </body>
Chapter Summary
The
<head>element is a container for metadata (data about data)The
<head>element is placed between the<html>tag and the<body>tagThe
<title>element is required and it defines the title of the documentThe
<style>element is used to define style information for a single document<link>标签通常用于链接到外部样式表。The
<meta>element is typically used to specify the character set, page description, keywords, author of the document, and viewport settingsThe
<script>element is used to define client-side JavaScriptsThe
<base>element specifies the base URL and/or target for all relative URLs in a page
HTML 布局元素和技术
网站通常以多列显示内容(像杂志或报纸)。
HTML 布局元素
HTML 有几个语义元素,用于定义网页的不同部分
<header>- 定义文档或章节的头部<nav>- 定义一组导航链接<section>- 定义文档中的一个章节<article>- 定义独立、自包含的内容<aside>- 定义内容之外的内容(如侧边栏)<footer>- 定义文档或章节的页脚<details>- 定义用户可以按需打开和关闭的附加详细信息<summary>- 定义<details>元素的标题
HTML 布局技术
有四种不同的技术可以创建多列布局。每种技术都有其优缺点
CSS 框架
CSS float 属性
CSS flexbox
CSS grid
CSS 框架
如果您想快速创建布局,可以使用 CSS 框架,例如 W3.CSS 或 Bootstrap。
CSS 浮动布局
使用 CSS float 属性进行整个网页布局很常见。浮动很容易学习——您只需要记住 float 和 clear 属性的工作原理。**缺点:**浮动元素与文档流绑定,这可能会损害灵活性。在我们的 CSS 浮动与清除章节中了解更多关于浮动的信息。
CSS Flexbox 布局
使用 flexbox 可确保在页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素的行为可预测。在我们的 CSS Flexbox 章节中了解更多关于 flexbox 的信息。
CSS Grid 布局
CSS 网格布局模块提供了一个基于网格的布局系统,包含行和列,使网页设计更容易,而无需使用浮动和定位。
HTML 响应式网页设计
响应式网页设计是为了让网页在所有设备上都能良好显示!
响应式网页设计将自动适应不同的屏幕尺寸和视口。

什么是响应式网页设计?
响应式网页设计是使用 HTML 和 CSS 来自动调整、隐藏、收缩或放大网站,使其在所有设备(桌面、平板电脑和手机)上看起来都很棒。
设置视口
要创建响应式网站,请在所有网页中添加以下 <meta> 标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这将设置页面的视口,它将为浏览器提供关于如何控制页面尺寸和缩放的指示。
响应式图片
响应式图片是可以很好地适应任何浏览器尺寸的图片。
使用 width 属性
如果 CSS width 属性设置为 100%,则图像将是响应式的,并会向上和向下缩放。
<img src="img_girl.jpg" style="width:100%;">
请注意,在上面的示例中,图像可以放大到大于其原始尺寸。在许多情况下,更好的解决方案是改用 max-width 属性。
使用 max-width 属性
如果 max-width 属性设置为 100%,图像将向下缩放(如果需要),但绝不会放大到大于其原始尺寸。
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
根据浏览器宽度显示不同的图片
HTML <picture> 元素允许您为不同的浏览器窗口大小定义不同的图像。
<picture> <source srcset="img_smallflower.jpg" media="(max-width: 600px)"> <source srcset="img_flowers.jpg" media="(max-width: 1500px)"> <source srcset="flowers.jpg"> <img src="img_smallflower.jpg" alt="Flowers"> </picture>
响应式文本大小
文本大小可以使用”vw”单位设置,表示”视口宽度”。
这样,文本大小将跟随浏览器窗口的大小。
<h1 style="**font-size:10vw**">Hello World</h1>
HTML 教程
What/Why/How
What:HTML是超文本标记语言(Hyper Text Markup Language)
Why:HTML可以用来创建你自己的网站
How:且看我慢慢道来
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>这是一个DEMO页面</title> </head> <body> </body> </html>
<!DOCTYPE html>声明定义了该文档是一个 HTML5 文档`<html>元素是HTML页面的根元素<head>元素包含 HTML 页面的元信息<title>元素指定 HTML 页面的标题(显示在浏览器的标题栏或页面标签中)<body>元素定义文档的主体,是所有可见内容的容器,例如标题、段落、图像、超链接、表格、列表等。<h1>元素定义一个大标题<p>元素定义一个段落
什么是 HTML 元素?
HTML 元素由开始标签、一些内容和结束标签定义
<tagname> 内容在此处... </tagname>
HTML 元素是从开始标签到结束标签的所有内容
<h1>我的第一个标题</h1> <p>我的第一个段落。</p>v
**注意:**有些 HTML 元素没有内容(例如 <br> 元素)。这些元素称为空元素。空元素没有结束标签!
Web 浏览器
Web 浏览器(Chrome、Edge、Firefox、Safari)的目的是读取 HTML 文档并正确显示它们。
浏览器不显示 HTML 标签,而是使用它们来确定如何显示文档

HTML 页面结构
以下是 HTML 页面结构的可视化
<html> <head> <title>页面标题</title> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
注意:
部分中的内容将在浏览器中显示。 <title>
元素中的内容将显示在浏览器的标题栏或页面标签中。
HTML 基础
HTML 文档
所有 HTML 文档都必须以文档类型声明开头:<!DOCTYPE html>
HTML 文档本身以 <html> 开始,以 </html> 结束。
HTML 文档的可见部分位于 <body> 和 </body> 之间。
<!DOCTYPE html> <html> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
<!DOCTYPE> 声明
声明 <!DOCTYPE> 代表文档类型,并帮助浏览器正确显示网页。
它必须只出现一次,位于页面顶部(在任何 HTML 标签之前)。
声明 <!DOCTYPE> 不区分大小写。
HTML5 的 <!DOCTYPE> 声明是:
<!DOCTYPE html>
HTML 标题(heading)
HTML 标题使用 <h1> 到 <h6> 标签定义。
<h1> 定义最重要的标题。 <h6> 定义最不重要的标题
<h2>这是标题 2</h2> <h3>这是标题 3</h3>
HTML 段落(paragraph)
HTML 段落使用 <p> 标签定义
<p>这是一个段落。</p> <p>这是另一个段落。</p>
HTML 链接(anchor)
HTML 链接使用 <a> 标签定义
链接的目的地在 href 属性中指定。
属性用于为 HTML 元素提供额外信息。
<a href="https://xiaoniba.com">这是一个链接</a>
HTML 图像(image)
HTML 图像使用 <img> 标签定义。
源文件(src(source))、替代文本(alt(alternative))、width 和 height 作为属性提供。
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
您是否曾见过一个网页并想知道”嘿!他们是怎么做到的?”
查看 HTML 源代码
在 HTML 页面中按 CTRL + U,或右键单击页面并选择”查看页面源代码”。这将打开一个新选项卡,其中包含页面的 HTML 源代码。
检查 HTML 元素
右键单击元素(或空白区域),然后选择”检查”以查看元素是由什么组成的(您将看到 HTML 和 CSS)。您还可以在打开的”元素”或”样式”面板中即时编辑 HTML 或 CSS。
HTML 元素
HTML 元素由一个开始标签、一些内容和一个结束标签定义。
<tagname>内容放在这里...</tagname>
一些 HTML 元素的示例
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
开始标签 元素内容 结束标签
我的第一个标题 我的第一个段落。
<br>{=html} none none
**注意:**有些 HTML 元素没有内容(例如 <br> 元素)。这些元素称为空元素。空元素没有结束标签!
嵌套的 HTML 元素
HTML 元素可以嵌套(这意味着元素可以包含其他元素)。
所有 HTML 文档都由嵌套的 HTML 元素组成。
以下示例包含四个 HTML 元素(<html>、<body>、<h1> 和 <p>)。
<!DOCTYPE html> <html> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
切勿省略结束标签
有些 HTML 元素即使您忘记了结束标签也会正确显示。
但是,永远不要依赖这一点!如果忘记结束标签,可能会出现意外的结果和错误!
<html> <body> <p>这是一个段落 <p>这是一个段落 </body> </html>
空的 HTML 元素
没有内容的 HTML 元素称为空元素。
<p>这是一个带有换行的段落。<br>
The <br> tag defines a line break, and is an empty element without a closing tag
(<br>标记定义了一个换行符,并且是一个没有结束标记的空元素)
HTML 不区分大小写
HTML 标签不区分大小写:<P> 与 <p> 含义相同。
HTML 标准不要求小写标签,但 W3C 建议在 HTML 中使用小写,并且对于更严格的文档类型(如 XHTML)要求使用小写。
HTML 属性
HTML 属性提供了关于 HTML 元素的额外信息。
HTML 属性
所有 HTML 元素都可以拥有 属性
属性提供关于元素的附加信息
属性始终在起始标签中指定
属性通常以名称/值对的形式出现,例如:name=“value”
href 属性(Hypertext Reference)
标签 <a> 定义一个超链接。 href 属性指定链接指向的页面的 URL
<a href="https://xiaoniba.com">访问 xnb</a>
src 属性(source)
标签 <img> 用于在 HTML 页面中嵌入图像。 src 属性指定要显示的图像的路径
<img src="img_girl.jpg">
在 src 属性中有两种指定 URL(Uniform Resource Locator) 的方法
1. 绝对 URL - 链接到托管在另一个网站上的外部图像。例如:src=“https://w3schools.org.cn/images/img_girl.jpg"。
**注意:**外部图像可能受版权保护。如果您未获得使用许可,您可能会侵犯版权法。此外,您无法控制外部图像;它可能会突然被移除或更改。
2. 相对 URL - 链接到托管在网站内的图像。这里,URL 不包含域名。如果 URL 不以斜杠开头,则它相对于当前页面。例如:src=“img_girl.jpg”。如果 URL 以斜杠开头,则它相对于域名。例如:src=”/images/img_girl.jpg”。
**提示:**几乎总是最好使用相对 URL。如果您更改域名,它们不会中断。
(There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website. Example: src=“https://www.w3schools.com/images/img_girl.jpg”.
Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src=“img_girl.jpg”. If the URL begins with a slash, it will be relative to the domain. Example: src=”/images/img_girl.jpg”.
Tip: It is almost always best to use relative URLs. They will not break if you change domain.)
width 和 height 属性
标签 <img> 也应包含 width 和 height 属性,它们指定图像的宽度和高度(以像素为单位)
<img src="img_girl.jpg" width="500" height="600">
alt 属性(alternative)
标签 <img> 所需的 alt 属性为图像指定了替代文本,以防图像因某种原因无法显示。这可能是由于连接速度慢、src 属性错误,或者用户使用了屏幕阅读器。
<img src="img_girl.jpg" alt="戴着夹克的女孩"> <img src="img_typo.jpg" alt="戴着夹克的女孩">
style 属性
style 属性用于向元素添加样式,例如颜色、字体、大小等。
<p style="color:red;">这是一个红色段落。</p>
lang 属性(language)
您应该始终在 <html> 标签内包含 lang 属性,以声明网页的语言。这旨在帮助搜索引擎和浏览器。
以下示例指定英语作为语言
<!DOCTYPE html> <html> <body> ... </body> </html>
在 lang 属性中也可以为语言代码添加国家代码。因此,前两个字符定义了 HTML 页面的语言,后两个字符定义了国家。
以下示例指定英语作为语言,美国作为国家
<!DOCTYPE html> <html> <body> ... </body> </html>
title 属性
title 属性定义了关于元素的额外信息。
当您将鼠标悬停在元素上时,title 属性的值将显示为工具提示
<p title="我是一个工具提示">这是一个段落。</p>
始终使用小写属性
HTML 标准不要求小写属性名。
title 属性(以及所有其他属性)可以用大写或小写编写,例如 title 或 TITLE。
然而,W3C 建议在 HTML 中使用小写属性,并要求在更严格的文档类型(如 XHTML)中使用小写属性。
始终引用属性值
HTML 标准不要求在属性值周围加引号。
然而,W3C 建议在 HTML 中使用引号,并要求在更严格的文档类型(如 XHTML)中使用引号。
好 <a href="https://w3schools.org.cn/html/">访问我们的 HTML 教程</a> 坏 <a href=https://w3schools.org.cn/html/>访问我们的 HTML 教程</a>
有时您必须使用引号。此示例将无法正确显示 title 属性,因为它包含一个空格
<p title=About W3Schools>
单引号还是双引号?
在 HTML 中,双引号最常用于属性值,但也可以使用单引号。
在某些情况下,当属性值本身包含双引号时,必须使用单引号
<p title='John "ShotGun" Nelson'>
反之亦然
<p title="John 'ShotGun' Nelson">
Chapter Summary(章节概要)
所有 HTML 元素都可以拥有属性
<a>的href属性指定链接指向的页面的 URL<img>的src属性指定要显示的图像的路径<img>的width和height属性为图像提供尺寸信息<img>的alt属性为图像提供替代文本style属性用于向元素添加样式,例如颜色、字体、大小等<html>标签的lang属性声明了网页的语言title属性定义了关于元素的额外信息
HTML 属性参考
所有 HTML 元素的完整属性列表,列在我们的:HTML 属性参考中。
HTML 标题
HTML 标题是您想在网页上显示的标题或副标题。
HTML 标题使用 <h1> 到 <h6> 标签定义。
<h1> 定义最重要的标题。 <h6> 定义最重要的标题。
注意: 浏览器会自动在标题前后添加一些空白(外边距)。
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
标题很重要
搜索引擎使用标题来索引您网页的结构和内容。
用户经常通过标题来浏览页面。使用标题来显示文档结构很重要。
<h1> 标题应用于主标题,其次是 <h2> 标题,然后是次要的 <h3>,以此类推。
注意: 仅将 HTML 标题用于标题。不要使用标题来使文本变大或加粗。
更大的标题
每个 HTML 标题都有一个默认大小。但是,您可以使用 style 属性,通过 CSS font-size 属性来指定任何标题的大小。
<h1 style="font-size:60px;">一级标题</h1>
HTML 段落
段落总是以新行开始,通常是一段文本。
HTML 段落
HTML <p> 元素定义了一个段落。
段落总是以新行开始,浏览器会自动在段落前后添加一些空白(边距)。
<p>这是一个段落。</p> <p>这是另一个段落。</p>
HTML 显示
你无法确定 HTML 将如何显示。
屏幕大小不同,窗口大小调整也会导致不同的结果。
使用 HTML,你无法通过在 HTML 代码中添加额外的空格或额外行来更改显示。
浏览器在显示页面时会自动删除所有额外的空格和行。
<p> 这个段落 包含了很多行 在源代码中, 但是浏览器 忽略了它。 </p> <p> 这个段落 包含 很多空格 在源代码 中, 但是 浏览器 忽略了它。 </p>
HTML 水平分割线(Horizontal Rule)
HTML 页面中的 <hr> 标签定义了一个主题分隔,通常显示为一条水平线。
<hr> 元素用于分隔 HTML 页面中的内容(或定义一个更改)。
<h1>这是标题 1</h1> <p>这是文本。</p> <hr> <h2>这是标题 2</h2> <p>这是另一段文本。</p> <hr>
HTML 换行
HTML <br> 元素定义了一个换行。
如果你想换行(新的一行)而不开始新段落,请使用 <br>。
<p>这是<br>一段<br>包含换行的段落。</p>
<br> 标签是一个空标签,意味着它没有结束标签。
诗歌问题
这首诗将显示在单行上
<p> 我的邦妮在海洋那边。 我的邦妮在海洋那边。 我的邦妮在海洋那边。 哦,带回我的邦妮给我。 </p>
解决方案 - HTML <pre>元素(preformatted text)
HTML <pre> 元素定义了预格式化文本。
<pre> 元素内的文本以固定宽度的字体(通常是 Courier)显示,并且它保留了空格和换行。
<pre> 我的邦妮在海洋那边。 我的邦妮在海洋那边。 我的邦妮在海洋那边。 哦,带回我的邦妮给我。 </pre>
lorem可以随意生成
HTML 样式
HTML style 属性用于为元素添加样式,例如颜色、字体、大小等。
<p>I am normal</p> <p style="color:red;">I am red</p> <p style="color:blue;">I am blue</p> <p style="font-size:50px;">I am big</p>
HTML 样式属性
HTML 元素的样式设置可以通过 style 属性来完成。
HTML style 属性的语法如下:
<标签名 style=”属性:值;”>
属性 是一个 CSS 属性。值 是一个 CSS 值。
背景颜色
CSS background-color 属性定义 HTML 元素的背景颜色。
将页面背景色设置为粉蓝色 <body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>这是一个段落。</p> </body>
为两个不同元素设置背景颜色 <body> <h1 style="background-color:powderblue;">这是一个标题</h1> <p style="background-color:tomato;">这是一个段落。</p> </body>
文本颜色
CSS color 属性定义 HTML 元素的文本颜色。
<h1 style="color:blue;">这是一个标题</h1> <p style="color:red;">这是一个段落。</p>
字体
CSS font-family 属性定义 HTML 元素使用的字体。
<h1 style="font-family:verdana;">这是一个标题</h1> <p style="font-family:courier;">这是一个段落。</p>
文字大小
CSS font-size 属性定义 HTML 元素的文本大小。
<h1 style="font-size:300%;">这是一个标题</h1> <p style="font-size:160%;">这是一个段落。</p>
文本对齐
CSS text-align 属性定义 HTML 元素的水平文本对齐方式。
<h1 style="text-align:center;">居中标题</h1> <p style="text-align:center;">居中段落。</p>
Chapter Summary
使用
style属性来设置 HTML 元素的样式。使用
background-color设置背景颜色。使用
color设置文本颜色。使用
font-family设置文本字体。使用
font-size设置文本大小。使用
text-align设置文本对齐。
HTML 文本格式化
HTML 包含多个用于定义具有特殊含义的文本的元素。
<body> <p><b>This text is bold</b></p> <p><i>This text is italic</i></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body>
HTML 格式化元素
格式化元素旨在显示特殊类型的文本
<b>(Bold)- 粗体文本<strong>- 重要文本<i>(Italic)- 斜体文本<em>(Emphasis)- 强调文本<mark>- 标记文本<small>- 更小的文本<del>(Delete)- 删除文本<ins>(Insert)- 插入文本<sub>(Subscript)- 下标文本<sup>(Superscript)- 上标文本
HTML <b> 和 <strong> 元素
HTML <b> 元素定义粗体文本,不带任何额外的重要性。
<b>此文本是粗体</b> <strong>此文本很重要!</strong>
HTML <i> 和 <em> 元素
HTML <i> 元素定义文本中具有不同语调或情绪的部分。内部内容通常显示为斜体。
提示: <i> 标签通常用于表示技术术语、外语短语、想法、船名等。
HTML <em> 元素定义强调文本。内部内容通常显示为斜体。
提示: 屏幕阅读器将以强调的方式(使用口头重音)朗读 <em> 中的单词。
<i>此文本是斜体</i> <em>此文本已强调</em>
HTML <small> 元素
HTML <small> 元素定义更小的文本
<small>这是一些更小的文本。</small>
HTML <mark> 元素
HTML <mark> 元素定义应标记或突出显示的文本
<p>今天不要忘记买<mark>牛奶</mark>。</p>
HTML <del> 元素
HTML <del> 元素定义已从文档中删除的文本。浏览器通常会在删除的文本上划一条线
<p>我最喜欢的颜色是<del>蓝色</del> 红色。</p>
HTML <ins> 元素
HTML <ins> 元素定义已插入到文档中的文本。浏览器通常会在插入的文本下划线
<p>我最喜欢的颜色是<del>蓝色</del> <ins>红色</ins>。</p>
HTML <sub> 元素
HTML <sub> 元素定义下标文本。下标文本出现在正常行下方半个字符处,有时会以较小的字体呈现。下标文本可用于化学公式,例如 H2O
<p>这是<sub>下标</sub>文本。</p>
HTML <sup> 元素
HTML <sup> 元素定义上标文本。上标文本出现在正常行上方半个字符处,有时会以较小的字体呈现。上标文本可用于脚注,例如 WWW[1]
<p>这是<sub>下标</sub>文本。</p>
HTML 引用和引证元素
在本章中,我们将学习 <blockquote>、<q>、<abbr>、<address>、<cite> 和 <bdo> HTML 元素。
HTML <blockquote> 用于引用
HTML <blockquote> 元素定义了一个从其他来源引用的部分。
浏览器通常会缩进 <blockquote> 元素。
<p>以下是世界自然基金会网站上的一段引用:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> 60 年来,世界自然基金会一直致力于帮助人类和自然共同繁荣。作为全球领先的环保组织,世界自然基金会在近 100 个国家开展工作。我们与世界各地的人们在各个层面进行合作,开发并提供创新的解决方案,以保护社区、野生动物及其栖息地。 </blockquote>
HTML <q>(quote) 用于短引用
HTML <q> 标签定义了一个短引用。
浏览器通常会在引用周围插入引号。
<p>世界自然基金会的目标是:<q>构建一个人类与自然和谐共处的未来。</q></p>
HTML <abbr>(abbreviation) 用于缩写
HTML <abbr> 标签定义了缩写或首字母缩略词,例如”HTML”、“CSS”、“Mr.”、“Dr.”、“ASAP”、“ATM”。
标记缩写可以为浏览器、翻译系统和搜索引擎提供有用的信息。
**提示:**使用全局 title 属性,在鼠标悬停在元素上时显示缩写/首字母缩略词的描述。
<p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948 年。</p>
HTML <address> 用于联系信息
HTML <address> 标签定义了文档或文章作者/所有者的联系信息。
联系信息可以是电子邮件地址、URL、物理地址、电话号码、社交媒体句柄等。
<address> 元素中的文本通常以斜体呈现,并且浏览器总会在 <address> 元素前后添加换行符。
<address> 作者:John Doe。<br> 请访问我们:<br> Example.com<br> Disneyland, Box 564<br> USA </address>
HTML <cite>(citation) 用于作品标题
HTML <cite> 标签定义了创意作品的标题(例如书籍、诗歌、歌曲、电影、绘画、雕塑等)。
**注意:**人名不是作品的标题。
<cite> 元素中的文本通常以斜体呈现。
<p>爱德华·蒙克 (Edvard Munch) 的《<cite>呐喊</cite>》。作于 1893 年。</p>
HTML <bdo> 用于双向覆盖
BDO 是 Bi-Directional Override(双向覆盖)的缩写。
HTML <bdo> 标签用于覆盖当前的文本方向
<bdo dir="rtl">这段文本将从右到左书写</bdo>
HTML 注释
HTML 注释不会在浏览器中显示,但它们可以帮助你记录 HTML 源代码。
HTML 注释标签
你可以使用以下语法为 HTML 源代码添加注释
请注意,开始标签中有一个感叹号 (!),但结束标签中没有。
注意: 浏览器不会显示注释,但它们可以帮助你记录 HTML 源代码。
添加注释
通过注释,你可以在 HTML 代码中放置通知和提醒
<!-- 这是一个注释 --> <p>这是一个段落。</p> <!-- 记住在这里添加更多信息 -->
隐藏内容
注释可用于隐藏内容。
这对于临时隐藏内容可能很有用
<p>这是一个段落。</p> <!-- <p>这是另一个段落 </p> --> <p>这也是一个段落。</p>
你还可以隐藏多行。介于 <!-- 和 --> 之间的所有内容都将从显示中隐藏。
隐藏 HTML 代码段 <p>这是一个段落。</p> <!-- <p>看看这张很酷的图片:</p> <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> <p>这也是一个段落。</p>
注释对于调试 HTML 也非常有用,因为你可以一次注释掉一行 HTML 代码来查找错误。
隐藏内联内容
注释可用于隐藏 HTML 代码中间的部分。
隐藏段落的一部分 <p>这个 <!-- 很棒的文本 --> 是一个段落。</p>
HTML 颜色
HTML 颜色通过预定义的颜色名称、RGB、HEX、HSL、RGBA 或 HSLA 值来指定。
颜色名称
在 HTML 中,可以使用颜色名称来指定颜色
HTML 支持 140 种标准颜色名称。
背景颜色
你可以为 HTML 元素设置背景颜色
<h1 style="background-color:DodgerBlue;">你好世界</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
文本颜色
你可以设置文本颜色
<h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
边框颜色
你可以设置边框颜色
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
颜色值
在 HTML 中,颜色也可以使用 RGB 值、HEX 值、HSL 值、RGBA 值和 HSLA 值来指定。
以下三个 <div> 元素的背景颜色分别通过 RGB、HEX 和 HSL 值设置。
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
以下两个 <div> 元素的背景颜色通过 RGBA 和 HSLA 值设置,它们为颜色添加了一个 Alpha 通道(这里我们设置了 50% 的透明度)。
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
CSS 颜色缩写全称
RGB → Red Green Blue 红、绿、蓝,三原色,格式:
rgb(255,0,0)HEX → Hexadecimal 十六进制,十六进制数,格式:
#ff0000HSL → Hue Saturation Lightness 色相、饱和度、亮度,格式:
hsl(0,100%,50%)RGBA → Red Green Blue Alpha 红、绿、蓝 + Alpha 透明度,格式:
rgba(255,0,0,0.5)HSLA → Hue Saturation Lightness Alpha 色相、饱和度、亮度 + Alpha 透明度,格式:
hsla(0,100%,50%,0.5)
小笔记
Alpha:透明度,取值
0~1,0 完全透明,1 完全不透明HEX 没有自带透明,现代 CSS 支持
#ff000080最后两位代表透明度
HTML RGB 和 RGBA 颜色
RGB 颜色值代表红色 (RED)、绿色 (GREEN) 和蓝色 (BLUE) 光源。
RGBA 颜色值是 RGB 的扩展,包含一个 Alpha 通道(不透明度)。
RGB 颜色值
在 HTML 中,可以使用以下公式指定颜色为 RGB 值:
rgb(红, 绿, 蓝)
每个参数(红色、绿色和蓝色)都使用 0 到 255 之间的值来定义颜色的强度。
这意味着有 256 x 256 x 256 = 16777216 种可能的颜色!
例如,rgb(255, 0, 0) 显示为红色,因为红色设置为最高值 (255),而另外两个(绿色和蓝色)设置为 0。
另一个例子,rgb(0, 255, 0) 显示为绿色,因为绿色设置为最高值 (255),而另外两个(红色和蓝色)设置为 0。
要显示黑色,请将所有颜色参数设置为 0,例如:rgb(0, 0, 0)。
要显示白色,请将所有颜色参数设置为 255,如下所示:rgb(255, 255, 255)。
灰色调
灰色通常使用三个参数相等的值来定义
RGBA 颜色值
RGBA 颜色值是 RGB 颜色值的扩展,包含一个 Alpha 通道 — 指定颜色的不透明度。
RGBA 颜色值指定为
rgba(红, 绿, 蓝, alpha)
alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
HTML HEX 颜色
十六进制颜色通过以下方式指定: #RRGGBB,其中 RR(红)、GG(绿)和 BB(蓝)的十六进制整数指定颜色的分量。
HEX 颜色值
在 HTML 中,颜色可以使用十六进制值指定,格式为
#rrggbb
其中 rr(红)、gg(绿)和 bb(蓝)是介于 00 和 ff(相当于十进制 0-255)之间的十六进制值。
例如,#ff0000 显示为红色,因为红色被设置为其最高值 (ff),而其他两个(绿色和蓝色)被设置为 00。
另一个例子,#00ff00 显示为绿色,因为绿色被设置为其最高值 (ff),而其他两个(红色和蓝色)被设置为 00。
要显示黑色,请将所有颜色参数设置为 00,如下所示:#000000。
要显示白色,请将所有颜色参数设置为 ff,如下所示:#ffffff。
HTML HSL 和 HSLA 颜色
HSL 代表色相(hue)、饱和度(saturation)和亮度(lightness)。
HSLA 颜色值是 HSL 的扩展,增加了一个 Alpha 通道(透明度)。
HSL 颜色值
在 HTML 中,颜色可以用色相、饱和度和亮度(HSL)的形式指定:
hsl(色相, 饱和度, 亮度)
色相是色轮上的度数,范围从 0 到 360。0 代表红色,120 代表绿色,240 代表蓝色。
饱和度是一个百分比值。0% 表示灰色,100% 表示全色。
亮度也是一个百分比值。0% 表示黑色,100% 表示白色。
饱和度
饱和度可以被描述为颜色的强度。
100% 是纯色,没有灰色调。
50% 是 50% 的灰色,但你仍然可以看到颜色。
0% 是完全的灰色;你再也看不到颜色了。
亮度
颜色的亮度可以描述为您希望为颜色提供的光量,其中 0% 表示无光(黑色),50% 表示 50% 光(既不暗也不亮),100% 表示全亮度(白色)。
灰色调
灰色调通常通过将色相和饱和度设置为 0,然后调整亮度从 0% 到 100% 来获得更暗/更亮的色调。
HSLA 颜色值
HSLA 颜色值是 HSL 颜色值的扩展,增加了一个 Alpha 通道,该通道指定颜色的不透明度。
HSLA 颜色值指定如下:
hsla(色相, 饱和度, 亮度, alpha)
alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
HTML 样式 - CSS(Cascading Style Sheets)
CSS代表层叠样式表。
CSS节省了很多工作。它可以一次控制多个网页的布局。
什么是CSS
层叠样式表(CSS)用于格式化网页的布局。
使用CSS,您可以控制颜色、字体、文本大小、元素之间的间距、元素的定位和布局方式、要使用的背景图像或背景颜色、针对不同设备和屏幕大小的不同显示方式等等!
提示:“级联”一词意味着应用于父元素的样式也将应用于父元素中的所有子元素。因此,如果你将正文的颜色设置为”蓝色”,那么正文中的所有标题、段落和其他文本元素也将获得相同的颜色(除非你指定了其他颜色)!
内联CSS
内联CSS用于将独特的样式应用于单个HTML元素。内联CSS使用HTML元素的style属性。下面的示例将<h1>元素的文本颜色设置为蓝色,将<p>元素的文本颜色设置为红色
<h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p>
内部的CSS
内部CSS用于定义单个HTML页面的样式。内部CSS定义在HTML页面的<head>部分,在<style>元素中。下面的示例将该页面上所有<h1>元素的文本颜色设置为蓝色,并将所有<p>元素的文本颜色设置为红色。此外,页面将以”粉蓝色”为背景颜色显示:
<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> </body> </html>外部CSS
外部样式表用于定义许多HTML页面的样式。要使用外部样式表,请在每个HTML页面的<head>部分中添加指向它的链接
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> </body> </html>
外部样式表可以在任何文本编辑器中编写。该文件不能包含任何HTML代码,并且必须以.css扩展名保存。下面是”styles.css”文件的样子
"styles.css" body { background-color: powderblue; } h1 { color: blue; } p { color: red; }提示:使用外部样式表,您可以通过更改一个文件来更改整个网站的外观!
CSS颜色,字体和大小
在这里,我们将演示一些常用的CSS属性。稍后您将了解更多有关它们的信息。CSS color属性定义要使用的文本颜色。CSS font-family属性定义要使用的字体。CSS font-size属性定义要使用的文本大小。
使用CSS颜色,字体族和字体大小属性 <!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> </body> </html>CSS Border(边框)
CSS border属性定义了HTML元素周围的边框。
提示:您可以为几乎所有HTML元素定义边框。
CSS border属性的使用: p { border: 2px solid powderblue; }CSS 内边距
CSS padding属性定义了文本和边框之间的填充(空白)。
使用CSS边框和填充属性 p { border: 2px solid powderblue; padding: 30px; }CSS Margin
CSS margin属性定义了边框外的空白(空白)。
使用CSS边框和边距属性 p { border: 2px solid powderblue; margin: 50px; }链接到外部CSS
外部样式表可以使用完整的URL或相对于当前网页的路径来引用。
本例使用完整的URL链接到样式表 <link rel="stylesheet"href="https://w3schools.org.cn/html/styles.css">
下面的示例链接到当前网站的html文件夹中的样式表: <link rel="stylesheet" href="/html/styles.css">
此示例链接到与当前页面位于同一文件夹中的样式表 <link rel="stylesheet" href="styles.css">
你可以在HTML文件路径章节中阅读更多关于文件路径的信息。
文章总结
使用内联样式的HTML样式属性
使用HTML <style>元素定义内部CSS
使用HTML <link>元素来引用一个外部CSS文件
使用HTML <head>元素来存储<style>和<link>元素
使用CSS color属性文本颜色
使用的CSS font-family属性文本字体
使用的CSS border属性文本大小使用CSS边框属性边界
使用CSS padding属性空间边界内
使用CSS margin属性设置内联样式
提示:你可以在我们的CSS教程中学到更多关于CSS的知识。
HTML 链接
链接几乎存在于所有网页中。链接允许用户点击从一个页面跳转到另一个页面。
HTML 链接 - 超链接
HTML 链接是超链接。
您可以点击一个链接并跳转到另一个文档。
当您将鼠标移到链接上时,鼠标箭头将变成一个小手。
**注意:**链接不一定是文本。链接可以是图片或其他 HTML 元素!
HTML 链接 - 语法
HTML <a> 标签定义一个超链接。它的语法如下:
<a href="url">链接文本</a>
<a> 元素最重要的属性是 href 属性,它指示链接的目标。
链接文本是读者将看到的文本。
点击链接文本会将读者发送到指定的 URL 地址。
此示例展示了如何创建到 W3Schools.com 的链接: <a href="https://w3schools.org.cn/">访问 W3Schools.com!</a>
默认情况下,链接在所有浏览器中将如下显示:
未访问过的链接显示为蓝色下划线
已访问过的链接显示为紫色下划线
活动的链接显示为红色下划线
**提示:**链接当然可以用 CSS 进行样式设置,以获得不同的外观!
HTML 链接 - target 属性
默认情况下,链接的页面将在当前浏览器窗口中显示。要更改此行为,您必须为链接指定另一个目标。
target 属性指定在哪里打开链接的文档。
target 属性可以具有以下值之一:
_self- 默认。在点击的同一窗口/标签页中打开文档_blank- 在新窗口或标签页中打开文档_parent- 在父框架中打开文档_top- 在窗口的整个主体中打开文档
使用 target="_blank" 在新的浏览器窗口或标签页中打开链接的文档。 <a href="https://w3schools.org.cn/" target="_blank">访问 W3Schools!</a>
绝对 URL 与相对 URL
上面的两个示例都在 href 属性中使用了绝对 URL(完整的网络地址)。
本地链接(指向同一网站内的页面的链接)使用相对 URL(不带 “https://www” 部分)指定。
<h2>绝对 URL</h2> <p><a href="https://www.w3.org/">W3C</a></p> <p><a href="https://www.google.com/">Google</a></p> <h2>相对 URL</h2> <p><a href="html_images.asp">HTML 图片</a></p> <p><a href="/css/default.asp">CSS 教程</a></p>
HTML 链接 - 将图片用作链接
要将图片用作链接,只需将 <img> 标签放在 <a> 标签内。
<a href="default.asp"> <img src="smiley.gif" alt="HTML 教程" style="width:42px;height:42px;"> </a>
链接到电子邮件地址
在 href 属性中使用 mailto: 来创建链接,该链接将打开用户的电子邮件程序(让他们发送新电子邮件)。
<a href="mailto:someone@example.com">发送邮件</a>
按钮作为链接
要将 HTML 按钮用作链接,您需要添加一些 JavaScript 代码。
JavaScript 允许您在特定事件(如按钮点击)发生时指定要执行的操作。
<button>
**提示:**在我们的 JavaScript 教程 中了解更多关于 JavaScript 的知识。
链接标题
title 属性指定有关元素的额外信息。这些信息在鼠标悬停在元素上时通常会显示为工具提示文本。
<a href="https://w3schools.org.cn/html/" title="转到 W3Schools HTML 部分">访问我们的 HTML 教程</a>
更多关于绝对 URL 和相对 URL
使用完整的 URL 链接到网页: <a href="https://w3schools.org.cn/html/default.asp">HTML 教程</a>
链接到当前页面所在文件夹中的页面: <a href="default.asp">HTML 教程</a>
链接到当前网站 html 文件夹中的页面: <a href="/html/default.asp">HTML 教程</a>
你可以在HTML文件路径章节中阅读更多关于文件路径的信息。
Chapter Summary
使用
<a>元素定义链接。使用
href属性定义链接地址。使用
target属性定义链接文档的打开位置。使用
<img>元素(在<a>中)将图片用作链接。在
href属性中使用mailto:方案来创建链接,该链接将打开用户的电子邮件程序。
HTML 链接 - 不同颜色
HTML 链接根据其是否被访问、未被访问或处于活动状态,会以不同的颜色显示。
HTML 链接颜色
默认情况下,链接将如下所示(在所有浏览器中):
未访问过的链接显示为蓝色下划线
已访问过的链接显示为紫色下划线
活动的链接显示为红色下划线
您可以使用 CSS 更改链接状态的颜色:
在这里,未访问的链接将是绿色且没有下划线。已访问的链接将是粉色且没有下划线。活动链接将是黄色并带有下划线。此外,当鼠标悬停在链接上时(a:hover),它将变为红色并带有下划线: <style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style>链接按钮
链接也可以通过使用 CSS 设置样式,使其看起来像一个按钮:
<style> a:link, a:visited { background-color: #f44336; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } </style>要了解更多关于 CSS 的信息,请访问我们的 CSS 教程。
HTML 链接 - 创建书签
HTML 链接可用于创建书签,以便读者可以跳转到网页的特定部分。
在 HTML 中创建书签
如果网页很长,书签会很有用。
要创建书签 - 首先创建书签,然后添加链接。
点击链接时,页面将滚动到带有书签的位置。
首先,使用 id(identifier;标识符) 属性创建书签 <h2 id="C4">第 4 章</h2> 然后,在同一页面内添加一个指向该书签的链接(“跳转到第 4 章”) <a href="#C4">跳转到第 4 章</a> 您还可以添加指向另一个页面上书签的链接 <a href="html_demo.html#C4">跳转到第 4 章</a>
Chapter Summary
使用
id属性 (id=”值”) 在页面中定义书签使用
href属性 (href=”#值”) 链接到书签
HTML 图像
图像可以改善网页的设计和外观。
<img src="pic_trulli.jpg" alt="意大利特鲁利"> <img src="img_girl.jpg" alt="穿夹克的女孩"> <img src="img_chania.jpg" alt="克里特岛的鲜花">
HTML 图像语法
HTML <img> 标签用于在网页中嵌入图像。
图像实际上并未插入到网页中;而是链接到网页。 <img> 标签创建了一个用于引用图像的占位符。
<img> 标签是空的,它只包含属性,并且没有结束标签。
<img> 标签有两个必需的属性:
src - 指定图像的路径
alt - 指定图像的替代文本
<img src="URL" alt="替代文本">
src 属性
必需的 src 属性指定图像的路径(URL)。
**注意:**当网页加载时,它是在那一刻由浏览器从 Web 服务器获取图像并将其插入到页面中的。因此,请确保图像与网页保持在同一位置,否则您的访问者将看到一个损坏的链接图标。如果浏览器找不到图像,则会显示损坏的链接图标和 alt 文本。
alt 属性
必需的 alt 属性为图像提供了一个替代文本,如果用户因任何原因无法查看图像(例如,由于连接缓慢、src 属性错误或用户使用屏幕阅读器)。
alt 属性的值应描述图像。 <img src="img_chania.jpg" alt="克里特岛的鲜花"> 如果浏览器找不到图像,它将显示 alt 属性的值。 <img src="wrongname.gif" alt="克里特岛的鲜花">
**提示:**屏幕阅读器是一种朗读 HTML 代码的软件程序,允许用户”听”内容。屏幕阅读器对视障或有学习障碍的人很有用。
图像尺寸 - 宽度和高度
您可以使用 style 属性来指定图像的宽度和高度。
<img src="img_girl.jpg" alt="穿夹克的女孩" style="width:500px;height:600px;"> 或者,您可以使用 width 和 height 属性: <img src="img_girl.jpg" alt="穿夹克的女孩" width="500" height="600">
width 和 height 属性始终以像素为单位定义图像的宽度和高度。
**注意:**始终指定图像的宽度和高度。如果未指定宽度和高度,则网页在图像加载时可能会闪烁。
宽度和高度,还是 Style?
width、height 和 style 属性在 HTML 中都是有效的。
但是,我们建议使用 style 属性。它可以防止样式表更改图像的大小。
<!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 图标" width="128" height="128"> <img src="html5.gif" alt="HTML5 图标" style="width:128px;height:128px;"> </body> </html>另一个文件夹中的图像
如果您的图像在子文件夹中,则必须在 src 属性中包含文件夹名称。
<img src="/images/html5.gif" alt="HTML5 图标" style="width:128px;height:128px;">
另一个服务器/网站上的图像
一些网站指向另一个服务器上的图像。
要指向另一个服务器上的图像,您必须在 src 属性中指定绝对(完整)URL。
<img src="https://w3schools.org.cn/images/w3schools_green.jpg" alt="W3Schools.com">
**关于外部图像的注意事项:**外部图像可能受版权保护。如果您没有获得使用许可,您可能侵犯了版权法。此外,您无法控制外部图像;它们可能会突然被删除或更改。
动画图像
HTML 支持动画 GIF(Graphics Interchange Format;图形交换格式)。
<img src="programming.gif" alt="电脑人" style="width:48px;height:48px;">
将图像用作链接
要将图像用作链接,请将 <img> 标签放在 <a> 标签内。
<a href="default.asp"> <img src="smiley.gif" alt="HTML 教程" style="width:42px;height:42px;"> </a>
图像浮动
使用 CSS float 属性可以让图像向右或向左浮动于文本。
<p><img src="smiley.gif" alt="笑脸" style="float:right;width:42px;height:42px;"> 图像将向右浮动于文本。</p> <p><img src="smiley.gif" alt="笑脸" style="float:left;width:42px;height:42px;"> 图像将向左浮动于文本。</p>
常用图像格式
以下是最常见的图像文件类型,所有浏览器(Chrome、Edge、Firefox、Safari、Opera)都支持这些类型:
缩写 文件格式 文件扩展名
APNG 动画便携式网络图形 .apng GIF 图形交换格式 .gif ICO Microsoft 图标 .ico, .cur JPEG 联合照片专家组图像 .jpg, .jpeg, .jfif, .pjpeg, .pjp PNG 便携式网络图形 .png SVG 可缩放矢量图形 .svg
Chapter Summary
使用 HTML
<img>元素定义图像。使用 HTML
src属性定义图像的 URL。使用 HTML
alt属性为图像定义备用文本,以防其无法显示。使用 HTML
width和height属性或 CSSwidth和height属性来定义图像的大小。使用 CSS
float属性让图像向左或向右浮动。
**注意:**加载大图像需要时间,并且会减慢您的网页速度。请谨慎使用图像。
HTML 图像映射
使用 HTML 图像映射,您可以在图像上创建可点击的区域。
图像映射
HTML <map> 标签定义一个图像映射。图像映射是一个带有可点击区域的图像。区域使用一个或多个 <area> 标签定义。
请尝试点击下方图片中的电脑、电话或咖啡杯

这是上方图像映射的 HTML 源代码 <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map>
它是如何工作的?
图像映射的理念是,您可以根据在图像的哪个位置点击来执行不同的操作。
要创建图像映射,您需要一张图像,以及一些描述可点击区域的 HTML 代码。
图像
图像使用 <img> 标签插入。与其他图像的唯一区别是,您必须添加一个 usemap 属性
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
usemap 值以井号 # 开头,后跟图像映射的名称,用于在图像和图像映射之间创建关联。
提示: 您可以使用任何图像作为图像映射!
创建图像映射
然后,添加一个 <map> 元素。
<map> 元素用于创建图像映射,并通过使用必需的 name 属性与图像关联
<map name="workmap">
name 属性的值必须与 <img> 的 usemap 属性值相同。
区域
然后,添加可点击的区域。
可点击区域使用 <area> 元素定义。
形状
您必须定义可点击区域的形状,可以选择以下值之一
rect- 定义一个矩形区域circle- 定义一个圆形区域poly- 定义一个多边形区域default- 定义整个区域
您还必须定义一些坐标才能将可点击区域放置在图像上。
Shape=“rect”
shape="rect" 的坐标成对出现,一对用于 x 轴,一对用于 y 轴。
所以,坐标 34,44 位于距离左边距 34 像素和距离顶部 44 像素的位置
坐标 270,350 位于距离左边距 270 像素和距离顶部 350 像素的位置

现在我们有足够的数据来创建一个可点击的矩形区域
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Shape=“circle”
要添加圆形区域,请先找到圆心的坐标
337,300
然后指定圆的半径
44 像素
现在您有足够的数据来创建一个可点击的圆形区域
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Shape=“poly”
shape="poly" 包含多个坐标点,这些点构成由直线(多边形)形成的形状。
这可以用来创建任何形状。
比如一个可颂形状!
我们如何让下图的可颂饼成为可点击的链接?

我们必须找到可颂饼所有边缘的 x 和 y 坐标

坐标成对出现,一对用于 x 轴,一对用于 y 轴
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
这是变得可点击并将用户发送到页面 “croissant.htm” 的区域

图像映射和 JavaScript
可点击区域也可以触发 JavaScript 函数。
在 <area> 元素中添加 click 事件来执行 JavaScript 函数
在这里,我们使用 onclick 属性在区域被点击时执行 JavaScript 函数 <map name="workmap"> <area shape="circle" coords="337,300,44" href="coffee.htm">Chapter Summary
使用 HTML
<map>元素定义图像映射使用 HTML
<area>元素定义图像映射中的可点击区域使用
<img>元素的 HTMLusemap属性指向一个图像映射
HTML 背景图片
几乎任何 HTML 元素都可以指定背景图片。
HTML 元素的背景图片
要为 HTML 元素添加背景图片,请使用 HTML 的 style 属性和 CSS 的 background-image 属性。
为 HTML 元素添加背景图片 <p style="background-image: url('img_girl.jpg');">您也可以在 <head> 部分的 <style> 元素中指定背景图片。
在 <style> 元素中指定背景图片 <style> p { background-image: url('img_girl.jpg'); } </style>页面背景图片
如果您想让整个页面都有背景图片,则必须在 <body> 元素上指定背景图片。
为整个页面添加背景图片 <style> body { background-image: url('img_girl.jpg'); } </style>背景重复
如果背景图片比元素小,图片将水平和垂直地重复自身,直到到达元素的末尾。
<style> body { background-image: url('example_img_girl.jpg'); } </style>要避免背景图片重复,请将 background-repeat 属性设置为 no-repeat。
<style> body { background-image: url('example_img_girl.jpg'); background-repeat: no-repeat; } </style>背景覆盖
如果您希望背景图片覆盖整个元素,可以将 background-size 属性设置为 cover.。
此外,为了确保整个元素始终被覆盖,请将 background-attachment 属性设置为 fixed:。
这样,背景图片将覆盖整个元素,而不会拉伸(图片将保持其原始比例)。
<style> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } </style>背景拉伸
如果您希望背景图片拉伸以适应整个元素,可以将 background-size 属性设置为 100% 100%。
尝试调整浏览器窗口的大小,您会看到图片会拉伸,但始终覆盖整个元素。
<style> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } </style>了解更多 CSS
从上面的示例中,您已经了解到背景图片可以通过 CSS 的 background 属性进行样式设置。
要了解更多关于 CSS background 属性的信息,请学习我们的 CSS 背景教程。
HTML <picture> 元素
HTML <picture> 元素允许您为不同的设备或屏幕尺寸显示不同的图片。

HTML <picture> 元素
HTML <picture> 元素为 Web 开发人员提供了更灵活的指定图像资源的方式。
该 <picture> 元素包含一个或多个 <source> 元素,每个元素都通过 srcset 属性引用不同的图像。这样,浏览器就可以选择最适合当前视图和/或设备的图像。
每个 <source> 元素都有一个 media 属性,该属性定义了何时图像最合适。
为不同屏幕尺寸显示不同图片 <picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg"> </picture>
**注意:**始终将 <img> 元素作为 <picture> 元素的最后一个子元素。不支持 <picture> 元素的浏览器,或者没有 <source> 标签匹配时,浏览器将使用 <img> 元素。
何时使用 Picture 元素
该 <picture> 元素有两个主要用途:
1. 带宽
如果您使用小屏幕或设备,则无需加载大图像文件。浏览器将使用第一个具有匹配属性值的 <source> 元素,并忽略任何后续元素。
2. 格式支持
某些浏览器或设备可能不支持所有图像格式。通过使用 <picture> 元素,您可以添加所有格式的图像,浏览器将使用它识别的第一个格式,并忽略任何后续元素。
浏览器将使用它识别的第一个图像格式 <picture> <source srcset="img_avatar.png"> <source srcset="img_girl.jpg"> <img src="img_beatles.gif" alt="Beatles" style="width:auto;"> </picture>
**注意:**浏览器将使用第一个具有匹配属性值的 <source> 元素,并忽略任何后续的 <source> 元素。
HTML 网站图标
网站图标是一个显示在浏览器选项卡中页面标题旁边的小图像。
如何在 HTML 中添加网站图标
您可以选择任何您喜欢的图像作为您的网站图标。您也可以在类似 https://www.favicon.cc 这样的网站上创建自己的网站图标。
提示: 网站图标是一个小图像,所以它应该是一个对比度高且简单的图像。
网站图标图像会显示在浏览器选项卡中页面标题的左侧,如下所示:
![]()
要为您的网站添加网站图标,请将您的网站图标图像保存在 Web 服务器的根目录中,或者在根目录中创建一个名为 images 的文件夹,并将您的网站图标图像保存在该文件夹中。网站图标图像的常用名称是 “favicon.ico”。
接下来,在您的 “index.html” 文件中,在 <title> 元素之后,添加一个 <link> 元素,如下所示:
<!DOCTYPE html> <html> <head> <title>我的页面标题</title> <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html>
现在,保存 “index.html” 文件并在浏览器中重新加载。您的浏览器选项卡现在应该会在页面标题的左侧显示您的网站图标图像。
网站图标文件格式支持
下表显示了网站图标图像的文件格式支持:
浏览器 ICO PNG GIF JPEG SVG
Edge 是 是 是 是 是 Chrome 是 是 是 是 是 Firefox 是 是 是 是 是 Opera 是 是 是 是 是 Safari 是 是 是 是 是
Chapter Summary
使用 HTML
<link>元素插入网站图标
HTML 页面标题
每个网页都应该有一个页面标题来描述页面的含义。
<title> 元素为您的页面添加标题
<!DOCTYPE html> <html> <head> <title>HTML 教程</title> </head> <body> 文档内容...... </body> </html>
标题显示在浏览器的标题栏中

标题应描述页面的内容和含义。
页面标题对于搜索引擎优化 (SEO) 非常重要。搜索引擎算法使用该文本来决定在搜索结果中列出页面的顺序。
<title> 元素
定义浏览器工具栏中的标题
当页面添加到收藏夹时提供页面的标题
在搜索引擎结果中显示页面标题
因此,请尽量使标题尽可能准确和有意义!
HTML 表格
HTML 表格允许 Web 开发者将数据排列成行和列。
Company(公司) 联系 Country
Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Laughing Bacchus Winecellars Yoshi Tannamuri 加拿大 Magazzini Alimentari Riuniti Giovanni Rovelli Italy
定义一个 HTML 表格
HTML 表格由行中的单元格和列组成。
一个简单的 HTML 表格 <table> <tr> <th>公司</th> <th>联系人</th> <th>国家</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table>
表格单元格
每个表格单元格由 <td> 和 </td> 标签定义。
td 代表表格数据 (table data)。
介于 <td> 和 </td> 之间的所有内容是表格单元格的内容。
<table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> </table>
注意: 表格单元格可以包含各种 HTML 元素:文本、图片、列表、链接、其他表格等。
表格行
每一行表格都以 <tr> 开始,以 </tr> 结束。
tr 代表表格行 (table row)。
<table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table>
您可以在一个表格中包含任意多行;只需确保每一行的单元格数量相同。
注意: 有时一行可以比另一行少或多单元格。您将在后面的章节中学习相关知识。
表格标题
有时您希望您的单元格是表格的标题单元格。在这种情况下,请使用 <th> 标签而不是 <td> 标签。
th 代表表格标题 (table header)。
将第一行设为表格标题单元格 <table> <tr> <th>Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table>
默认情况下,<th> 元素中的文本是粗体且居中的,但您可以使用 CSS 更改它。
HTML 表格边框
HTML 表格可以具有不同样式和形状的边框。
如何添加边框
要添加边框,请在 table、th 和 td 元素上使用 CSS border 属性。
table, th, td { border: 1px solid black; }合并表格边框
要避免出现上面示例中的双重边框,请将 CSS border-collapse 属性设置为 collapse。
这将使边框合并为单个边框。
table, th, td { border: 1px solid black; border-collapse: collapse; }样式化表格边框
如果为每个单元格设置背景色,并将边框设置为白色(与文档背景色相同),则会产生边框不可见的现象。
table, th, td { border: 1px solid white; border-collapse: collapse; } th, td { background-color: #96D4D4; }圆角表格边框
使用 border-radius 属性,边框将获得圆角
table, th, td { border: 1px solid black; border-radius: 10px; }通过从 CSS 选择器中省略 table 来跳过表格周围的边框。
th, td { border: 1px solid black; border-radius: 10px; }虚线表格边框
使用 border-style 属性,您可以设置边框的外观。
允许的值如下:
dotted(有斑点的)dashed(虚线的)solid(牢固的)double(双重的)groove(凹槽)ridge(隆起)inset(嵌入)outset(包帖)none(没有)hidden(隐藏)
th, td { border-style: dotted; }边框颜色
使用 border-color 属性,您可以设置边框的颜色。
th, td { border-color: #96D4D4; }HTML 表格大小
HTML 表格可以为每一列、每一行或整个表格设置不同的尺寸。
使用 style 属性和 width 或 height 属性来指定表格、行或列的大小。
HTML 表格宽度
要设置表格的宽度,请在 <table> 元素上添加 style 属性
将表格宽度设置为 100% <table style="width:100%"> <tr> <th>名字</th> <th>姓氏</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
**注意:**使用百分比作为宽度的尺寸单位意味着该元素相对于其父元素(在此例中为 <body> 元素)的宽度。
HTML 表格列宽
要设置特定列的大小,请在 <th> 或 <td> 元素上添加 style 属性
将第一列的宽度设置为 70% <table style="width:100%"> <tr> <th style="width:70%">Firstname</th> <th>姓氏</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
HTML 表格行高
要设置特定行的高度,请在表格行元素上添加 style 属性
将第二行的高度设置为 200 像素 <table style="width:100%"> <tr> <th>名字</th> <th>姓氏</th> <th>年龄</th> </tr> <tr style="height:200px"> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
HTML 表头
HTML 表可以为每一列或每一行,或者多列/多行设置表头。
HTML 表头
表头是通过 th 元素定义的。每个 th 元素代表一个表单元格。
<table> <tr> <th>名字</th> <th>姓氏</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
垂直表头
要将第一列用作表头,请将每行中的第一个单元格定义为 <th> 元素
<table> <tr> <th>名字</th> <td>Jill</td> <td>Eve</td> </tr> <tr> <th>姓氏</th> <td>Smith</td> <td>Jackson</td> </tr> <tr> <th>年龄</th> <td>94</td> <td>50</td> </tr> </table>
对齐表头
默认情况下,表头是粗体居中的
要将表头左对齐,请使用 CSS 的 text-align 属性
th { text-align: left; }多列表头
你可以有一个跨越两列或更多列的表头。
要做到这一点,请在 <th> 元素上使用 colspan 属性
<table> <tr> <th colspan="2">姓名</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
你将在 表 colspan & rowspan 章节学习更多关于 colspan 和 rowspan 的知识。
表标题
你可以添加一个作为整个表格标题的标题。
要为表格添加标题,请使用 <caption> 标签
<table style="width:100%"> <caption>每月储蓄</caption> <tr> <th>月份</th> <th>储蓄</th> </tr> <tr> <td>一月</td> <td>$100</td> </tr> <tr> <td>二月</td> <td>50 美元</td> </tr> </table>
注意: <caption> 标签应插入在 <table> 标签之后。
HTML 表格内边距和间距
HTML 表格可以调整单元格内的内边距,以及单元格之间的间距。
HTML 表格 - 单元格内边距
单元格内边距是单元格边缘和单元格内容之间的空间。
默认情况下,内边距设置为 0。
要在表格单元格中添加内边距,请使用 CSS padding 属性。
th, td { padding: 15px; }仅在内容上方添加内边距,请使用 padding-top 属性。
其他侧边则使用 padding-bottom、padding-left 和 padding-right 属性。
th, td { padding-top: 10px; padding-bottom: 20px; padding-left: 30px; padding-right: 40px; }HTML 表格 - 单元格间距
单元格间距是每个单元格之间的空间。
默认情况下,间距设置为 2 像素。
要更改表格单元格之间的间距,请在 table 元素上使用 CSS border-spacing 属性。
table { border-spacing: 30px; }HTML 表格的 Colspan & Rowspan
HTML 表格可以包含跨越多个行和/或列的单元格。
HTML 表格 - Colspan
要使一个单元格跨越多个列,请使用 colspan 属性
<table> <tr> <th colspan="2">姓名</th> <th>年龄</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>43</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>57</td> </tr> </table>
注意: colspan 属性的值表示要跨越的列数。
HTML 表格 - Rowspan
要使一个单元格跨越多个行,请使用 rowspan 属性
<table> <tr> <th>姓名</th> <td>Jill</td> </tr> <tr> <th rowspan="2">电话</th> <td>555-1234</td> </tr> <tr> <td>555-8745</td> </tr> </table>
注意: rowspan 属性的值表示要跨越的行数。
HTML 表格样式
使用 CSS 使您的表格更美观。
HTML 表格 - 斑马条纹
如果为每隔一行表格行添加背景颜色,您将获得漂亮的斑马条纹效果。
要为每隔一个表格行元素设置样式,请使用 :nth-child(even) 选择器,如下所示:
tr:nth-child(even) { background-color: #D6EEEE; }注意: 如果使用 (odd) 而不是 (even),则样式将应用于第 1、3、5 行等,而不是第 2、4、6 行等。
HTML 表格 - 垂直斑马条纹
要创建垂直斑马条纹,请为每隔一个列设置样式,而不是每隔一行。
如下为表格数据元素设置 :nth-child(even):
td:nth-child(even), th:nth-child(even) { background-color: #D6EEEE; }注意: 如果要同时为表头和常规表格单元格设置样式,请将 :nth-child() 选择器同时应用于 th 和 td 元素。
组合垂直和水平斑马条纹
您可以组合以上两个示例的样式,这样每隔一行和每隔一列都会有条纹。
如果使用透明颜色,您将获得重叠效果。
使用 rgba() 颜色指定颜色的透明度
tr:nth-child(even) { background-color: rgba(150, 212, 212, 0.4); } th:nth-child(even),td:nth-child(even) { background-color: rgba(150, 212, 212, 0.4); }水平分隔线
如果仅在每行表格行的底部指定边框,您将得到一个带有水平分隔线的表格。
为所有 tr 元素添加 border-bottom 属性以获得水平分隔线
鼠标悬停表格
使用 tr 上的 :hover 选择器在鼠标悬停时突出显示表格行
tr:hover {background-color: #D6EEEE;}
HTML 表格 <colgroup> 标签
<colgroup> 标签用于设置表格中特定列的样式。
HTML 表格 <colgroup> 标签
如果要为表格的前两列设置样式,请使用 <colgroup> 和 <col> 标签。
<colgroup> 标签应作为列规格的容器。
每个组由 <col> 标签指定。
span 属性指定了多少列将应用样式。
style 属性指定了要为列设置的样式。
注意: colgroup 可用的 CSS 属性非常有限。
<table> <colgroup> <col span="2" style="background-color: #D6EEEE"> </colgroup> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> ...
注意: <colgroup> 标签必须是 <table> 元素的子元素,并且应放在任何其他表格元素(如 <thead>、<tr>、<td> 等)之前,但在 <caption> 元素(如果存在)之后。
允许的 CSS 属性
只有非常有限的 CSS 属性允许在 colgroup 中使用
width 属性 visibility 属性 background 属性 border 属性
所有其他 CSS 属性都将对您的表格无效。
多个 Col 元素
如果要为更多列设置不同的样式,请在 <colgroup> 中使用更多 <col> 元素
<table> <colgroup> <col span="2" style="background-color: #D6EEEE"> <col span="3" style="background-color: pink"> </colgroup> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> ...
空的 Colgroups
如果要设置表格中间列的样式,请在前面的列之前插入一个”空”的 <col> 元素(不带样式)
<table> <colgroup> <col span="3"> <col span="2" style="background-color: pink"> </colgroup> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> ...
隐藏列
您可以使用 visibility: collapse 属性隐藏列
<table> <colgroup> <col span="2"> <col span="3" style="visibility: collapse"> </colgroup> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> ...
HTML 列表
HTML 列表允许 Web 开发人员将一组相关的项目分组到列表中。
无序 HTML 列表
项目
项目
项目
项目
有序 HTML 列表
First item
Second item
Third item
Fourth item
无序 HTML 列表
无序列表以 <ul> 标签开头。每个列表项以 <li> 标签开头。
默认情况下,列表项将用项目符号(小的黑点)标记。
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
有序 HTML 列表
有序列表以 <ol> 标签开头。每个列表项以 <li> 标签开头。
默认情况下,列表项将用数字标记。
<ol> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol>
HTML 定义列表
HTML 也支持定义列表。
定义列表是术语列表,其中包含每个术语的描述。
<dl>(Definition List) 标签定义描述列表,<dt>(Definition Term) 标签定义术语(名称),<dd>(Definition Description) 标签描述每个术语。
<dl> <dt>咖啡</dt> <dd>- 黑色热饮</dd> <dt>牛奶</dt> <dd>- 白色冷饮</dd> </dl>
HTML 无序列表
HTML <ul> 标签定义了一个无序(项目符号)列表。
无序 HTML 列表
无序列表以 <ul> 标签开始。每个列表项以 <li> 标签开始。
默认情况下,列表项将用项目符号(小黑圆圈)标记。
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
无序 HTML 列表 - 选择列表项标记
CSS list-style-type 属性用于定义列表项标记的样式。它可以有以下值之一:
值 描述
disc 将列表项标记设置为项目符号(默认) circle 将列表项标记设置为圆圈 square 将列表项标记设置为正方形 none 列表项将不被标记
<ul style="list-style-type:disc;"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
<ul style="list-style-type:circle;"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
<ul style="list-style-type:square;"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
<ul style="list-style-type:none;"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
嵌套 HTML 列表
列表可以嵌套(列表内部的列表)
<ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>牛奶</li> </ul>
**注意:**列表项(<li>)可以包含新的列表以及其他 HTML 元素,例如图像和链接等。
使用 CSS 的水平列表
HTML 列表可以通过 CSS 以多种不同方式进行样式设置。
一种流行的方式是水平样式化列表,以创建导航菜单
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } </style> </head> <body> <ul> <li><a href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系我们</a></li> <li><a href="#about">关于</a></li> </ul> </body> </html>Chapter Summary
使用 HTML
<ul>元素定义无序列表使用 CSS
list-style-type属性定义列表项标记使用 HTML
<li>元素定义列表项列表可以嵌套
列表项可以包含其他 HTML 元素
使用 CSS 属性
float:left以水平方式显示列表
HTML 有序列表
<ol> 标签定义一个有序列表。有序列表可以是数字或字母的
有序 HTML 列表
有序列表以 <ol> 标签开始。每个列表项以 <li> 标签开始。
列表项默认会用数字标记
Chapter Summary
块级元素总是从新行开始,并占据所有可用宽度
行内元素不会从新行开始,并且只占据必要的宽度
<div>元素是块级元素,通常用作其他 HTML 元素的容器<span>元素是一个行内容器,用于标记文本的一部分或文档的一部分
Chapter Summary
HTML
class属性为元素指定一个或多个类名。类名用于 CSS 和 JavaScript 来选择和访问特定元素。
class属性可用于任何 HTML 元素。类名区分大小写。
不同的 HTML 元素可以指向同一个类名。
JavaScript 可以使用
getElementsByClassName()方法来访问具有特定类名的元素。
Chapter Summary
The
idattribute is used to specify a unique id for an HTML element (id 属性用于为 HTML 元素指定一个唯一的 id。)The value of the
idattribute must be unique within the HTML document (id 属性的值在 HTML 文档中必须是唯一的。)The
idattribute is used by CSS and JavaScript to style/select a specific element (id 属性被 CSS 和 JavaScript 用于样式化/选择特定元素。)The value of the
idattribute is case sensitive (id 属性的值区分大小写。)The
idattribute is also used to create HTML bookmarks (id 属性也用于创建 HTML 书签。)JavaScript 可以使用
getElementById()方法访问具有特定 ID 的元素。
Chapter Summary
HTML
<iframe>标签定义了一个内联框架src属性定义了要嵌入的页面的 URL始终包含
title属性(用于屏幕阅读器)height和width属性指定了 iframe 的大小使用
border:none;来移除 iframe 周围的边框
HTML JavaScript
JavaScript 使 HTML 页面更具动态性和交互性。
HTML <script> 标签
HTML <script> 标签用于定义客户端脚本(JavaScript)。
元素 <script> 要么包含脚本语句,要么通过 src 属性指向一个外部脚本文件。
JavaScript 的常见用途包括图像处理、表单验证和动态内容更改。
要选择一个 HTML 元素,JavaScript 通常使用 document.getElementById() 方法。
此 JavaScript 示例将”Hello JavaScript!“写入 id 为”demo”的 HTML 元素中。
< script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>JavaScript 简介
以下是一些 JavaScript 可以做什么的示例
JavaScript 可以更改内容 document.getElementById("demo").innerHTML = "Hello JavaScript!";JavaScript 可以更改样式 document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow";JavaScript 可以更改属性 document.getElementById("image").src = "picture.gif";HTML <noscript> 标签
HTML <noscript> 标签为禁用了浏览器脚本的用户或不支持脚本的浏览器用户定义了备用内容。
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript>抱歉,您的浏览器不支持 JavaScript!</noscript>HTML 文件路径
文件路径描述了网站文件夹结构中文件的位置。
文件路径示例
路径 描述
<img src="picture.jpg">{=html} “picture.jpg”文件与当前页面位于同一文件夹中
<img src="images/picture.jpg">{=html} “picture.jpg”文件位于当前文件夹下的 images 文件夹中
<img src="/images/picture.jpg">{=html} “picture.jpg”文件位于当前网站根目录下的 images 文件夹中
<img src="../picture.jpg">{=html} “picture.jpg”文件位于当前文件夹上一级文件夹中
HTML 文件路径
文件路径描述了网站文件夹结构中文件的位置。
文件路径用于链接到外部文件,例如:
网页
图片
样式表
JavaScripts
绝对文件路径
绝对文件路径是文件的完整 URL
<img src="https://w3schools.org.cn/images/picture.jpg" alt="Mountain">
相对文件路径
相对文件路径是指相对于当前页面的文件。
在以下示例中,文件路径指向位于当前网站根目录下的 images 文件夹中的文件
<img src="/images/picture.jpg" alt="Mountain">
在以下示例中,文件路径指向位于当前文件夹下的 images 文件夹中的文件
<img src="images/picture.jpg" alt="Mountain">
在以下示例中,文件路径指向位于当前文件夹上一级文件夹下的 images 文件夹中的文件
<img src="../images/picture.jpg" alt="Mountain">
最佳实践
最好使用相对文件路径(如果可能)。
使用相对文件路径时,您的网页将不会与您当前的基础 URL 绑定。所有链接都可以在您自己的计算机(localhost)以及您当前和未来的公共域上正常工作。
HTML - Head 元素
HTML <head> 元素是以下元素的容器: <title>、<style>、<meta>、<link>、<script> 和 <base>。
HTML <head> 元素
HTML 元数据是关于 HTML 文档的数据。元数据不会显示。
元数据通常定义文档标题、字符集、样式、脚本和其他元信息。
HTML <title> 元素
<title> 元素定义文档的标题。标题必须是纯文本,并且显示在浏览器的标题栏或页面的选项卡中。
HTML 文档需要 <title> 元素!
页面标题的内容对搜索引擎优化(SEO)非常重要!搜索引擎算法使用页面标题来决定在搜索结果中列出页面的顺序。
<title> 元素
定义浏览器工具栏中的标题
当页面添加到收藏夹时提供页面的标题
在搜索引擎结果中为页面显示标题
因此,请尽量使标题尽可能准确和有意义!
一个简单的 HTML 文档
<!DOCTYPE html> <html> <head> <title>一个有意义的页面标题</title> </head> <body> 文档内容...... </body> </html>
HTML <style> 元素
<style> 元素用于定义单个 HTML 页面的样式信息。
<style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style>HTML <link> 元素
<link> 元素定义当前文档与外部资源之间的关系。
<link> 标签通常用于链接到外部样式表。
<link rel="stylesheet" href="mystyle.css">
HTML <meta> 元素
<meta> 元素通常用于指定字符集、页面描述、关键字、文档作者和视口设置。
元数据不会在页面上显示,但会被浏览器(如何显示内容或重新加载页面)、搜索引擎(关键字)和其他 Web 服务使用。
定义使用的字符集
<meta charset="UTF-8">
为搜索引擎定义关键字
<meta name="keywords" content="HTML, CSS, JavaScript">
定义您的网页的描述
<meta name="description" content="Free Web tutorials">
定义页面的作者
<meta name="author" content="John Doe">
每 30 秒刷新文档
<meta http-equiv="refresh" content="30">
设置视口,使您的网站在所有设备上看起来都很好
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> 标签示例
<meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe">
设置视口
视口是用户可见的网页区域。它随设备而异 - 在手机上比在电脑屏幕上小。
您应该在所有网页中包含以下 <meta> 元素
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这会给浏览器指令,告知如何控制页面的尺寸和缩放。
width=device-width 部分将页面的宽度设置为与设备的屏幕宽度一致(这将因设备而异)。
initial-scale=1.0 部分设置了浏览器首次加载页面时的初始缩放级别。
这是一个没有视口 meta 标签的网页示例,以及同一个网页有视口 meta 标签的示例。
**提示:**如果您正在用手机或平板电脑浏览此页面,可以点击下面的两个链接来查看差异。
HTML <script> 元素
<script>元素用于定义客户端 JavaScript。
以下 JavaScript 将”Hello JavaScript!“写入 ID 为”demo”的 HTML 元素中。
<script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script>HTML <base> 元素
<base> 元素为页面中的所有相对 URL 指定基本 URL 和/或目标。
<base> 标签必须包含 href 或 target 属性,或两者都包含。
文档中只能有一个 <base> 元素!
为页面上的所有链接指定一个默认 URL 和默认目标 <head> <base href="https://w3schools.org.cn/" target="_blank"> </head> <body> <img src="images/stickman.gif" width="24" height="39" alt="Stickman"> <a href="tags/tag_base.asp">HTML base 标签</a> </body>
Chapter Summary
The
<head>element is a container for metadata (data about data)The
<head>element is placed between the<html>tag and the<body>tagThe
<title>element is required and it defines the title of the documentThe
<style>element is used to define style information for a single document<link>标签通常用于链接到外部样式表。The
<meta>element is typically used to specify the character set, page description, keywords, author of the document, and viewport settingsThe
<script>element is used to define client-side JavaScriptsThe
<base>element specifies the base URL and/or target for all relative URLs in a page
HTML 布局元素和技术
网站通常以多列显示内容(像杂志或报纸)。
HTML 布局元素
HTML 有几个语义元素,用于定义网页的不同部分
<header>- 定义文档或章节的头部<nav>- 定义一组导航链接<section>- 定义文档中的一个章节<article>- 定义独立、自包含的内容<aside>- 定义内容之外的内容(如侧边栏)<footer>- 定义文档或章节的页脚<details>- 定义用户可以按需打开和关闭的附加详细信息<summary>- 定义<details>元素的标题
HTML 布局技术
有四种不同的技术可以创建多列布局。每种技术都有其优缺点
CSS 框架
CSS float 属性
CSS flexbox
CSS grid
CSS 框架
如果您想快速创建布局,可以使用 CSS 框架,例如 W3.CSS 或 Bootstrap。
CSS 浮动布局
使用 CSS float 属性进行整个网页布局很常见。浮动很容易学习——您只需要记住 float 和 clear 属性的工作原理。**缺点:**浮动元素与文档流绑定,这可能会损害灵活性。在我们的 CSS 浮动与清除章节中了解更多关于浮动的信息。
CSS Flexbox 布局
使用 flexbox 可确保在页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素的行为可预测。在我们的 CSS Flexbox 章节中了解更多关于 flexbox 的信息。
CSS Grid 布局
CSS 网格布局模块提供了一个基于网格的布局系统,包含行和列,使网页设计更容易,而无需使用浮动和定位。
HTML 响应式网页设计
响应式网页设计是为了让网页在所有设备上都能良好显示!
响应式网页设计将自动适应不同的屏幕尺寸和视口。

什么是响应式网页设计?
响应式网页设计是使用 HTML 和 CSS 来自动调整、隐藏、收缩或放大网站,使其在所有设备(桌面、平板电脑和手机)上看起来都很棒。
设置视口
要创建响应式网站,请在所有网页中添加以下 <meta> 标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这将设置页面的视口,它将为浏览器提供关于如何控制页面尺寸和缩放的指示。
响应式图片
响应式图片是可以很好地适应任何浏览器尺寸的图片。
使用 width 属性
如果 CSS width 属性设置为 100%,则图像将是响应式的,并会向上和向下缩放。
<img src="img_girl.jpg" style="width:100%;">
请注意,在上面的示例中,图像可以放大到大于其原始尺寸。在许多情况下,更好的解决方案是改用 max-width 属性。
使用 max-width 属性
如果 max-width 属性设置为 100%,图像将向下缩放(如果需要),但绝不会放大到大于其原始尺寸。
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
根据浏览器宽度显示不同的图片
HTML <picture> 元素允许您为不同的浏览器窗口大小定义不同的图像。
<picture> <source srcset="img_smallflower.jpg" media="(max-width: 600px)"> <source srcset="img_flowers.jpg" media="(max-width: 1500px)"> <source srcset="flowers.jpg"> <img src="img_smallflower.jpg" alt="Flowers"> </picture>
响应式文本大小
文本大小可以使用”vw”单位设置,表示”视口宽度”。
这样,文本大小将跟随浏览器窗口的大小。
<h1 style="font-size:10vw">Hello World</h1>
视口是浏览器窗口的大小。1vw = 视口宽度的 1%。如果视口宽 50 厘米,则 1vw 为 0.5 厘米。
媒体查询
除了调整文本和图像大小外,在响应式网页中还可以普遍使用媒体查询。
使用媒体查询,您可以为不同的浏览器尺寸定义完全不同的样式。
响应式网页 - 完整示例
响应式网页应在大桌面屏幕和小手机屏幕上看起来都很棒。
响应式网页设计 - 框架
所有流行的 CSS 框架都支持响应式设计。
它们是免费的,并且易于使用。
W3.CSS
W3.CSS 是一个现代化的 CSS 框架,默认支持桌面、平板电脑和移动设备设计。
W3.CSS 比类似的 CSS 框架更小、更快。
W3.CSS 设计为不依赖 jQuery 或任何其他 JavaScript 库。
<!DOCTYPE html> <html> <head> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css"> </head> <body> <div class="w3-container w3-green"> <h1>W3Schools 演示</h1> <p>调整此响应式页面大小!</p> </div> <div> <div> <h2>伦敦</h2> <p>伦敦是英格兰的首都。</p> <p>它是英国人口最多的城市,</p> <p>都会区超过 1300 万居民。</p> </div> <div> <h2>巴黎</h2> <p>巴黎是法国的首都。</p> <p>巴黎地区是欧洲最大的聚居地之一,</p> <p>人口超过 1200 万。</p> </div> <div> <h2>东京</h2> <p>东京是日本的首都。</p> <p>它是大东京地区的核心,</p> <p>也是世界上人口最多的都会区。</p> </div> </div> </body> </html>
Bootstrap
另一个流行的 CSS 框架是 Bootstrap
<!DOCTYPE html> <html> <head> <title>Bootstrap 5 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid p-5 bg-primary text-white text-center"> <h1>我的第一个 Bootstrap 页面</h1> <p>调整此响应式页面大小以查看效果!</p> </div> <div class="container mt-5"> <div> <div> <h3>列 1</h3> <p>Lorem ipsum...</p> </div> <div> <h3>列 2</h3> <p>Lorem ipsum...</p> </div> <div> <h3>列 3</h3> <p>Lorem ipsum...</p> </div> </div> </div>
HTML 计算机代码元素
HTML 包含几个用于定义用户输入和计算机代码的元素。
<code> x = 5; y = 6; z = x + y; </code>
HTML <kbd> 用于键盘输入
HTML <kbd> 元素用于定义键盘输入。其内容将以浏览器默认的等宽字体显示。
在文档中将一些文本定义为键盘输入 <p>通过按 <kbd>Ctrl + S</kbd> 来保存文档</p> 结果 通过按 Ctrl + S 来保存文档
HTML <samp> 用于程序输出
HTML <samp> 元素用于定义计算机程序的示例输出。其内容将以浏览器默认的等宽字体显示。
在文档中将一些文本定义为计算机程序的示例输出 <p>我的计算机消息:</p> <p><samp>文件未找到。<br>按 F1 继续</samp></p> 结果 我的计算机消息 文件未找到。 按 F1 继续
HTML <code> 用于计算机代码
HTML <code> 元素用于定义一段计算机代码。其内容将以浏览器默认的等宽字体显示。
在文档中将一些文本定义为计算机代码 <code> x = 5; y = 6; z = x + y; </code> 结果 x = 5; y = 6; z = x + y;
请注意,<code> 元素不会保留额外的空格和换行符。
要解决此问题,可以将 <code> 元素放在 <pre> 元素内
<pre> <code> x = 5; y = 6; z = x + y; </code> </pre> 结果 x = 5; y = 6; z = x + y;
HTML <var>(variable) 用于变量
HTML <var> 元素用于定义编程或数学表达式中的变量。其内容通常以斜体显示。
在文档中将一些文本定义为变量 <p>三角形的面积是: 1/2 x <var>b</var> x <var>h</var>,其中 <var>b</var> 是底,<var>h</var> 是高。</p> 结果 三角形的面积是: 1/2 x b x h,其中 b 是底,h 是高。
Chapter Summary
<kbd>元素定义键盘输入<samp>元素定义计算机程序的示例输出<code>元素定义计算机代码<var>元素定义编程或数学表达式中的变量<pre>元素定义预格式化文本
HTML 语义元素
语义元素 = 具有含义的元素。
什么是语义元素?
语义元素能够清晰地向浏览器和开发者描述其含义。
非语义元素的例子: <div> 和 <span> - 它们不会告诉你任何关于其内容的信息。
语义元素的例子: <form>, <table>, 和 <article> - 它们清晰地定义了其内容。
HTML 中的语义元素
许多网站包含类似这样的 HTML 代码: <div id="nav"> <div> <div id="footer"> 来表示导航、页眉和页脚。
在 HTML 中,有一些语义元素可用于定义网页的不同部分:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>

HTML <section> 元素
<section> 元素定义文档中的一个节。
根据 W3C 的 HTML 文档:“一个 section 是内容的逻辑分组,通常包含一个标题。”
可以使用 <section> 元素的例子
章节
介绍
新闻项目
联系信息
一个网页通常可以分为介绍、内容和联系信息等部分。
文档中的两个 section <section> <h1>WWF</h1> <p>世界自然基金会(WWF)是一个致力于环境保护、研究和恢复的国际组织,前身为世界野生动物基金会。WWF 成立于 1961 年。</p> </section> <section> <h1>WWF 的熊猫标志</h1> <p>熊猫已成为 WWF 的象征。WWF 著名的熊猫标志源于一只名叫“奇奇”的熊猫,它在 WWF 成立的同年从北京动物园迁往伦敦动物园。</p> </section>
HTML <article> 元素
<article> 元素指定独立、完整的内容。
一篇 article 应该能够独立理解,并且可以与网站的其余部分分开分发。
可以使用 <article> 元素的例子
论坛帖子
博客文章
用户评论
产品卡片
报纸文章
三篇具有独立、完整内容的 article <article> <h2>Google Chrome</h2> <p>Google Chrome 是由 Google 开发的网络浏览器,于 2008 年发布。Chrome 是当今世界上最受欢迎的网络浏览器!</p> </article> <article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox 是由 Mozilla 开发的开源网络浏览器。自 2018 年 1 月以来,Firefox 一直是第二受欢迎的网络浏览器。</p> </article> <article> <h2>Microsoft Edge</h2> <p>Microsoft Edge 是由 Microsoft 开发的网络浏览器,于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p> </article>
使用 CSS 样式化 <article> 元素 <html> <head> <style> .all-browsers { margin: 0; padding: 5px; background-color: lightgray; } .all-browsers > h1, .browser { margin: 10px; padding: 5px; } .browser { background: white; } .browser > h2, p { margin: 4px; font-size: 90%; } </style> </head> <body> <article> <h1>最受欢迎的浏览器</h1> <article> <h2>Google Chrome</h2> <p>Google Chrome 是由 Google 开发的网络浏览器,于 2008 年发布。Chrome 是当今世界上最受欢迎的网络浏览器!</p> </article> <article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox 是由 Mozilla 开发的开源网络浏览器。自 2018 年 1 月以来,Firefox 一直是第二受欢迎的网络浏览器。</p> </article> <article> <h2>Microsoft Edge</h2> <p>Microsoft Edge 是由 Microsoft 开发的网络浏览器,于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p> </article> </article> </body> </html>嵌套 <article> 在 <section> 中或反之?
<article> 元素指定独立、完整的内容。
<section> 元素定义文档中的一个节。
我们可以使用这些定义来决定如何嵌套这些元素吗?不行,我们不能!
因此,你会发现 HTML 页面中有包含 <article> 元素的 <section> 元素,以及包含 <section> 元素的 <article> 元素。
HTML <header> 元素
<header> 元素代表一个容器,用于放置介绍性内容或一组导航链接。
一个 <header> 元素通常包含
一个或多个标题元素 (
<h1> - <h6>)logo 或图标
作者信息
**注意:**一个 HTML 文档中可以包含多个 <header> 元素。但是,<header> 不能放在 <footer>、<address> 或另一个 <header> 元素内。
一个 <article> 的页面: <article> <header> <h1>WWF 做什么?</h1> <p>WWF 的使命:</p> </header> <p>WWF 的使命是阻止我们星球自然环境的退化, 并建立一个人类与自然和谐相处的未来。</p> </article>
HTML <footer> 元素
<footer> 元素为文档或 section 定义页脚。
一个 <footer> 元素通常包含
作者信息
版权信息
联系信息
站点地图
返回顶部链接
相关文档
一个文档中可以包含多个 <footer> 元素。
文档中的一个页脚 section <footer> <p>作者:Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p> </footer>
HTML <nav> 元素
<nav> 元素定义了一组导航链接。
注意,文档中并非所有链接都应该放在 <nav> 元素内。 <nav> 元素仅用于主要的导航链接块。
浏览器,例如用于残障用户的屏幕阅读器,可以使用此元素来判断是否应省略此内容的初始渲染。
一组导航链接 <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/"> JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
HTML <aside> 元素
<aside> 元素定义了与它所在内容相关的一些附加内容(例如侧边栏)。
<aside> 的内容应与周围内容间接相关。
显示一些与所在内容相关联的附加内容 <p>今年夏天,我的家人和我参观了 Epcot 中心。天气很好,Epcot 棒极了!我度过了一个和家人在一起的美好夏天!</p> <aside> <h4>Epcot 中心</h4> <p>Epcot 是华特迪士尼世界度假区的一个主题公园,提供激动人心的景点、国际展馆、屡获殊荣的烟花表演和季节性特别活动。</p> </aside>
使用 CSS 样式化 <aside> 元素 <html> <head> <style> aside { width: 30%; padding-left: 15px; margin-left: 15px; float: right; font-style: italic; background-color: lightgray; } </style> </head> <body> <p>今年夏天,我的家人和我参观了 Epcot 中心。天气很好,Epcot 棒极了!我度过了一个和家人在一起的美好夏天!</p> <aside> <p>Epcot 中心是华特迪士尼世界度假区的一个主题公园,提供激动人心的景点、国际展馆、屡获殊荣的烟花表演和季节性特别活动。</p> </aside> <p>今年夏天,我的家人和我参观了 Epcot 中心。天气很好,Epcot 棒极了!我度过了一个和家人在一起的美好夏天!</p> <p>今年夏天,我的家人和我参观了 Epcot 中心。天气很好,Epcot 棒极了!我度过了一个和家人在一起的美好夏天!</p> </body> </html>HTML <figure> 和 <figcaption> 元素
标签指定自包含的内容,如插图、图表、照片、代码列表等。 根据 W3C 的说法:“语义 Web 允许数据在应用程序、企业和社区之间共享和重用。” 一致、干净、整洁的 HTML 代码更易于他人阅读和理解。 以下是一些创建良好 HTML 代码的指南和技巧。 始终将文档类型作为文档的第一行声明。 HTML 的正确文档类型是 HTML 允许在元素名称中混合使用大写和小写字母。 然而,我们建议使用小写元素名称,因为 混合大小写名称看起来不好 开发者通常使用小写名称 小写看起来更干净 小写更容易书写 在 HTML 中,您不必关闭所有元素(例如 然而,我们强烈建议关闭所有 HTML 元素,如下所示 HTML 允许在属性名称中混合使用大写和小写字母。 然而,我们建议使用小写属性名称,因为 混合大小写名称看起来不好 开发者通常使用小写名称 小写看起来更干净 小写更容易书写 HTML 允许属性值不带引号。 然而,我们建议引用属性值,因为 开发者通常引用属性值 带引号的值更容易阅读 如果值包含空格,您必须使用引号 始终为图像指定 另外,始终定义图像的 HTML 允许等号周围有空格。但无空格更容易阅读,并且能更好地将实体组合在一起。 使用 HTML 编辑器时,滚动查看 HTML 代码并不方便。 尽量避免过长的代码行。 不要随意添加空行、空格或缩进。 为了可读性,请添加空行来分隔大的或逻辑的代码块。 请添加两个空格的缩进。不要使用制表符。 页面标题的内容对搜索引擎优化 (SEO) 非常重要!搜索引擎算法使用页面标题来决定在搜索结果中对页面进行排序的顺序。 定义浏览器工具栏中的标题 当页面添加到收藏夹时提供页面的标题 在搜索引擎结果中显示页面的标题 因此,请尽量使标题尽可能准确和有意义: HTML 页面在没有 但是,我们强烈建议始终添加 省略 省略 HTML 浏览器会将 然而,我们建议使用 在 HTML 中,关闭空元素是可选的。 如果您期望 XML/XHTML 软件访问您的页面,请保留结束斜杠(/),因为它在 XML 和 XHTML 中是必需的。 您应该始终在 为了确保正确解释和正确的搜索引擎索引,语言和字符编码 视口是用户可见的网页区域。它随设备而异 - 在手机上比在电脑屏幕上小。 您应该在所有网页中包含以下 这会给浏览器指令,告知如何控制页面的尺寸和缩放。 这是一个没有视口 meta 标签的网页示例,以及同一个网页有视口 meta 标签的示例。 **提示:**如果您正在用手机或平板电脑浏览此页面,可以点击下面的两个链接来查看差异。 短注释应写在一行上,如下所示 跨越多行的长注释应这样写 为了便于观察,长注释应缩进两个空格。 链接到样式表时,请使用简单的语法( 短 CSS 规则可以压缩书写,如下所示 长 CSS 规则应分多行书写 将开括号放在选择器同一行 在开括号前使用一个空格 使用两个空格的缩进 在每个属性-值对后使用分号,包括最后一个 仅在值包含空格时才使用引号 将闭括号放在新行上,不带前导空格 加载外部脚本时,请使用简单的语法( 以下两个 JavaScript 语句会产生不同的结果 某些 Web 服务器(Apache、Unix)对文件名区分大小写:“london.jpg”不能访问为”London.jpg”。 其他 Web 服务器(Microsoft、IIS)不区分大小写:“london.jpg”可以访问为”London.jpg”。 如果您混合使用大写和小写,您必须注意这一点。 如果您从不区分大小写的服务器迁移到区分大小写的服务器,即使是小的错误也会破坏您的网站! 为避免这些问题,请始终使用小写文件名! HTML 文件应具有 .html 扩展名(.htm 也允许)。 CSS 文件应具有 .css 扩展名。 JavaScript 文件应具有 .js 扩展名。 .htm 和 .html 文件扩展名之间没有区别! 任何 Web 浏览器和 Web 服务器都会将两者视为 HTML。 当 URL 末尾未指定文件名时(例如”https://w3schools.org.cn/"),服务器会添加一个默认文件名,如"index.html"、"index.htm"、"default.html"或"default.htm"。 如果您的服务器仅配置了”index.html”作为默认文件名,则您的文件必须命名为”index.html”,而不是”default.html”。 但是,服务器可以配置多个默认文件名;通常您可以设置任意数量的默认文件名。 HTML 中的保留字符必须用实体替换 某些字符在 HTML 中是保留字符。 如果您在 HTML 文本中使用小于号 (<)(less than) 或大于号 (>) (greater than)符号,浏览器可能会将其与标签混淆。 &(ampersand)和 可以使用实体名称或实体编号来显示保留的 HTML 字符。 实体名称比实体编号更容易记住。 实体名称区分大小写。 发音符号是添加到字母上的”字形”。 某些发音符号,如重音符 ( ̀) 和锐音符 ( ́) 称为音符。 发音符号可以与字母数字字符结合使用,以生成页面中使用的字符集(编码)中不存在的字符。 以下是一些示例 您可以使用实体将键盘上不存在的符号或字母添加到 HTML 中。 上一章已经描述了 HTML 实体。 许多数学、技术和货币符号在普通键盘上并不存在。 要将此类符号添加到 HTML 页面,您可以使用符号的实体名称或实体编号(十进制或十六进制引用)。 颜文字是 UTF-8 字符集中的字符:???? ???? ???? 颜文字看起来像图片或图标,但实际上它们不是。 它们是来自 UTF-8 (Unicode) 字符集的字母(字符)。 UTF-8 覆盖了世界上几乎所有的字符和符号。 要正确显示 HTML 页面,网页浏览器必须知道页面使用的字符集。 这在 如果未指定,UTF-8 是 HTML 中的默认字符集。 许多 UTF-8 字符无法在键盘上输入,但始终可以使用数字(称为实体编号)显示它们 A 是 65 B 是 66 C 是 67 元素 字符 A、B 和 C 由数字 65、66 和 67 显示。 为了让浏览器理解您正在显示一个字符,您必须在实体编号前加上 &#,并在末尾加上 ;(分号)。 颜文字也是 UTF-8 字母表中的字符 ???? 是 128516 ???? 是 128525 ???? 是 128151 由于颜文字是字符,因此它们可以像 HTML 中的任何其他字符一样进行复制、显示和调整大小。 要正确显示 HTML 页面,Web 浏览器必须知道使用哪个字符集。 字符集在 HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集。 UTF-8 几乎涵盖了世界上所有的字符和符号! ASCII 是 Web 的第一个字符编码标准。它定义了可在 Internet 上使用的 128 个不同的字符 英文字母 (A-Z) 数字 (0-9) 特殊字符,如 ! $ + - ( ) @ < >。 ANSI (Windows-1252) 是最初的 Windows 字符集 与 ASCII 的前 127 个字符相同 特殊字符从 128 到 159 与 UTF-8 的 160 到 255 相同 ISO-8859-1 是 HTML 4 的默认字符集。此字符集支持 256 种不同的字符代码。HTML 4 也支持 UTF-8。 与 ASCII 的前 127 个字符相同 不使用 128 到 159 之间的字符 与 ANSI 和 UTF-8 的 160 到 255 相同 与 ASCII 的 0 到 127 之间的值相同 不使用 128 到 159 之间的字符 与 ANSI 和 8859-1 的 160 到 255 相同 从值 256 到 10 000 个字符继续 URL 是网络地址的另一种说法。 URL 可以由单词(例如 w3schools.com)或互联网协议(IP)地址(例如 192.68.20.50)组成。 大多数人在上网冲浪时输入名称,因为名称比数字更容易记住。 Web 浏览器使用 URL 来请求 Web 服务器上的页面。 统一资源定位符(URL)用于定位 Web 上的文档(或其他数据)。 像 https://w3schools.org.cn/html/default.asp 这样的网络地址遵循以下语法规则 Explanation scheme - 定义 Internet 服务的类型(最常见的是 http 或 https) prefix - 定义域前缀(http 的默认值是 www) domain - 定义 Internet 域名(如 w3schools.com) port - 定义主机上的端口号(http 的默认值是 80) path - 定义服务器上的路径(如果省略:则为站点的根目录) filename - 定义文档或资源的名称 下表列出了一些常见的 scheme Scheme 缩写 用于 HTTP 超文本传输协议 常见的网页。未加密 HTTPS 安全超文本传输协议 安全的网页。已加密 ftp 文件传输协议 下载或上传文件 file 计算机上的文件 URL 只能通过 Internet 使用 ASCII 字符集发送。如果 URL 包含 ASCII 以外的字符,则必须转换该 URL。 URL 编码将非 ASCII 字符转换为可以在 Internet上传输的格式。 URL 编码将非 ASCII 字符替换为百分号 (%) 后跟十六进制数字。 URL 不能包含空格。URL 编码通常将空格替换为加号 (+),或者 %20。 您的浏览器将根据您页面中使用的字符集对输入进行编码。 HTML5 中的默认字符集是 UTF-8。 字符 来自 Windows-1252 来自 UTF-8 € %80 %E2%82%AC £ %A3 %C2%A3 © %A9 %C2%A9 ® %AE %C2%AE À %C0 %C3%80 Á %C1 %C3%81 Â %C2 %C3%82 Ã %C3 %C3%83 Ä %C4 %C3%84 Å %C5 %C3%85 XHTML 是 HTML 的更严格、更基于 XML 的版本。 XHTML 代表 EXtensible HyperText Markup Language(可扩展超文本标记语言) XHTML 是 HTML 的更严格、更基于 XML 的版本 XHTML 是定义为 XML 应用程序的 HTML 所有主流浏览器都支持 XHTML XML 是一种标记语言,所有文档都必须正确标记(“格式良好”)。 XHTML 的开发旨在使 HTML 更具可扩展性和灵活性,以便与其他数据格式(如 XML)配合使用。此外,浏览器会忽略 HTML 页面中的错误,并尝试显示网站,即使它在标记中存在一些错误。因此,XHTML 附带了更严格的错误处理。 <!DOCTYPE> 是强制性的 元素必须始终正确嵌套 元素必须始终闭合 元素必须始终是小写 属性名称必须始终是小写 属性值必须始终加引号 属性最小化是禁止的 XHTML 文档必须包含 XHTML <!DOCTYPE> 声明。 在 XHTML 中,元素必须始终正确嵌套,如下所示 在 XHTML 中,元素必须始终闭合,如下所示 在 XHTML 中,空元素必须始终闭合,如下所示 在 XHTML 中,元素名称必须始终是小写,如下所示 在 XHTML 中,属性名称必须始终是小写,如下所示 在 XHTML 中,属性值必须始终加引号,如下所示 在 XHTML 中,属性最小化是禁止的 HTML 表单用于收集用户输入。用户输入通常会被发送到服务器进行处理。 HTML The HTML 根据 以下是一些示例 类型 描述 The 注意到上面示例中使用了 The The The The 将 The 单选按钮允许用户选择有限选项中的 ONE。 The 复选框允许用户选择有限选项中的 ZERO 个或多个选项。 The 表单处理程序通常是服务器上带有用于处理输入数据的脚本的文件。 表单处理程序在表单的 请注意,每个输入字段都必须有一个 如果省略 本章介绍 HTML 通常,当用户点击提交按钮时,表单数据会发送到服务器上的一个文件。 在下面的示例中,表单数据被发送到名为 “action_page.php” 的文件。此文件包含一个处理表单数据的服务器端脚本。 提示: 如果省略 值 描述 _blank 响应在新窗口或新标签页中显示 _self 响应在当前窗口中显示 _parent 响应显示在父框架中 _top 响应显示在窗口的整个主体中 framename 响应显示在命名的 iframe 中 默认值是 表单数据可以作为 URL 变量发送(使用 提交表单数据时,默认的 HTTP 方法是 GET。 GET 注意事项 将表单数据以名称/值对的形式附加到 URL 切勿使用 GET 发送敏感数据!(提交的表单数据在 URL 中可见!) URL 的长度有限制(2048 个字符) 适用于用户希望收藏结果的表单提交 GET 适用于非安全数据,例如 Google 中的查询字符串 POST 注意事项 将表单数据附加到 HTTP 请求的正文中(提交的表单数据不会在 URL 中显示) POST 没有大小限制,可用于发送大量数据。 使用 POST 提交的表单无法收藏 提示: 如果表单数据包含敏感或个人信息,请始终使用 POST! 当 autocomplete 为 on 时,浏览器会根据用户之前输入过的值自动完成输入。 当存在时,它指定提交表单数据(输入)时不进行验证。 本章介绍所有不同的 HTML 表单元素。 HTML 最常用的表单元素之一是 根据 默认情况下,下拉列表中的第一项被选中。 要定义一个预先选中的选项,请在选项中添加 使用 使用 您也可以使用 CSS 定义文本区域的大小 注意: 始终为 button 元素指定 当用户输入数据时,他们会看到一个预定义选项的下拉列表。 本章介绍 HTML 以下是您可以在 HTML 中使用的不同输入类型 提示: 密码字段中的字符会被遮盖(显示为星号或圆点)。 表单处理程序通常是一个带有处理输入数据脚本的服务器页面。 表单处理程序在表单的 如果您省略提交按钮的 value 属性,该按钮将获得一个默认文本 单选按钮允许用户在有限数量的选项中仅选择一个 复选框允许用户在有限数量的选项中选择零个或多个选项。 根据浏览器支持情况,输入字段中可能会出现一个颜色选择器。 根据浏览器支持情况,输入字段中可能会出现一个日期选择器。 您还可以使用 根据浏览器支持情况,输入字段中可能会出现一个日期选择器。 根据浏览器支持情况,提交时电子邮件地址可以自动验证。 某些智能手机会识别电子邮件类型,并在键盘上添加”.com”以匹配电子邮件输入。 图像的路径在 隐藏字段允许网页开发者包含用户提交表单时无法看到或修改的数据。 隐藏字段通常存储提交表单时需要更新的数据库记录。 注意: 虽然值不会在页面内容中显示给用户,但使用任何浏览器的开发者工具或”查看源代码”功能都可以看到(并可以编辑)。不要将隐藏输入作为一种安全形式! 根据浏览器支持情况,输入字段中可能会出现一个日期选择器。 您还可以设置接受数字的限制。 以下示例显示一个数字输入字段,您可以在其中输入 1 到 5 之间的值 以下是一些常见的输入限制列表 Attribute 描述 checked 指定页面加载时应预先选择输入字段(用于 type=“checkbox” 或 type=“radio”) disabled 指定应禁用输入字段 max 指定输入字段的最大值 maxlength 指定输入字段的最大字符数 分钟 指定输入字段的最小值 pattern 指定用于检查输入值的正则表达式 readonly 指定输入字段为只读(不能更改) required 指定输入字段为必填(必须填写) 大小 指定输入字段的宽度(以字符为单位) step 指定输入字段的合法数字间隔 以下示例显示一个数字输入字段,您可以在其中输入 0 到 100 之间的值,步长为 10。默认值为 30 根据浏览器支持情况,输入字段中可能会出现一个时间选择器。 根据浏览器支持情况,提交时 URL 字段可以自动验证。 某些智能手机会识别 URL 类型,并在键盘上添加”.com”以匹配 URL 输入。 根据浏览器支持情况,输入字段中可能会出现一个日期选择器。 本章描述了 HTML 输入 输入 只读输入字段无法修改(但是,用户可以对其进行 Tab 键操作,高亮显示,并从中复制文本)。 提交表单时将发送只读输入字段的值! 注意: 只有当 值 描述 application/x-www-form-urlencoded 默认值。所有字符在发送前都会进行编码(空格转换为 “+” 符号,特殊字符转换为 ASCII 十六进制值) multipart/form-data 如果用户将文件上传到表单,则需要此值 输入 禁用的输入字段不可用,也无法点击。 提交表单时将不会发送禁用输入字段的值! 输入 注意: 输入 注意: 当设置了 输入 提示: 同时使用 max 和 min 属性可以创建合法值的范围。 输入 输入 提示: 使用全局title属性来描述模式以帮助用户。 提示: 在我们的 Java教程中了解更多关于正则表达式的信息。 输入 在用户输入值之前,简短提示会显示在输入字段中。 输入 输入 示例:如果 step=“3”,合法数字可以是 -3、0、3、6 等。 提示: 此属性可以与 max 和 min 属性一起使用,以创建合法值的范围。 输入 输入 提示: 始终为图像指定 height 和 width 属性。如果设置了 height 和 width,则在页面加载时会为图像保留所需的空间。如果没有这些属性,浏览器不知道图像的大小,因此无法为其保留适当的空间。结果将是页面布局在加载过程中(图像加载时)发生变化。 输入 输入 自动填充允许浏览器预测值。当用户开始在字段中输入时,浏览器应根据之前输入的值显示选项以填充该字段。 **提示:**在某些浏览器中,您可能需要激活自动完成功能才能使其生效(请查看浏览器菜单中的”首选项”)。 本章介绍 HTML input 此属性的值必须等于其所属的 input **注意:**此属性会覆盖 input **注意:**此属性会覆盖 input **注意:**此属性会覆盖 表单数据可以作为 URL 变量 (method=“get”) 或作为 HTTP POST 事务 (method=“post”) 发送。 关于”get”方法的注意事项 此方法将表单数据以名称/值对的形式附加到 URL 此方法对于用户希望收藏结果的表单提交很有用 URL 中可以放置的数据量有限(因浏览器而异),因此,您不能确定所有表单数据都能正确传输 切勿使用”get”方法传递敏感信息!(密码或其他敏感信息将在浏览器的地址栏中可见) 关于”post”方法的注意事项 此方法将表单数据作为 HTTP POST 事务发送 使用”post”方法的表单提交无法被收藏 与 “get” 方法相比,“post” 方法更强大、更安全,并且 “post” 没有大小限制 网页上的多媒体包括声音、音乐、视频、电影和动画。 多媒体有许多不同的格式。它可以是几乎所有你能听到或看到的东西,如图像、音乐、声音、视频、录音、电影、动画等。 网页通常包含不同类型和格式的多媒体元素。 最早的网络浏览器只支持文本,限制为单一字体和单一颜色。 后来出现了支持颜色、字体、图像和多媒体的浏览器! 多媒体元素(如音频或视频)存储在媒体文件中。 识别文件类型最常见的方法是查看文件扩展名。 多媒体文件具有不同的格式和扩展名,例如:.wav、.mp3、.mp4、.mpg、.wmv 和 .avi。 格式 文件 描述 MPEG .mpg MPEG。由动态图像专家组开发。网络上最早流行的视频格式。HTML 中不再支持。 .mpeg AVI .avi AVI(音频视频交错)。由微软开发。常用于摄像机和电视硬件。在 Windows 计算机上播放良好,但在网络浏览器中不播放。 WMV .wmv WMV(Windows Media Video)。由微软开发。常用于摄像机和电视硬件。在 Windows 计算机上播放良好,但在网络浏览器中不播放。 QuickTime .mov QuickTime。由苹果开发。常用于摄像机和电视硬件。在苹果计算机上播放良好,但在网络浏览器中不播放。 RealVideo .rm .ram RealVideo。由 Real Media 开发,用于低带宽视频流。无法在网络浏览器中播放。 Flash .swf Flash。由 Macromedia 开发。通常需要额外的组件(插件)才能在网络浏览器中播放。 .flv Ogg .ogg Theora Ogg。由 Xiph.Org 基金会开发。HTML 支持。 WebM .webm WebM。由 Mozilla、Opera、Adobe 和 Google 开发。HTML 支持。 **注意:**HTML 标准仅支持 MP4、WebM 和 Ogg 视频。 MP3 是压缩录制音乐的最佳格式。MP3 一词已成为数字音乐的代名词。 如果您的网站是关于录制音乐的,MP3 是您的首选。 格式 文件 描述 MIDI .mid MIDI(乐器数字接口)。所有电子音乐设备(如合成器和 PC 声卡)的主要格式。MIDI .midi 文件不包含声音,而是可以由电子设备播放的数字音符。在所有计算机和音乐硬件上播放良好,但在网络浏览器中不播放。 RealAudio .rm .ram RealAudio。由 Real Media 开发,用于低带宽音频流。无法在网络浏览器中播放。 WMA .wma WMA(Windows Media Audio)。由微软开发。在 Windows 计算机上播放良好,但在网络浏览器中不播放。 AAC .aac AAC(高级音频编码)。由苹果开发,作为 iTunes 的默认格式。在苹果计算机上播放良好,但在网络浏览器中不播放。 WAV .wav WAV。由 IBM 和微软开发。在 Windows、Macintosh 和 Linux 操作系统上播放良好。HTML 支持。 Ogg .ogg Ogg。由 Xiph.Org 基金会开发。HTML 支持。 MP3 .mp3 MP3 文件实际上是 MPEG 文件的声音部分。MP3 是音乐播放器最流行的格式。它结合了良好的压缩(小文件)和高质量。所有浏览器均支持。 **注意:**HTML 标准仅支持 MP3、WAV 和 Ogg 音频。 HTML 要在 HTML 中显示视频,请使用 最好始终包含 要自动开始播放视频,请使用 注意: Chromium 浏览器在大多数情况下不允许自动播放。但是,静音自动播放始终是被允许的。 在 HTML 地理定位 API 用于定位用户的位置。 HTML 地理定位 API 用于获取用户的地理位置。 由于这可能会泄露隐私,除非用户批准,否则无法获取位置信息。 **注意:**带有 GPS 的设备(如智能手机)的地理定位最准确。 下面的示例返回用户位置的纬度和经度 示例说明 检查是否支持地理定位 如果支持,运行 getCurrentPosition() 方法。否则,向用户显示一条消息 如果 getCurrentPosition() 方法成功,它会向参数中指定的函数 (showPosition) 返回一个 coordinates 对象 showPosition() 函数输出纬度和经度 上面的示例是一个非常基本的地理定位脚本,没有错误处理。 本页演示了如何在地图上显示用户的位置。 地理定位对于特定位置的信息也非常有用,例如 最新的本地信息 显示用户附近的兴趣点 逐向导航 (GPS) 属性 返回 coords.latitude 纬度,十进制数(始终返回) coords.longitude 经度,十进制数(始终返回) coords.accuracy 位置精度(始终返回) coords.altitude 海拔,以米为单位,高于平均海平面(如果可用,则返回) coords.altitudeAccuracy 位置海拔精度(如果可用,则返回) coords.heading 从正北方向顺时针测量的航向,以度为单位(如果可用,则返回) coords.speed 速度,以米/秒为单位(如果可用,则返回) 地理定位对象还有其他有趣的方法 下面的示例演示了 在 HTML 中,任何元素都可以拖放。 拖放是一项非常常见的操作。它是指”抓住”一个对象并将其拖动到另一个位置。 下面的示例是一个简单的拖放示例 这看起来可能很复杂,但让我们一步步了解拖放事件的所有不同部分。 首先:要使元素可拖动,请将 然后,指定拖动元素时应发生什么。 在上面的示例中, 在这种情况下,数据类型是”text”,值为可拖动元素的 id(“drag1”)。 HTML Web Storage;比 Cookie 更好。 借助 Web Storage,Web 应用程序可以在用户浏览器中本地存储数据。 在 HTML5 之前,应用程序数据必须存储在 Cookie 中,并包含在每个服务器请求中。Web Storage 更安全,并且可以在本地存储大量数据,而不会影响网站性能。 与 Cookie 不同,存储限制要大得多(至少 5MB),并且信息永远不会传输到服务器。 Web Storage 是按源(每个域和协议)的。来自一个源的所有页面都可以存储和访问相同的数据。 HTML Web Storage 提供了两个用于在客户端存储数据的对象: 在使用 Web Storage 之前,请检查浏览器对 localStorage 和 sessionStorage 的支持情况: localStorage 对象存储没有过期日期的数据。当浏览器关闭时,数据不会被删除,并且在第二天、下周或下一年仍然可用。 示例说明 创建一个名称为 “lastname”、值为 “Smith” 的 localStorage 名称/值对。 检索 “lastname” 的值,并将其插入到 id=“result” 的元素中。 上面的例子也可以这样写: 移除 “lastname” localStorage 项的语法如下: 注意: 名称/值对始终以字符串形式存储。需要时请记得将它们转换为其他格式! 以下示例计算用户点击按钮的次数。在此代码中,值字符串被转换为数字,以便能够增加计数器: 以下示例计算用户在当前会话中点击按钮的次数: Web Worker 是一种在后台运行的 JavaScript,不影响页面性能。 在 HTML 页面中执行脚本时,页面会变得无响应,直到脚本完成。 Web Worker 是一种在后台运行的 JavaScript,独立于其他脚本,不影响页面性能。您可以继续做任何您想做的事情:点击、选择等等,而 Web Worker 在后台运行。 在创建 Web Worker 之前,请检查用户的浏览器是否支持它 现在,让我们在外部 JavaScript 中创建我们的 Web Worker。 在这里,我们创建一个计数脚本。该脚本存储在 “demo_workers.js” 文件中 上面代码的重要部分是 **注意:**通常 Web Worker 不用于此类简单脚本,而是用于 CPU 密集型任务。 现在我们有了 Web Worker 文件,我们需要从 HTML 页面调用它。 以下行检查 Worker 是否已存在,如果不存在,则创建一个新的 Web Worker 对象并运行 “demo_workers.js” 中的代码 然后我们可以从 Web Worker 发送和接收消息。 为 Web Worker 添加一个 “onmessage” 事件监听器。 当 Web Worker 发布消息时,事件监听器中的代码将被执行。来自 Web Worker 的数据存储在 event.data 中。 创建 Web Worker 对象后,它将继续监听消息(即使外部脚本已完成),直到被终止。 要终止 Web Worker 并释放浏览器/计算机资源,请使用 如果您在终止 Worker 变量后将其设置为 undefined,则可以重用代码 我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码 由于 Web Worker 位于外部文件中,它们无法访问以下JavaScript 对象 window 对象 document 对象 parent 对象<figcaption> 标签为 <figure> 元素定义了标题。 <figcaption> 元素可以作为 <figure> 元素的第一个或最后一个子元素。<img> 元素定义了实际的图像/插图。<figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>图 1 - Trulli,普利亚,意大利。</figcaption> </figure>
为什么要使用语义元素?
HTML 风格指南
始终声明文档类型
<!DOCTYPE html>使用小写元素名称
好 <body> <p>这是一个段落。</p> </body> 坏 <BODY> <P>这是一个段落.</P> </BODY>
关闭所有 HTML 元素
<p> 元素)。好 <section> <p>这是一个段落.</p> <p>这是一个段落.</p> </section> 坏 <section> <p>这是一个段落. <p>这是一个段落. </section>
使用小写属性名称
好 <a href="https://w3schools.org.cn/html/">访问我们的 HTML 教程</a> 坏 <a HREF="https://w3schools.org.cn/html/">访问我们的 HTML 教程</a>
始终引用属性值
好 <table> 坏 <table> 非常糟糕 这将不起作用,因为值包含空格 <table striped>
始终为图像指定 alt、width 和 height
alt 属性。如果图像因故无法显示,此属性非常重要。width 和 height。这可以减少闪烁,因为浏览器可以在加载图像之前为其保留空间。好 <img src="html5.gif" alt="HTML5" style="width:128px;height:128px"> 坏 <img src="html5.gif">
空格和等号
好 <link rel="stylesheet" href="styles.css"> 坏 <link rel = "stylesheet" href = "styles.css">
避免长代码行
空行和缩进
好 <body> <h1>著名城市</h1> <h2>东京</h2> <p>东京是日本的首都,是环太平洋火山地震带和环太平洋火山地震带的一部分,是世界上人口最多的都市圈。</p> <h2>伦敦</h2> <p>伦敦是英格兰的首都。它是英国人口最多的城市。</p> <h2>巴黎</h2> <p>巴黎是法国的首都。巴黎地区是欧洲人口最多的地区之一。</p> </body> 坏 <body> <h1>著名城市</h1> <h2>东京</h2><p>东京是日本的首都,是环太平洋火山地震带和环太平洋火山地震带的一部分,是世界上人口最多的都市圈。</p> <h2>伦敦</h2><p>伦敦是英格兰的首都。它是英国人口最多的城市。</p> <h2>巴黎</h2><p>巴黎是法国的首都。巴黎地区是欧洲人口最多的地区之一。</p> </body>
良好的表格示例 <table> <tr> <th>姓名</th> <th>描述</th> </tr> <tr> <td>A</td> <td>A 的描述</td> </tr> <tr> <td>B</td> <td>B 的描述</td> </tr> </table> 良好的列表示例 <ul> <li>伦敦</li> <li>巴黎</li> <li>东京</li> </ul>
切勿省略
<title> 元素<title> 元素在 HTML 中是必需的。<title> 元素<title>HTML 风格指南和编码约定</title>省略
<html> 和 <body>?<html> 和 <body> 标签的情况下也可以验证。<!DOCTYPE html> <head> <title>页面标题</title> </head> <h1>This is a heading</h1> <p>这是一个段落。</p>
<html> 和 <body> 标签!<body> 可能会在旧浏览器中产生错误。<html> 和 <body> 也可能导致 DOM 和 XML 软件崩溃。省略
<head>?<head> 标签也可以省略。<body> 之前的所有元素添加到默认的 <head> 元素中。<!DOCTYPE html> <html> <title>页面标题</title> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> </body> </html>
<head> 标签。关闭空的 HTML 元素?
允许 <meta charset="utf-8"> 也允许 <meta charset="utf-8" />
添加 lang 属性
<html> 标签内包含 lang 属性,以声明网页的语言。这旨在帮助搜索引擎和浏览器。<!DOCTYPE html> <html> <head> <title>页面标题</title> </head> <body> <h1>This is a heading</h1> <p>这是一个段落。</p> </body> </html>
元数据
<meta charset="charset"> 都应在 HTML 文档中尽早定义。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面标题</title> </head>
设置视口
<meta> 元素<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width 部分将页面的宽度设置为与设备的屏幕宽度一致(这将因设备而异)。initial-scale=1.0 部分设置了浏览器首次加载页面时的初始缩放级别。HTML 注释
<!-- 这是一个注释 --><!-- 这是一个长注释示例。这是一个长注释示例。 这是一个长注释示例。这是一个长注释示例。 -->
使用样式表
type 属性不是必需的)。<link rel="stylesheet" href="styles.css">p.intro {font-family:Verdana;font-size:16em;}body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; }在 HTML 中加载 JavaScript
type 属性不是必需的)。getElementById("Demo").innerHTML = "Hello"; getElementById("demo").innerHTML = "Hello";使用小写文件名
文件扩展名
.htm 与 .html 有何区别?
默认文件名
HTML 实体
< (小于号) = < > (大于号) = >
HTML 字符实体
实体名称看起来像这样 &entity_name; 实体编号看起来像这样 &#entity_number;
要显示小于号 (<) 我们必须写: < 或 <
不换行空格
一个常用的 HTML 实体是不换行空格: (Non-Breaking Space);HTML 不换行空格是一个不会换行的空格。 用不换行空格分隔的两个词会粘在一起(不会换行)。当断开单词可能造成干扰时,这非常方便。 示例 § 10 10 km/h 10 PM 不换行空格的另一个常见用途是防止浏览器截断 HTML 页面中的空格。 如果您在文本中输入 10 个空格,浏览器将删除其中 9 个。要在文本中添加实际的空格,可以使用 字符实体。 不换行连字符 (‑) 用于定义一个不会换行的连字符 (‑)。
一些有用的 HTML 字符实体
结果 描述 名称 Number 不换行空格   < 小于 < < > 大于 > > & 和号 & & " 双引号 " " ' 单引号 ' ' ¢ 美分 ¢ ¢ £ 英镑 £ £ ¥ 日元 ¥ ¥ € 欧元 € € © 版权 © © ® 商标 ® ®
注意
组合发音符号
标记 字符 构造 结果 ̀ a à à ́ a á á ̂ a â â ̃ a ã ã ̀ O Ò Ò ́ O Ó Ó ̂ O Ô Ô ̃ O Õ Õ
HTML 符号
HTML 符号实体
显示欧元符号 <p>我将显示 €</p> <p>我将显示 €</p> <p>我将显示 €</p> 将显示为 我将显示 € 我将显示 € 我将显示 €
HTML 支持的一些数学符号
字符 Number 实体 描述 ∀ ∀ ∀ 所有 ∂ ∂ ∂ 偏微分 ∃ ∃ ∃ 存在 ∅ ∅ ∅ 空集 ∇ ∇ ∇ Nabla ∈ ∈ ∈ 属于 ∉ ∉ ∉ 不属于 ∋ ∋ ∋ 包含成员 ∏ ∏ ∏ N-项乘积 ∑ ∑ ∑ N-项求和
HTML 支持的一些希腊字母
字符 Number 实体 描述 Α Α Α 希腊字母 Alpha Β Β Β 希腊字母 Beta Γ Γ Γ 希腊字母 Gamma Δ Δ Δ 希腊字母 Delta Ε Ε Ε希腊字母 Epsilon Ζ Ζ Ζ 希腊字母 Zeta
HTML 支持的其他一些实体
字符 Number 实体 描述 © © © 版权 ® ® ® 注册 € € € 欧元符号 ™ ™ ™ 商标 ← ← ← 左箭头 ↑ ↑ ↑ 上箭头 → → → 右箭头 ↓ ↓ ↓ 下箭头 ♠ ♠ ♠ 黑桃 ♣ ♣ ♣ 梅花 ♥ ♥ ♥ 红心 ♦ ♦ ♦ 方块
在 HTML 中使用颜文字
颜文字 值 ???? 🗻 ???? 🗼 ???? 🗽 ???? 🗾 ???? 🗿 ???? 😀 ???? 😁 ???? 😂 ???? 😃 ???? 😄 ???? 😅
HTML 颜文字示例
???????????????????? ???????????????????? ???????????????????? ????????????????????
什么是颜文字?
HTML charset 属性
<meta> 标签中指定<meta charset="UTF-8">UTF-8 字符
<!DOCTYPE html> <html> <meta charset="UTF-8"> <body> <p>我将显示 A B C</p> <p>我将显示 A B C</p> </body> </html>
示例解释
<meta charset="UTF-8"> 定义了字符集。颜文字字符
<!DOCTYPE html> <html> <meta charset="UTF-8"> <body> <h1>我的第一个颜文字</h1> <p>😀</p> </body> </html>
<!DOCTYPE html> <html> <meta charset="UTF-8"> <body> <h1>调整大小的颜文字</h1> <p style="font-size:48px"> 😀 😄 😍 💗 </p> </body> </html>
HTML 编码(字符集)
HTML 字符集属性
<meta> 标签中指定<meta charset="UTF-8">ASCII(American Standard Code Information Interchange) 字符集
ANSI(American National Standards Institute) 字符集
<meta charset="Windows-1252">ISO-8859-1 字符集
HTML 4 示例 <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> HTML 5 示例 <meta charset="ISO-8859-1">
UTF-8 字符集
<meta charset="UTF-8HTML 统一资源定位符
URL - 统一资源定位符
scheme://prefix.domain:port/path/filename常见的 URL Scheme
URL 编码
ASCII 编码示例
HTML 与 XHTML
什么是 XHTML?
为什么使用 XHTML?
与 HTML 最重要的区别
<html> 中的 xmlns 属性是强制性的<html>、<head>、<title> 和 <body> 是强制性的XHTML -
<!DOCTYPE ....> 是强制性的<html>、<head>、<title> 和 <body> 元素也必须存在,<html> 中的 xmlns 属性必须指定文档的 xml 命名空间。这是一个包含最少必需标签的 XHTML 文档: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>文档标题</title> </head> <body> 这里是一些内容... </body> </html>
XHTML 元素必须正确嵌套
正确 <b><i>一些文本</i></b> 错误 <b><i>一些文本</b></i>
XHTML 元素必须始终闭合
正确 <p>这是一个段落</p> <p>这是另一个段落</p> 错误 <p>这是一个段落 <p>这是另一个段落
XHTML 空元素必须始终闭合
正确 一个换行:<br /> 一条水平线:<hr /> 一张图片:<img src="happy.gif" alt="笑脸" /> 错误 一个换行:<br> 一条水平线:<hr> 一张图片:<img src="happy.gif" alt="笑脸">
XHTML 元素必须是小写
正确 <body> <p>这是一个段落</p> </body> 错误 <BODY> <P>这是一个段落</P> </BODY>
XHTML 属性名称必须是小写
正确 <a href="https://w3schools.org.cn/html/">访问我们的 HTML 教程</a> 错误 <a HREF="https://w3schools.org.cn/html/">访问我们的 HTML 教程</a>
XHTML 属性值必须加引号
正确 <a href="https://w3schools.org.cn/html/">访问我们的 HTML 教程</a> 错误 <a href=https://w3schools.org.cn/html/>访问我们的 HTML 教程</a>
XHTML 属性最小化是禁止的
正确 <input type="checkbox" name="vehicle" value="car" checked="checked" /> <input type="text" name="lastname" disabled="disabled" /> 错误 <input type="checkbox" name="vehicle" value="car" checked /> <input type="text" name="lastname" disabled />
HTML 表单
The
<form> Element<form> 元素用于创建用于用户输入的 HTML 表单。<form> . 表单元素 . </form>
<form> 元素是一个包含不同类型输入元素的容器,例如:文本字段、复选框、单选按钮、提交按钮等。The
<input> Element<input> 元素是最常用的表单元素。type 属性的不同,<input> 元素可以显示为多种样式。<input type="text"> 显示一个单行文本输入字段<input type="radio"> 显示一个单选按钮(用于从多个选项中选择一个)<input type="checkbox"> 显示一个复选框(用于从多个选项中选择零个或多个)<input type="submit"> 显示一个提交按钮(用于提交表单)<input type="button"> 显示一个可点击的按钮文本字段
<input type="text"> 定义了一个用于文本输入的单行输入字段。一个带有文本输入字段的表单 <form> <label for="fname">名:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">姓:</label><br> <input type="text" id="lname" name="lname"> </form>
The
<label> Element<label> 元素。<label> 标签为许多表单元素定义了一个标签。<label> 元素对屏幕阅读器用户很有用,因为当用户聚焦在输入元素上时,屏幕阅读器会大声朗读标签。<label> 元素还有助于那些难以点击非常小的区域(如单选按钮或复选框)的用户——因为当用户点击 <label> 元素内的文本时,它会切换单选按钮/复选框。<label> 标签的 for 属性应等于 <input> 元素的 id 属性,以将它们绑定在一起。<input>写在<label>就成了隐式关联单选按钮
<input type="radio"> 定义了一个单选按钮。带有单选按钮的表单 <p>选择您最喜欢的 Web 语言:</p> <form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value=" JavaScript"> <label for="javascript">JavaScript</label> </form>
复选框
<input type="checkbox"> 定义了一个复选框。带有复选框的表单 <form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> 我有一辆自行车</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> 我有一辆汽车</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> 我有一艘船</label> </form>
The Submit Button
<input type="submit"> 定义了一个用于将表单数据提交到表单处理程序的按钮。action 属性中指定。带有提交按钮的表单 <form action="/action_page.php"> <label for="fname">名:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">姓:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="提交"> </form>
The Name Attribute for
<input>name 属性才能被提交。name 属性,则不会发送输入字段的值。此示例不会提交“名字”输入字段的值: <form action="/action_page.php"> <label for="fname">名:</label><br> <input type="text" id="fname" value="John"><br><br> <input type="submit" value="提交"> </form>
HTML 表单属性
<form> 元素的不同属性。action 属性
action 属性定义了表单提交时要执行的操作。提交时,将表单数据发送到 "action_page.php" <form action="/action_page.php"> <label for="fname">名:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">姓:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="提交"> </form>
action 属性,则操作被设置为当前页面。target 属性
target 属性指定在提交表单后接收到的响应显示在哪里。target 属性可以有以下值之一:_self,这意味着响应将在当前窗口中打开。这里,提交的结果将在新的浏览器标签页中打开 <form action="/action_page.php" target="_blank">
method 属性
method 属性指定提交表单数据时使用的 HTTP 方法。method="get")或作为 HTTP POST 事务发送(使用 method="post")。此示例在提交表单数据时使用 GET 方法 <form action="/action_page.php" method="get"> 此示例在提交表单数据时使用 POST 方法 <form action="/action_page.php" method="post">
autocomplete 属性
autocomplete 属性指定表单是否应启用或禁用自动完成功能。启用了自动完成功能的表单 <form action="/action_page.php" autocomplete="on">
novalidate 属性
novalidate 属性是一个布尔属性。带有 novalidate 属性的表单 <form action="/action_page.php" novalidate>
HTML 表单元素
HTML
<form> 元素<form> 元素可以包含一个或多个以下表单元素<input>(输入)<label>(标签)<select>(选择)<textarea(输入框)><button>(按钮)<fieldset(字段集)><legend>(图标)<datalist(数据列表)><output>(输出)<option>(计算结果)<optgroup(定义选项组)><input> 元素<input> 元素。type 属性的不同,<input> 元素可以显示为多种方式。<label for="fname">名字:</label> <input type="text" id="fname" name="fname">
<label> 元素<label> 元素为多个表单元素定义了一个标签。<label> 元素对屏幕阅读器用户很有用,因为当用户聚焦于输入元素时,屏幕阅读器会大声朗读标签。<label> 元素也有助于那些点击非常小区域(例如单选按钮或复选框)有困难的用户 - 因为当用户点击 <label> 元素内的文本时,它会切换单选按钮/复选框。<label> 标签的 for 属性应与 <input> 元素的 id 属性相等,以便将它们绑定在一起。<select> 元素<select> 元素定义了一个下拉列表<label for="cars">选择一辆车:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">菲亚特</option> <option value="audi">Audi</option> </select>
<option> 元素定义了一个可以选择的选项。selected 属性<option value="fiat" selected>菲亚特</option>可见值
size 属性来指定可见值的数量<label for="cars">选择一辆车:</label> <select id="cars" name="cars" size="3"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">菲亚特</option> <option value="audi">Audi</option> </select>
允许多选
multiple 属性允许用户选择多个值<label for="cars">选择一辆车:</label> <select id="cars" name="cars" size="4" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">菲亚特</option> <option value="audi">Audi</option> </select>
<textarea> 元素<textarea> 元素定义了一个多行输入字段(文本区域)<textarea name="message" rows="10" cols="30"> 猫正在花园里玩耍。 </textarea>
rows 属性指定文本区域中可见的行数。cols 属性指定文本区域的可见宽度。<textarea name="message" style="width:200px; height:600px;"> 猫正在花园里玩耍。 </textarea>
<button> 元素<button> 元素定义了一个可点击的按钮<button type="button">type 属性。不同的浏览器可能为 button 元素使用不同的默认类型。<fieldset> 和 <legend> 元素<fieldset> 元素用于在表单中对相关数据进行分组。<legend> 元素为 <fieldset> 元素定义了一个标题。<form action="/action_page.php"> <fieldset> <legend>个人信息:</legend> <label for="fname">名字:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">姓:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="提交"> </fieldset> </form>
<datalist> 元素<datalist> 元素为 <input> 元素指定了一系列预定义选项。<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。<form action="/action_page.php"> <input list="browsers"> < datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
<output> 元素<output> 元素表示计算结果(例如脚本执行的计算)。执行计算并将结果显示在 <output> 元素中 <form action="/action_page.php">
HTML 输入类型
<input> 元素的不同类型。HTML 输入类型
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">type 属性的默认值是 “text”。输入类型文本
<input type="text"> 定义一个单行文本输入字段<form> <label for="fname">名:</label><br> < input type="text" id="fname" name="fname"><br> <label for="lname">姓:</label><br> <input type="text" id="lname" name="lname"> </form>
输入类型密码
<input type="password"> 定义一个密码字段<form> <label for="username">用户名:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">密码:</label><br> <input type="password" id="pwd" name="pwd"> </form>
输入类型提交
<input type="submit"> 定义一个用于将表单数据提交到表单处理程序的按钮。action 属性中指定<form action="/action_page.php"> <label for="fname">名:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">姓:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="提交"> </form>
<form action="/action_page.php"> <label for="fname">名:</label><br> < input type="text" id="fname" name="fname" value="John"><br> <label for="lname">姓:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit"> </form>
输入类型重置
<input type="reset"> 定义一个重置按钮,该按钮将所有表单值重置为默认值<form action="/action_page.php"> <label for="fname">名:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">姓:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
输入类型单选
<input type="radio"> 定义一个单选按钮。<p>选择您最喜欢的 Web 语言:</p> <form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </form>
输入类型复选框
<input type="checkbox"> 定义一个复选框。输入类型按钮
<input type="button"> 定义一个按钮<input type="button">输入类型颜色
<input type="color"> 用于应包含颜色的输入字段。<form> <label for="favcolor">选择您喜欢的颜色:</label> <input type="color" id="favcolor" name="favcolor"> </form>
输入类型日期
<input type="date"> 用于应包含日期的输入字段。<form> <label for="birthday">生日:</label> <input type="date" id="birthday" name="birthday"> </form>
min 和 max 属性来限制日期<form> <label for="datemax">输入 1980-01-01 之前的日期:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">输入 2000-01-01 之后的日期:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"> </form>
输入类型 datetime-local
<input type="datetime-local"> 指定一个日期和时间输入字段,不含时区。输入类型 Email
<input type="email"> 用于应包含电子邮件地址的输入字段。<form> <label for="email">输入您的电子邮件:</label> <input type="email" id="email" name="email"> </form>
输入类型 Image
<input type="image"> 定义一个图像作为提交按钮。src 属性中指定<form> <input type="image" src="img_submit.gif" alt="提交" width="48" height="48"> </form>
输入类型文件
<input type="file"> 定义一个文件选择字段和一个用于文件上传的”浏览”按钮。<form> <label for="myfile">选择一个文件:</label> <input type="file" id="myfile" name="myfile"> </form>
输入类型隐藏
<input type="hidden"> 定义一个隐藏的输入字段(用户不可见)。<form> <label for="fname">名:</label> <input type="text" id="fname" name="fname"><br><br> <input type="hidden" id="custId" name="custId" value="3487"> <input type="submit" value="提交"> </form>
输入类型月份
<input type="month"> 允许用户选择月份和年份。<form> <label for="bdaymonth">生日 (月份和年份):</label> <input type="month" id="bdaymonth" name="bdaymonth"> </form>
输入类型数字
<input type="number"> 定义一个数字输入字段。<form> <label for="quantity">数量 (1 到 5 之间):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>
输入限制
value 指定输入字段的默认值
<form> <label for="quantity">数量:</label> <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"> </form>
输入类型范围
<input type="range"> 定义一个用于输入不重要精确值的数字的控件(如滑块控件)。默认范围是 0 到 100。但是,您可以使用 min、max 和 step 属性设置接受数字的限制<form> <label for="vol">音量 (0 到 50 之间):</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form>
输入类型搜索
<input type="search"> 用于搜索字段(搜索字段的行为与常规文本字段相同)。<form> <label for="gsearch">搜索 Google:</label> <input type="search" id="gsearch" name="gsearch"> </form>
输入类型电话
<input type="tel"> 用于应包含电话号码的输入字段。<form> <label for="phone">输入您的电话号码:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form>输入类型时间
<input type="time"> 允许用户选择时间(无时区)。<form> <label for="appt">选择一个时间:</label> <input type="time" id="appt" name="appt"> </form>
输入类型 URL
<input type="url"> 用于应包含 URL 地址的输入字段。<form> <label for="homepage">添加您的主页:</label> <input type="url" id="homepage" name="homepage"> </form>
输入类型周
<input type="week"> 允许用户选择周和年份。<form> <label for="week">选择一周:</label> <input type="week" id="week" name="week"> </form>
HTML 输入属性
<input> 元素的不同属性。value 属性
value 属性为输入字段指定一个初始值。具有初始(默认)值的输入字段 <form> <label for="fname">名:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">姓:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>
readonly 属性
readonly 属性指定输入字段为只读。一个只读输入字段 <form> <label for="fname">名:</label><br> <input type="text" id="fname" name="fname" value="John" readonly><br> <label for="lname">姓:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>
HTML
<form> enctype 属性以 "multipart/form-data" 编码方式发送表单数据 <form action="/action_page_binary.asp" method="post" enctype="multipart/form-data"> <label for="fname">名:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">姓氏:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="提交"> </form>
定义和用法
enctype 属性指定了在将表单数据提交到服务器时应如何进行编码。method="post" 时才能使用 enctype 属性。语法
<form enctype="*值*">属性值
text/plain 不进行任何编码发送数据。不推荐
disabled 属性
disabled 属性指定输入字段应被禁用。一个禁用的输入字段 <form> <label for="fname">名:</label><br> <input type="text" id="fname" name="fname" value="John" disabled><br> <label for="lname">姓:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>
size 属性
size 属性指定输入字段的可见宽度(以字符为单位)。size 的默认值为 20。size 属性适用于以下输入类型:text、search、tel、url、email 和 password。设置输入字段的宽度 <form> <label for="fname">名:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" size="4"> </form>
maxlength 属性
maxlength 属性指定输入字段中允许的最大字符数。maxlength 时,输入字段将不会接受超过指定字符数。但是,此属性不提供任何反馈。因此,如果您想提醒用户,您必须编写 JavaScript 代码。设置输入字段的最大长度 <form> <label for="fname">名:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" maxlength="4" size="4"> </form>
min 和 max 属性
min 和 max 属性指定输入字段的最小和最大值。min 和 max 属性适用于以下输入类型:number、range、date、datetime-local、month、time 和 week。设置最大日期、最小日期和合法值的范围 <form> <label for="datemax"> 输入 1980-01-01 之前的日期:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">输入 2000-01-01 之后的日期:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br> <label for="quantity">数量 (1 到 5 之间):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>
multiple 属性
multiple 属性指定用户可以在输入字段中输入多个值。multiple 属性适用于以下输入类型:email 和 file。一个接受多个值的文件上传字段 <form> <label for="files">选择文件:</label> <input type="file" id="files" name="files" multiple> </form>
pattern 属性
pattern 属性指定一个正则表达式,用于在提交表单时检查输入字段的值。pattern 属性适用于以下输入类型:text、date、search、url、tel、email 和 password。一个只能包含三个字母(不能有数字或特殊字符)的输入字段 <form> <label for="country_code">国家代码:</label> <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="三个字母的国家代码"> </form>placeholder 属性
placeholder 属性指定一个简短的提示,描述输入字段的预期值(一个示例值或预期格式的简短描述)。placeholder 属性适用于以下输入类型:text、search、url、number、tel、email 和 password。带占位符文本的输入字段 <form> <label for="phone">输入电话号码:</label> <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form>required 属性
required 属性指定在提交表单之前必须填写输入字段。required 属性适用于以下输入类型:text、search、url、tel、email、password、日期选择器、number、checkbox、radio 和 file。一个必填输入字段 <form> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> </form>
step 属性
step 属性指定输入字段的合法数字间隔。step 属性适用于以下输入类型:number、range、date、datetime-local、month、time 和 week。具有指定合法数字间隔的输入字段 <form> <label for="points">点数:</label> <input type="number" id="points" name="points" step="3"> </form>
autofocus 属性
autofocus 属性指定页面加载时输入字段应自动获得焦点。让“名字”输入字段在页面加载时自动获得焦点 <form> <label for="fname">名:</label><br> <input type="text" id="fname" name="fname" autofocus><br> <label for="lname">姓:</label><br> <input type="text" id="lname" name="lname"> </form>
height 和 width 属性
height 和 width 属性指定 <input type="image"> 元素的高度和宽度。将图像定义为提交按钮,并带有 height 和 width 属性 <form> <label for="fname">名:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">姓氏:</label> <input type="text" id="lname" name="lname"><br><br> <input type="image" src="img_submit.gif" alt="提交" width="48" height="48"> </form>
list 属性
list 属性引用一个 <datalist> 元素,其中包含 <input>{=html} 元素的预定义选项。带有 <datalist> 中预定义值的 <input> 元素 <form> <input list="browsers"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
autocomplete 属性
autocomplete 属性指定表单或输入字段是否应启用自动填充。autocomplete 属性适用于 <form> 和以下 <input> 类型:text、search、url、tel、email、password、日期选择器、range 和 color。一个启用了自动填充的 HTML 表单,以及一个禁用自动填充的输入字段 <form action="/action_page.php" autocomplete="on"> <label for="fname">名:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">姓氏:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">电子邮件:</label> <input type="email" id="email" name="email" autocomplete="off"><br><br> <input type="submit" value="提交"> </form>
HTML Input 表单属性
<input> 元素的各种 form* 属性。form 属性
form 属性指定了 <input> 元素所属的表单。<form> 元素的 id 属性。位于 HTML 表单外部(但仍属于表单一部分)的输入字段 <form action="/action_page.php" id="form1"> <label for="fname">名:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="提交"> </form> <label for="lname">姓:</label> <input type="text" id="lname" name="lname" form="form1">
formaction 属性
formaction 属性指定了提交表单时将处理输入的文件的 URL。<form> 元素的 action 属性。formaction 属性适用于以下 input 类型:submit 和 image。具有两个提交按钮的 HTML 表单,具有不同的操作 <form action="/action_page.php"> <label for="fname">名:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">姓氏:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="提交"> <input type="submit" formaction="/action_page2.php" value="以管理员身份提交"> </form>
formenctype 属性
formenctype 属性指定了提交表单时应如何编码表单数据(仅适用于 method=“post” 的表单)。<form> 元素的 enctype 属性。formenctype 属性适用于以下 input 类型:submit 和 image。带有两个提交按钮的表单。第一个以默认编码发送表单数据,第二个以 "multipart/form-data" 编码发送表单数据 <form action="/action_page_binary.asp" method="post"> <label for="fname">名:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="提交"> <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 形式提交"> </form>
formmethod 属性
formmethod 属性定义了将表单数据发送到 action URL 的 HTTP 方法。<form> 元素的 method 属性。formmethod 属性适用于以下 input 类型:submit 和 image。HTML 多媒体
什么是多媒体?
浏览器支持
多媒体格式
常见视频格式
MPEG-4 或 .mp4 MP4。由动态图像专家组开发。常用于摄像机和电视硬件。所有浏览器均支持,YouTube 推荐。 MP4
常见音频格式
MP4 .mp4 MP4 是一种视频格式,但也可用于音频。所有浏览器均支持。
HTML 视频
<video> 元素用于在网页上显示视频。HTML
<video> 元素<video> 元素<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video>
如何运作
controls 属性添加了视频控件,如播放、暂停和音量。width 和 height 属性。如果未设置高度和宽度,视频加载时页面可能会闪烁。<source> 元素允许您指定浏览器可以从中选择的备用视频文件。浏览器将使用第一个识别的格式。<video> 和 </video> 标签之间的文本仅显示在不支持 <video> 元素的浏览器中。HTML
<video> 自动播放autoplay 属性<video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video>
autoplay 之后添加 muted,让您的视频开始自动播放(但静音)<video width="320" height="240" autoplay muted> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video>
HTML 地理定位 API(Application Programming Interface 应用程序编程接口)
定位用户的位置
使用 HTML 地理定位
getCurrentPosition() 方法用于返回用户的位置。<script> const x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "此浏览器不支持地理定位。"; } } function showPosition(position) { x.innerHTML = "纬度: " + position.coords.latitude + " 经度: " + position.coords.longitude; } </script>处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。它指定一个函数,在无法获取用户位置时运行function showError(error) { switch(error.code) { case error.PERMISSION_DENIED x.innerHTML = "用户拒绝了地理定位请求。" break; case error.POSITION_UNAVAILABLE x.innerHTML = "位置信息不可用。" break; case error.TIMEOUT x.innerHTML = "获取用户位置的请求超时。" break; case error.UNKNOWN_ERROR x.innerHTML = "发生未知错误。" break; } }特定位置信息
getCurrentPosition() 方法 - 返回数据
getCurrentPosition() 方法在成功时返回一个对象。始终返回纬度、经度和精度属性。如果可用,则返回其他属性timestamp 响应的日期/时间(如果可用,则返回)
地理定位对象 - 其他有趣的方法
watchPosition() - 返回用户的当前位置,并在用户移动时持续返回更新的位置(类似于汽车中的 GPS)。clearWatch() - 停止 watchPosition() 方法。watchPosition() 方法。您需要一个精确的 GPS 设备来测试此功能(如智能手机)<script> const x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML = "此浏览器不支持地理定位。"; } } function showPosition(position) { x.innerHTML = "纬度: " + position.coords.latitude + " 经度: " + position.coords.longitude; } </script>HTML 拖放 API
拖放
HTML 拖放示例
<!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1">使元素可拖动
draggable 属性设置为 true。<img draggable="true">拖动什么 - ondragstart 和 setData()
ondragstart 属性调用一个函数 drag(event),该函数指定要拖动的数据。dataTransfer.setData() 方法设置拖动数据的数据类型和值。function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }HTML Web Storage API
什么是 HTML Web Storage?
HTML Web Storage 对象
window.localStorage - 存储没有过期日期的数据window.sessionStorage - 存储一个会话的数据(数据在浏览器选项卡关闭时丢失)if (typeof(Storage) !== "undefined") { // localStorage/sessionStorage 的代码。 } else { // 抱歉!不支持 Web Storage。 }localStorage 对象
// 存储 localStorage.setItem("lastname", "Smith"); // 检索 document.getElementById("result").innerHTML = localStorage.getItem("lastname");// 存储 localStorage.lastname = "Smith"; // 检索 document.getElementById("result").innerHTML = localStorage.lastname;localStorage.removeItem("lastname");if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "您已点击按钮 " + localStorage.clickcount + " 次。";sessionStorage 对象
sessionStorage 对象与 localStorage 对象相同,除了它只为一个会话存储数据。当用户关闭特定的浏览器选项卡时,数据将被删除。if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "您已点击按钮 " + sessionStorage.clickcount + " 次。";HTML Web Workers API
什么是 Web Worker?
检查 Web Worker 支持
if (typeof(Worker) !== "undefined") { // 是的!支持 Web Worker! // 一些代码..... } else { // 抱歉!不支持 Web Worker.. }创建 Web Worker 文件
var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); } timedCount();postMessage() 方法 - 用于将消息发送回 HTML 页面。创建 Web Worker 对象
if (typeof(w) == "undefined") { w = new Worker("demo_workers.js"); }w.onmessage = function(event){ document.getElementById("result").innerHTML = event.data; };终止 Web Worker
terminate() 方法w.terminate();重用 Web Worker
w = undefined;完整的 Web Worker 示例代码
<!DOCTYPE html> <html> <body> <p>计数: <output id="result"></output></p> <button>
Web Workers 和 DOM(Document Object Model)