整理出来的HTML5的基础知识

450 阅读2分钟

HTML5是什么?

HTML5技术由HTML(结构)、CSS(样式)、JavaScript(行为)组成。 HTML(HyperText Markup Language)是一种超文本标记语言,HTML5是第5个版本的HTML。

HTML、XHTML、XML之间有什么关系?

XHTML是HTML过渡到XML的中间产物。
当初基于 HTML 衍生出 XML,因为 XML 拥有更加严谨的语法以及更好的语义环境,所以W3C选择使用XML。但是当时的环境直接让 WEB 跃进到 XML 实在有些不现实,毕竟当时还有许多书写不严谨的网页,而且应用于网页环境显然 HTML 更加有优势。所以按照XML的要求来规范HTML,形成了XHTML,这是一个作为 HTML 到 XML 过渡过程的一个产物。

HTML语义化的理解

顾名思义,语义化就是给语句赋予含义。在HTML中,比如上面列举的标签,<header>就代表头部页眉,<h1>-<h6>就代表标题等。

语义化能够让页面的内容更加结构化,在即使没有CSS的情况下,也能清楚地呈现页面的结构,换句话说,为了代码裸奔时好看;第二是利于浏览器解析和SEO搜索引擎优化;第三呢,语义化更具可读性,因而代码的可维护性也更好。

标准模式和兼容模式有什么区别?

  • 标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。
  • 兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

什么是空元素?

  • 标签内没有内容。在开始标签中关闭的,也就是说空元素没有闭合标签的。
  • 常见的空元素标签:<br><hr><input>等。

HTML5新增的标签及含义

HTML5新增了很多标签,分为结构标签(语义化标签)、表单标签、媒体标签和其他标签,这里只简单地列举我见过和用过的标签。

标签含义
<header>页面的头部
<section>定义一个独立的区域。
<aside>定义页面内容的侧边框部分
<footer>页面的尾部,定义页脚
<nav>定义显示导航链接。
<article>独立的一个区块,可以表示是页面的核心内容
<video>定义视频,比如电影片段或其他视频流。
<audio>定义声音,比如音乐或其他音频流。
<canvas>定义图形,但它只是一个容器,需要用脚本绘制图形。

另外,新增了新属性,如placeholder占位符和autofocus自动获取焦点等;它还新增了一些新的表单(input)控件,如:

  • type="email" 输入邮箱的格式
  • tel 输入手机号的格式
  • url 输入URL格式
  • number 输入数字的格式
  • search 搜索框语义话
  • range 自由拖动的滑块
  • time 小时分钟
  • date 年月日
  • datetime 时间
  • month 月年
  • week 星期
  • color 颜色