HTML 学习笔记 1
简介以及一些基本内容
HTML 是用来描述网页的一种语言，它并不是一种编程语言，而是用来描述网页的。
HTML文档也被称为网页，而浏览器的作用就是读取 HTML 文档并以网页的形式来显示它们。
HTML文档是由许许多多的标签构成的，标签有开始标签和结束标签，两个标签之间的内容叫做元素。
放在 <body> 标签里面的元素是显示在网页上的元素。
我们也可以对标签添加属性。
标签使用
请注意，如果是属性的话需要加双引号，其余则没有必要加上。
标题
标题为 <h1> 到 <h6>，分为 \(6\) 种大小的标题，使用例子如下：
<html>
<body>
<h1>
here is my WEB!!!!
</h1>
</body>
</html>
给一个添加属性的例子：
<html>
<body>
<h1 align="center">
"here is my WEB!!!!"
</h1>
</body>
</html>
实验以上代码的效果可以随便找到一个 HTML IDE，或者用 VScode 上的插件，插件直接在网络上搜索就会有。
段落
<html>
<body>
<h1 align="center">
"here is my WEB!!!!"
</h1>
<p>
AJH AK IOI!!!!!!!
</p>
</body>
</html>
我们在原先的基础上，加了一个段落，元素是 AJH AK IOI。后面感叹号就自动省略掉了。
我们可以把一个 HTML 文档分成若干段落，每个段落自动加空格，但是用 <p></p> 添加空格是一个不好的习惯，请用 <br/> 添加空格。发现了一个奇妙的东西，就是这个 MarkDown 编辑器似乎可以读取 HTML 文档。
我们可以用 <br/> 来在段落内部添加空行，例如：
<html>
<body>
<h1 align="center">
"here is my WEB!!!!"
</h1>
<p>
AJH<br/>AK<br/>IOI!!!!!!!
</p>
<hr/>
<!-- I am a vegetable chicken /ll -->
<p align="center">
DYKAKIOI!!!!!!!!
</p>
</body>
</html>
<br/>是一个空标签，结束它没有任何意义，所以其没有结束标签。
HTML 文档在读取的时候并不关注排版，例如，在一个段落中连续的空格或空行都会被视为是一个空格。
水平线
<html>
<body>
<h1 align="center">
"here is my WEB!!!!"
</h1>
<p>
AJH AK IOI!!!!!!!
</p>
<hr/>
<p align="center">
DYKAKIOI!!!!!!!!
</p>
</body>
</html>
我们在原先的基础上，加了一个水平线和另一个段落，水平线就是 <hr> 。
注释
这里的注释和我们平常写代码时候的注释一样，不会被浏览器识别。
<html>
<body>
<h1 align="center">
"here is my WEB!!!!"
</h1>
<p>
AJH AK IOI!!!!!!!
</p>
<hr/>
<!-- I am a vegetable chicken /ll -->
<p align="center">
DYKAKIOI!!!!!!!!
</p>
</body>
</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>
<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>
<!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>
文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
| <s> | 不赞成使用。使用 <del> 代替。 |
| <strike> | 不赞成使用。使用 <del> 代替。 |
| <u> | 不赞成使用。使用样式（style）代替。 |
“计算机输出”标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码。 |
| <kbd> | 定义键盘码。 |
| <samp> | 定义计算机代码样本。 |
| <tt> | 定义打字机代码。 |
| <var> | 定义变量。 |
| <pre> | 定义预格式文本。 |
| <listing> | 不赞成使用。使用 <pre> 代替。 |
| <plaintext> | 不赞成使用。使用 <pre> 代替。 |
| <xmp> | 不赞成使用。使用 <pre> 代替。 |
引用、引用和术语定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写。 |
| <acronym> | 定义首字母缩写。 |
| <address> | 定义地址。 |
| <bdo> | 定义文字方向。 |
| <blockquote> | 定义长的引用。 |
| <q> | 定义短的引用语。 |
| <cite> | 定义引用、引证。 |
| <dfn> | 定义一个定义项目。 |
引用
<q> 用于小的引用，浏览器通常会在其旁边加上双引号。
代码：
<html>
<body style="background-color: white;">
<h1 style="background-color:blue;">
"here is my WEB!!!!"
</h1>
<p style="background-color: blueviolet; text-align: center;">
AJH<br/>AK<br/>IOI!!!!!!!
</p>
<hr/>
<!-- I am a vegetable chicken /ll -->
<p style="background-color: crimson;color: darkgreen;font-family: monospace;font-size: 60px;">
DYKAKIOI!!!!!!!!
</p>
<q>Here is a quote</q>
</body>
</html>
如果想要长引用的话，可以使用 <blockquote> ，如下：
<html>
<body style="background-color: white;">
<h1 style="background-color:blue;">
"here is my WEB!!!!"
</h1>
<p style="background-color: blueviolet; text-align: center;">
AJH<br/>AK<br/>IOI!!!!!!!
</p>
<hr/>
<!-- I am a vegetable chicken /ll -->
<p style="background-color: crimson;color: darkgreen;font-family: monospace;font-size: 60px;">
DYKAKIOI!!!!!!!!
</p>
<q>Here is a quote</q>
<blockquote>
Here is a BLOCKQUORE!!!!!
</blockquote>
</body>
</html>
但是请注意，长引用是没有双引号的。
缩写，我们可以定义缩写。
<!DOCTYPE html><html><body><p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p><p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p></body></html>
还有其他的一些标签，暂且列在下面：
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写或首字母缩略语。 |
| <address> | 定义文档作者或拥有者的联系信息。 |
| <bdo> | 定义文本方向。 |
| <blockquote> | 定义从其他来源引用的节。 |
| <dfn> | 定义项目或缩略词的定义。 |
| <q> | 定义短的行内引用。 |
| <cite> | 定义著作的标题。 |
以上所有标签通过下面这个例子来实现：
<html> <body style="background-color: white;"> <h1 style="background-color:blue;"> "here is my WEB!!!!" </h1> <p style="background-color: blueviolet; text-align: center;"> AJH<br/>AK<br/>IOI!!!!!!! </p> <hr/> <!-- I am a vegetable chicken /ll --> <p style="background-color: crimson;color: darkgreen;font-family: monospace;font-size: 60px;"> DYKAKIOI!!!!!!!! </p> <q>Here is a quote</q> <blockquote> Here is a BLOCKQUORE!!!!! </blockquote> <address> fjlkdsajfljfdlakjfdkl </address> <cite>djasilfjaiejlfak</cite> <bdo dir="rtl">HELLO</bdo> </body></html>
但其实这些都没啥大用。我感觉。
属性使用
样式 style
style 树形用来改变 HTML 元素的样式。
提供了一种改变所有 HTML 元素的样式的通用方法。
在未来，有一些属性和标签将会被弃用，例如我们上面曾经使用过的 <align>
下面是一个例子：
<html> <body style="background-color: aqua;"> <h1 style="background-color:blue;"> "here is my WEB!!!!" </h1> <p style="background-color: blueviolet;"> AJH<br/>AK<br/>IOI!!!!!!! </p> <hr/> <!-- I am a vegetable chicken /ll --> <p style="background-color: crimson;"> DYKAKIOI!!!!!!!! </p> </body></html>
具体的，font-family,color,font-size 属性分别是定义字体种类，颜色，和字体大小。下面是一个例子：
<html> <body style="background-color: aqua;"> <h1 style="background-color:blue;"> "here is my WEB!!!!" </h1> <p style="background-color: blueviolet;"> AJH<br/>AK<br/>IOI!!!!!!! </p> <hr/> <!-- I am a vegetable chicken /ll --> <p style="background-color: crimson;color: darkgreen;font-family: monospace;font-size: 60px;"> DYKAKIOI!!!!!!!! </p> </body></html>
而 text-algin 能够规定对齐。
<html> <body style="background-color: white;"> <h1 style="background-color:blue;"> "here is my WEB!!!!" </h1> <p style="background-color: blueviolet; text-align: center;"> AJH<br/>AK<br/>IOI!!!!!!! </p> <hr/> <!-- I am a vegetable chicken /ll --> <p style="background-color: crimson;color: darkgreen;font-family: monospace;font-size: 60px;"> DYKAKIOI!!!!!!!! </p> </body></html>
总结
今天学了一些 HTML 标签，以及一些属性。我深刻的认识到，如果你想要熟练的编写 HTML 的话，你需要平时多积累，多记忆。今天学的内容就用一段 HTML 文档来总结。
<html> <body style="background-color: white;"> <h1 style="background-color:blue;"> "here is my WEB!!!!" </h1> <p style="background-color: blueviolet; text-align: center;"> AJH<br/>AK<br/>IOI!!!!!!! </p> <hr/> <!-- I am a vegetable chicken /ll --> <p style="background-color: crimson;color: darkgreen;font-family: monospace;font-size: 60px;"> DYKAKIOI!!!!!!!! </p> <q>Here is a quote</q> <blockquote> Here is a BLOCKQUORE!!!!! </blockquote> <address> fjlkdsajfljfdlakjfdkl </address> <cite>djasilfjaiejlfak</cite> <bdo dir="rtl">HELLO</bdo> </body></html>
