推荐学习使用网站
认识HTML
HTML（HyperText Markup Language）是超文本标记语言，它是一个用于创建网页和网页应用程序的标准标记语言。HTML文档由一系列的元素（elements）组成，这些元素通过标签（tags）来定义。这些标签告诉浏览器如何呈现内容，比如文本、图片、链接、列表、表格等。
HTML文档的结构通常包括以下几个部分：
-
<!DOCTYPE html>声明：这不是一个HTML标签；它是一个指示，告诉浏览器文档使用哪个HTML版本进行编写。 -
<html>元素：这是HTML文档的根元素，它包含了文档的所有其他元素。 -
<head>元素：包含了文档的元数据（metadata），如文档的标题（<title>）、字符集声明（<meta charset="utf-8">）、链接到样式表（<link rel="stylesheet" href="style.css">）和脚本文件（<script src="script.js"></script>）等。 -
<body>元素：包含了可见的页面内容，如文本、图片、链接、表格、列表等。
下面是一个简单的HTML文档示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
</body>
</html>HTML使用实例
根据 w3school 网站进行的基础学习总结，更深入的学习大家可以到网站上面去练练手。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
元素
元素就是<开始标签><结束标签>之间的所有代码
属性
属性为 HTML 元素提供附加信息。HTML 标签可以拥有属，且属性总是在HTML元素的开始标签中进行规定。如：
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定。
<a href="链接">名字</a>HTML标题由<p>标签定义。 标题的属性在align中就可以进行指定。<h1 align="center"> 拥有关于对齐方式的附加信息。
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
</body>
</html>
标题 <h1>到<h6>
<html>
<body>
<h1>标题采用的关键词是h</h1>
<h2>一共有六个等级</h2>
<h3>h1到h6</h3>
<h4>标题效果会进行加粗</h4>
<h5>h1最大，h6最小</h5>
<h6>注意事项</h6>
<p>段落：请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
</body>
</html>段落<p>
<html>
<body>
<p>这是段落。</p>
<p>实现分行。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>
换行<br/>
<html>
<body>
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
</p>
</body>
</html>
链接
<a href="链接">名字</a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
有两种使用 <a> 标签的方式：
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
<html>
<body>
<a href="https://www.csdn.net/">
This is a link</a>
<p>这个This is a link是对链接取的名字</p>
</body>
</html>
将图像作为链接
<!DOCTYPE html>
<html>
<head>
<!-- 这里可以添加页面的标题、引入的CSS文件等 -->
<title>图像链接示例</title>
</head>
<body>
<p>
<!-- 注释：说明以下代码段展示了如何使用图像作为链接 -->
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<!-- 注释：这是一个链接，当用户点击这个链接时，会跳转到"/example/html/lastpage.html"页面 -->
<!-- 注释：以下是一个图像标签，用于显示链接的图像 -->
<img border="0" src="/i/eg_buttonnext.gif" alt="下一个" />
<!-- 注释：border="0"属性用于移除图像周围的边框（虽然在现代浏览器中，图像默认没有边框） -->
<!-- 注释：src属性指定图像的来源路径 -->
<!-- 注释：alt属性为图像提供替代文本，用于图像无法显示时（如加载失败或屏幕阅读器） -->
</a>
</p>
</body>
</html>target属性
<html>
<body>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
</body>
</html>图像
注意：插入动图与插入普通图像并没有语法上面的区别。
<html>
<body>
<img src="/i/eg_w3school.gif" width="300" height="120" />
<p>src里面填写的是图片的地址，width和height指宽高</p>
</body>
</html>
样式
style 属性用于改变 HTML 元素的样式。可以在 CSS 教程中学习关于样式和 CSS 的所有知识。
<!DOCTYPE html>
<!-- 声明文档类型和HTML版本，但此例中未直接包含，通常在HTML5中可省略 -->
<html>
<head>
<!-- 通常在这里会包含CSS样式表链接或<style>标签定义内联样式，但此例中直接在元素中使用了内联样式 -->
</head>
<body style="background-color:PowderBlue;">
<!-- 设置页面的背景颜色为PowderBlue -->
<h1>Look! Styles and colors</h1>
<!-- 第一段文本，设置字体为Verdana，颜色为红色 -->
<p style="font-family:verdana;color:red">
This text is in Verdana and red
</p>
<!-- 第二段文本，设置字体为Times，颜色为绿色 -->
<p style="font-family:times;color:green">
This text is in Times and green
</p>
<!-- 第三段文本，设置字体大小为30像素 -->
<p style="font-size:30px">This text is 30 pixels high</p>
</body>
</html>格式化
<html>
<body>
<b>定义粗体文本</b>
<br />
<strong>定义加重语气</strong>
<br />
<big>大号字体</big>
<br />
<em>着重文字</em>
<br />
<i>This text is italic</i>
<br />
<small>小号字体</small>
<br />
This text contains
<sub>下标字</sub>
<br />
This text contains
<sup>上标字</sup>
</body>
</html>文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
| <s> | 不赞成使用。使用 <del> 代替。 |
| <strike> | 不赞成使用。使用 <del> 代替。 |
| <u> | 不赞成使用。使用样式（style）代替。 |
“计算机输出”标签
<html>
<body>
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
<html>
<body>
<code>计算机代码</code>
<br />
<kbd>键盘码</kbd>
<br />
<tt>打字机代码</tt>
<br />
<samp>计算机样本</samp>
<br />
<var>定义变量</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
</body>
</html>
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码。 |
| <kbd> | 定义键盘码。 |
| <samp> | 定义计算机代码样本。 |
| <tt> | 定义打字机代码。 |
| <var> | 定义变量。 |
| <pre> | 定义预格式文本。 |
| <listing> | 不赞成使用。使用 <pre> 代替。 |
| <plaintext> | 不赞成使用。使用 <pre> 代替。 |
| <xmp> | 不赞成使用。使用 <pre> 代替。 |
引用、引用和术语定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写。 |
| <acronym> | 定义首字母缩写。 |
| <address> | 定义地址。 |
| <bdo> | 定义文字方向。 |
| <blockquote> | 定义长的引用。 |
| <q> | 定义短的引用语。 |
| <cite> | 定义引用、引证。 |
| <dfn> | 定义一个定义项目。 |
下面会展示，就不在这里写了。
引用
<!DOCTYPE html>
<html>
<body>
<p>浏览器通常会在 q 元素周围包围引号。</p>
<p>q元素是用来：<q>表示引号</q></p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<!-- 这是一个段落标签，用于展示文本信息。这里解释了浏览器如何对blockquote元素进行样式处理（缩进）。 -->
<p>浏览器通常会对 blockquote 元素进行缩进处理。</p>
<!--
这是一个blockquote元素，用于引用外部来源的文本或长段落的引用。
cite属性用于指定引用的来源链接，但请注意，并非所有浏览器都会以特殊方式显示这个链接。
在这个例子中，它引用了世界自然基金会（WWF）的简介。
-->
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
</body>
</html><!DOCTYPE html>
<html>
<body>
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>
</body>
</html><!DOCTYPE html>
<html>
<body>
<p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>
<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>
</body>
</html><!DOCTYPE html>
<html>
<body>
<p>The
<dfn>WHO</dfn> World Health Organization was founded in 1948.
</p>
<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>
</body>
</html>
表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<!DOCTYPE html>
<html>
<head>
<title>表格示例</title>
</head>
<body>
<!-- 表格基础说明 -->
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>
<!-- 一列表格 -->
<h4>一列：</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<!-- 一行三列表格 -->
<h4>一行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<!-- 两行三列表格 -->
<h4>两行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>列表
（无序）
列表建立用<ul>,列表项建立用<li>。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<html>
<body>
<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<p>只是单纯的列出来，没有排序</p>
</body>
</html>
（有序）
列表建立用<ol>,列表项建立用<li>。
<!DOCTYPE html>
<html>
<body>
<!-- 第一个有序列表，从默认的序号1开始 -->
<ol>
<li>咖啡</li> <!-- 列表项1：咖啡 -->
<li>牛奶</li> <!-- 列表项2：牛奶 -->
<li>茶</li> <!-- 列表项3：茶 -->
</ol>
<!-- 第二个有序列表，使用start属性从序号50开始 -->
<ol start="50">
<li>咖啡</li> <!-- 列表项50：咖啡 -->
<li>牛奶</li> <!-- 列表项51：牛奶 -->
<li>茶</li> <!-- 列表项52：茶 -->
</ol>
</body>
</html>
内联框架
用于在网页内显示网页。
删除边框:（frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 "0" 就可以移除边框）<iframe src="网页链接" frameborder="0"></iframe>
<!DOCTYPE html>
<html>
<body>
<!-- 嵌入一个外部页面到当前页面中，使用iframe元素。这里的src属性指定了要嵌入的页面的URL。
宽度和高度分别通过width和height属性设置。
属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。 -->
<iframe src="https://www.csdn.net/" width="600" height="400"></iframe>
<!-- 说明某些老式的浏览器可能不支持内联框架（iframe）的功能。 -->
<p>某些老式的浏览器不支持内联框架。</p>
<!-- 如果浏览器不支持iframe，则iframe元素在页面上将不会显示任何内容，也不会占据空间（除非设置了CSS样式来改变其行为）。 -->
<p>如果不支持，则 iframe 是不可见的。</p>
</body>
</html><!DOCTYPE html>
<html>
<body>
<!-- 定义一个iframe元素，其src属性尝试加载/example/html/demo_iframe.html页面。
同时，该iframe被赋予了一个name属性值为"iframe_a"，这个名称将在后续链接的target属性中使用。 -->
<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>
<!-- 定义一个段落，其中包含一个超链接。该链接的href属性指向http://www.w3school.com.cn。
重要的是，链接的target属性被设置为"iframe_a"，这与上面iframe的name属性值相匹配。
这意味着，当点击这个链接时，链接指向的页面将不会在新窗口或标签页中打开，
而是会在名为"iframe_a"的iframe中加载和显示。 -->
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
<!-- 这是一个简单的注释，用于解释上述链接和iframe之间的关系。
它指出，由于链接的target属性与iframe的name属性相匹配，因此链接将在iframe中打开。 -->
<p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>
</body>
</html>
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
