HTML5 基础知识点（重点总结）

有馬
638 阅读11分钟

第一章 HTML5

HTML5 新增元素

  • 新增语义布局结构

    页眉<header> 导航<nav> 内容节<section> 侧边栏<aside> 页脚<footer> 地址<address> 时间<time> 文章<article> 细节<details> 细节标题<summary> 独立内容流<figure> 独立内容标题<figcaption> 主内容<main> 带记号文本<mark>

    内容节<section>：通常由标题及其内容组成，不推荐没有标题内容使用，非普通容器，当容器需要直接定义样式或脚本行为时，直接用div即可，不要与article元素混淆，section模块更加独立；另外，也可以使用div布局或者table表格布局

    时间<time>：显示时间模块，内部通常存在一个datetime属性表示显示时间的格式 另一个pubdate属性可以定义发布日期

    标题组<hgroup> ：当存在子标题（二级标题）时，将h1与h2放于hgroup中，方便管理

  • 新增其他元素

    视频流video 音频流audio 画布canvas embed progress meter time ruby rt rp wbr command datalist datagrid keygen output source menu

  • 新增input元素的类型

    email url number range Date Pickers

  • 新增全局属性

    内容可编辑contentEditable 全局可编辑designMode 隐藏内容hidden 拼写检测spellcheck TAB跳转焦点顺序tabindex

HTML5相对于HTML4的语法改变

  • DOCTYPE声明简化

  • 指定字符编码代码简化

  • HTML5的布尔值

    <input type="checkbox" checked>
<input type="checkbox" checked="">
<input type="checkbox" checked="checked">
			------ 前三个可表示“true”真值
<input type="checkbox">
			------ 默认不填则表示"false"假值

  • 可省略引号

HTML5 新标签

  • 语义标签

    <header>头部/页眉</header>
<nav>导航栏</nav> 
<footer>底部/页脚</footer>
<article>文章</article>
<section>内容节/区域</section>  <!-- 类似于div -->
<aside>侧边栏</aside>

  • datalist 自动补全选项列表（配合元素使用）

    <input type="text" value="请输入明星" list="star"/>
	<datalist id="star">
		<option value="刘德华">刘德华</option>
		<option value="刘若英">刘若英</option>
		<option value="刘晓庆">刘晓庆</option>
		<option value="戚薇">戚薇</option>
		<option value="戚继光">戚继光</option>
	</datalist>

<!说明：当输入框里写入一个“刘”/“戚”字时，会自动弹出预设好的值让你选择>

  • fieldset 将表单内的相关元素包裹成块

    <fieldset>
    		<legend>用户登录</legend> 
    		用户名: <input type="text"><br />
    		密　码: <input type="password">
</fieldset>

  • 新增 input type 属性
<input type="xxxx"> 

email 输入邮箱格式的文本
tel 输入手机号码格式的文本
url 输入网址格式的文本
number 输入数字格式
search 定义用于搜索的文本字段
range 定义一个自由拖动滑块
time/date/month/week 输入相关时间格式的文本（可点选控件）
color	定义拾色器
file 定义一个上传按钮（供本地文件上传）
  • 新增 input 其他属性
placeholder 输入框内提示信息（点中时文字消失）
	<input type="text" placeholder="请输入用户名">
autofocus 网页加载到此页面时，点中焦点自动选中此输入框
	<input type="text" autofocus>
multiple 上传文件可多选
	<input type="file" multiple>
autocomplete 填写并提交后，当再次加载此页面，会自动弹出填写过的信息
	<input type="text" autocomplete="off">  on/off 控制开关
required 必填项 
	<input type="text" required>

  • 其他新增语义布局结构

    <address> 地址
<time> 时间
<details> 细节
<summary> 细节标题
<figure> 独立内容流块
<figcaption> 独立内容标题
<main> 主内容
<mark> 带记号文本
<hgroup> 标题组（通常将h1与h2放于hgroup中 方便管理）

多媒体标签

  • embed：嵌入一个多媒体插件 （如 优酷/土豆/爱奇艺的播放界面）

  • audio 音频流

    以隐藏播放控件的方式播放背景音乐
	<audio src="music.mp3"></audio>
使用播放控件方式插入音乐
	<audio xxxxxx>	control显示控件 autoplay自动播放 loop循环播放
		<source src="music.mp3">
		<source src="music.ogg">	当浏览器不支持mp3解码，则选择ogg文件
		您的浏览器不支持HTML音频播放功能			不支持提示信息
	</audio>

  • video 视频流

    使用与audio相同 <video></video>
新增 width height 调节播放控件宽和高

  • 其他多媒体类型

    canvas 画布 progress meter time ruby rt rp wbr command datalist datagrid keygen output source menu

CSS3 新增选择器

<p>微软的Internet Explorer(IE)是当今最流行的因特网浏览器。它发布于1995年，并于1998年在使用人数上超过了Netscape。Firefox是由Mozilla发展而来的新式浏览器。</p>
<ul>
      <li class="test">我是第一个</li>
      <li class="two123">我是第二个</li>
      <li class="twotabc">我是第三个</li>
      <li class="abcfour">我是第四个</li>
      <li class="ggg-four">我是第五个</li>
      <li class="bug">我是第六个</li>
      <li class="bug_ee">我是第七个</li>
      <li class="hhbug">我是第八个</li>
    	<li class="bug345">我是第九个</li>
      <li class="test">我是第十个</li>
 </ul>

结构伪类选择器

ul li:first-child {/* 选择第一个li */}
ul li:last-child {/* 选择最后一个li */}
ul li:nth-child(6) {/* 括号内填6，故选择第六个li */}
ul li:nth-child(2n) {/* 括号内填2n，选择偶数li */}
ul li:nth-child(2n+1) {/* 括号内填2n+1，选择奇数li */}
								/*（注：n=0,1,2,3,4……）*/

属性选择器

ul li[class=test] {/* 选择类名全称为test的li（第一个和第十个）*/}
ul li[class$=four]{/* 选择类名结尾为four的li（第四个和第五个）*/}
ul li[class^=two]{/* 选择类名开头为two的li（第二个和第三个）*/}
ul li[class*=bug]{/* 选择类名中带有bug字符的li（第六、七、八、九个）*/}

伪元素选择器

p::first-letter{/* 选择元素内第一个字母或字（选择“微”字）*/}
p::first-line{/* 选择元素的第一行（以浏览器显示的第一行为准）*/}
p::selection{/* 被鼠标高亮选中的字段 */}
  /* selection只能使用 color/background/cursor/outline 这4个属性*/

p::befor {content:"开始";}　/* 在p元素内部内容前插入新内容*/
p::after {content:"结束";}	/* 在p元素内部内容后插入新内容*/
	/* content 是必要的属性,被插入的块默认是行内元素，*/
	/* 改动之后：「开始微软的Inter... ...新式浏览器。结束」 */

常见用途：伪元素是一个可以直接插入元素的选择器

div {							/* 普通div盒子 */
	width：200px;
	height：30px;
	border：1px solid #ccc;
	font-family:"icomoon";
	position:relative;
}
div:：before{ 			 /* 使用末尾伪类选择器 */
	content:"\ea51"; 	/* 这里直接在css中插入字体图标(图标v) */
	position:absolute;
right：10px;
top：5px;

【过渡函数】

2D变形

  • translate(x, y) 移动
translate(50px,50px);
/* 将文字或图像在水平和垂直方向 分别移动50像素(x、y可为负值) */
translateX(x);	/* 单独设置X轴移动 */
translateY(y);	/* 单独设置Y轴移动 */

/* 【应用】可取代定位或浮动 */

/* 【应用】让定位的盒子水平居中，取代margin:0 auto; */
.box {
	width: 500px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 移动到自身的一半位置 */
}
  • transform: scale(x, y) 缩放
transform:scale(0.8,1);
/* 使元素在水平方向上缩小20%，垂直方向不改变 */
/* 取值范围0.01~0.09，默认值为1，若设为2即为放大2倍 */
transform:scaleX(x);	/* 单独设置水平缩放 */
transform:scaleY(y);	/* 单独设置垂直缩放 */
  • transform:rotate(deg) 旋转
  • transform-origin(x, y) 调整变形原点
/* rotate 取值是度数，单位为deg，取负值表示逆时针旋转 */
/* 旋转原点也可用px像素值精确位置 */

transform-origin: left top;/* 改变元素旋转原点为左上角 */
transform: rotate(45deg); /* 再进行顺时针45度旋转 */
  • transform:skew(deg,deg) 倾斜
transform:skew(30deg,0deg); /* 水平方向倾斜30度，处置方向保持不变 */
		/* 取值可为负值，第二个参数可不写（默认为0）*/

3D变形

  • transform:rotateX(deg) x轴旋转
  • transform:rotateY(deg) y轴旋转
  • transform:rotateZ(deg) z轴旋转
img { transition:all 0.5s ease 0s; }

img:hover {				/* 鼠标放于图片上时，进行X/Y/Z旋转 */
	transform:rotateX(180deg);
  transform:rotateY(180deg);
  transform:rotateZ(180deg);
  /* 合并写法 */
  transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg);
}

  • translateZ(z) Z轴移动

    直观表现形式为大小的变化，实质是XY平面相对于视点的远近变化（这里参照于perspective属性），比如设置了perspective为200px，那么translateZ(z)的值越接近200，即离得越近，看上去就越大，超过200就看不到了，因为相当于跑到后脑勺去了，正常情况下，是看不到自己的后脑勺的

  • translate3d(x,y,z)

  • backface-visibility 设置当元素不面向屏幕时 是否可见

  • perspective 透视

动画

【语法】animation:动画名称 花费时间 运动曲线 开始时间 播放次数 是否反方向;

@keyframes 动画名称 {			/* 动画关键帧设置 */
  from{	...	}							 /* 开始位置变化情况 */
  to{	...	} 							 /* 结束位置变化情况 */
}					/* 也可以用百分数来设置变换帧为 0%{} 50%{} 100%{} */

/* 【几个属性值说明】 */
animation-iteration-count:infinite; /* 无限循环播放，无单位*/
animation-direction:alternate;			/* 动画轮流反向播放 */
animation-play-state:paused;   			/* 暂停动画 */

HTML5 新增API

网络状态

  • 旧方法：通过window.navigator.onLine来检测

  • H5方法：通过window.onLine来检测，用户当前的网络状况，返回一个布尔值

    • window.online 用户网络连接时被调用
    • window.offline 用户网络断开时被调用
全屏方法

HTML5规范允许用户自定义网页上任一元素全屏显示。

  • requestFullScreen() 开启全屏显示
  • cancelFullScreen() 关闭全屏显示
  • fullScreen() 检测当前是否处于全屏 返回布尔值
  • :full-screen 全屏伪类选择器 css中使用
// 以上方法均存在兼容性处理，不同浏览器需要添加前缀如
webkitRequestFullScreen()	//webkit内核浏览器
mozRequestFullScreen() 		//Gecko内核浏览器
oRequestFullScreen() 		//Opera浏览器
msRequestFullscreen()		//微软浏览器 's'需要小写
文件读取

把上传的文件中内容显示到页面，或上传完毕图片显示缩略图到页面上

// 1.上传文件借助于文件域 读取文件

var file = document.querySelector("input");
var div = document.querySelector("div");
var img = document.querySelector("img");

file.onchange = function () { //onchange 当发生改变时

    console.log(file); // 等同于console.log(this)
    console.log(this.files); // 返回上传文件的数组集合

// 2.选择文件 读取文件里的内容

    //fileReader对象：HTML5新增内建对象 可读取本地文件内容
    var reader = new FileReader(); //初始化一个对象 
        
    //readAsText()方法 读取文件中的文本内容
    //readAsDataURL()方法 把图片转变成一大串字符代码 可通过url引用
    reader.readAsText(this.files[0]);   //括号中选择指定对象
    reader.readAsDataURL(this.files[0]);

    // 注意：当此文件内容读取完毕后，会自动把内容存放到result属性里

// 3. 把读取内容显示到页面中

    // 使用onload 当加载完毕后
    reader.onload = function () {
        div.innerHTML = this.result;	//文本读取
        img.src = this.result;			//图片显示
    }
}
地理定位

在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)

<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
var x = document.getElementById("demo");

// 当点击按钮后触发此函数
function getLocation() {

    // 判断当前设备是否支持 地理定位
    if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(showPosition, showError);
        // 如果支持 就获得当前地理位置 调用getCurrentPosition方法
        // showPosition 调用成功 调用函数 显示当前位置
        // showError 调用失败 调用函数 
    } else { // 如果设备不支持 返回提示
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

// 调用成功函数 返回当前位置的经纬度
function showPosition(position) {
    x.innerHTML =
        "Latitude: " + position.coords.latitude + // 获得当前的纬度
        "<br />Longitude: " + position.coords.longitude; // 获得当前的经度
}

// 调用失败
function showError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:	// 用户无法定位的要求
            x.innerHTML = "User denied the request for Geolocation."; 
            break;
        case error.POSITION_UNAVAILABLE:	// 位置信息不可用
            x.innerHTML = "Location information is unavailable."; 
            break;
        case error.TIMEOUT:	// 获取用户位置的请求超时
            x.innerHTML = "The request to get user location timed out."; 
            break;
        case error.UNKNOWN_ERROR:	// 发生了一个不明错误
            x.innerHTML = "An unknown error occurred.";
            break;
    }
}
</script>

lbsyun.baidu.com/ 百度地图api

拖拽和释放

  • 任何元素都可设置元素为可拖放

    • 设置方法：为标签元素要设置属性draggable=true
    • 注意：链接和图片默认是可拖动的，不需要 draggable 属性

  • 被拖动源对象可触发事件

    • ondragstart：源对象开始被拖动
    • ondrag：源对象被拖动过程中（无论鼠标是否动作，不断执行）
    • ondragend：源对象被拖动结束

  • 拖动源对象进入到目标对象上方可触发事件

    • ondragenter：目标对象被源对象拖动着进入

    • ondragover：目标对象被源对象拖动着悬停在上方（不断执行）

    • ondragleave：源对象拖动着离开了目标对象

    • ondrop：源对象拖动着在目标对象上方释放/松手

      ondrop事件默认被阻止，若想触发，需要在ondragover事件里阻止默认行为，两种方法

      • return false;
      • e.preventDefault()
Web存储

  • 数据存储类型

    • cookie
    • sessionStorage
    • localStorage
    • WebSQL
    • IndexDB

  • 特性

    1. 设置、读取方便，页面刷新不会丢失数据
    2. 容量较大，sessionStorage约5M、localStorage约20M
    3. 只能存储字符串，可以将对象JSON.stringify() 编码后存储

  • window.sessionStorage

    • 生命周期为关闭浏览器窗口
    • 在同一个窗口（页面）下数据可以共享

  • window.localStorage

    • 永久生效，除非手动删除 关闭页面也会存在
    • 可以多窗口（页面）共享（同一浏览器可以共享）

  • 方法

    • setItem(key, value) 设置存储内容
    • getItem(key) 读取存储内容
    • removeItem(key) 删除键值为key的存储内容
    • clear() 清空所有存储内容
应用缓存

在HTML5中可以构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件

  • 优势
    1. 可配置需要缓存的资源
    2. 网络无连接应用仍可用
    3. 本地读取缓存资源，提升访问速度，增强用户体验
    4. 减少请求，缓解服务器负担
缓存清单

创建了一个后缀名为xxx.appcache的文件，然后在需要使用应用缓存在html页面开头添加属性manifest="xxx.appcache"，路径要保证正确。

CACHE MANIFEST
# 第一行必须规定这样写
# 为注释

CACHE:
# 此部分写需要缓存的资源 (如css image js等)

./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg


NETWORK:
# 此部分要写指定需要有网络才可访问的在线资源，无网络不访问(可使用通配符)

./images/img1.jpg
./images/img2.jpg


FALLBACK:
# 此部分为备用资源 当访问不到某个资源时，自动由另一个资源替换

./images/img4.jpg  ./images/img5.jpg
  • 其它
    1. CACHE: 可省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
    2. 可指定多个CACHE: NETWORK: FALLBACK: 无顺序限制
    3. 只有当xxx.appcache文件内容发生改变时，或手动清除缓存后，才会重新缓存
    4. chrome可通过chrome://appcache-internals/工具和离线模式来调试管理应用缓存
avatar
文章
阅读
粉丝