HTML学习笔记

ScienceLi1125

已于 2023-10-12 18:11:52 修改

阅读量132

点赞数 2

分类专栏：软件开发文章标签： html 学习前端

于 2022-08-10 15:44:27 首次发布

本文链接：https://blog.csdn.net/m0_51976564/article/details/126260429

版权

软件开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文参考 w3school在线教程，仅供本人学习使用。

1. HTML 简介

（1）什么是 HTML？

HTML (Hyper Text Markup Language，超文本标记语言)：是一种用来描述网页的标记语言。它不是编程语言，我们常使用标记标签来描述网页。

（2）HTML 标签

HTML 标记标签简称 HTML 标签，是由尖括号包围的关键词，如：<html>。HTML标签通常是成对出现的，如 <b> 和 </b>。第一个叫开始标签，第二个叫结束标签。

（3）HTML 文档

HTML 文档也被称为网页，包含 HTML 标签和纯文本。Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是文章头部</title>
	</head>
	<body>
		<h1>这是第一级标题</h1>
		<p>这是一个段落</p>
	</body>
</html>

网页效果如下：

其中：

<html> 与 </html> 之间的文本用于描述网页；
<head> 与 </head> 之间的文本是文档的头部，描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者；
<body> 与 </body> 之间的文本是可见的页面内容，下面会详细介绍；
<h1> 与 </h1> 之间的文本被显示为标题，从 h1 到 h6 最多共可包含 6 级标题；
<p> 与 </p> 之间的文本被显示为段落。

（4）HTML 元素

HTML 文档是由 HTML 元素定义的，HTML 元素指的是从开始标签到结束标签的所有代码。

2. HTML 标签

（1）HTML 标题

HTML 标题（Heading）是通过 <h1> 到 <h6> 等标签进行定义的，最多可分为6级：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文章标题测试</title>
	</head>
	<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>

网页效果如下：

（2）HTML 段落

HTML 段落是通过 <p> 标签进行定义的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文章段落测试</title>
	</head>
	<body>
		<p>这是段落1。</p>
		<p>这是段落2。</p>
		<p>这是段落3。</p>
	</body>
</html>

网页效果如下：

如果单纯想换行而不想另起一段，则使用 <br />

（3）HTML 链接

HTML 链接是通过 <a> 标签进行定义的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文章链接测试</title>
	</head>
	<body>
		<a href="http://www.w3school.com.cn">w3school在线教程</a>
	</body>
</html>

网页效果如下：

其中链接还可以是本页面的指定位置，也可以添加 target 属性来决定链接文档后是否打开新页面，以及 name 属性定义标签来定位网页位置。

（4）HTML 图像

HTML 图像是通过 <img> 标签进行定义的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文章图片测试</title>
	</head>
	<body>
		<img src="D:\CD2022\myproj\app01\static\img\Basketball.jpg" width="200px" height="140px" />
	</body>
</html>

网页效果如下：

（5）HTML 水平线

HTML 水平线是通过 <hr /> 标签进行定义的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML水平线</title>
	</head>
	<body>
		<p>This is paragraph1</p>
		<hr />
		<p>This is paragraph2</p>
		<hr />
		<p>This is paragraph3</p>
	</body>
</html>

网页效果如下：

（6）顺序标签

HTML 无序标签通过 <ul> <li></li> </ul> 进行定义；
HTML 有序标签通过 <ol> <li></li> </ol> 进行定义；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML顺序标签</title>
	</head>
	<body>
		<ul>
		    <li>1</li>
		    <li>2</li>
		    <li>3</li>
		</ul>
		<ul type="none">
		    <li>1</li>
		    <li>2</li>
		    <li>3</li>
		</ul>
		<ol>
		    <li></li>
		    <li></li>
		    <li></li>
		</ol>
	</body>
</html>

网页效果如下：

3. HTML 属性

HTML 标签可以拥有属性，提供了有关 HTML 元素的更多的信息，如：居中、长宽、颜色等。属性总是以名称/值对的形式出现，比如：name=“value”。并且属性总是在 HTML 元素的开始标签中规定。

（1）标题居中

HTML 标题居中是通过 <h1 align=“center”> 进行定义的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文章标题居中</title>
	</head>
	<body>
		<h1 align="center">标题居中</h1>
	</body>
</html>

网页效果如下：

（2）背景颜色

HTML 背景颜色是通过 <body bgcolor=“yellow”> 标签进行定义的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文章背景颜色</title>
	</head>
	<body bgcolor="green">
		这里是绿色背景
	</body>
</html>

网页效果如下：

更多属性参考 HTML 标准属性参考手册，在 html4 中上述属性已经被 style 属性样式取代，下面将介绍。

4. HTML 样式

style 属性用于改变 HTML 元素的样式，包括：字体、颜色、尺寸、背景颜色和对齐等。

（1）字体、颜色、尺寸

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文章文本样式</title>
	</head>
	<body>
		<h1 style="font-family:verdana">A heading</h1>
		<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
	</body>
</html>

网页效果如下：

（2）背景颜色

background-color 属性为元素定义了背景颜色：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文章背景颜色</title>
	</head>
	<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>

网页效果如下：

（3）文本对齐

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本对齐</title>
	</head>
	<body>
		<h1 style="text-align:center">标题居中</h1>
		<p style="text-align:right">段落靠右</p>
	</body>
</html>

网页效果如下：

（4）行内元素

HTML中 <span> 不同于 <div>，前者是纯文本容器，样式只对 span 所包含文本部分生效，不会自动换行；后者是块容器，可包含其他类型元素，样式对 div 所包含区域都生效，会自动换行。

<!DOCTYPE html>
<html>
	<head>
		<style>
		  span.red {color:red;}
		</style>
	</head>
	<body>
		<h1>My <span class="red">Important</span> Heading</h1>
	</body>
</html>

在这里插入图片描述

5. 文本格式化

HTML 可定义很多供格式化输出的元素，比如粗体、斜体等，参考下表：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化</title>
	</head>
	<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>