HTML 中的元素
浏览 482
课文
<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 标签有点恐慌,那不要怕。因为五年经验的前端工程师也记不住这么多,也不用记这么多。很多标签是特殊情况下才使用的,通常会用到的标签也就十来个。对于编程的学习讲究的一直是理解为主,很多可以在工作的时候边干边查,善用谷歌的程序员才是好的程序员。
评论
暂无评论