Fork me on GitHub

IT面试整理(2)——HTML

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
        - 说明: 设定页面使用的字符集,用以说明主页只做所使用的文字及语言
        - 用法
            - <meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
            - <meta http-equiv="Content-Language" Content="zh-CN">
    - Refresh
        - 说明: 让网页多长时间刷新自己,或在多长时间后让网页自动链接到其他网页
        - 用法
            - <meta http-equiv="Refresh" Content="30">
            - <meta http-equiv="Refresh" Content="5;Url="http://www.baidu.com">
    - Expires
        - 说明: 指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调整
            - <meta http-equiv="Expires" Content="0">
            - <meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">
    - Pragma(cache模式)
        - 说明: 禁止浏览器从本地机的缓存中调阅页面内容
    - Set-Cookie(cookie设定)
    
    (2) name: 页面描述信息
欣赏此文?求鼓励,求支持!