HTML 中的元素

浏览 275

课文

<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>

以下是代码运行的效果。

image

文档类型

<!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 标签定义的是一个指向其他页面的链接, hrefa 标签的属性,指向一个页面的链接。标签的属性都会写在 开始标签 中,用 = 连接属性的值,值会用双引号包起来。

示例:

<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 属性,指向的是图片的地址。这里的地址是一个 相对路径 ,从图片中可以看到,我把图片放在了项目文件夹中。

image

相对路径 相对的,还有个 绝对路径

相对路径:

相对于当前执行文件的路径。

. 代表当前目录, .. 代表上一级目录。

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

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1