HTML常见问题

HTML语义化

1. 解释：用正确的标签做正确的事。让文档脱离CSS样式，举例h1标题，而非CSS样式加粗。
2. 作用：

• 对人，增强可读性，便于开发人员理解网页内容和样式，便于开发。
• 对机器，利于SEO和网络爬虫爬取信息，利于特殊设备（读屏软件）
• 对于开发者，减少CSS样式代码，页面渲染加载更快。

3. 常见语义化标签

• <header>,<nav>,<aside>,<article>,<section>,<footer>
• 语气加重用<strong>而非<b>或者<em>而非<i>

4. section

• 网页内容进行分块
• 与div不同，div是页面容器。
• section必须要有标题和内容。

移动端<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

文档标记类型

1. <!DOCTYPE>
   文档标记类型，用于声明正确的HTML版本，便于浏览器解析执行
2. 标准模式和兼容模式

• 标准模式
  浏览器最高标准执行
• 兼容模式
  浏览器向后兼容，模拟老式浏览器的行为，防止网页错误

3. 为什么HTML5为<!DOCTYPE>
   HTML5不引用DTD，但也需要规范文档

SEO的方法

搜索引擎优化（Search Engine Optimization）

1. 合理的title,description,keywords，权重值主键减小
2. 语义化HTML，符合W3C标准，重要的HTML放在前面
3. 重要内容不使用Js输出
4. 不使用iframe
5. 网站提速

iframe

1. HTML5新增，内联框架
2. 缺点

• 不利于SEO爬取
• 阻塞主页面的onload事件，onload事件需要等iframe加载完后触发，可动态设置src来解决
• 与主页面共享连接池，影响性能

3. 替代
   Ajax

区分标签

1. title,h1
   均是标题样式
   title单纯的标题
   h1有层次分明的标题
2. b,strong
b加粗显示
   strong语气强调
3. i,em
i斜体样式
   em语气强调
4. input和textarea

• input是单行空元素，textarea多行闭合元素
• input可自定义类型，textarea只能文本

html和htm

1. 没有本质区别，用于不同环境

• html在Linux系统下
• htm兼容早期DOS系统（8+3）

DTD

文档定义类型（Document Type Definition）
约束通用标记语言