HTML语义化
- 解释:用正确的标签做正确的事
- 作用:
- 对人,增强可读性,便于开发人员理解网页内容和样式
- 对机器,利于SEO和网络爬虫爬取信息,利于读屏软件
- 常见语义化标签
<p>
,<header>
,<address>
,<footer>
移动端<meta viewport>
<meta name="viewport" content="width=device-width,initail-scale=1.0,maxinum-scale=1.0,mininim-scale=1.0,user-scalable=no">
width=device-width
,屏幕宽度initail-scale
,初始比例maxinum-scale
最大比例mininim-scale
最小比例user-scalable
是否允许用户缩放
块级元素、行内元素、空元素
CSS规定,元素的display
属性决定元素时块级元素或行内元素。块级元素为block
,行内元素为inline
,本身没有内容的为空元素
常见块级元素div
,p
,li
,ul
,ol
常见行内元素span
,b
,img
,input
常见空元素input
,img
,br
,hr
文档标记类型
<!DOCTYPE>
文档标记类型,用于声明正确的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)
约束通用标记语言
来源:CSDN
作者:代码写的完嘛
链接:https://blog.csdn.net/qq_40781291/article/details/104604885