这是我参与「第四届青训营 」笔记创作活动的的第1天
1.<! DOCTYPE html>
早期的HTML(大约1991年2月),文档类型声明类似于链接,规定了HTML页面必须遵从的良好规则,能自动检测错误和其他有用的东西。这个声明的目的是防止浏览器在渲染文档(when rendering a document)时,切换到我们称为“怪异模式(兼容模式)”的渲染模式。
在很久以前的网络上,页面通常有两种版本:
- 为网景(Netscape)的 Navigator 准备的版本
- 为微软(Microsoft)的 Internet Explorer 准备的版本
当 W3C 创立网络标准后,为了不破坏当时既有的网站,浏览器不能直接弃用这些标准。因此,浏览器采用了两种模式,用以把能符合新规范的网站和老旧网站区分开。
目前浏览器的排版引擎使用三种模式:
- 怪异模式(Quirks mode)
- 接近标准模式(Almost standards mode)
- 标准模式(Standards mode)
在怪异模式下,排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。
2.HTML head
<head>
HTML元素包含关于文档的机器可读信息(元数据),比如它的标题、脚本和样式表, 而不考虑人的可读性
对于人类可见的信息,如顶级标题和列出的作者,我们把他们放到<header>
元素里面
tip:Bing在匹配用户语言和页面内容时会查看标签里面的lang属性
根据w3c文档,title
是head
部分中唯一必需的元素。
3.<title>
和<h1>
区别
- title概括网站信息,可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的,是显示在网页Tab栏里的;
- h1突出文章主题,面对用户,更突出其视觉效果,指向页面主体信息,是显示在网页中的
注意:如果title
为空,但是页面存在h1
,b
,strong
标签,搜索引擎会默认页面title
为h1
内的内容
h1是在没有外界干扰下除title以外第二个能强调页面主旨的标记
在一个页面中应该使用且只使用一次h1
标记
4.<br>
与<p>
的区别
前者在文本中生成一个换行(回车)符号。此元素在写诗和地址时很有用。该元素是内联元素
后者表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白行(相当于 line-height 的两倍)或以首行缩进。该元素是块级元素
5.为什么我们需要页面结构与语义化标签
1.各级标题会成为搜索引擎优化的关键字
如果访问者不能很快找到他们想要的东西,他们可能会离开你的网站,去寻找他们问题的另一个答案。这就是为什么文本结构和标题的使用也会影响SEO。搜索引擎会发现从你的网站跳出来的人。当你的页面跳出率很高时,搜索引擎就会认为你的页面没有提供给搜索者他们想要的东西。因此,你可能会得到更低的评级。
SEO的最佳实践
- 创建一个实用且信息丰富的网站,并撰写能够清晰准确地描述您的内容的网页。
- 要考虑到用户会使用哪些字词查找您的网页,并确保您的网站上确实包含了这些字词。
- 确保
<title>
和 alt 属性具有描述性、具体且准确。 - 网站的网页层次结构要概念清晰。
- 遵循的图片、视频等数据的最佳做法。
2.增强可及性,为屏幕阅读器提供页面架构
3.CSS和JS也需要元素去定位
未完待续,天天进步