HTML5 基础学习

发表于 分类于 阅读次数：
本文字数： 4.6k 阅读时长 ≈ 4 分钟

HTML5基础部分

一个网页一般由结构层HTML，表示层CSS，行为层JavaScript组成。

HTML5简介

HTML 5 是下一代的 HTML。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML 5 向下兼容。

HTML5≈Html+CSS+Javascript+API

HTML5标签变化

DOCTYPE声明

定义和用法：

<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。

不是HTML标签

指示web浏览器关于页面使用哪个HTML版本进行编写的指令

常用的DOCTYPE声明

HTML 4.01 Strict：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 5：

<!DOCTYPE html>

:thinking:

  1. HTML5为什么不引用DTD？
  2. DTD是什么？

文档类型定义（DTD）

DTD可以定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构。

在HTML中，DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML的DTD中，使用XML（扩展标记语言）定义HTML标签规范。

HTML 5不基于SGML，所以不需要应用DTD。

HTML 元素和有效的 DTD

新增的标签

1. 结构标签

结构标签（块状标签）——有意义的div

  • <artical> 标记定义一篇文章
  • <header> 标记定义一个页面或一个区域的头部
  • <nav> 标记定义导航链接
  • <section> 标记定义一个区域
  • <aside> 标记定义页面内容部分的侧边栏
  • <hgroup> 标记定义文件中一个区块的相关信息
  • <figure> 标记定义一组媒体内容以及它们的标题
  • <figcaption> 标签定义figure元素的标题
  • <footer> 标记定义一个页面或一个区域的底部
  • <dialog> 标记定义一个对话框（会话框）类似微信

Tip：

  1. header，section，aside，article，footer不要嵌套
  2. header，section，footer（级别是最高的）> aside，article，figure，hgruop，nav > div，figcaption

2. 多媒体标签

三类多媒体标签

  • video 标记定义一个视频
  • audio 标记定义音频内容
  • source 标记定义媒体资源

Others

  • canvas 标记定义图片，画布标签
  • embed 标记定义外部的可交互的内容或插件，比如flash

标签意义：

多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验。

3. Web应用标签

状态标签
  • <meter> 状态标签（实时状态显示：气压、气温）状态的显示
  • <progress> 状态标签（任务过程：安装、加载）状态的过程

浏览器兼容

<meter> Firefox，Opera，Chrome，Safari 6

<progress> IE 10+，Firefox，Opera，Chrome，Safari 6

列表标签
  • <datalist> 为input标签定义一个下拉列表，配合option
  • <details> 标记定义一个元素的详细内容，配合summary

浏览器兼容

<datalist> Chrome，Firefox，IE 10+

<details> Chrome，Safari 6，Firefox

4. 其他标签

  • mark 标记定义有标记的文本（黄色选中状态）
  • output 标记定义一些输出类型，计算表单结果配合oninput事件

IE不支持output标签

删除的标签

1. 纯表现的标签

Basefont、big、center、font、s、strike、tt、u

2. 对可用性产生负面影响的元素

frame、frameset、noframes

iframe可以使用

3. 产生混淆的元素

acronym、applet、isindex、dir

重定义标签

显示不变，只是表达的含义进行了重新定义的标签

<b> 代表内联文本，通常是粗体，没有传递表示重要的意思

<i> 代表内联文本，通常是斜体，没有传递表示重要的意思

<dd> 描述 可以同details与figure一同使用，定义包含文本，dialog也可用

<dt> 标题 可以同details与figure一同使用，汇总细节，dialog也可用

<hr> 不仅表示水平线，还表示主题结束，显示效果相同

<menu> 重新定义用户界面的菜单，配合command或者menuitem使用

<small> 表示小字体，例如打印注释或者法律条款

<strong> 表示重要性而不是强调符号

<big> HTML 5 中已删除

HTML5属性变化

Input属性

email/url/tel/number/Date picker/range/search/color

Date Pickers Input类型

  • Date——选取日、月、年
  • Month——选取月、年
  • Week——选取周和年
  • Time——选取时间（小时和分钟）
  • DateTime——选取时间、日、月、年（UTC时间）
  • DateTime——选取时间、日、月、年（本地时间）

表单属性

autocomplete/autofocus/multiple/placeholder/required

  1. autocomplete属性

    form或input域应该拥有自动完成功能

    Ex: <form autocomplete="on"></form>

    Tip: autocomplete适用于<form>标签，以及以下类型的<input>标签：text,search,telephone,email,password,datepickers,range,color.

  2. autofocus属性

    规定在页面加载时，域自动地获得焦点

    • autofocus属性适用于所有<input>标签的类型
    • Ex: <input autofocus="autofocus">

  3. multiple属性

    规定输入域可选择多个值

    Tip: multiple属性适用于以下类型的<input>标签：emial和file。

    Ex: <input type="file" multiple="multiple">

  4. placeholder属性

    提供一种提示（hint），描述输入域所期待的值

    Ex: <input type="search" placeholder="Search Content">

    Tip: placeholder属性适用于<input>标签的type属性值为：

    text，search，url，telephone，email，password。

  5. required属性

    规定必须在提交之前填写输入域（不能为空）

    Ex: <input type="text" required="required">

    Tip: required属性适用于标签type属性值为：

    text，search，url，telephone，email，password，date pickers，number，checkbox，radio，file

链接属性

<link>的sizes属性、<base>的target属性、超链接<a>

  1. sizes

    Ex: <link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">

  2. target

    Ex: <base href="http://localhost" target="_blank">

  3. 超链接

    a:media=””(表示对设备进行优化，handheld对“手持”设备进行支持，tv对“电视”设备进行支持)；

    a:hreflang=”zh”(设置语言，这里设置语言是中文)；

    a:rel=”external”(设置超连接的引用，这里超链接为外部链接)。

其他属性

script/ol/html/style

  1. script

    defer: 加载完脚本后并不执行，而是等整个页面加载完之后在执行

    Ex: <script defer src="URL"></script>

    Tip: IE中可用

    async: 加载脚本后立即执行，不用等整个页面都加载完，属于异步执行（多线程加载）

    Ex: <script async src="URL"></script>

    主流浏览器支持

  2. ol有序列表

    Start——起始值

    Reversed——倒叙排列

  3. html

    manifest=”cache.manifest”(定义页面离线应用文件)

    Ex: <html manifest="cache.manifest">

  4. *style(不推荐使用)

    scoped:内嵌CSS

    Ex: 

    1
    2
    3
    <style scoped>
        ......
    </style>

HTML5 新布局的意义

语义化

HTML5可以让很多更语义化的结构化代码标签代替大量的无意义的div标签。

  1. 这种语义化的特性提升了网页的质量和语义；
  2. 减少了以前用于CSS调用的class和id属性。

对搜索引擎的友好

新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好。