HTML基础

完整的HTML结构

一个完整的HTML结构包括以下三部分

  1. 文档声明
  2. html元素
  3. head元素
  4. body元素

文档声明

<!DOCTYPE html>

HTML5文档声明,告诉浏览器当前页面是HTML5页面,让浏览器用HTML5的标准去解析识别HTML文档
文档声明必须放在HTML文档的最前面,不能省略,省略了会出现兼容性问题

html 元素

html元素是HTML文档的根元素,一个文档中只能有一个,其他所有元素都是它的后代元素

W3C标准建议为html元素增加一个lang属性,作用是

  1. 帮助语音合成工具确定要使用的发音
  2. 帮助翻译工具确定要使用的翻译规则

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的功能

标签语义化的好处

方便代码维护
减少让开发者之间的沟通成本
能让语音合成工具正确识别网页元素的用途,以便作出正确的反应
让搜索引擎能够正确识别重要的信息
......

posted @ 2020-03-09 11:47  ymzii  阅读(103)  评论(0编辑  收藏  举报