HTML学习笔记Day11
一、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的更多相关文章
- JS学习笔记Day11
一.什么是事件对象(黑匣子) (一)事件: onclick ondblclick (二)当绑定对象的事件被触发时,所发生的所有详细信息都会保存在一个地方,这个地方称为事件对象 二.如何获取事件对象 ( ...
- Python学习笔记 - day11 - Python操作数据库
MySQL的事务 MySQL的事务支持不是绑定在MySQL服务器本身,而是与存储引擎相关,MySQL的两种引擎如下: 1.MyISAM:不支持事务,用于只读程序提高性能 2.InnoDB:支持ACID ...
- 【目录】Python学习笔记
目录:Python学习笔记 目标:坚持每天学习,每周一篇博文 1. Python学习笔记 - day1 - 概述及安装 2.Python学习笔记 - day2 - PyCharm的基本使用 3.Pyt ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
随机推荐
- adoquery怎样判断数据在缓存中有修改啊
ADOQry.Filtered:=false; ADOQry.Filtered:=true; ADOQry.FilterGroup:=fgPendingRecords ;Fil ...
- Lodop打印控件不打印css背景图怎么办
background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...
- ES6字符串操作
讨论字符串操作之前,我们先来了解一下Unicode 编码的由来,因为Js中的字符串就是一系列Unicode码的集合. 我们都知道,世界上存在着各种各样的语言,汉语,英语,日语等,相对应的,也就存在各种 ...
- vuex2.0 基本使用(1) --- state
Vuex 的核心是 store, 它是一个通过 Vuex.Store 构造函数生成的对象.为什么它会是核心呢?因为我们调用这个构造函数创建store 对象的时候,给它传递参数中包装了state, mu ...
- 创建第一个Djiago
Djiago 目录介绍 mysite/ ├── manage.py # 管理文件 └── mysite # 项目目录 ├── __init__.py ├── settings.py # 配置 ├── ...
- UNIX口令破解机
在编写我们的UNIX口令破解机时,我们需要使用UNIX 计算口令hash 的crypt()算法.Python 标准库中已自带有crypt 库.要计算一个加密的UNIX 口令hash,只需调用函数cry ...
- Codeforces 714A 朋友聚会
参考自:https://www.cnblogs.com/ECJTUACM-873284962/p/6395268.html A. Meeting of Old Friends time limit p ...
- 500 OOPS: bad bool value in config file for: anon_world_readable_only Login failed.
[root@hyc ~]# ftp 192.168.254.5 Connected to 192.168.254.5 (192.168.254.5). Welcome to blah FTP serv ...
- 【BZOJ1188】分裂游戏(博弈论)
[BZOJ1188]分裂游戏(博弈论) 题面 BZOJ 洛谷 题解 这道题目比较神仙. 首先观察结束状态,即\(P\)状态,此时必定是所有的豆子都在最后一个瓶子中. 发现每次的转移一定是拿出一棵豆子, ...
- IIS最小配置
目的 : IIS按需要配置练习 测试环境 IIS 10 WIN10 1.安装IIS与建立网站 安装IIS略,服务器版用添加角色,用户版添加删除WINDOWS组件. 装好IIS之后,建一个网 ...