前端必知必会-HTML(1)


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:

  1. 绝对 URL - 链接到托管在另一个网站上的外部图像。示例:
src="https://www.baidu.com/images/img_girl.jpg"。

注意:外部图像可能受版权保护。如果您未获得使用许可,则可能违反版权法。此外,您无法控制外部图像;它可能突然被删除或更改。

  1. 相对 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基本使用,如有问题欢迎私信和评论

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程岁月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值