HTML 标题、注释、列表、段落

原创已于 2023-09-22 11:22:12 修改 · 1.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端

于 2023-09-16 11:45:11 首次发布

HTML 标题

在 HTML 文档中，标题很重要。

HTML 标题可以用来呈现文档结构，设置得当的标题有利于用户浏览您的网页。

标题（Heading）是通过 <h1> - <h6> 标签进行定义的.

<h1>定义最大的标题。<h6> 定义最小的标题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- html标题 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
	</body>
</html>

注释: 浏览器会自动地在标题的前后添加空行。

注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- html标题 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		
		<!-- 这是水平线 -->
		<hr />
		
		<!-- 这是段落 -->
		<p>这是一个段落</p>
	</body>
</html>

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

HTML 注释可以方便地用来帮助网页设计人员，提醒他们与程序相关的信息。

注释写法如下:

<!-- 这是一个注释 -->

注释: 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

HTML 提示 - 如何查看源代码

前端代码
浏览器 - 右击 - 检查

前端代码不保密

前端代码容错性很高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是标题</title>
		hollo1
	</head>
	<body>
        hello2
	</body>
</html>

HTML 使用

定义粗体文本

<b></b>

定义一个空格

&nbsp

定义简单的折行

<br/>

规定元素的唯一 id

<h1 id="title1" >

规定元素的额外信息（可在工具提示中显示）

<h1 title="标题1">

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是标题</title>
	</head>
	<body>
				这个           不加粗<br/>
		<b>这是    一个加粗效果</b><br/>
		<b>这是&nbsp;&nbsp;&nbsp;&nbsp;一个加粗效果</b>
		<h1>11111</h1>
		<h1>
			22222
		</h1>
		<b></b>
		<h1 id="title1" title="标题1">这是一级标题</h1>
		<h2 id="title2">这是二级标题</h2>
	</body>
</html>

HTML 列表

HTML 支持有序、无序和定义列表:

HTML 有序列表

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

有序列表适合各项目之间存在顺序关系的情况。

列表项项使用数字来标记。

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表适合成员之间无级别顺序关系的情况。

无序列表使用 <ul> 标签。

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

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

自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有术语名或者只有定义也是可行的，也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1>有序列表</h1>
		<ol>
			<li>元素1</li>
			<li>元素1</li>
			<li>元素1</li>
			<li>元素1</li>
			<li>元素1</li>
		</ol>
		
		<h1>无序列表</h1>
		<ul>
			<li>元素1</li>
			<li>元素1</li>
			<li>元素1</li>
			<li>元素1</li>
			<li>元素1</li>
		</ul>
		
		<h1>自定义列表</h1>
		<dl>
			<dt>水果</dt>
			<dd>- apple</dd>
			<dd>- banana</dd>
			<dt>颜色</dt>
			<dd>- green</dd>
			<dd>- red</dd>
		</dl>
	</body>
</html>

HTML 列表标签

HTML 段落

HTML 开头

HTML 可以将文档分割为多个层次。

HTML 初步

开头是通过 <p> 标签定义的。

<p>这是一个段落</p> 

<p>这是另一个段落</p>

注意：浏览器会自动地在先前的前后添加空行。（</p>是块级元素）

HTML 折行

如果您希望在不产生一个新起点的情况下进行换行（新行），请使用 <br /> 标签。

在 HTML 语言中，<br /> 标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行拆分：

<p>这个<br>段落<br>演示了分行的效果</p>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

HTML 输出-使用提醒

我们无法确定 HTML 被显示的效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空间或换行来改变输出的效果。

当显示页面时，浏览器会可移动源代码中多余的空间和空行。所有连续的空间或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行））也被显示为一个空格。

标签

#html #前端 #服务器