这是我参与「第五届青训营 」笔记创作活动的第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)。 - 屏幕阅读器:它会将网页内容读出来,供残障人士阅读,不同的标签会有不同的阅读方式或附带解释。优秀的网站是有高包容性的,将每个有含义的内容放在标签中,有利于让尽可能多的用户访问理解你的网站。