HTML标签-基础
<!DOCTYPE>
<!DOCTYPE> 是 HTML 中用于声明文档类型的标签。它通常出现在 HTML 文档的第一行，用于告诉浏览器当前页面采用的是哪种 HTML 版本。
常见用法：
<!DOCTYPE html>
这表示该文档使用的是 HTML5 标准。
在 HTML5 之前，每个 HTML 或 XHTML 版本都有很长很复杂的 DOCTYPE 声明，例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
作用：
- 帮助浏览器以正确的模式解析和渲染页面。
- 如果没有声明或声明错误，浏览器可能会以兼容模式解析页面，导致样式和脚本出现问题。
总结：
<!DOCTYPE> 不是一个 HTML 标签，而是一个声明，用于定义 HTML 文档的类型和规范版本。
<html>
<html> 标签用于定义一个 HTML 文档的根元素，是所有其他 HTML 标签的父级标签。所有网页内容都应该写在 <html>...</html> 标签之间。
作用：
-
标志文档开始和结束
页面最外层必须有<html>标签，用来告诉浏览器：这里是 HTML 文档。 -
包含所有网页内容
里面通常包含两个主要部分：<head>：文档头部，放元数据、标题、样式等。<body>：文档主体，放具体内容（文本、图片、表格等）。
示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>这是我的第一个HTML页面。</p>
</body>
</html>
总结：
-
<html>是所有 HTML 内容的根标签，必须有且只能有一个。 -
规范写法建议加上
<!DOCTYPE html>声明，保证 HTML5 标准渲染。 -
一般会加上语言属性，如
<html lang="zh-CN">，表示中文页面。
<title>
<title> 标签用于定义网页的标题，显示在浏览器的标题栏或标签页上。它必须放在 <head> 标签内部。
作用：
-
浏览器标题栏显示
<title>标签中的内容会显示在浏览器窗口的上方标签栏（或标题栏），方便用户辨认页面。 -
搜索引擎优化（SEO）
网页的<title>是搜索引擎重点抓取的信息之一，合理的标题有助于网页在搜索结果中获得更好的排名。
示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎访问我的网页</h1>
</body>
</html>
在浏览器中打开这个页面时，标签栏会显示“我的第一个HTML页面”。
注意事项：
<title>标签必须放在<head>标签内，且每个页面只能有一个<title>。- 内容要简洁明了，突出网页主题，建议控制在30字符以内。
- 可以结合 SEO 优化关键词，让网页更容易被搜索到。
总结：
<title> 标签用于设置网页的标题，是用户和搜索引擎了解网页内容的第一窗口。正确使用有助于提升用户体验和搜索排名。
<body>
<body> 标签用于定义网页的主体内容，也就是用户在浏览器中实际可见的部分。所有页面的文本、图片、表格、列表、表单等内容都应该写在 <body>...</body> 标签之间。
作用：
-
网页的主要内容区域
<body>标签包裹着网页中所有可见的内容，比如标题、段落、图片、链接、表格、视频、音频等。 -
与
<head>区分
<head>标签用于放置元信息（如标题、样式、脚本等），而<body>才是呈现给用户看的部分。
示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>网页主体示例</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
</body>
</html>
注意事项：
- 每个 HTML 页面只能有一个
<body>标签。 <body>标签里的内容会真实显示在浏览器页面上。- 样式和脚本通常通过
<head>标签引入，但也可以在<body>内部嵌入。
总结：
<body> 是网页内容的容器，所有用户能看到的内容都应该写在 <body> 标签内部。正确使用 <body> 标签是构建规范网页结构的基础。
<h1> to <h6>
<h1> 到 <h6> 标签用于定义网页中的标题，用于对页面内容进行分级。<h1> 是最高级别的标题，依次递减，<h6> 是最低级别的标题。合理使用这些标签可以让网页结构更清晰，有助于SEO和无障碍访问。
作用：
-
分级标题结构
<h1>到<h6>可以把网页内容分成不同的层级，方便用户快速了解页面结构。例如，主标题用<h1>，章节标题用<h2>，子标题用<h3>，以此类推。 -
提升可访问性和SEO
搜索引擎和辅助设备（如屏幕阅读器）会根据标题层级理解网页内容，有助于提升搜索排名和无障碍体验。
示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>标题标签示例</title>
</head>
<body>
<h1>网站主标题</h1>
<h2>一级内容标题</h2>
<h3>二级内容标题</h3>
<h4>三级内容标题</h4>
<h5>四级内容标题</h5>
<h6>五级内容标题</h6>
<p>以上分别展示了 <code><h1></code> 到 <code><h6></code> 的标题层级效果。</p>
</body>
</html>
注意事项：
- 每个页面建议只有一个
<h1>，用于主标题。 - 标题标签应按顺序使用，不要跳级（例如不要直接从
<h1>跳到<h4>）。 - 标题不仅仅是为了样式，更重要的是表达内容层级和语义。
总结：
<h1> 到 <h6> 标签是网页结构化和分级展示内容的重要工具。合理使用标题标签可以让网页内容更清晰、易读，同时有助于搜索引擎优化和提升用户体验。
<p>
<p> 标签用于定义网页中的段落，是最常用的文本排版标签之一。浏览器会自动在每个段落前后添加空白间距，使内容更清晰易读。
作用：
-
分隔文本内容
使用<p>可以将一段文本与其他内容区分开来，形成自然的分段效果，有助于内容结构化和美观展示。 -
便于样式控制
可以通过 CSS 针对<p>标签设置字体、颜色、间距等样式，让页面排版更加灵活。
示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>段落标签完整示例</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是第一个段落，介绍网站的主要内容。</p>
<p>这是第二个段落，补充更多详细信息。</p>
<p>
你可以在段落中使用<strong>加粗</strong>、<em>斜体</em>等标签丰富内容，也可以通过CSS设置段落样式。
</p>
<p>
如果只想换行但不分段，可以使用<br>标签实现。例如：<br>这一行之后直接换行显示。
</p>
</body>
</html>
注意事项：
<p>标签内不允许嵌套其他块级标签（如另一个<p>、<div>、<h1>等）。- 如果只换行但不分段，可以使用
<br>标签。 - 浏览器会自动在
<p>段落前后加间距，无需手动添加空行。
总结：
<p> 标签是网页排版中最基础的段落标签，用于标识和分隔文本内容，让页面结构更清晰、易于阅读。正确使用 <p> 标签，有助于提升网页的规范性和用户体验。
<br>
<br> 标签用于在网页中插入换行，是一个单标签（自闭合标签），没有闭合部分。在需要文本直接换行但不分段时使用 <br> 标签。
作用：
-
实现文本换行
当需要在同一个段落或文本中换行时，可以使用<br>标签。比如诗歌、通讯地址、歌词等场景。 -
提升排版灵活性
<br>标签常用于不适合用段落分隔但需要换行的地方，让页面内容展示更符合实际需求。
示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>换行标签示例</title>
</head>
<body>
<h1>个人信息</h1>
<p>
姓名：张三<br>
电话：123456789<br>
邮箱：zhangsan@example.com
</p>
<p>
这是第一行。<br>
这是第二行。
</p>
</body>
</html>
注意事项：
<br>只是换行，不会产生段落间距。- 不建议在大段文本排版中频繁使用
<br>，更推荐用<p>标签分段。 - 在 HTML5 中，
<br>可以写作<br>或<br />，推荐使用<br>。
总结：
<br> 标签用于在文本中插入换行，适合需要直接换行的场景。合理使用 <br> 可以提升网页内容的表现力，但注意不要滥用，避免影响页面结构的语义性和可维护性。
<hr>
<hr> 标签用于在网页中插入水平分隔线，通常用来分隔内容、主题或章节。它是单标签（自闭合标签），没有闭合部分。
作用：
-
内容分隔
可以在页面中用水平线将不同部分或主题区分开，提升版面层次感和可读性。 -
美化页面结构
<hr>标签可以作为视觉元素，使网页内容不显得单调，也能强调分隔的重要性。
示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>水平分隔线标签示例</title>
</head>
<body>
<h1>我的网站</h1>
<p>这是第一部分内容。</p>
<hr>
<p>这是第二部分内容，与上一部分用水平线分开。</p>
</body>
</html>
注意事项：
<hr>只是插入一条水平线，不会影响内容的语义结构。- 可以通过 CSS 设置线条的颜色、粗细、宽度等样式。
- 在 HTML5 中，推荐写作
<hr>，无需关闭标签。
总结：
<hr> 标签用于插入水平分隔线，帮助网页内容分区，提升视觉效果。合理使用 <hr> 能让页面结构更清晰、美观。
<!--...-->
<!-- ... --> 用于定义 HTML 注释内容。注释内容不会被浏览器显示，仅供代码编写者阅读和参考。常用于代码解释、临时备注或屏蔽部分内容。
作用：
-
代码说明与备注
可以在 HTML 文件中添加解释说明，帮助自己或其他开发者理解代码结构、用途或特殊处理方式。 -
调试和屏蔽
临时不让一段代码显示，可以用注释标签将其包裹，方便调试和排查问题。
示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>HTML 注释示例</title>
</head>
<body>
<h1>欢迎访问我的网站</h1>
<!-- 这是一个注释，浏览器不会显示这段内容 -->
<p>这里是页面正文。</p>
<!--
多行注释内容
可以写一些开发说明
或者暂时屏蔽某些标签
-->
</body>
</html>
注意事项：
- 注释标签不能嵌套，即不能在注释内部再写一个注释标签。
- 注释内容不会被渲染，但会出现在网页源代码中，注意不要暴露敏感信息。
- 在生产环境下，建议删除无用注释，保持代码简洁。
总结：
<!-- ... --> 是 HTML 的标准注释语法，用于添加代码说明或临时屏蔽内容。合理使用注释有助于提升代码可读性和团队协作效率，但也要注意隐私和简洁性。
206
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
