W3school笔记——HTML

最新推荐文章于 2025-07-25 09:05:17 发布

原创最新推荐文章于 2025-07-25 09:05:17 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

前端基础专栏收录该内容

36 篇文章

订阅专栏

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

例子解释

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

基本的 HTML 标签 - 四个实例

HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。
在 href 属性中指定链接的地址。

<a href="http://www.w3school.com.cn">This is a link</a>

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

<img src="w3school.jpg" width="104" height="142" />

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
在这里插入图片描述

HTML 属性

属性实例

<!--属性例子 1:HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：-->
<a href="http://www.w3school.com.cn">This is a link</a>

<!--属性例子 2:定义标题的开始-->
<h1 align="center"> 拥有关于对齐方式的附加信息。

<!--属性例子 3:<body> 定义 HTML 文档的主体-->
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

<!--属性例子 4:<table> 定义 HTML 表格-->
<table border="1"> 拥有关于表格边框的附加信息。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

完整的 HTML 参考手册

HTML 标准属性参考手册

HTML 标题

HTML 标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

注释：浏览器会自动地在标题的前后添加空行。

注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

注释：请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

水平线效果如下：
在这里插入图片描述

HTML 段落

段落是通过 <p> 标签定义的。

<p>This is a paragraph</p>
<p>This is another paragraph</p>

注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表）

在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>This is<br />a para<br />graph with line breaks</p>

HTML 样式

style 属性用于改变 HTML 元素的样式。

应该避免使用下面这些标签和属性：
在这里插入图片描述

HTML 样式实例 - 背景颜色

background-color 属性为元素定义了背景颜色：

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

style 属性淘汰了“旧的” bgcolor 属性。

HTML 样式实例 - 字体、颜色和尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

style 属性淘汰了旧的标签。

HTML 样式实例 - 文本对齐

text-align 属性规定了元素中文本的水平对齐方式：

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

style 属性淘汰了旧的 “align” 属性。

HTML 文本格式化

HTML 文本格式化实例

文本格式化：此例演示如何在一个 HTML 文件中对文本进行格式化

<html>

<body>

<b>This text is bold</b>

<br />

<strong>This text is strong</strong>

<br />

<big>This text is big</big>

<br />

<em>This text is emphasized</em>

<br />

<i>This text is italic</i>

<br />

<small>This text is small</small>

<br />

This text contains
<sub>subscript</sub>

<br />

This text contains
<sup>superscript</sup>

</body>
</html>

在这里插入图片描述

预格式文本：此例演示如何使用 pre 标签对空行和空格进行控制

<html>

<body>

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

<p>pre 标签很适合显示计算机代码：</p>

<pre>
for i = 1 to 10
     print i
next i
</pre>

</body>
</html>

在这里插入图片描述

“计算机输出”标签：此例演示不同的“计算机输出”标签的显示效果

<html>

<body>

<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

</body>
</html>

在这里插入图片描述

地址：此例演示如何在 HTML 文件中写地址

<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

在这里插入图片描述

缩写和首字母缩写：此例演示如何实现缩写或首字母缩写

<html>

<body>

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

<p>仅对于 IE 5 中的 acronym 元素有效。</p>

<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

</body>
</html>

在这里插入图片描述

文字方向：此例演示如何改变文字的方向

<html>

<body>

<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

</body>
</html>

在这里插入图片描述

块引用：此例演示如何实现长短不一的引用语

<html>

<body>

这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用：
<q>
这是短的引用。
</q>

<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>

</body>
</html>

在这里插入图片描述

删除字效果和插入字效果：此例演示如何标记删除文本和插入文本

<html>

<body>

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

</body>
</html>

在这里插入图片描述
文本格式化标签：

“计算机输出”标签：

引用、引用和术语定义：

HTML颜色

HTML颜色
 HTML颜色名

HTML引用

HTML <q> 元素定义短的引用。
浏览器通常会为 <q> 元素包围引号。

<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>


用于长引用的 HTML <blockquote>
HTML <blockquote> 元素定义被引用的节。
浏览器通常会对 <blockquote> 元素进行缩进处理。

<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>