HTML语义化
解释:用正确的标签做正确的事。让文档脱离CSS样式,举例h1标题,而非CSS样式加粗。
作用:
对人,增强可读性,便于开发人员理解网页内容和样式,便于开发。
对机器,利于SEO和网络爬虫爬取信息,利于特殊设备(读屏软件)
对于开发者,减少CSS样式代码,页面渲染加载更快。
常见语义化标签
块级元素、行内元素、空元素
CSS规定,元素的display属性决定元素时块级元素或行内元素。块级元素为block,行内元素为inline,本身没有内容的为空元素
块级元素:换行、可自行设置宽高、若不设置则继承自父级元素。
常见块级元素div,p,li,ul,ol
行内元素:不换行、自适应宽高
常见行内元素span,b,img,input
行内块级元素:不换行还可自行设置高度
空元素:元素本身无意义
常见空元素input,img,br,hr
文档标记类型
文档标记类型,用于声明正确的HTML版本,便于浏览器解析执行
标准模式和兼容模式
标准模式
浏览器最高标准执行
兼容模式
浏览器向后兼容,模拟老式浏览器的行为,防止网页错误
为什么HTML5为<!DOCTYPE>
HTML5不引用DTD,但也需要规范文档
SEO的方法
搜索引擎优化(Search Engine Optimization)
合理的title,description,keywords,权重值主键减小
语义化HTML,符合W3C标准,重要的HTML放在前面
重要内容不使用Js输出
不使用iframe
网站提速
iframe
HTML5新增,内联框架
缺点
不利于SEO爬取
阻塞主页面的onload事件,onload事件需要等iframe加载完后触发,可动态设置src来解决
与主页面共享连接池,影响性能
替代
Ajax
区分标签
title,h1
均是标题样式
title单纯的标题
h1有层次分明的标题
b,strong
b加粗显示
strong语气强调
i,em
i斜体样式
em语气强调
input和textarea
input是单行空元素,textarea多行闭合元素
input可自定义类型,textarea只能文本
html和htm
没有本质区别,用于不同环境
html在Linux系统下
htm兼容早期DOS系统(8+3)
DTD
文档定义类型(Document Type Definition)
约束通用标记语言