[前端与 HTML | 青训营笔记]

43 阅读2分钟

这是我参与「第五届青训营 」笔记创作活动的第1天。

学习的是关于HTML的内容,老师主要讲解的是H5的语义化标签和一些标签的使用。
首先HTML的全称是HyperText Markup Language (超文本标记语言)
它可以描述传达包括但不限于文本、图片、视频、音频等。

标签

标签是HTML的主要主要组成部分 像 <tag> ,即为开始标签

标签一般都有结束标签对应 像</tag>,即为结束标签

有些标签不需要结束标签 像<input/> 就会把/放在最后,即为空标签

H5标准网页声明

<!DOCTYPE html> 它不是标签,用于告诉浏览器当前文档是用H5编写的。

属性

<img src="./pic.jpg" alt="big_pic"> 这样键值对的形式,置于开始标签内的以空格隔开的即为属性。

属性名 = "属性值"

用于给标签增添不同的意义。

<head>标签

我们把必要的亦如元数据、样式、文档名称等放在<head>标签里,用户看不到其中的内容。

<body>标签

我们把内容呈现都放在<body>标签里面。

<h1>-<h6>标签

因为涉及语义化,这几个标签表达网页的各级标题,其实用css你可以呈现任何你想要的样式,甚至可以让本该小一点的<h6>大过<h1>,但是为了语义化,我们一般在需要大标题的时候用h1。

语义化

为什么要有语义化呢,我们知道HTML在三件套中用于构成结构、骨架,css才是用于美化。 所以语义化一般不是给人看的,因为用户一般也看不到你背后网页背后的代码,搜索引擎需要; 屏幕阅读器需要。

  • 搜索引擎:爬到你的网站找到你的相关呈现内容,把你的网站做分类,相当于给你的网站贴上标签,为各种语义化标签做了权重,猜测你想表达网站的大意。所以你想要表达网站的标题就用<h1>吧,这有利于网站搜索优化(SEO)。
  • 屏幕阅读器:它会将网页内容读出来,供残障人士阅读,不同的标签会有不同的阅读方式或附带解释。优秀的网站是有高包容性的,将每个有含义的内容放在标签中,有利于让尽可能多的用户访问理解你的网站。