IT面试整理(2)——HTML

发表于 更新于 分类于 Waline：

Doctype

  • 作用
    1. 对文档进行有效性验证： 告诉用户代理和校验器该文档的DTD
    2. 决定浏览器的呈现模式：通知浏览器读取文档时采用何种解析算法。浏览器有三种方式解析HTML文档(标准模式、怪异模式、部分怪异模式)
  • 种类
    1. HTML 4.01: Strict, Transitional, Framset
    2. XHTML 1.0: Strict, Transitional, Framset

标准模式、怪异模式

  • 标准模式：页面按照HTML与CSS的定义渲染
  • 怪异模式：浏览器为了了兼容很早之前针对旧版本浏览器设计、并未严格遵循W3C标准的网页而产生的一种页面渲染模式

语义化

  1. 去掉或丢失样式时能够让页面呈现出清晰的结构
  2. 有利于SEO：爬虫依赖于标签来确定上下文和各个关键字的权重
  3. 方便其他设备解析以意义的方式来渲染网页
  4. 可读性更好，方便团队开发

XHTML

  1. 所有的标记都必须要有一个相应的结束标记
  2. 所有标签的元素和属性的名字都必须使用小写
  3. 所有的XML标记都必须合理嵌套
  4. 所有的属性必须用引号""括起来
  5. 把所有<和&特殊符号用编码表示
  6. 给所有属性赋一个值
  7. 不要在注释内容中使“--”
  8. 图片必须有说明文字

data-属性

自定义属性，可通过对象的dataset属性获取，或通过getAttribute方法获取：

1
<div data-author="baochuquan" data-time="2016-06-20" data-comment="10"></div>
1
div.dataset.commentNum;//10

input的type属性【参考】

  • button
  • checkbox
  • color
  • date
  • datetime
  • datetime-local
  • month
  • week
  • time
  • email
  • file
  • hidden
  • image
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • url

iframe的优缺点

  • 优点
  1. 解决加载缓慢的第三方内容(如图标和广告等)的加载问题
  2. Security sandbox
  3. 并行加载脚本
  • 缺点
  1. iframe会阻塞主页面的onload事件
  2. 即使内容为空，加载也需要时间
  3. 没有语义

HTML表单元素【参考】

  • input
  • select
  • option
  • textarea
  • button

HTMl5表单元素【参考】

  • datalist: datalist元素规定输入域的选项列表，列表是通过datalist内的option元素创建的
  • keygen: keygen元素的作用是提供一种验证用户的可靠方法
  • output: output元素用于不同类型的输出，如计算或脚本输出

head标签及其内容【参考】

  • 作用: 描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其它文档的关系等
  • 内容
    • title: 定义文档的标题，是head部分中唯一必需的元素
    • base: 为页面上的所有链接规定默认地址或默认目标
      • 必选: href
      • 可选: target
    • meta: 可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词
      • 必选: content
      • 可选
        • http-equiv(Content-Type, expires, Refresh, set-cookie)
        • name: author, description, keywords, generator, revised, others
    • link: 链接一个外部样式表
      • rel, href, type, charset
    • script: 直接包含脚本，或者通过src属性指向外部脚本文件
    • style: 为HTML文档定义样式信息

块级元素、行内元素、空元素

  • 块级元素
    • div、dl、dt、dd、ul、li、ol、p、h1-6、table、fieldset、form
  • 行内元素
    • a、em、strong、i、img、b、label、select、textarea、sub、sup、q
  • 空元素
    • br、hr

自闭合元素

  • 自闭合标签不加斜杠，如: br, link

HTML5新特性

  • 新的文档类型：<!DOCTYPR html>
  • 脚本和链接不需要type：
  • 语义标签：header、footer
  • hgroup
  • 标记元素：mark
  • 图形元素：figure
  • 必要属性：require
  • 音频视频：video, audio
  • 正则表达式：pattern属性
  • canvas API：栅格图形API
  • SVG：矢量图形API
  • Geolocation API
  • Communication API
  • WebSockets API
  • Form API
  • Web Works API
  • Web Storage API

置换元素、不可置换元素

  • 置换元素
    • 定义：浏览器根据元素的标签和属性，来决定元素的具体显示内容
    • 如：imt, input, textarea, select, object
  • 不可替换元素
    • 定义：其内容直接呈现给用户

meta标签【参考】

  • 作用
    • 通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；
    • 可以用于鉴别作者，设定页面格式，标注内容提要和关键字；
    • 可以设置页面使其可以根据自己定义的时间间隔刷新自己
    • 设置RASC内容等级
  • 分类
    1. http-equiv: HTTP标题信息
      • Content-Type、Content-Language
        • 说明: 设定页面使用的字符集，用以说明主页只做所使用的文字及语言
        • 用法
      • Refresh
        • 说明: 让网页多长时间刷新自己，或在多长时间后让网页自动链接到其他网页
        • 用法
          • <meta http-equiv="Refresh" Content="5;Url="http://www.baidu.com">
      • Expires
        • 说明: 指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调整
      • Pragma(cache模式)
        • 说明: 禁止浏览器从本地机的缓存中调阅页面内容
      • Set-Cookie(cookie设定)
    2. name: 页面描述信息