HTML 中的元素

浏览 58

课文

``` html <p>三眼鸭的编程教室</p> ``` 以上代码就是一个 HTML 的 `p` 元素, `<p>` 是开始标签(起始标签), `三眼鸭的编程教室` 是元素内容, `</p>` 则是结束标签(闭合标签)。 `p` 元素表示元素内容是一个 `段落` 。 以下是 HTML 元素的一些要点: * 除了空元素(自闭合元素),元素必须有 `开始标签` 、 `元素内容` 、 `结束标签` * `开始标签` 与 `结束标签` 必须相互匹配,如 错误的元素 就是一个错误的写法 * 元素可以选择性的拥有一些属性 * 绝大多数元素可以嵌套元素 * 根据 W3C 的标准,尽量使用小写标签 *W3C 是万维网联盟的缩写,万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。* ### 空元素(自闭合元素) 定义:没有元素内容的 HTML 元素便被称为空元素。 以下是几个常见的空元素: - \<br /> :换行 - \<hr /> :分割线 - \<img /> :图片元素 - \<input /> :输入框 ## 实例讲解 我们用一个实例来学习更多的 HTML 元素。 ``` 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](https://qiniu.3yya.com/2974e92937e7a6bd374dd73897ca54a4/2974e92937e7a6bd374dd73897ca54a4.png) ### 文档类型 `<!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` 标签的属性,指向一个页面的链接。标签的属性都会写在 `开始标签` 中,用 `=` 连接属性的值,值会用双引号包起来。 示例: ``` html <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 标签 示例: ``` html <img src="./libai.jpg" /> ``` 在 `img` 标签中有个 `src` 属性,指向的是图片的地址。这里的地址是一个 `相对路径` ,从图片中可以看到,我把图片放在了项目文件夹中。 ![image](https://qiniu.3yya.com/c6202b08d3b06a9494eb3b22e7efe67a/c6202b08d3b06a9494eb3b22e7efe67a.png) 与 `相对路径` 相对的,还有个 `绝对路径` 。 **相对路径:** 相对于当前执行文件的路径。 `.` 代表当前目录, `..` 代表上一级目录。 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](https://www.w3school.com.cn/tags/html_ref_byfunc.asp) 。 如果你看到这么多 HTML 标签有点恐慌,那不要怕。因为五年经验的前端工程师也记不住这么多,也不用记这么多。很多标签是特殊情况下才使用的,通常会用到的标签也就十来个。对于编程的学习讲究的一直是理解为主,很多可以在工作的时候边干边查,善用谷歌的程序员才是好的程序员。

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1