html5
html的由来
-
超文本标记语言
- 超文本指的是用超链接的方式，将不同空间的文字信息组治在一起的网状文本
- 超文本也指页面内可以包含图片、链接、甚至音乐、程序等，非文字元素
- 标记语言是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码
- 超文本标记语言就是描述文本，图形和包含其他信息的文件组织和链接在一起的方式的一种语言
-
什么是标签
- HTML标签通常被称为HTML标签(HTML tgr)
- HTML标签是由尖括号包围的关键词
- HTML标签通常成对出现，由开始标签和结束标签组成
- 也由单标签
<br>
DOCTYPE :文档类型声明，不区分大小写，均可使用
- 声明浏览器应该按照html5的规范来解析页面
- html标签的
lang属性----en英文----ch中文
注释
多行注释使用 ctrl+shift+/
mtea元信息
所谓元信息，指的是对信息进行描述的信息
<meta charset="utf-8"> : 设置字符编码为 utf-8<meta name="keywords" content="" >设置网页关键字<meta name="description" content="">设置网页描述
HTML标签
- 块级标签
- 独占一行，换行显示
- 可以设置宽高
- 块标签可以嵌套块标签和行标签（p标签、h标签都只能嵌套行标签）
- 行级标签
- 行内显示 超出换行
- 不能设置宽和高
- 行标签只能嵌套行标签，不能嵌套块标签
- 行间块状
- 即能在行内显示，又可以设置宽高
h1-h6标题标签
<h1>定义最大标题<h6>定义最小标题- 注意需要避免在同一个网页中多次使用 h1 元素
- 每种标题均为加粗效果
段落和换行
- 使用
<br>换行，通常被称为软换行
一些效果，标签总和
span组合标签em强调标签，默认效果是倾斜效果,搜索引擎优化SEOstrong标签表示强调，默认状态下是加粗效果，搜索引擎优化SEOvar标签表示变量， 默认状态下为倾斜效果b标签表示加粗，默认状态下就是为加粗的效果i标签就是用来表示倾斜字体u标签就是用来表示文本下有下划线样式
超链接
- 网页必须经过超链接之后，才能构成一个网站
- a 标签拥有
href(链接地址) title(标题，鼠标移上会有显示) targer(在当前窗口打开，还是重新打开一个新窗口)3个重要属性 - a 标签可以作为锚链接
- target属性：
+ _self:在当前标签页跳转
+ _blank:在新的标签页打开跳转 - a链接具有download属性，书写下载文件的路径，那么可以直接下载
- a标签必须书写href属性，哪怕为空都可以执行download下载，否则a标签不具有任何功能
- a标签的打电话是在href属性中书写 tel:电话号码 这样的格式
- a标签的发短信是在href属性中书写 sms:电话号码 这样的格式
- a标签的发送邮件是在href属性中书写 mailto:邮箱地址 这样的格式
自定义列表
- dl dt dd
- dt和dd是兄弟关系，父元素只能是dl
- dt可以标题
- dd是内容
img图片
- 向网页中嵌入一张图片
src属性用于设置图像路径alt用于设置图像的代替文本，alt属性还和SEO相关title同理，所有有 title 的标签都可以在图片上显示出来的对图片的解释- 自身的width/height是不书写单位的
- 如果说只设置了宽度或者高度，那么另外一个将按照图片比例进行缩放
- 当自身的宽高属性和css设置的冲突以后，行间css的优先级最高
from表单
- 为用户创建html表单
- action属性：表单提交的地址
- method属性：表单提交的方式 数据传输的方式
<!--
input：
表单元素
type类型的值不一样，呈现的状态也是不一样的
text：
单行文本输入框（文本域）
没有长度和内容限制，只能输入一行，明文显示
表单提交都是以键值对的形式提交的 比如 user = lipeihua
name属性就是给表单起一个名字（自己命名，一般是后台提供）
value属性就是表单的值，可以预定义 也可以等待用户输入
name和value就构成了一个键值对
如果构不成一个键值对，就不会进行提交
password：
密码输入框
默认吧输入的内容呈现出小黑点
radio：
单选框
书写name属性后，可以进行单选
应该书写value值，是向后台提供的数据
在input前写的内容，和input没有任何关系，只不过让用户视觉上觉得有关联
checkbox：
多选框
其他用单选框
file:
上传文件按钮
属性：
1. 文件域 的 accept属性书写 image/* 代表接受任何格式的图片
2. capture=camera 代表从相机拍照接收
3. capture=photo 代表从相册选取照片
hidden：
提交隐藏内容
在表单提交过程中有的数据需要提交，但是不需要用户输入或者是修改，那么直接使用隐藏域提交
button:
单纯的按钮，没有任何作用和功能，只是长了按钮的样子
如果需要添加功能，可以使用js
value值是按钮中的文字
reset:
重置按钮
当重置按钮被点击，就会重置当前reset所在的表单，变成默认的状态
submit：
提交按钮
input标签的type类型是submit代表提交 value是按钮显示的内容
提交按钮只会提交当前按钮所在的form表单中的内容
如果没有form标签，表单提交失效
color： 用来引入或者打开指定颜色的控件
date： 日期的控件（年月日）
week： 日期的控件（年周）（火狐不支持）
month： 日期的控件（年月）（火狐不支持）
email： 编辑email的字段
1、自带验证，但是验证不完整，一般还是自己书写
2、在移动端上 有相对应的自动弹出键盘包含 @ .com 等按键
number： 用来输入数字的控件
1、多了一个上下的按键，可以增加和降低数字大小
2、验证必须是数字
3、其他属性
min：最少数量
max：最大数量
value：当前数量
step：每次累加累减数量
search： 用来搜索框，当用户输入内容后，在末尾有一个删除按钮，单击可以删除输入好的文字
tel： 电话号码输入框
url： url地址
range： 输入一个拖拽的控件
属性：
max：最大值
min：最小值
step：每次走的最小单位
value：当前值
-->
<!--
select&option
下拉列表
option代表列表的每一项
显示出来的值应该放在option标签中
提交的内容是放在option的value属性中
select是列表的外层
表单的name是在select中书写
属性:
1. selected： 默认选中项
2. multiple： 让select可以进行多选（按住ctrl键进行多选）
textarea：
多行文本输入框
右下角可以放大缩小
cols和rows用来控制宽和高
cols代表一行有几个字符（一个汉字算两个字符）
rows代表总共几行，超出是要生成滚动条的
但是：我们很少这样控制，主要通过css的width和height控制
textarea没有value属性，输入的值直接就是textarea标签中的内容
-->
表单元素的新属性
placeholder： 占位符
autocomplete： 是否提示用户曾经输入过的值 默认是on 关闭是off
autofocus： 默认自动获取焦点
他有唯一一个值是autofocus
h5规范允许 当属性名和属性值相等的时候 可以直接书写属性名即可
在js中，h5允许以布尔值的形式控制属性开启或关闭
也就是在js中 给autofocus属性设置值为true（真，打开） 或者是 false（假，关闭）
但是在元素的属性中 不允许使用true或者是false来控制开启或关闭
如果多个表单书写autofocus，那么以第一个书写的为准
required： 必填项，当提交的时候，此表单必须填写
disabled： 禁用任何表单元素，这个元素就被禁止输入或选择等等操作
使用disabled禁用表单，表单元素是不会在被提交了
checked： 单选框或多选框 默认被选中
readonly： 对于可编辑的表单来说 表示不能再次被编辑 但是是可以被提交的
对单选多选按钮不支持
form： 如果input存在form属性，表示当前的input属于某一个表单
此时form表单的id的值 就是这个input的值
那么form表单 和当前的input就进行关联了
无论input书写在哪里，都能随着表单发送数据
注意实际开发中要认真书写name&value,有一些元素是没有value的，这样才能向服务器或后台提交数据
button按钮
- button共有三种type类型,默认是
submitsubmit：提交当前表单reset：重置当前表单button：单纯的按钮，没有任何功能
lable 标签
+ 使用方法一：<label>标签的for属性应与相关元素的id属性相同
+ 使用方法二：表单元素及相关转移焦点内容被<label>标签包裹
+ 对于select[下拉列表],只能获取焦点，不能下拉列表
表格
<table>表格的最外层border：设置最外层表格的边框border-collapse:collapse:合并单元格cellpadding：设置单元格与内容之间的间隙cellspacing：设置单元格与单元格之间的距离(单元格不合并 才有效果)width: 设置表格宽度colspan：设置列合并，rowspan: 设置行合并
tr行td单元格th表头单元格<caption>表格的标题thead：表格的表头tbody：表格的主体内容tfoot：页脚
特殊符号
空格>大于<小于"引号©版权号
SEO
搜索引擎优化简称SEO，指在了解搜索引擎自然搜索的基础上，对网站进行内部及外部的调整优化，改进网站在搜索机制的基础之上，对网站进行内部及外部的调整和优化，改进网站在搜索引擎中关键字的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标
- 标签语义化
- 图片alt一定要合理书写
- a标签内部的文本(锚文本) 对关键字排名影响非常大
- 合理利用搜索引擎重视的标签
title, strong, h1-h3, em, img&alt
标签语义化
- 由于语义化更具可读性，便于团队开发和维护
- 没有css的情况下，页面也能呈现出很好的内容结构，代码结构
- 搜索引擎能更好的理解页面中各部分的关系，可以搜索到更快，更准确的信息
h5新语义化标签
header- 定义文档的头部
- header不是一个独立的分块，而是属于独立分块的头部
- 页面中
header并没有使用限制个数
footer- 定义文档的页脚
- 与header同理
hgroup- hgroup 代表网页或 section 的标题，通常是将文章的主标题和副标题包裹
nav- 定义导航标签
section- 定义一个独立的区域，一般会包含一个独立的标题
- section主要是对网页进行分块，也可以对网页中的某块内容进行分块
- 通常一个完成的section是有标题和内容组成的，不推荐给没有标题的区域设置section
aside- 1、表示一个和其余页面内容几乎无关的区域
- 2、被认为是独立于内容的一部分，并且可以拆出来而不会使整体收到影响，通常表现为侧边栏
- 3、这个里边的内容和其他元素内容关联性不强
article-
- 代表文档，页面。或程序中，可以独立的完整的被外部引用的内容
- 比如一篇博客、一篇文章，一段用户的评论，一个日历插件，或者是其他独立内容
- 一般来说 一个
article也有自己的头部header,或者是footer
-
figure- 代表一块独立的内容，是一个独立的引用单元
- 这个标签在主文中用来引用 图片、插画、表格、代码段等等信息
- 一般会在figure元素中插入figcaption元素（标题元素），将figcaption代表的标题与figure内容相关联
- 如果是单独一张图片 或者 单独的表格等等，那么直接使用相应的标签即可，如果存在图片和标题，那么请使用figure标签
mark- 为引用的内容进行标记或突出显示文本，用来表示和上下文之间的关联性
- 突出显示的文本通常可能和用户当前的活动等有一定的关联性
- mark标签是行内标签，默认黄色背景颜色
time- 用来表示24小时制 或者是 一个公历时间
- 作用：以机器可读的格式去表示日期和时间，安排日程表的应用就可以使用这个time标签
- 两种用法
- time 标签直接包含时间
- 使用 datetime属性来表示时间
datalist- 包含了一组option元素，代表是列表可选的值
- 和input进行相关联，用来配套使用
- input中的list属性 == datalist的id属性
progress- 进度条
- 主要用来显示一项任务的完成程度
- 属性：
- vakue : 是当前进度的值
- max ：是总进度的长度
ruby和rt- 注释标签
- 类似于在语句上添加拼音
div和article和section对比：
- div、section、article语义依次递增
- div没有任何的语义，仅仅是用作样式，可以用在任何场景，但是我们容易看不清上下文关系，对于主题性的区域，我们可以使用section
- 加入这个区域可以脱离上下文，作为完整独立的内容存在，使用article
iframe标签
- 创建一个内联框架，将其它html页面嵌入其中
- src是嵌入地址
- width和height属性设置宽高
- iframe拥有自己的dom树
- iframe一般书写后台管理系统时会用到
视频与音频
video元素：
src属性：视频的路径 如果只有src属性，那么现实的是视频的封面
source 元素
因为没有任何的视频格式可以兼容所有浏览器，我们也不能同一个视频书写多个video标签
所以 可以在video标签中书写source标签，source用来引入不同的视频格式
浏览器会依次检测视频哪一个支持，如果支持，就不再向下寻找
src是书写在source标签中
width：给视频设置宽度 只设置宽度 高度自适应
height：给视频设置高度 这设置高度 宽度自适应
设置宽高是不会视频变形，只要宽高有一个达到设置的要求，视频就停止等比缩放，
让视频在另一个没有充满的方向上居中
controls：显示播放控件
autoplay：视频自动播放 （浏览器限制不允许自动播放 但是当设置为静音的时候，自动播放生效）
muted： 设置静音
loop： 设置循环播放
preload：
none：提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。
metadata: 提示尽管我们认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。
auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
poster： 引入一个图片或者广告视频，作为视频的封面
关于路径问题
- 协议的种类
- file://是本地地址的意思
- http:// 网络协议
- ftp://
- 相对路径：相对于文件或文件夹
- 绝对路径：以盘符开始
- 网络路径：http://www.baidu.com
浏览器兼容问题
- 解决浏览器兼容问题
- 第一种方法 导入解决兼容html5在低版本的 js
- 第二种方式 条件注释
<!--[if IE]> html代码 <![endif]-->
检测网络链接状态
-
我们可以通过 window.navigator.onLine 来检测， 返回一个 布尔值，但是 不同浏览器会存在差异
-
online 和 offline
window.addEventListener('onLine', function(){
// 当网络链接时
})
window.addEventListener('offLine', function(){
// 当网络断开时
})
全屏显示
- 不同浏览器需要添加不同的前缀， webkit moz
el.webkitRequestFullScreen() // 开启全屏显示
document.cancelFullScreen() // 取消全屏
document.fullScreen // 是否全屏
- 兼容
if(el.requestFullScreen){
el.requestFullScreen();
} else if(el.webkitRequestFullScreen){
el.webkitRequestFullScreen();
}else if(el.mozRequestFullScreen) {
el.mozRequestFullScreen();
}else if(el.msRequestFullScreen){
el.msRequestFullscreen();
}else{
el.oRequestFullscreen();
}
- 全屏伪类选择器
:full-screen
:-webkit-fullscreen{}
文件读取----重点
- 通过FileReader 对象我们可以读取本地存储的文件，使用 File 对象类指定所要读取的文件或数据，其中File 对象可以是来自用户在一个元素上，选择文件后返回的FileList 对象，也可以来自由操作生成的 DataTransfer
把读取的文件，内容显示到页面？
<body>
<!--
multiple 多选
-->
<input type="file" name="" id="" multiple>
<script>
document.querySelector('input').onchange = function(){
console.log(this.files);
// 初始化
var reader = new FileReader();
// 读取
reader.readAsText(this.files[0]);
// 当文件读取完毕之后，会把内容存放到 result 里面去
reader.onload = function(){
console.log(this.result);
document.body.innerHTML = this.result;
}
}
// 读取图片
reader.readAsDataURL(this.files[0]);
img.src = this.result;
</body>
文件读取图片
地理定位
地理定位图片
- 百度地图api
拖拽----重点
<body>
<div class="box1">
<!--
draggable="true" : 设置目标源可拖拽
-->
<p draggable="true" id="p1">我是第1个p</p>
<p draggable="true" id="p2">我是第2个p</p>
<p draggable="true" id="p3">我是第3个p</p>
<p draggable="true" id="p4">我是第4个p</p>
</div>
<div class="box2"></div>
<script>
// 源对象
var p = document.querySelector('p');
var box1 = document.querySelector('.box1');
// 开始拖动
// var tar = null;
document.ondragstart = function(e){
e = e || window.event;
e.dataTransfer.setData('text/html',e.target.id);
// tar = e.target;
}
// 拖动过程中，不断执行，
document.ondrag = function(){
}
// 拖动结束后
document.ondragenter = function(){
}
// 目标对象
var box2 = document.querySelector('.box2');
// 目标对象被源对象拖动进入
document.ondragenter = function(){
}
// 目标对象被源对象拖动着悬停在上方
document.ondragover = function(){
return false;
}
// 源对象拖动着离开目标对象
document.ondragleave = function(){
}
// 源对象拖动着在目标对象上方释放/松手
document.ondrop = function(e){
// 释放
e.target.appendChild(document.getElementById(e.dataTransfer.getData('text/html')));
}
</script>
</body>
web 储存----重点
- 容量较大，
sessionStorage约5M,localStorage约20M - 只能储存字符串，可以将对象json.stringify() 编码后，储存
// 设置数据
localStorage.setItem('key','value')
// 获取数据
localStorage.getItem('key')
// 删除数据
localStorage.removeItem('key')
// 清空数据
localStorage.clear()
应用缓存----了解
缓存清单图片
<html lang="en" manifest="dome.appcache">- 在同一目录下建立一个这样的文件
多媒体播放器
目标: 自己做一个播放器
多媒体图片
