HTML学习笔记

作者: 对面疾风啊
来源: 51数据库
2021-07-30

学习网站https://www.w3school.com.cn/h.asp
持续学习，持续更新

基础

一.简介

1.HTML是一种超文本标记语言，标记标签来描述网页，不是编程语音。
2.HTML标签：尖括号关键词，成对出现，分为开始标签和结束标签（开发标签和闭合标签）。
3.HTML文档=网页： Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

二.编译器

1.使用 Notepad 或 TextEdit 来编写 HTML。
2.记事本更改后缀txt->html。

三.组成

1.标题：<h1>+</h1>
2.段落：<p>+</p>
3.链接：<a>+</a>
4.图像：<img>
eg:

<html>
<body>
<h1>标题</h1>
<p>段落</p>
<img src="w3school.jpg" width="104" height="142" />
图像的名称和尺寸是以属性的形式提供的。
</body>
</heml>

四.元素

1.HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
2.大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
3.<p> 元素定义了 HTML 文档中的一个段落。
4.<body> 元素定义了 HTML 文档的主体。
5.<html> 元素定义了整个 HTML 文档。
6.在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
7.即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

五.属性

1.HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
2.属性总是以名称/值对的形式出现，比如：name=“value”。
3.属性总是在 HTML 元素的开始标签中规定。
4. 属性例子 1:
<h1> 定义标题的开始。
<h1 align=“center”> 拥有关于对齐方式的附加信息。
5.属性例子 2:
<body> 定义 HTML 文档的主体。
<body bgcolor=“yellow”> 拥有关于背景颜色的附加信息。
<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

拥有关于表格边框的附加信息。

属性参考手册

https://www.w3school.com.cn/tags/index.asp

六.标题

1.标题是网站的索引，h1–h6分别表示一级标题到六级标题
2.水平线<hr/>可以用于分割内容
3.注释方式


七.段落

1.<p>是块级元素，浏览器会自动在后面添加空行
2.不要使用 <p></p> 去插入一个空行，用<br/>代替
3.不要忘记结束标签
4.未来的HTML版本中不允许使用时没有结束标签，<br/>比<br>更有保障
5.浏览器会移除源代码中多余的空格和换行，连续的空格和换行只会视作一个空格

八.样式

1.style 属性用于改变 HTML 元素的样式。
2.background-color 属性为元素定义了背景颜色。

<body style="background-color:yellow">

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

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

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

<h1 style="text-align:center">This is a heading</h1>

九.格式化

1.文本格式化标签包括：

<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>

2.预格式文本，可以很好的保存空格和换行

<pre>+</pre>

3.计算机输出标签

<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 />

4.地址标签：

<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>

5.缩进标签：

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

6.文字方向：

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

7.块引用：

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

8.删除和下划线

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<!--del删除，ins下划线-->

9.文本格式化标签表

标签	描述
<b>	定义粗体文本。
<big>	定义大号字。
<em>	定义着重文字。
<i>	定义斜体字。
<small>	定义小号字。
<strong>	定义加重语气。
<sub>	定义下标字。
<sup>	定义上标字。
<ins>	定义插入字。
<del>	定义删除字。

10.“计算机输出”标签表

标签	描述
<code>	定义计算机代码。
<kbd>	定义键盘码。
<samp>	定义计算机代码样本。
<tt>	定义打字机代码。
<var>	定义变量。
<pre>	定义预格式文本。

11.引用、引用和术语定义表

标签	描述
<abbr>	定义缩写。
<acronym>	定义首字母缩写。
<address>	定义地址。
<bdo>	定义文字方向。
<blockquote>	定义长的引用。
<q>	定义短的引用语。
<cite>	定义引用、引证。
<dfn>	定义一个定义项目。