HTML 中的元素
浏览 558
课文
<p>三眼鸭的编程教室</p>
以上代码就是一个 HTML 的 p 元素， <p> 是开始标签（起始标签）， 三眼鸭的编程教室 是元素内容， </p> 则是结束标签（闭合标签）。
p 元素表示元素内容是一个 段落 。
以下是 HTML 元素的一些要点：
- 除了空元素（自闭合元素），元素必须有
开始标签、元素内容、结束标签 开始标签与结束标签必须相互匹配，如 错误的元素 就是一个错误的写法- 元素可以选择性的拥有一些属性
- 绝大多数元素可以嵌套元素
- 根据 W3C 的标准，尽量使用小写标签
W3C 是万维网联盟的缩写，万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
空元素（自闭合元素）
定义：没有元素内容的 HTML 元素便被称为空元素。
以下是几个常见的空元素：
- <br /> ：换行
- <hr /> ：分割线
- <img /> ：图片元素
- <input /> ：输入框
实例讲解
我们用一个实例来学习更多的 HTML 元素。
<!DOCTYPE html>
<html>
<head>
<!-- 网页标题 -->
<title>静夜思 - 李白</title>
</head>
<body>
<h1>静夜思</h1>
<a href="https://baike.baidu.com/item/静夜思/214">
<span>唐</span>
<span>李白</span>
</a>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
<img src="./libai.jpg" />
</body>
</html>
以下是代码运行的效果。
文档类型
<!DOCTYPE html> 表示当前的文档数据为 HTML 类型。在本地系统中，软件是通过文件名 x.html 的后缀 html 来判定文档类型的。
然而在网络上，很多网页链接中是没有后缀的，因此会在返回来的文档开头标明 <!DOCTYPE html> 来告诉浏览器这是个 html 类型。
html 标签
通过 <html> 与 </html> 告知浏览器当前 HTML 文档的起始与结束。
head 标签
head 标签中包含的主要是一些描述或外链类的元素，这个例子里包含了 title 标签。
可以将 head 标签里的内容理解成一个人的姓名、民族、学历等描述信息。这些信息不能用眼睛看到，却能让外人（浏览器）去更好地理解。
body 标签
通过 body（身体）这个单词我们也能理解这个标签的意义，这个标签里的内容都会切实地反映到页面中。属于我们可以用眼睛 看到 的内容。
title 标签
title 标签放置在 head 标签内，用于描述当前页面的标题，浏览器会将 title 标签的内容显示在标题栏或状态栏上，加入收藏夹或书签时作为默认名称。一般一个页面只有一个 title 标签。
这里的标签内容 静夜思 - 李白 被 chrome 浏览器显示在了标题栏上。
h1 标签
h1 标签表示一级标题，这里用来作为 静夜诗 这个标题。这里可以看到， h1 标签的字相对普通文本会更大更粗，上下间距更多。
在后期我们会学到 CSS样式 ，通过设置样式我们也能让 p 标签的字体跟 h1 标签一样大和粗。但百度爬虫等工具会针对不同的标签进行特殊的提取，一些盲人辅助工具也会针对特殊的标签进行特殊的提示。所以还是建议针对不同的内容，选择符合其语义的标签。
a 标签
a 标签定义的是一个指向其他页面的链接， href 是 a 标签的属性，指向一个页面的链接。标签的属性都会写在 开始标签 中，用 = 连接属性的值，值会用双引号包起来。
示例：
<a href="https://baike.baidu.com/item/静夜思/214">
<span>唐</span>
<span>李白</span>
</a>
示例中的 href 属性值指向了静夜思的百度百科链接。 a 标签中包含了两个 span 标签，显示了 HTML 元素的嵌套性。
span 标签
span 是行内标签，属于 行内元素，意思就是不会换行，多个 行内元素 可以共处一行。我们观察一下示例，会发现 h1 标签、 p 标签都是单独一行，因为它们属于 块级元素 。
p 标签
p 标签是段落标签，一般会将整段文本内容旋转在 p 标签中。
img 标签
示例：
<img src="./libai.jpg" />
在 img 标签中有个 src 属性，指向的是图片的地址。这里的地址是一个 相对路径 ，从图片中可以看到，我把图片放在了项目文件夹中。
与 相对路径 相对的，还有个 绝对路径 。
相对路径：
相对于当前执行文件的路径。
. 代表当前目录， .. 代表上一级目录。
eg:
./libai.jpg （当前目录下的 libai.jpg 文件）
../libai.jpg （上一级目录下的 libai.jpg 文件）
../abc/libai.jpg （上一级目录下的 abc 文件夹中的 libai.jpg 文件）
绝对路径：
完整的文件路径。
c:/libai.jpg （C 盘中的 libai.jpg 文件）
d:/abc/libai.jpg （D 盘中的 abc 文件夹中的 libai.jpg 文件）
https://3yya.com/libai.jpg （网站链接形式的 libai.jpg 文件）
小结
通过以上的示例介绍了一些常见的 HTML 元素，更多的标签可以查看https://www.w3school.com.cn/tags/html_ref_byfunc.asp 。
如果你看到这么多 HTML 标签有点恐慌，那不要怕。因为五年经验的前端工程师也记不住这么多，也不用记这么多。很多标签是特殊情况下才使用的，通常会用到的标签也就十来个。对于编程的学习讲究的一直是理解为主，很多可以在工作的时候边干边查，善用谷歌的程序员才是好的程序员。
评论
暂无评论