文章目录
HTML介绍
HTML 代表超文本标记语言
HTML 是创建网页的标准标记语言
HTML 描述网页的结构
HTML 由一系列元素组成
HTML 元素告诉浏览器如何显示内容
HTML 元素标记内容片段，例如“这是一个标题”、“这是一个段落”、“这是一个链接”等。
HTML文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示浏览器标题</title>
</head>
<body>体标签，网页主体</body>
</html>
<!DOCTYPE html> 声明定义此文档为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含有关 HTML 页面的元信息
<title> 元素指定 HTML 页面的标题（显示在浏览器的标题栏或页面的选项卡中）
<body> 元素定义文档的主体，是所有可见内容的容器，例如标题、段落、图像、超链接、表格、列表等。
<h1> 元素定义大标题
<p> 元素定义段落
HTML元素
HTML 元素由一个开始标签、内容和一个结束标签定义：
<开始标签>内容</结束标签>
例如
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
嵌套 HTML 元素
HTML 元素可以嵌套（这意味着元素可以包含其他元素）。
所有 HTML 文档都由嵌套的 HTML 元素组成。如文档结构定义，在 <html> 元素内有一个 <body> 元素：
永远不要忘了结束标签
即使忘记了结束标签，某些 HTML 元素也会正确显示：
<html>
<body>
<p>这是一个段落
<p>这是一个段落
</body>
</html>
但是，永远不要依赖这一点！如果忘记结束标签，可能会出现意外结果和错误！
空 HTML 元素
没有内容的 HTML 元素称为空元素。
<br> 标签定义换行符，并且是没有结束标签的空元素：
示例
<p>这是一个带有换行符的 <br> 段落。</p>
HTML 不区分大小写
HTML 标签不区分大小写：<P> 的含义与 <p> 相同。
HTML 标准不要求标签使用小写，但 W3C 建议在 HTML 中使用小写，并要求更严格的文档类型（如 XHTML）使用小写。
Web 浏览器
Web 浏览器（Chrome、Edge、Firefox、Safari）的目的是读取 HTML 文档并正确显示它们。
浏览器不显示 HTML 标签，而是使用它们来确定如何显示HTML
HTML文档结构
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落.</p>
<p>这是另外一个段落</p>
</body>
</html>
HTML编辑器
对于学习 HTML，建议使用简单的文本编辑器，如记事本 或 VSCode
第一步新建文件Hello.html
使用VSCode打开并写入以下代码，保存
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落.</p>
<p>这是另外一个段落</p>
</body>
</html>
用浏览器打开即可看到页面显示
HTML基础
HTML Documents
所有 HTML 文档都必须以文档类型声明开头：<!DOCTYPE html>。
HTML 文档本身以 <html> 开头，以 </html> 结尾。
HTML 文档的可见部分位于 <body> 和 </body> 之间。
<!DOCTYPE> 声明
<!DOCTYPE> 声明表示文档类型，可帮助浏览器正确显示网页。
它只能出现一次，位于页面顶部（任何 HTML 标记之前）。
<!DOCTYPE> 声明不区分大小写。
HTML5 的 <!DOCTYPE> 声明为：
<!DOCTYPE html>
HTML 标题
HTML 标题使用 <h1> 至 <h6> 标签定义。
<h1> 定义最重要的标题。 <h6> 定义最不重要的标题：
示例
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
HTML 段落
HTML 段落使用 <p> 标记定义：
示例
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
HTML 链接
HTML 链接使用 <a> 标记定义：
示例
<a href="https://www.baidu.com">这是一个链接</a>
链接的目标在 href 属性中指定。
属性用于提供有关 HTML 元素的其他信息。
HTML 图片
HTML 图像使用 <img> 标记定义。
源文件 (src)、替代文本 (alt)、宽度和高度作为属性提供：
示例
<img src="baidu.jpg" alt="baidu.com" width="104" height="142">
如何查看 HTML 源代码
在 HTML 页面中单击 CTRL + U，或右键单击页面并选择“查看页面源代码”。这将打开一个新选项卡，其中包含页面的 HTML 源代码。
检查 HTML 元素：
右键单击元素（或空白区域），然后选择“检查”以查看元素由哪些元素组成（您将看到 HTML 和 CSS）。您还可以在打开的元素或样式面板中即时编辑 HTML 或 CSS。
HTML 属性
HTML 属性提供有关 HTML 元素的附加信息。
所有 HTML 元素都可以具有属性
属性始终在开始标签中指定
属性通常以名称/值对的形式出现，例如：name=“value”
href 属性
<a> 标记定义超链接。href 属性指定链接指向的页面的 URL：
示例
<a href="https://www.baidu.com">访问 百度</a>
src 属性
<img> 标记用于在 HTML 页面中嵌入图像。src 属性指定要显示的图像的路径：
示例
<img src="img_girl.jpg">
有两种方法可以在 src 属性中指定 URL：
- 绝对 URL - 链接到托管在另一个网站上的外部图像。示例：
src="https://www.baidu.com/images/img_girl.jpg"。
注意：外部图像可能受版权保护。如果您未获得使用许可，则可能违反版权法。此外，您无法控制外部图像；它可能突然被删除或更改。
- 相对 URL - 链接到网站内托管的图像。此处，URL 不包含域名。如果 URL 开头没有斜杠，则它将相对于当前页面。示例：src=“img_girl.jpg”。如果 URL 以斜杠开头，则它将相对于域。示例：src=“/images/img_girl.jpg”。
提示：最好使用相对 URL。如果您更改域名，它们不会中断。
width 和 height 属性
<img> 标签还应包含 width 和 height 属性，用于指定图像的宽度和高度（以像素为单位）：
示例
<img src="img_girl.jpg" width="500" height="600">
alt 属性
<img> 标签所需的 alt 属性用于指定图像的替代文本，如果图像由于某种原因无法显示。这可能是由于连接速度慢、src 属性错误或用户使用屏幕阅读器。
示例
<img src="img_girl.jpg" alt="Girl with a jacket">
style 属性
style 属性用于向元素添加样式，例如颜色、字体、大小等。
示例
<p style="color:red;">这是一个红色段落。</p>
lang 属性
在 <html> 标签内包含 lang 属性，以声明网页的语言。这是为了帮助搜索引擎和浏览器。
以下示例将英语指定为语言：
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
国家/地区代码也可以添加到 lang 属性中的语言代码中。因此，前两个字符定义 HTML 页面的语言，后两个字符定义国家/地区。
以下示例指定英语为语言，美国为国家/地区：
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
title 属性
title 属性定义有关元素的一些额外信息。
将鼠标悬停在元素上时，title 属性的值将显示为工具提示：
示例
<p title="I'm a tooltip">This is a passage.</p>
建议：始终使用小写属性
HTML 标准不要求小写属性名称。
title 属性（以及所有其他属性）可以大写或小写，如 title 或 TITLE。
但是，W3C 建议在 HTML 中使用小写属性，并要求更严格的文档类型（如 XHTML）使用小写属性。
建议：始终使用引号括住属性值
HTML 标准不要求在属性值周围使用引号。
但是，W3C 建议在 HTML 中使用引号，并要求在更严格的文档类型（如 XHTML）中使用引号。
好：
<a href="https://www.baidu.com">访问百度</a>
不好：
<a href=https://www.baidu.com/>访问百度</a>
有时您必须使用引号。此示例不会正确显示 title 属性，因为它包含空格：
示例
<p title=关于 百度>
单引号还是双引号？
在 HTML 中，属性值周围使用双引号最为常见，但也可以使用单引号。
在某些情况下，当属性值本身包含双引号时，必须使用单引号：
<p title='John "ShotGun" Nelson'>
反之亦然：
<p title="John 'ShotGun' Nelson">
总结
本文介绍了的html基本使用，如有问题欢迎私信和评论
扫一扫
1982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
