共计 3159 个字符，预计需要花费 8 分钟才能阅读完成。
1 元素
1.1 语法
- 示例：
| 开始标签 | 元素内容 | 完结标签 |
|---|---|---|
<p> |
段落 | </p> |
<a> |
链接 | </a> |
<br> |
换行 |
- 语法：
# 以开始标签起始，以完结标签终止；# 元素内容是开始标签与完结标签之间的内容；# 空元素在开始标签中进行敞开（以开始标签的完结而完结）；# 少数元素可领有属性。1.2 元素嵌套
- 比方之前写的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 开始学习 html，这是我的第一个页面，哈哈哈！</title>
</head>
<body>
<h1> 题目 1：尽管我不会，然而我有学习的能源！</h1>
<h2> 题目 2：明天我认真的学习了！</h2>
<p> 这是一个段落！</p>
</body>
</html>>- 以上内容蕴含的元素有
<html>、<head>、<body>、<h1>、<h2>、<p>六个 html 元素；
1.3 空元素
- 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中敞开的；
- 比方前边说的
<br>就是没有敞开标签的空元素； - 空元素的敞开办法为，例如
<br />；
1.4 书写注意事项
- 元素倡议应用小写，比方
<a>dsd</a>，而不要写<A>sdsd</A>。
1.5 HTML 标签
- 内容比拟多，能够参考学习 https://www.runoob.com/tags/html-reference.html
2 属性
2.1 属性阐明
- 对 TML 元素能够设置属性；
- 属性能够在元素中增加附加信息；
- 属性个别形容于开始标签；
- 属性总是以名称 / 值对的模式呈现, 比方 python 中的字典，有键和值，比方
name="zhangsan";
2.2 示例
- 比方元素
<a>的href 属性，示意链接的地址；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 开始学习 html，这是我的第一个页面，哈哈哈！</title>
</head>
<body>
<h1> 题目 1：尽管我不会，然而我有学习的能源！</h1>
<h2> 题目 2：明天我认真的学习了！</h2>
<p> 这是一个段落！</p>
<a href="https://blog.csdn.net/NoamaNelson"> 点击进入我的博客链接 </a>
</body>
</html>>- 浏览器中关上如下：
2.3 属性举例
| 属性 | 阐明 |
|---|---|
| class | 规定元素的类名（classname） |
| id | 规定元素的惟一 id |
| style | 规定元素的行内款式 |
| title | 规定元素的额定信息 |
2.4 注意事项
- 属性倡议应用小写；
- 应用双引号或单引号括起来；
- 如果遇到有双引号和单引号一起用的，留神要成对用，比方
name='gebi"laowang"';
3 题目
3.1 题目阐明
- 这个和 markdown 查不对，都应用
h来示意； - 应用
<h1> 到 <h6>标签进行定义； <h1>是最大题目，顺次减小，<h6>最小；
3.2 应用办法
<h1> 题目 1（相似一级题目，集体叫法）</h1>
<h2> 题目 2（相似二级题目，集体叫法）</h2>
<h1> 题目 1（相似一级题目，集体叫法）</h1>
<h1> 题目 1（相似一级题目，集体叫法）</h1>3.3 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 题目学习 </title>
</head>
<body>
<h1>1、xx 工具的应用 </h1>
<h2>1.1、xx 工具的下载 </h2>
<h3>1.1.1、xx 工具下载网址 </h3>
<a href="https://blog.csdn.net/NoamaNelson"> 点击进入我的博客链接 </a>
</body>
</html>>4 水平线
4.1 HTML 水平线
- 应用标签
<hr>来定义 页面中的水平线； - 其作用可用来宰割内容。
4.2 应用办法
<p> 段落 1 </p>
<hr>
<p> 段落 2 </p>
<p> 段落 3 </p>
<p> 段落 4 </p>
<p> 段落 5 </p>
<hr>4.3 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 水平线学习 </title>
</head>
<body>
<p align="center"> 静夜思 </p>
<hr>
<p align="center"> 床前明月光，</p>
<p align="center"> 疑是地上霜。</p>
<p align="center"> 举头望明月，</p>
<p align="center"> 抬头思故土。</p>
<hr>
</body>
</html>5 正文
5.1 HTML 正文
- 应用
<!-- xxxx -->进行正文； - 和编程语言一样，晋升代码的可浏览性，不会被浏览器显示进去。
5.2 应用办法
<!-- 写正文的内容 -->
5.3 举例
- vs code 间接在须要加正文的代码行应用
ctrl + /即可疾速进行代码正文；
6 段落
6.1 HTML 段落
- 其实就是将文档能够分为若干个段落；
- 应用
<p> 段落内容 </p>来示意； - 浏览器会主动在段落前后加空行。
6.2 应用办法
<p> 段落内容 </p>；- 段落内换行应用
<br>；
6.3 举例
- 第一种：间接应用
<p> 段落内容 </p>，诗句的题目是一段，内容是一段；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 段落学习 </title>
</head>
<body>
<!-- 应用一首诗来示意段落！-->
<p align="center"> 静夜思 </p>
<hr>
<p align="center"> 床前明月光，疑是地上霜。举头望明月，抬头思故土。</p>
<!-- <p align="center"> 疑是地上霜。</p>
<p align="center"> 举头望明月，</p>
<p align="center"> 抬头思故土。</p> -->
<hr>
</body>
</html>- 第二种：应用
<br>在一个段落内换行；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 段落学习 </title>
</head>
<body>
<!-- 应用一首诗来示意段落！-->
<p align="center"> 静夜思 </p>
<hr>
<!-- 第一种 -->
<!-- <p align="center"> 床前明月光，疑是地上霜。举头望明月，抬头思故土。</p> -->
<!-- <p align="center"> 疑是地上霜。</p>
<p align="center"> 举头望明月，</p>
<p align="center"> 抬头思故土。</p> -->
<!-- 第二种 -->
<p align="center"> 床前明月光，<br> 疑是地上霜。<br> 举头望明月，<br> 抬头思故土。</p>
<hr>
</body>
</html>- 第三种：诗句的每一句就是一个段落；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 段落学习 </title>
</head>
<body>
<!-- 应用一首诗来示意段落！-->
<p align="center"> 静夜思 </p>
<hr>
<!-- 第一种 -->
<!-- <p align="center"> 床前明月光，疑是地上霜。举头望明月，抬头思故土。</p> -->
<!-- 第二种 -->
<!-- <p align="center"> 床前明月光，<br> 疑是地上霜。<br> 举头望明月，<br> 抬头思故土。</p> -->
<!-- 第三种 -->
<p align="center"> 床前明月光。</p>
<p align="center"> 疑是地上霜。</p>
<p align="center"> 举头望明月，</p>
<p align="center"> 抬头思故土。</p>
<hr>
</body>
</html>、
正文完
