一、CSS文档统筹

　　（一）网页自身的优化

　　（二）CSS规范

　　　　1、命名方法（语义化命名，结构化命名）

　　　　　　ID:结构化    header footer

　　　　　　class: .border0    . red:    .font12      .clear

　　　　2、CSS命名规则

　　　　　　1）建议使用小写字母

　　　　　　2）以英文字母开头，后面可以连接数字、字母、下划线、连字符，建议尽量使用英文字母，适当使用下划线和连接线；

　　　　　　3）词必达意，名称要反映用途和相关信息，同时也要简短。

　　（三）样式重置

　　　　1、规则设置

　　　　　　1）以新浪为例：

　　　　　　html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

　　　　　　fieldset, img { border:none; }

　　　　　　img{display: block;}

　　　　　　address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }

　　　　　　ul, ol,li { list-style:none; }

　　　　　　body { color:#333; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ overflow-x:hidden;}

　　　　　　a { color:#666; text-decoration:none; }

　　　　　　a:visited { color:#666; }

　　　　　　a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }

二、HTML5基础

　　（一）HTML5发展史

　　　　HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。

　　　　HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

　　　　2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的基石。”

　　　　2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素的操作性。

　　　　本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。

　　（二）HTML5的浏览器兼容

　　　　支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

　　（三）HTML语法

　　　　内容类型（ContentType）：HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"；

　　　　DOCTYPE声明：<!DOCTYPE html>不区分大小写；

　　　　指定字符集编码：<meta charset="UTF-8">；

　　　　可省略标记的元素

　　　　　　不允许写结束标记的元素：br、col、embed、hr、img、input、、link、meta

　　　　　　可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th

　　　　　　可以省略全部标记的元素：html、head、body、colgroup、tbody

　　　　省略引号：属性值可以使用双引号，也可以使用单引号；（单引号与双引号出现嵌套关系时：单引号里面只能嵌套双引号，双引号里只能嵌套单引号；不能单引号嵌套单引号，也不能双引号嵌套双引号）

　　（四）HTML新增语义化标签

　　　　section元素 表示页面中的一个内容区块

　　　　article元素 表示一块与上下文无关的独立的内容

　　　　aside元素 在article之外的，与article内容相关的辅助信息

　　　　header元素 表示页面中一个内容区块或整个页面的标题

　　　　footer元素 表示页面中一个内容区块或整个页面的脚注

　　　　nav元素 表示页面中导航链接部分

　　　　figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

　　　　main元素 表示页面中的主要的内容(ie不兼容)

　　　　hgroup标题的一个分组

　　　　mark:标签定义带有记号的文本,在需要突出显示文本时使用

　　　　兼容低版本浏览器：<script src=“html5.js”></script>

　　（五）Video（视频）和Audio（音频）的应用

　　　　1.video元素 定义视频

　　　　语法1：<video src="视频路径" controls="controls">Video元素</video>

　　　　语法2：<video 属性=“属性值”>

　　　　　　　　　　<source type="video/视频格式" src="视频路径">

　　　　　　　  </video>

　　　　视频格式：ogg/mp4/webm（type属性值：video/ogg、video/mp4、video/webm）

　　　　2.audio元素 定义音频

　　　　语法1：<audio src="音频路径" controls="controls">Audio元素</audio>

　　　　语法2：<audio 属性=“属性值”>

　　　　　　　　　　<source type="video音频格式" src="音频路径">

　　　　　　　  </audio>

　　　　音频格式：ogg/mpeg（mp3）（type属性值：audio/ogg、audio/mpeg）

　　　　3.视频及音频的属性

　　　　　　controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。

　　　　　　autoplay属性：如果出现该属性，则视频在就绪后马上播放。（IE9以下以及及新版本的Chorme不支持（部分Chorme支持此属性））

　　　　　　loop属性：重复播放属性。

　　　　　　muted属性：静音属性。

　　　　　　poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。 poster=”路径”（此属性音频不适用）

　　　　4.标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源

　　　　<source> 标签允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择；

　　　　浏览器兼容各种格式的视频音频写法：

　　　　视频：<video 属性=“属性值”>

　　　　　　　　　　<source type="video/ogg" src="视频路径">

　　　　　　　　　　<source type="video/mp4" src="视频路径">

　　　　　　　　　　<source type="video/webm" src="视频路径">

　　　　　　　</video>

　　　　音频：<video 属性=“属性值”>

　　　　　　　　　　<source type="audio/ogg" src="音频路径">

　　　　　　　　　　<source type="audio/mpeg" src="音频路径">

　　　　　　　</video>

　　（六）HTML5智能表单

　　　　1.新增输入类型

　　　　Type=“number” 专门用来输入数字的文本框

　　　　Type=“email” 限制用户必须输入email类型 “@”

　　　　Type=“url” 限制用户必须输入url类型 “http://”

　　　　Type=“range” 产生一个滑动条表单

　　　　Type=“search” 产生一个搜索意义的表单 <input type=”search” name=“name名”/>

　　　　Type=“color” 生成一个颜色选择的表单

　　　　Type=“time” 限制用户必须输入时间类型

　　　　Type=“month” 限制用户必须输入月类型

　　　　Type=“week” 限制用户必须输入周类型

　　　　Type=“datetime-local” 选取本地时间

HTML学习笔记Day11的更多相关文章

  1. JS学习笔记Day11

    一.什么是事件对象(黑匣子) (一)事件: onclick ondblclick (二)当绑定对象的事件被触发时,所发生的所有详细信息都会保存在一个地方,这个地方称为事件对象 二.如何获取事件对象 ( ...

  2. Python学习笔记 - day11 - Python操作数据库

    MySQL的事务 MySQL的事务支持不是绑定在MySQL服务器本身,而是与存储引擎相关,MySQL的两种引擎如下: 1.MyISAM:不支持事务,用于只读程序提高性能 2.InnoDB:支持ACID ...

  3. 【目录】Python学习笔记

    目录:Python学习笔记 目标:坚持每天学习,每周一篇博文 1. Python学习笔记 - day1 - 概述及安装 2.Python学习笔记 - day2 - PyCharm的基本使用 3.Pyt ...

  4. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  6. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  7. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  8. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  9. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

随机推荐

  1. react事件绑定，事件传参，input单向数据绑定

    import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...

  2. React 设计模式 --- Container and Presentational pattern(容器和展示组件分离)

    在React开发中,一个典型的React组件通常会混杂着逻辑操作部分和展示部分.逻辑操作部分指的是和页面UI无关的内容,如API的调用,数据的处理,事件处理函数. 展示部分则指的是创建页面UI 的内容 ...

  3. codeforces104A

    Blackjack CodeForces - 104A Tensor特别喜欢玩扑克,还总是爱发明一些关于扑克牌的游戏,有天他突然脑洞大开想到了这样的一个游戏: 现在有一副52张的扑克牌(没有大小王), ...

  4. iOS的非常全的三方库，插件，大牛博客

    转自: http://www.cnblogs.com/zyjzyj/p/6015625.html github排名:https://github.com/trending, github搜索:http ...

  5. [TaskList] 省选前板子补完计划

    省选前本子补完计划 [ ] 带权并查集 [ ] 树上莫队 - UOJ58 [WC2013]糖果公园 loj2485「CEOI2017」Chase

  6. 洛谷 P3951 小凯的疑惑

    题目链接 一开始看到这题,我的内心是拒绝的. 以为是同余类bfs,一看数据1e9,发现只能允许O(1)的算法,数学还不太好,做不出来,其实应该打表找规律. 看到网上的题解,如果两个都必须拿,结果一定是 ...

  7. Django RBAC用户权限设计方案

    RBAC基于用户权限系统设置方案 RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干 ...

  8. 基于FPGA的数字秒表（数码管显示模块和按键消抖）实现

    本文主要是学习按键消抖和数码管动态显示,秒表显示什么的,个人认为,拿FPGA做秒表真是嫌钱多. 感谢 感谢学校和至芯科技,笔者专业最近去北京至芯科技培训交流了一周.老师的经验还是可以的,优化了自己的代 ...

  9. FAQ常见问题解答---搭建hubot

    1. [root@test160 ~]# npm install -g n npm ERR! Error: CERT_UNTRUSTED 证书不受信任的 解决办法: npm config set st ...

  10. bzoj 1051: [HAOI2006]受欢迎的牛 (Tarjan 缩点）

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1051 思路: 首先用Tarjan把环缩成点,要想收到所有人的欢迎,那么这个点的出度必为0,且 ...