完整的HTML结构
一个完整的HTML结构包括以下三部分
- 文档声明
- html元素
- head元素
- body元素
文档声明
<!DOCTYPE html>
HTML5文档声明,告诉浏览器当前页面是HTML5页面,让浏览器用HTML5的标准去解析识别HTML文档
文档声明必须放在HTML文档的最前面,不能省略,省略了会出现兼容性问题
html 元素
html元素是HTML文档的根元素,一个文档中只能有一个,其他所有元素都是它的后代元素
W3C标准建议为html元素增加一个lang属性,作用是
- 帮助语音合成工具确定要使用的发音
- 帮助翻译工具确定要使用的翻译规则
head元素
head元素里面的内容是一些“元数据”(元数据:描述数据的数据)
一般用于描述网页的各种信息,比如字符编码、网页标题、网页图标
title元素:网页的标题
meta元素:可以设置网页的字符编码,让浏览器更精准地显示每一个文字,不设置或者设置错误会导致乱码
一般都使用UTF-8编码,涵盖了世界上几乎所有的文字
body元素
网页的具体内容和样式
HTML元素使用
- 对HTML的理解
- 超文本标记语言
- 元素的基础
- 元素的写法
- 双标签 <开始标签> 内容 </结束标签>
- 单标签 <img>
- 元素的写法
- 元素的嵌套
- 元素 之间是存在嵌套关系
- 父元素/子元素/后代元素
- 元素的属性
- <img src>
- class/id/title
- <开始标签 属性名="属性值"></结束标签>
h元素与SEO
h元素有助于网站的SEO(Search Engine Optimization)优化,可以促进关键词排名
建议在网页中最多只有1个h1元素
乱用h元素不仅不会给网站带来好的权重,同时也有可能被搜索引擎认为作弊,最后导致K站
字符实体
HTML中有些特殊字符字符有特殊用途,如果想要正确的显示,必须使用字符实体。
字符实体书写格式有实体名称和实体编号两种。
常用的字符实体名称与编号如下图:
标签语义化
什么是标签语义化?
选择标签的时候要尽量让每一个标签都有正确的语义
虽然很多标签之间互换之后也能实现功能,但还是要遵守“标签语义化”的原则
比如用strong实现a、img的功能
标签语义化的好处
方便代码维护
减少让开发者之间的沟通成本
能让语音合成工具正确识别网页元素的用途,以便作出正确的反应
让搜索引擎能够正确识别重要的信息
......