HTML快速自学教程

前言

快开学了，下学期本人想学一点前端的技术，找了些关于前端的入门学习路线，准备以HTML ，CSS，Javascript ，Vue框架这个顺序入门一下，日拱一卒，故将学习过程写成博客发在CSDN上，你我共勉。

HTML部分据说比较简单，所有内容将都放在这个帖子内

教程笔记

<HTML简介>

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

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

HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

实例

<html>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

效果图

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

<HTML基础>

通过四个实例，了解HTML基础

标题
通过<h1>–<h6> 定义大小
类似于Markdown语法中的 #

<html><body><h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6></body>
</html>

段落
通过<p></p>组合定义

<html>
<body><p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p><p>段落元素由 p 标签定义。</p> </body>
</html>

链接
链接通过<a>标签定义

<html>
<body><a href="https://blog.csdn.net/Jimobbb">Jimobbb的CSDN博客</a></body>
</html>

图像
<img>标签会控制图像
其中的src后面是图片的地址，width和height是图片的长宽，具体显示如下

<html>
<body><img src="https://img-blog.csdnimg.cn/20200730152536368.png" width="700" height="300" /></body>
</html>

<HTML 元素>

HTML 文档是由 HTML 元素定义的。
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
例如段落的开始标签<p>和结束标签</p>
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
例如最简单的

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

其中嵌套了<html> <body> <p>三个元素

空标签 <br>为没有关闭标签的空元素
<br/> 为关闭空元素的正确方法

PS：HTML对大小写不敏感

<HTML 属性>

属性为 HTML 元素提供附加信息
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=“value”
属性总是在 HTML 元素的开始标签中规定。

例如：HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

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

例2：
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。
效果如下（Markdown格式兼容HTML）：

This is heading 1

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

例4：
<table> 定义 HTML 表格
<table border="1"> 拥有关于表格边框的附加信息。

<HTML 标题>

除了之前的<h1>方法外，标题可以有别的添加
<hr /> 标签在 HTML 页面中创建水平线。

<p>hr 标签定义水平线：</p>
<hr />

效果如下

hr 标签定义水平线：

会出现一个下划线

HTML 注释
如下：
和其他语言的注释一样，注意格式就好

<HTML 段落>

除了基本的用法外，段落还有别的用法
在不产生一个新段落的情况下进行换行（新行），请使用<br /> 标签：
例如:<p>This is<br />a para<br />graph with line breaks</p>
效果如下：

This is
a para
graph with line breaks

<HTML 样式>

使用style 可以调整字体的样式

调整颜色
使用"background-color = xxxx"的格式，可以定义标题或段落或背景的颜色

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

效果：

调整字体尺寸颜色
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>

文本对齐
text-align 规定了文本对齐，属性是center就是居中
例:

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

This is a heading

<HTML 链接>

最基本的链接，采用标签<a>，但可以加入一些属性限定，例如：

<a href="http://www.w3school.com.cn/">Visit W3School</a>

href后面接网页的url链，中间用<>隔开的是超链接的显示名，如下：
Visit W3School

Target 属性，可以定义链接点击后会在哪里出现，例如
target = "_blank" 代表着在新标签页中打开

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

Visit W3School!

name属性中规定锚的用处。
可以用"label" 表示显示在页面上的文本
可以用"tips" 之类创建一个标签
这之后，再采用href="#tips"类

<a name="label">锚（显示在页面上的文本）</a>
<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">有用的提示</a>

锚（显示在页面上的文本）
基本的注意事项 - 有用的提示
有用的提示

<HTML 图像>

定义图片的基本语法是<img src="url" />
其中，如果图片不能加载出来，最好使用属性alt后面进行标注
比如：

<img src="boat.gif" alt="Big Boat">

其中因为图片url地址不对，是显示不出来的，就有了以下的效果

设置背景的标签属性如下，在<body>之中定义

<body background="/i/eg_background.jpg">
</body>

排列图片与字的位置，如下表示align采用五种标签，需要记住

<p>图像 <img src="https://www.w3school.com.cn/i/eg_cute.gif" align="bottom"> 上</p>
<p>图像 <img src ="https://www.w3school.com.cn/i/eg_cute.gif" align="middle"> 中</p>
<p>图像 <img src ="https://www.w3school.com.cn/i/eg_cute.gif" align="top">下</p>
<p>
<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

图像上

图像中

图像下

带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。

带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。

对于图片的大小，采用width与height标签，按像素为尺寸

<img src="https://www.w3school.com.cn/i/eg_mouse.jpg" width="200" height="200">

也可以将图片作为链接使用，这时候我需要将图片嵌套到链接中

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>

因为是嵌套的，所以图片会被认定为指向这个url地址的链接。点击图片相当于链接一样跳转

<HTML 表格>

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
例1：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

效果如下

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

（理论上应该是没有边框的）

表格的表头使用 <th> 标签进行定义。
例如加入表头后

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格会变成这个样子。
对于空单元格，我们使用<td> </td>进行占位，如下：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

row 1, cell 1	row 1, cell 2
	row 2, cell 2

<HTML 列表>

和Markdown一样，列表分为有序和无序列表
无序列表如下表示

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Coffee
Milk

有序列表如下表示

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Coffee
Milk

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Coffee: Black hot drink
Milk: White cold drink

<HTML 表单>