junz91

HTML秘籍学习笔记

• 标签: HTML5

Tips

  1. 一般情况下浏览器会为网页自动添加<html>,<head>,<body>标签，使用JS都能访问；
  2. HTML5文档开头的类型声明：<!doctype html>，不加这个声明浏览器会启用混杂模式，加了则启用标准模式；
  3. 字符编码信息：<meta charset="utf-8">；
  4. 语言信息：<html lang="zh-cn">，lang属性可以应用在其它任意标签上；
  5. 添加CSS文件：<link href="xx.css" rel="stylesheet">；
  6. 添加JS文件：<script src="xx.js"></script>；
  7. <hr>标签在HTML5中表示主题的转换；
  8. <b>和<i>和<strong>以及<em>相对应，但是其语义有所区别：<b>和<i>仅仅表示格式上的标记，<strong>以及<em>多了一层语义上的含义；

一、用语义构造网页

语义标签通常不做真正具体的任何事，其样式和普通文本没有区别，使用语义元素的意义在于使得网页更容易维护和修改，更易阅读，能够提供无障碍工具支持，更利于搜索引擎识别内容等。

Tips

  1. 插图：

    1
    2
    3
    4
    <figure>
        <img>
        <figcaption>图片描述</figcaption>
    </figure>

  2. <img>元素的alt属性如果设置为空字符串表示这个图片纯粹是装饰用的，屏幕阅读器会忽略不读；

  3. 附注：

    1
    2
    3
    <aside>
        附注
    </aside>

  4. 浏览器往往将不认识的标签设置为inline内联元素，为了兼容不支持HTML5的老版本浏览器，建议设置一条CSS规则：

    1
    2
    3
    article,aside,figure,figcaption,footer,header,main,nav,section{
        display:inline;
    }

  5. HTML5不推荐在<footer>标签中加入过多内容；

  6. <main>标签用于标识页面中主要的内容，而非标识文档中某个重要的部分，一个页面一般只有一个<main>标签；

二、更有意义的标记

这里指的“更有意义的标记”指代的是文本级语义元素。

  1. <output>：用于标识某种返回内容（比如JavaScript的计算结果）；
  2. <mark>用于标记重要内容，默认黄色背景，<del>标记删除的内容，默认有中划线，<ins>标记插入的内容，默认有下划线；
  3. ARIA：无障碍富因特网应用，它规定了一些html标签的属性（比如role），这些属性有助于建立一个无障碍访问的网站；
  4. 开发者也可以选择诸如“微格式”或者“微数据”这样的方案来添加更具体的语义信息，这些额外增加的属性可以帮助搜索引擎等更好的识别网页内容；

三、更好的web表单

  1. 如果只想在本地使用JavaScript处理表单，可以给form的action属性赋值”#”；
  2. placeholder：占位符，html5新增的属性，一般不建议使用占位符代替字段描述符或说明；
  3. HTML5验证：
    HTML5支持required，pattern，maxLength，min/max以及特定类型input的验证，在form标签中加入novalidate属性可以禁止浏览器验证功能。
  4. input不支持after和before伪元素；
  5. 新的输入控件：
  • eamil：电子邮箱格式，浏览器可以基于此做一些优化和验证（比如移动设备上自动切换键盘）；
  • url：网址，支持此标签的浏览器会做一些简单的验证；
  • search：搜索框，可能会呈现圆角样式，输入时右边会有清楚按钮；
  • tel：目前此类型输入框的实际用处在于：移动设备自动切换数字键盘；
  • number：只接受数字格式，可指定min和max属性，一般只接受整型；
  • range：滑动条，可以指定范围和step；
  • 日期和时间：支持date,time,datetime-local,month,week等类型；
  • color：以直观的形式输入颜色；
  1. 新的元素和属性：
  • datalist：提供输入建议，用option提供选项，配合input的list属性实现输入建议；
  • 进度条和计量条：progress和meter；
  • contentEditable：将一个元素变为可编辑区域；

四、音频与视频

使用HTML5的视频和音频元素可能存在以下问题：

  • 视频元素不提供版权保护功能，视频可以被轻易下载；
  • 无法用摄像头录制视频或音频；
  • 难以实现自适应视频流；
  • 无法提供低延迟，高性能的音频；
  • 难以动态创建或编辑音频；
  • 使用<track>为video添加字幕；

五、CSS3字体和特效

  • CSS3是分模块实现的，所有模块的综合组成CSS3；

  • 解决CSS3不兼容的方法：

    1. 调整声明的顺序，兼容性好的属性放前面，新特性放后面以覆盖之；
    2. 使用第三方的检测工具，在根元素（<html>）中加入特定的类名来表示属性的支持情况，比如.borderradius表示支持圆角属性，.no-borderradius表示不支持，这样我们只需在正常样式前面追加这样的类名就可以自定义各种兼容情形下的具体样式。
    3. 使用私有前缀以提高兼容性，常用的私有前缀包括：-webkit-,-moz-.-ms-,-o-；

  • CSS3允许设置多背景：

    1
    2
    3
    4
    /*分别在左上角和右下角设置背景图像*/
    background-image:url('a.jpg'),url('b.jpg');
    background-position:left top,right bottom;
    background-repeat:no-repeat,no-repeat;

  • opacity实现整体的透明，rgba实现部分透明；

  • CSS3阴影包含text-shadow和box-shadow；
  • 设置渐变的方法有：linear-gradient,radial-gradient,加前缀repeating可以得到循环渐变；