HTML简述

HTML(Hypertext Markup Language)(超文本标记语言)

• HTML 是纯文本
• HTML 是用来描述页面语义和页面结构的，好的页面语义可以增强 HTML 的可读性与可维护性，降低开发者之间的沟通成本，可以加强 SEO 的搜索优化，可以让语音合成工具更好的识别页面元素，以便做出正确的解读。
• HTML 大多数标签带有默认样式，是因为早期 CSS 出现之前 HTML 不仅负责了页面语义，同样负责了页面样式
• HTML 是由许多标记(tag) 内容 属性组成
• HTML 用特定的 tag 包裹内容 以供解释器识别处理
• HTML 通常基于 HTTP(Hypertext Transfer Protocal)超文本传输协议来进行传输
• HTML 中的属性分为全局属性和私有属性 常见的全局属性有 title class style id
• HTML 中有一些特殊符号作为保留字符如果要使用需要使用字符实体

HTML 语言设置

W3C 标准建议为 html 元素增加一个 lang 属性，
作用是帮助语音合成工具确定要使用的发音;
帮助翻译工具确定要使用的翻译规则;
常用的规则：
lang=“en”表示这个 HTML 文档的语言是英文；
lang=“zh-CN”表示这个 HTML 文档的语言是中文；

HTML 元素类型

• 块级标签
  • div p ul ol li section article header footer
• 行内替换元素
  • img input button textarea select object
• 行内非替换元素
  • a span

编写 HTML 时的注意事项

元素嵌套注意事项

• 块级元素、inline-block 元素
  • 一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block 元素）
  • 特殊情况，p 元素不能包含其他块级元素
• 行内级元素（比如 a、span、strong 等）
  • 一般情况下，只能包含行内级元素

行内非替换元素的注意事项

• 以下属性对行内级非替换元素不起作用
  • width、height、margin-top、margin-bottom
• 以下属性对行内级非替换元素的效果比较特殊 有效果不占用宽度
  • padding-top、padding-bottom、上下方向的 border

空白折叠现象

• 空白折叠的前提是在 html 标准文档流的前提下 定位和浮动脱离文档流之后就不会有空白折叠了相对定位不会脱离标准文档流
• 第一种去除的办法是直接在 HTML 内去除所有空格
• 第二种去除办法是给要去除空白折叠元素的父元素加 font-size : 0
• 第三种去除办法是给元素设置 margin-top:-4px :first-child margin-top:0
• 第三种去除办法是给元素设置 position:absolute 绝对定位脱离标准文档流 如果不设置 top left 那么默认会以上个元素的位置对齐 就会去除折叠空格了