HTML是一种标记语言,用于创建网页的基本结构。它包含一系列基础标签,它们定义了页面的元素类型、内容和布局。
基本框架
HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。其基本框架通常由以下几个部分组成:
-
doctype声明:位于文档开头,告知浏览器这是一个HTML5文档,例如
<!DOCTYPE html>
。 -
html标签:这是整个文档的根元素,包含所有其他内容,通常会有一个
<html>
开始标签和一个</html>
结束标签。 -
head部分:包含元信息,如标题
<title>
,定义页面的基本信息,以及可能的样式表链接 (<link>
) 和脚本引用 (<script>
)。 -
head内的meta标签:例如
<meta charset="UTF-8">
设置字符编码,<meta name="viewport">
控制移动设备的视口。 -
body部分:主要内容区域,包含各种元素如段落
<p>
、标题<h1-h6>
、列表<ul/ol>
、图像<img>
、链接 <a>等。 -
注释:注释标签的格式为 <!--注释内容--!>。快捷键:ctrl+/
(小tips:输入英文!再按回车即可得到如下所示, "使用的软件为VScode" )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
正文部分
HTML标题标签
标题是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
代码如下:
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
运行结果:
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
格式化标签
在网页中,有时需要为文字设置粗体<b> or <strong>、斜体<i> or <em>或下划线<ins>效果,这就要用到HTML中的格式化标记,使文字以特殊的方式显示
代码如下:
<b>加粗文本</b>
<i>倾斜文本</i>
<del>带删除线文本</del>
<ins>下划线文</ins>
运行结果:
基本排版元素标签
段落和水平线属于最基本的排版元素。在网页制作的过程中,通过段落的排版即可制作出简单的网页
1.段落标签
段落标签<p>是HTML中用于定义段落的标签,它可以将一段文字或内容组合成一个独立的段落,使得文字在浏览器中显示时按照段落的形式展示
使用段落标签<p>的一些常见属性包括:
*align属性:用来指定段落对齐方式,常见的取值有"left"(左对齐)、"right"(右对齐)、"center"(居中)
代码如下:
这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
这是一个段落这是一个段落这是一个段落<p>这是一个段落</p><p align="center">这是一个段落</p>
运行结果:
2.换行标签
换行标签<br>是一种在 HTML 中用于创建新行的标记。当浏览器解析到 <br> 标签时,会在此处插入一个换行符,使文本内容换到新的一行。在 HTML 中,换行标签通常用于在文本中插入换行、分隔段落或创建列表等场景
代码如下:
<!-- 疑似地上霜需要换行,将<br>放在其前面 -->
床前明月光,<br>疑似地上霜
运行结果:
3.水平线标签
<hr>
是水平线标签的代码,它可以在网页上创建一条水平线。可以通过添加属性来自定义水平线的样式和属性,例如对齐方式 'align' 、颜色 'color' 、宽度 'width' 和样式大小 'size'等
代码如下:
第一行<br>
<hr color="red" size="10px" width="100" align="right">
第二行<br>
<hr color="green">
第三行<br>
<hr>
运行结果: