目录
HTML的基本概念
什么是HTML
HTML是超文本标记语言（Hyper Text Markup Language），用来描述网页。
- 不是C,C++之类的编程语言，而是一种标记语言
- 标记语言是一套标记标签
- HTML利用标记标签来描述网页
什么是HTML标签（HTML TAG)
- 用<>括号括起来的关键字
- 一般是成对出现的，标签对中第一个标签称为开始标签，第二个标签称为结束标签
网页
网页==HTML文档，包含HTML标签和纯文本
网页的开发步骤
- 编写HTML文档
- 使用WEB浏览器打开HTML文档
- WEB浏览器读取 HTML 文档，并以网页的形式显示出它们。
- 浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
第一个HTML文档
<html>
<body>
<h1>Header 标题</h1>
<p>段落</p>
</body>
</html>
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
- <p> 与 </p> 之间的文本被显示为段落
用记事本编写第一个HTML文件
编写HTML文件
打开记事本，输入如图：
文件的保存
另存为.html或者.htm
web解释
直接找到保存的文件，双击即可。
可能遇到的问题
- 选择的浏览器打不开html文件
解决方法：使用支持html文件的浏览器
- 如果纯文本是中文，网页出现乱码，则采用以下网址的方法
http://www.divcss5.com/html/h546.shtml
HTML常用标签
标题
<html>
<body>
<h1>THIS IS H1</h1>
<h2>THIS IS H2</h2>
<h3>THIS IS H3</h3>
<p>this is article</p>
</body>
</html>
通过关键字对<h1>到<h6>设置第？级标题
段落
<html>
<body>
<h1>THIS IS H1</h1>
<p>this is article01</p>
<p>this is article02</p>
<p>this is article03</p>
</body>
</html>
通过关键字对<p>
图像
<html>
<body>
<img src="D:\1.PNG" width="600" height="120" />
</body>
</html>
公式：
<img src="输入文件的路径“ width="宽度" height="高度" />
红色为可改的部分
链接
<html>
<body>
<a href="http://baidu.com">
BAIDU LINK</a>
</body>
</html>
双击打开网址：
公式：
<a href="输入网址">
输入显示的文本</a>
趣味导引
最好的编程学习方法应该就是阅读源码了，当你看到一个网页时，是不是想知道它是如何实现的？
可以单击鼠标右键选择“查看源文件”或“查看页面源代码”就可以查看网页源代码了。
HTML元素
HTML元素是指从开始标签到结束标签的内容，可以进行嵌套。
大多数HTML标签拥有属性；例如img标签。
空元素在开始标签中进行关闭
HTML属性
属性是HTML元素的附加信息，在开始标签中定义
<html>
<body bgcolor="yellow">
<h1 align="center"> This is heading </h1>
<p align="center"> This is article </p>
<a href="https://www.zhihu.com/"> This is Link </a>
<img scr="E://1.jpg" width="600" height="600" />
</body>
</html>
bgcolor :background color
align:排列（位置）
href:超链接
注意：此示例只为了说明属性，关于HTML样式，后文有更好的方法设置。
第二天标签
HTML注释
示例：
<! -- 这是注释，不会在网页中 出现 -->
HTML分界线
标签：<hr/>
注意：单个标签的/在关键字后面，标签对的结束标签的/在关键字的前面。
作用：在页面中创造分界线，用于分隔内容
试一试：
<html>
<body bgcolor="yellow">
<h1> h1 </h1>
<p> 1 </p>
</hr>
<! -- 用来分隔1和2 -->
<p> 2 </p>
</body>
</html>
注意：不是只有hr有分隔作用，其他标签在之后学习中积累。
HTML空行
<html>
<body>
<p>这是段落。可以写好多好多，但是它们都是一段。这是段落。可以写好多好多，但是它们都是一段。这是段落。可以写好多好多，但是它们都是一段。这是段落。可以写好多好多，但是它们都是一段。这是段落。可以写好多好多，但是它们都是一段。</p>
<p>每一对标签p都是一段。</p>
<p>浏览器会自动的在每一段的上下添加空行</p>
<hr/>
<p>但是不建议用不含内容的p来添加空行</p>
<br/>
<p>用br添加空行</p>
</body>
</html>
可以使用<p></p>来添加空行，但不支持这样做。
正确做法：使用<br/>添加空行。
br的其他用法
如果在一段<p>中，你希望在不产生新的段落的情况下换行，可以使用<br/>
<html>
<body>
<p>
武汉加油<br />！湖北加油！<br />中国加油！<br /><br />新型冠型病毒bs
</p>
</body>
</html>
注意：
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
提出问题：怎么样才可以控制网页展示的元素格式？
重点内容1：Style属性直击HTML样式
推荐用style属性来控制HTML样式
<html>
<body>
<h1 style="text-align:right"> This is heading </h1>
<h2 style="background-color:yellow"> This is Heading </h2>
<p style="font-family:arial; color:red; font-size:20px;"> This is <br/>article </p>
</body>
</html>
重点内容2：文本格式化
学习方法推荐：掌握缩写对应的英文意思，有助于理解标签的意思
注意：以下标签必须一个一个的应用过去。
文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
<html>
<body>
<pre>
这里是预留 文本，保留空格和空行，
适用于展示代码。
</pre>
<b> 这里是黑体 </b>
<br/>
<big> 这里是大号字 </big>
<br/>
<em> 这里是着重字 </em>
<br/>
<! -- br的作用是换行，即这些是同一个段落 -->
</body>
</html>
“计算机输出”标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码。 |
| <kbd> | 定义键盘码。 |
| <samp> | 定义计算机代码样本。 |
| <tt> | 定义打字机代码。 |
| <var> | 定义变量。 |
| <pre> | 定义预格式文本。 |
<html>
<body>
<code>
输入代码
</code>
</body>
</html>
引用、引用的术语定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写。 |
| <acronym> | 定义首字母缩写。 |
| <address> | 定义地址。 |
| <bdo> | 定义文字方向。 |
| <blockquote> | 定义长的引用。 |
| <q> | 定义短的引用语。 |
| <cite> | 定义引用、引证。 |
| <dfn> | 定义一个定义项目。 |
<html>
<body bgcolor="blue">
The <abbr title="backgroundcolor"> bdcolor </abbr> is blue
The <acronym title="World War Three"> WWT </acronym>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
ten
</address>
</body>
</html>
abbr
属性:title=要缩写的单词
元素为其缩写
acronym
属性：title=要首字母缩写的单词
元素为其缩写
推荐使用Notepad++
现在可以摆脱记事本，选择智能的编程环境。
HTML使用样式的三种方法
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
应用普遍性依次如下：
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1> This is heading </h1>
<p> This is a paragraph </p>
</body>
</html>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1> This is heading </h1>
<p> This is a paragraph </p>
</body>
</html>
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
HTML表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1> 表格 </h1>
<table border="1">
<caption>
这是标题
</caption>
<tr>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td> </td>
<td> 800 </td>
</tr>
</table>
</body>
</html>
caption:标题
tr是行
td是单元格的内容
th是表头,拥有属性 rowspan 和 colspan ：跨几行或跨几列
跨行--rowspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是跨行实验</h1>
<table border="1">
<tr>
<th> 姓名 </th>
<td> 张三 </td>
</tr>
<tr>
<th rowspan="3">
家人
</th>
<td>
妻子
</td>
</tr>
<tr>
<td> 儿子 </td>
</tr>
<tr>
<td> 父母 </td>
</tr>
</table>
</body>
</html>
跨列--colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是跨列实验</h1>
<table border="1">
<caption>
信息表
</caption>
<tr>
<th> 姓名 </th>
<th colspan="3"> 家人 </th>
</tr>
<tr>
<td> 张三</td>
<td> 妻子</td>
<td> 儿子</td>
<td> 父母</td>
</tr>
</table>
</body>
</html>
HTML列表
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是无序列表实验</h1>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<ol>
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
<ol start="20">
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
<dl>
<dt>hi</dt>
<dd>1</dd>
<dt>hello</dt>
<dd>1</dd>
<dd>2</dd>
</dl>
</body>
</html>
前端入门之HTML告一段落，掌握了HTML基本的知识点。
来源：CSDN
作者：TOKI不吃海鲜
链接：https://blog.csdn.net/qq_42736179/article/details/104110053