精华内容
参与话题
问答
  • HTML5知识点总结

    万次阅读 2016-06-11 15:05:37
    HTML5知识点学习总结

    有很长一段时间没有更新博客了,近一段时间开始重新梳理知识点和写博客了。重要的事情说三遍,新的博客地址:欢迎访问,新的博客地址:欢迎访问,新的博客地址:欢迎访问

    Web Workers##

    javaScript语言采用的是单线程模型,也就是说,所有任务排成一个队列,一次只能做一件事。
    Web Worker的目的:就是为JavaScript创造多线程环境,允许主线程将一些任务分配给子线程。在主线程运行的同时,子线程在后台运行,两者互不干扰。等到子线程完成计算任务,再把结果返回给主线程。
    当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。可以让web应用程序具备后台处理能力,对多线程的支持非常好。

    ###Web Worker API###

    • new Worker(‘后台处理的JS地址’)
      使用Web Worker:
      实例化Worker对象并传入要执行的Javascript文件名就可以创建一个新的Web Worker。
      例如:var worker = new Worker(“worker.js”);
      这行代码会导致浏览器下载worker.js,但只有Worker接收到消息才会实际执行文件中的代码。

    • 利用postMessage传输数据
      要给Worker传递消息,可以使用postMessage()方法。
      Worker是通过message和error事件与页面通信的。来自Worker的数据保存在event.data中。Worker返回的数据也可以是任何能够被序列化的值。
      Worker不能完成给定的任务时就会触发error事件。具体来说,Worker内部的JavaScript在执行过程中只要遇到错误,就会触发error事件。发生error事件时,**事件对象中包含3个属性:**filename、lineto和message,分别表示发生错误的文件名、代码行号和完整的错误信息

    • **terminate() 方法:**终止 web worker,并释放浏览器/计算机资源(这个方法是在页面中调用的)

    • importScripts(‘导入其他JS文件’)
      ###Worker全局作用域###
      关于Web Worker,**最重要的是:**要知道它所执行的JavaScript代码完全在另一个作用域中,与当前网页中的代码不共享作用域。在Web Worker中,同样有一个全局对象和其他对象以及方法。但是,Web Worker中的代码不能访问DOM,也无法通过任何方式影响页面的外观。
      Web Worker中的全局对象是worker对象本身。也就是说,在这个特殊的全局作用域中,this和self引用的都是worker对象
      为了便于处理数据,Web Worker本身也是一个最小化的运行环境:

    • 最小化的navgator对象 : online、appName、appVersion、userAgent、platform

    • 只读的location对象 : 所有属性都是只读的

    • self : 指向全局 worker 对象

    • 所有的ECMA对象,Object、Array、Date等

    • XMLHttpRequest构造器

    • setTimeout和setInterval方法

    • close()方法,立刻停止worker运行(在worker内部使用,而terminate() 方法是在页面中调用的)

    • importScripts方法
      在Worker的全局作用域中,我们可以调用importScripts方法来接收一个或者多个JavaScript文件的URL。每个加载过程都是异步进行的,因此所有脚本加载并执行之后,importScripts()才会执行。
      例如:
      importScripts(‘file1.js’,‘file2.js’);
      即使file2.js先于file1.js下载完,执行的时候仍然会按照先后顺序执行。这些脚本都是在Worker的全局作用域中执行的。Worker中的脚本一般都具有特殊的用途,不会像页面中的脚本那么功能宽泛。

    Web Worker的运行环境与页面环境相比,功能是相当有限的。
    Demo1:

    <body>
    <p>计数:<span id="res"></span></p>
    <input type="button" name="" value="开始计数" onclick="startWorker()">
    <input type="button" name="" value="停止计数" onclick="stopWorker()">
    <script type="text/javascript">
    var w;
    function startWorker(){
    	//先判断是否支持Web Worker
    	if(typeof(Worker) !== "undefined"){
    		if(typeof(w) == "undefined"){
    		//新建一个worker对象
    			w = new Worker("webworker1.js");
    		}
    		w.onmessage = function(e){
    			document.getElementById("res").innerHTML = e.data;
    		}
    	}else{
    		alert("对不起,当前浏览器不支持web Workers");
    	}
    }
    function stopWorker(){
    	w.terminate();
    	w = undefined;
    }
    </script>
    </body>
    

    webworker1.js

    var i=0;
    function numCount(){
    	i++;
    	self.postMessage(i);
    	setTimeout("numCount()",500);
    }
    numCount();
    

    Demo2:

    <script type="text/javascript">
    var data = [23,87,45,12,56,9,34];
    console.log("排序前:"+data);
    var worker = new Worker("webworkers2.js");
    worker.onmessage = function(e){
    	var data = e.data;
    	console.log("排序后:"+data);//排序后:9,12,23,34,45,56,87
    };
    worker.onerror = function(e){
    	console.log("Error:"+e.filename+"("+e.lineto+"):"+e.message);
    }
    worker.postMessage(data);
    </script>
    

    webworker2.js

    //这里self引用的是Worker全局作用域中的worker对象(与页面中的Worker对象不是同一个对象)
    self.onmessage = function(e){
    	var data = e.data;
    	data.sort(function(a,b){
    		return a-b;//从小到大排序
    	});
    	//Worker完成工作后,通过调用postMessage()可以把数据再发回页面
    	//这里将数组排序后的结果发回页面
    	//排序的确是比较消耗时间的操作,因此转交给Worker做就不会阻塞用户界面了
    	self.postMessage(data);
    };
    

    当页面在worker对象上调用postMessage()方法时,数据会以异步方式被传递给worker,进而触发worker中的message事件。为了处理来自页面的数据,同样也需要创建一个onmessage事件处理程序。
    **Web Worker:**可以运行异步Javascript代码,避免阻塞用户界面。在执行复杂计算和数据处理的时候,这个API非
    常有用;否则,这些任务轻则会占用很长时间,重则会导致用户无法与页面交互。

    Hisyory API

    在HTML5之前,即使采用的是脚本语言的方式,只要浏览器地址栏中的URL地址被切换,都会触发一个页面刷新的过程,这个过程将耗费一些时间与资源。在很多时候,尤其是在两个大部分内容相同的页面之间进行切换时,这个过程往往被视为一种浪费。
    HTML5的Hisyory API允许在不刷新页面的前提下,通过脚本语言的方式来进行页面上某块局部内容的更新。
    处理方式:

    1. 通过Ajax请求向服务器端请求页面B与页面A中不同的局部区域及该区域中的信息
    2. 在页面A中通过脚本语言装载该区域及其中的信息
    3. 通过Hisyory API在不刷新页面的前提下在浏览器的地址栏中从页面A的URL地址切换到页面B的URL地址

    在Hisyory API中,我们使用pushState方法在加载完相应的文件后,将该文件的URL地址添加到浏览器的历史记录中。
    pushState方法使用3个参数:

    • 参数1:可以为任何对象,用于保存一个当用户单击浏览器后退按钮或前进按钮时可以使用的数据
    • 参数2:可以为一个字符串,用于设置浏览器窗口的标题,但是目前尚没有任何浏览器支持该参数的使用,所以暂时可以将该参数设为null
    • 参数3:是可选参数,参数值可以为任何URL地址,该URL地址将出现在用户单击浏览器后退按钮或前进按钮后浏览器的地址栏中

    此外,我们还需要监听popstate事件,当用户单击浏览器的后退或前进按钮时触发该事件,在事件处理函数中读取触发事件的事件对象的state属性值,该属性值即为执行pushState()方法时所使用的第一个参数值,其中保存了在向浏览器历史记录中添加记录时同步保存的对象,可以读取该对象并根据该对象值设置当前页面中所需显示的数据。

    我GitHub上的一个History API使用示例:传送门

    canvas

    ###canvas宽高设置 ##
    canvas跟其他标签一样,也可以通过css来定义样式。但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canvas定义宽高,实际上把宽高为300px * 150px的画布进行了拉伸,如果在这样的情况下进行canvas绘图,你得到的图形可能就是变形的效果。所以,在canvas绘图时,应该在canvas标签里直接定义宽高。
    在css中定义的canvas宽和高只是其在html中的显示宽高,不是canvas的真实分辨率,canvas的真是分辨率需要通过其width和height属性来设置。
    ###save和restore方法##
    save()方法调用后,将所有设置都会进入一个栈结构,得以妥善保管。然后可以对上下文进行其他修改
    栈结构–>后进先出
    想要返回之前保存的设置,可以调用restore()方法,在保存设置的栈结构中向前返回一级,恢复之前的状态。
    连续调用save()方法可以将更多设置保存在栈结构中,之后再连续调用restore()方法则可以一级一级返回

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Canvas Save-Restore</title>
    </head>
    <body>
    <canvas id="drawing" width="200" height="200">
    当前浏览器不支持canvas
    </canvas>
    <script type="text/javascript">
    var drawing = document.getElementById("drawing");
    //确保浏览器支持canvas元素
    if (drawing.getContext){
    var context = drawing.getContext("2d");
    context.fillStyle = "#ff0000";//红色
    context.save();//调用save()方法保存上下文状态
    context.fillStyle = "#00ff00";//绿色
    context.translate(100, 100);//把坐标原点变换到(100, 100)
    context.save();//调用save()方法保存上下文状态
    context.fillStyle = "#0000ff";//蓝色
    context.fillRect(0, 0, 100, 200);   //因为此时的坐标原点已经变为(100, 100),所以从(100, 100)点开始绘制蓝色矩形
    context.restore();//调用restore(),fillStyle变为绿色,因为坐标位置的变换仍然起作用,所以矩形的起点坐标是(110, 110)
    context.fillRect(10, 10, 100, 200);   //从 (110, 110)点开始绘制绿色矩形
    context.restore();//再一次调用restore(),fillStyle变为红色,坐标位置的变换不起作用了,所以矩形的起点坐标是(0, 0)
    context.fillRect(0, 0, 100, 200);    //从(0,0)点开始绘制红色矩形
    //特别注意,save()方法保存的是对绘图上下文的设置和变换,不会保存绘图上下文的内容
                }
    </script>
    </body>
    </html>
    

    ###toDataURL方法##
    toDataURL()方法可以导出在canvas元素上绘制的图像,该方法接收一个参数:图像的格式类型

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>toDataURL方法</title>
    </head>
    <body>
    <canvas id="drawing" width="200" height="200">
    当浏览器不支持canvas元素
    </canvas>
    <input type="button" value="导出图片" id="export-btn" >
    <p>点击导出图片,即可以将图像变成图片元素,右键点击图片元素即可以将它保存到本地</p>
        <script type="text/javascript">
                var drawing = document.getElementById("drawing"),
                btn= document.getElementById("export-btn");
                //确保浏览器支持canvas元素
                if (drawing.getContext){
                    var context = drawing.getContext("2d");
    
                    //绘制红色矩形
                    context.fillStyle = "#ff0000";
                    context.fillRect(10, 10, 50, 50);
    
                    //绘制半透明的蓝色矩形
                    context.fillStyle = "rgba(0,0,255,0.5)";
                    context.fillRect(30, 30, 50, 50);
                }
    
                btn.onclick = function()
                {
                    //取得图像数据的URI
                    //var imgURI = drawing.toDataURL();
                    //这里没有指定图像的类型格式,默认是png格式的图像
                    var imgURI = drawing.toDataURL("image/png");
    
                    //显示图像
                    var image = document.createElement("img");
                    image.src = imgURI;
                    document.body.appendChild(image);
                };
        </script>
    </body>
    </html>
    

    Geolocation(地理定位)

    HTML5 Geolocation(地理定位)用于定位用户的位置
    ###地理位置对象navigator.geolocation###
    ####getCurrentPosition() 方法###
    可以使用 getCurrentPosition() 方法来获得用户的位置,该方法接收3个参数:请求成功函数、请求失败函数和数据收集方式
    请求成功函数:

    • 经度 : coords.longitude
    • 纬度 : coords.latitude
    • 位置准确度 : coords.accuracy
    • 海拔 : coords.altitude
    • 海拔准确度 : coords.altitudeAcuracy
    • 行进方向 : coords.heading 从正北开始以度计
    • 地面速度 : coords.speed 以米/每秒计
    • 时间戳 : new Date(position.timestamp) 响应的日期/时间
      请求失败函数:
      失败编号:code
    • 0(Unknown_error) : 不包括其他错误编号中的错误
    • 1( Permission denied) : 用户拒绝浏览器获取位置信息
    • 2(Position unavailable) : 尝试获取用户信息,但失败了
    • 3(Timeout ) : 设置了timeout值,获取位置超时了

    数据收集方式:json的形式

    • enableHighAcuracy : 更精确的查找,默认false
    • timeout : 获取位置允许最长时间,默认infinity
    • maximumAge : 位置可以缓存的最大时间,默认0

    Demo1:

    <body>
    <div id="demo"></div>
    <input type="button" name="" value="点击获取位置" onclick="getLocation();">
    <script type="text/javascript">
    var x=document.getElementById("demo");
    function getLocation(){
      if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
      else{
      	x.innerHTML="该浏览器不支持获取地理位置。";
      }
      }
    function showPosition(position)
      {
      x.innerHTML="纬度: " + position.coords.latitude +
      "<br>经度: " + position.coords.longitude;
      }
      function showError(error)
      {
      switch(error.code)
        {
        case error.PERMISSION_DENIED:
        // alert(error.code);  1
          x.innerHTML="用户拒绝对获取地理位置的请求。"
          break;
        case error.POSITION_UNAVAILABLE:
        // alert(error.code);  2
          x.innerHTML="位置信息是不可用的。"
          break;
        case error.TIMEOUT:
        // alert(error.code);  3
          x.innerHTML="请求用户地理位置超时。"
          break;
        case error.UNKNOWN_ERROR:
        // alert(error.code);  0
          x.innerHTML="未知错误。"
          break;
        }
      }
    </script>
    </body>
    

    Demo2:

    <body>
    <input type="button" value="请求" id="btn" /><br>
    <textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
    </textarea>
    <script type="text/javascript">
    var oBtn = document.getElementById('btn');
    	var oTxt = document.getElementById('t1');
    	oBtn.onclick = function(){
    	navigator.geolocation.getCurrentPosition(function(position){
    			oTxt.value += '经度:' + position.coords.longitude+'\n';
    			oTxt.value += '纬度 :' + position.coords.latitude+'\n';
    			oTxt.value += '准确度 :' + position.coords.accuracy+'\n';
    			oTxt.value += '海拔 :' + position.coords.altitude+'\n';
    			oTxt.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
    			oTxt.value += '行进方向 :' + position.coords.heading+'\n';
    			oTxt.value += '地面速度 :' + position.coords.speed+'\n';
    			oTxt.value += '时间戳:' + new Date(position.timestamp)+'\n';
    		},function(err){
    			//err.code--失败所对应的编号
    			alert( err.code );
    		},{
    			enableHighAcuracy : true,
    			timeout : 5000,
    			maximumAge : 5000//设置缓存过期时间,提高性能
    		});
    	};
    </script>
    </body>
    

    ####watchPosition() 方法###
    watchPosition() - 多次定位请求(像setInterval) ,返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。移动设备有用,位置改变才会触发
    配置参数:frequency 表示更新的频率
    clearWatch() - 停止 watchPosition() 方法(像clearInterval)
    Demo:

    <body>
    <input type="button" value="请求" id="btn" /><br>
    <textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
    </textarea>
    <script type="text/javascript">
    	var oBtn = document.getElementById('btn');
    	var oTxt = document.getElementById('t1');
    	var timer = null;
    	oBtn.onclick = function(){
    		//多次请求
    		timer = navigator.geolocation.getCurrentPosition(function(position){
    			oTxt.value += '经度:' + position.coords.longitude+'\n';
    			oTxt.value += '纬度 :' + position.coords.latitude+'\n';
    			oTxt.value += '准确度 :' + position.coords.accuracy+'\n';
    			oTxt.value += '海拔 :' + position.coords.altitude+'\n';
    			oTxt.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
    			oTxt.value += '行进方向 :' + position.coords.heading+'\n';
    			oTxt.value += '地面速度 :' + position.coords.speed+'\n';
    			oTxt.value += '时间戳:' + new Date(position.timestamp)+'\n';
    		},function(err){
    			//err.code--失败所对应的编号
    			alert( err.code );
    			navigator.geolocation.clearWatch(timer);//关闭更新请求
    		},{
    			enableHighAcuracy : true,
    			timeout : 5000,
    			maximumAge : 5000,//设置缓存过期时间,提高性能
    			frequency : 1000
    		});
    	};
    </script>
    </body>
    

    应用Demo:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title>地理位置应用</title>
    	<style type="text/css">
    		#box{
    			width: 500px;
    			height: 500px;
    			border: 1px solid #000;
    		}
    	</style>
    </head>
    <body>
    	<input type="button" name="" value="获取位置" id="btn">
    	<div id="box"></div>
    	<script src="http://api.map.baidu.com/api?v=1.4"></script>
    	<script type="text/javascript">
    	var oBtn = document.getElementById('btn');
    	oBtn.onclick = function(){
    		navigator.geolocation.getCurrentPosition(function(position){
    			//获取经度和纬度
    			var y = position.coords.longitude;
    			var x = position.coords.latitude;
    			// 百度地图API功能
    			var map = new BMap.Map("box");
    			// 初始化地图,设置中心点坐标和地图级别
    			var pt = new BMap.Point(y, x);
    
    			map.centerAndZoom(pt, 14);
    			map.enableScrollWheelZoom();//开启鼠标滚轮缩放
    			//创建图片
    			var myIcon = new BMap.Icon("dut.jpg", new BMap.Size(200,200));
    			var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    			map.addOverlay(marker2);// 将标注添加到地图中
    			//创建信息窗口
    			var opts = {
    			  width : 200, // 信息窗口宽度
    			  height: 60, // 信息窗口高度
    			  title : "大连理工大学"// 信息窗口标题
    			}
    			var infoWindow = new BMap.InfoWindow("高等学府", opts);//创建信息窗口对象
    			map.openInfoWindow(infoWindow,pt); //开启信息窗口
    		});
    	};
    	</script>
    </body>
    </html>
    

    WebSocket

    ###Socket.IO类库实现WebSocket通信###
    Socket.IO类库可以接收所有与服务器端相连接的客户端发送的消息,也可以向这些客户端发送消息。该类库的一个显著特征是在服务器端与浏览器之间提供一个共享接口。
    ###Socket.IO ##
    客户端:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title>socket.io</title>
    </head>
    <body>
    	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
    	<script type="text/javascript">
    	/*
    	/socket.io/socket.io.js由服务器端Socket.IO类库自动提供,不需要在客户端实际放置一个socket.io.js文件
    	这里首先使用Socket.IO类库中的io.connect方法连接服务器端Socket.IO服务器
    	 */
    		var socket = io.connect();//io.connect()返回一个Socket对象,代表一个用于与服务器端建立连接的客户端socket端口对象
    		//客户端与服务器建立连接后,当接收到服务端发送消息时,触发客户端socket端口对象的message事件
    		socket.on('message', function(data){//data为服务器端发送的消息
    			console.log(data);
    			//使用客户端socket端口对象的send方法向服务端发送一条消息
    			socket.send('消息已接收到。');
    		});
    		//当服务器端断开连接时触发客户端socket端口对象的disconnect事件
    		socket.on('disconnect', function() {
    			console.log('服务器端断开连接。');
    		});
    		/*
    		注意:客户端的消息处理机制与服务器端的消息处理机制是完全一致的,因为Socket.IO确保客户端与服务器端共享相同的API
    		 */
    	</script>
    </body>
    </html>
    

    服务器端:

    var http = require('http');//引入HTTP模块
    var sio = require('socket.io');
    var fs = require('fs');//引入fs模块
    var server = http.createServer(function(req, res) {
        res.writeHead(200, { 'Content-type': 'text/html'});
        res.end(fs.readFileSync('./index.html'));
    });
    server.listen(1337);
    /*
    server是一个HTTP服务器,监听1337端口
    使用Socket.IO类库很简单,创建一个Socket.IO服务器即可,但是该服务器依赖于一个已经创建的HTTP服务器。
    在HTTP服务器运行之后,使用listen方法为该HTTP服务器附加一个Socket.IO服务器。
     */
    var socket = sio.listen(server);//这里listen方法返回一个Socket.IO服务器
    //这里当客户端与服务器建立连接时,触发Socket.IO服务器的connection事件,可以通过监听该事件并指定事件回调函数的方法
    //指定当客户端与服务器建立连接时所需执行的处理
    socket.on('connection', function(socket){
        console.log('客户端建立连接。');
        socket.send('你好。');
        socket.on('message', function(msg) {//msg为客户端发送的消息
            console.log('接收到一个消息: ',msg);
        });
        //当客户端断开连接时触发socket端口对象的disconnect事件
        socket.on('disconnect', function() {
            console.log('客户端断开连接。');
        });
    });
    /*
    客户端与服务器建立连接后,当接收到客户端发送消息时,触发socket端口对象的message事件
     */
    

    ###emit方法互相发送事件###
    使用Socket.IO类库时,服务器端与客户端之间除了可以互相发送消息之外,也可以使用socket端口对象的emit方法互相发送事件
    socket.emit(event,data,[callback])

    • event参数值为一个用于指定事件名的字符串
    • data参数值代表该事件中携带的数据
    • callback用于指定一个当对方确认收到数据时调用的回调函数
      客户端:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title>socket.io</title>
    </head>
    <body>
    	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
    	<script type="text/javascript">
    	var socket = io.connect();
    	//在接收到服务器端发送的news事件后,输出相应的服务器端传递的信息
    	socket.on('news', function (data) {
        		console.log(data.hello);
        	//同时向服务器发送my other event事件,该事件携带一个对象,对象的my属性值为"data"字符串
        	socket.emit('my other event',{my:'data'});
    	});
    	</script>
    </body>
    </html>
    

    服务器端:

    var http = require('http');
    var sio = require('socket.io');
    var fs = require('fs');
    var server = http.createServer(function(req, res) {
        res.writeHead(200, { 'Content-type': 'text/html'});
        res.end(fs.readFileSync('./index.html'));
    });
    server.listen(1337);
    var socket = sio.listen(server);
    //在客户端与服务器端建立连接后,向客户端发送一个news事件,事件中携带一个对象,该对象的hello属性值为"你好"
    socket.on('connection', function(socket){
        socket.emit('news', {hello: '你好。' });
        //在接收到客户端发送的my other event事件时,在控制台输出相应的信息
        //data为客户端发送事件中携带的数据
        socket.on('my other event', function (data) {
            console.log('服务器端接收到数据:%j',data);
        });
    });
    
    展开全文
  • html5知识点总结

    2018-01-04 22:08:21
  • [知识点滴]HTML5语义化总结

    千次阅读 2016-09-17 23:45:57
    Html语义化理解1、什么是HTML语义化? 基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读...

    这里还是总结一下别人对HTML5语义化的理解,我觉得非常到位,给家分享一下.
    ##Html语义化理解
    ###1、什么是HTML语义化?
    基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>
      根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

    ###2、为什么要语义化?

    1. 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
    2. 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
    3. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
    4. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
    5. 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
      ###3、写HTML代码时应注意什么?
    6. 尽可能少的使用无语义的标签div和span;
    7. 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
    8. 不要使用纯样式标签,如:b、font、u等,改用css设置。
    9. 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
    10. 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。
    11. 表头和一般单元格要区分开,表头用th,单元格用td;
    12. 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
    13. 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

    4、HTML5新增了哪些语义标签
     HTML5的目标:书写更简洁的HTML代码,创建更简单的Web程序。

    另人激动的新特性如下:新的html标签和属性,完全支持CSS3,视频和音频标签,2D/3D绘图,本地存储,本地SQL数据库。

    为什么要引入语义元素:让开发人员更直观地了解页面每部分的功能表,同时搜索引擎以及视觉障碍人士使用的屏幕阅读器也能更方便地识别页面的每一部分。
    这里写图片描述

    ###区块标签:
    标签article:表示包含于一个文档、页面、应用程序或网站中的一段独立的内容,也就是说,它能够独立地被发布或重新使用。
    ###运用
    一些使用article的例子:一片博客、一个论坛帖子、一篇新闻报道、一个用户评论。

    ###标签header

    一般被放置在页面的顶部,或者页面中某个区块元素的顶部,包含整个页面或某个区块的标题、简介等信息。

    一个文档中可以包含多于一个的header标签;header标签不一定非要显示在页面的上方,它的内容决定这里需要使用header标签,位置并不重要;可以为body,article,section和aside增加header元素。

    ###标签footer

    一般被放置在页面的底部,或者页面中某个区块元素的底部。

    ###标签nav

    表示页面的导航,可以通过导航连接到网站的其他页面,或当前页面的其他部分。

    搜索引擎或屏幕阅读器会根据nav标签确定网站内容,不是任何一组超链接都适合放在nav标签中。

    ###标签aside

    包含的内容不是页面的主要内容,具有独立性,是对页面内容的补充。

    一些使用aside的例子:页面侧边栏;广告;友情链接;文章引语(内容摘要)。

    ###标签section

    一个主题性的内容分组,通常包含一个头部(header),可能还会有一个尾部(footer)。

    标签div和section的比较:标签div应用更广泛,只要你想为一个区域定义一个样式,就可以使用div标签;标签section包含的内容是一个明确的主题,通常有标题区域。

    ##内容分组标签:

    ###标签main

    显示页面的主体内容;每个页面只能包含一个main标签;main标签中不包含网站标题、logo、主导航、版权声明等信息。

    ###标签figure

    定义媒介内容的分组,以及它们的标题。

    ###标签figcaption

    定义figure元素的标题。

    ##文本级别的语义标签:
    ###标签time

    HTML5的新标签。表示一个日期,或者一个时间,或者同时表示一个日期和时间值。

    ###标签i和b

    HTML4中已经存在,在HTML5中被赋予了新的语义化功能的标签。

    ###标签i

    在HTML4中,是修饰文字样式的,将文字显示为斜体文本;在HTML5中,表示强调不同的情绪或声音,也可以表示技术术语、生物分类、来自另一种语言的成语或习语、一个想法等等。

    ###标签b

    在HTML4中,是修饰文字样式的,将文字显示为粗体文本;在HTML5中,表示文档中的关键字、商品名称等。

    ###标签em和strong

    在HTML4中就已经有了语义化的功能。

    标签em:emphasis 强调,标签中的内容是用来强调的重点内容,会被浏览器显示成斜体文本。

    标签strong:表示非常重要、严重性或内容的紧迫性;会被浏览器显示成粗体文本。

    使用建议:如果你只是单纯的想把文字的样式显示为斜体或粗体,请不要使用这几个语义标签,W3C建议我们要在CSS样式表中定义文字样式。

    展开全文
  • [知识点滴]HTML5-布局总结

    千次阅读 2016-09-25 21:41:24
    布局总结1)像这样的行内标记,定义它的margin-top和margin-bottom是无效的,除非你把它设置为块状元素才可以。Display:block2)对于块状元素,你可以自由的使用外边距来定义版式和元素之间的距离。类似 DIV 等等,3...

    ##布局总结
    ####1)像这样的行内标记,定义它的margin-top和margin-bottom是无效的,除非你把它设置为块状元素才可以。Display:block

    2)对于块状元素,你可以自由的使用外边距来定义版式和元素之间的距离。类似 DIV 等等,

    3)无论什么元素,一旦设置为是浮动显示,就拥有了完整的盒模型结构,我们就可以使用外边距,内边距,边框,高和宽来控制的大小以及与其他对象之间的位置关系。

    4)浮动是从网页布局的角度来定义元素的显示,而行内和块状属性主要是从元素自身的性质来定其显示的。

    5)当元素没有定义边框时,可以把内边距作为外边距使用。有时候外边距会有重叠现象的。

    6)当为元素定义背景图像时,内边距区域内可以显示背景图像,而对外边距区域来说,背景图像是达不到的,他永远都是透明状态

    7)用div+css设计网页结构时,设计师满脑子都是网页内容,而非内容所呈现的效果。

    8)块状元素:不管块状元素宽度是多少,他总会自动占据一行,因为在他末尾附加了一个换行符,而行内元素没有这个特点。块状元素有完整的盒模型结构,可以定义宽度和高度,而行内元素没有这个特性,无法通过高度来改变文本行的行高。

    块元素的代表标记 div

    行内元素的代表标记 span ,行内标记不具备组织结构框架

    9)网页布局分为:自然布局,浮动布局, 定位布局

    10)当一个元素被定义为浮动显示时,即定义为块状元素。并且该元素就会收缩自身体积为最小状态。所以,应该有个好的习惯即把浮动元素设置高和宽。如果没有设置,则元素会按照它所包含的内容大小来确定它的大小。

    11)当元素浮动后,周边的对象会自动环绕浮动元素周围,形成一种环绕关系。

    12)块状元素之间的外边距会有重叠现象,但是浮动元素之间的外边距不会发声重叠现象。

    13)浮动元素移动,上移:margin-top:-**; 下移:margin-botom:-*px,其他以此类推。

    14)一般定位元素(绝对或是相对元素)都会覆盖在文档流对象之上。但是,select元素的窗口控件还不完全支持z-index

    15)在css定位布局中,一般遵循“外部相对定位,内部绝对定位”

    16)在body中设置min-width:760px,可以避免布局重叠现象。

    浮动模型不会与流动模型发生冲突。当元素定义为浮动布局时,它在垂直方向上应该还处于文档流中,也就是说浮动元素不会脱离正常文档流而任意的浮动,它的上边线将与未被声明为浮动时的位置一样。但是在水平方向上,它的浮向边会尽可能地靠近它的包含元素边缘(这个边缘是指包含元素补白的内边沿)。例如,在上面的示例中,我们能够看到第2个span元素虽然浮动位置有了变化,但依然处于第1个span元素后面,且靠近包含元素body的右边缘,并随文档流一起上下流动

    (1)块状元素。该元素是矩形的,有自己的高度和宽度。
    (2)内联元素。和块级元素相反,内敛元素没有固定形状,也没无法设置宽度和高度。

    ###块元素(block element)

    ◎ address - 地址
    ◎ blockquote - 块引用
    ◎ div - 常用块级容易,也是css layout的主要标签
    ◎ dl - 定义列表
    ◎ fieldset - form控制组
    ◎ form - 交互表单
    ◎ h1 - h6 大标题
    ◎ hr - 水平分隔线
    ◎ menu - 菜单列表
    ◎ noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
    ◎ ol - 排序表单
    ◎ p - 段落
    ◎ pre - 格式化文本
    ◎ table - 表格
    ◎ ul - 非排序列表(无序列表)

    块状元素前后元素会换行
    行内元素前后元素不会换行

    ###文档流
    将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.

    每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动.

    内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素.

    有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><).

    浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间

    基于文档流, 我们可以很容易理解以下的定位模式:
    相对定位, 即相对于元素在文档流中位置进行偏移. 但保留原占位.

    绝对定位, 即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移

    固定定位, 即完全脱离文档流, 相对于视区进行偏移

    展开全文
  • HTML5知识点总结大纲

    2020-02-23 19:24:58
    HTML5知识点总结大纲资料 资料来源(B站 Pink老师) 感谢Pink老师 注意:此资料为原创作品,仅供学习交流,转载请注明… QQ:892179467
  • html{font-size:10px} 1.1使用媒体查询,不同分辨率设置不同的html的font-size @(min-width:320px){ html{font-size:10px;} } @(min-width:360px){ html{font-size:11.25px;} } @(min-width:400px){
  • html5知识点整理总结

    千次阅读 2012-02-22 10:55:35
    1.html5新元素: 新的输入类型:email;url;number;range;Date pickers (date, month, week, time, datetime, datetime-local);search;color 新的表单元素:datalist;keygen;output 2.video和audio ...
  • Qt+HTML5知识点总结

    千次阅读 2014-09-04 21:26:06
    收效甚微飞飞落异端邪飞落飞落飞落民间艺术民间艺术习
  • HTML5知识点总结 [tsc] html:超文本标记语言,定义网页中有什么 css:层叠样式表,定义网页中的东西长什么样子
  • 课程为零基础学习开发的学员而准备,无需任何基础,无任何专业限制,通通从零开始,由浅入深学习开发,每个知识点均有对应案例作为指导,通俗易懂,简单易学,易上手。课程经过长时间的经验总结,采取合理又容易和...
  • HTML5和CSS3知识点总结

    千次阅读 2018-02-05 19:51:02
    1. 首先要分别建立html,img和css3的文件夹。 2. html和css3的首页放在文件夹外面。还可以建立一个公共css,比如导航和页脚可以放在公共css里面,在每个页面加上公共css超链接就可以了。减少代码的编写。 3. ...
  • html5移动端知识点总结(一)

    千次阅读 2016-09-14 17:34:58
    第1章 使用rem作为单位html{font-size:10px}1.1使用媒体查询,不同分辨率设置不同的html的font-size@(min-width:320px){ html{font-size:10px;} } @(min-width:360px){ html{font-size:11.25px;} } @(min-width:...
  • 最近熬夜总结html5Canvas相关的知识点,大家一起看一下吧: 1.html5Canvas基础知识 Canvas,它是画布 Canvas元素用于在网页上绘制2D图形和图像 Canvas使用的场景有:1,动画;2,H5游戏;3,图表。 效果动画,...
  • H5知识点总结(html/css/js)包含xmind文件,还包含了图片格式,svg格式以及网页格式的文件
  • HTML5于2014年10月28号正式发布,全称为Hyper Markup Language(超文本标记语言)。 从HTML 4.01、XHTML到HTML5不是革命性的升级,而是规范向习惯的妥协,HTML5增加了很多实用的新功能,将吸引开发者投入HTML5的怀抱。...
  • 坦克大战知识总结 一、认识html5标签: 二、认识html部分和javascript部分注释的不同方式; 1、html采用: 2、vascript采用:// 三、认识了html中嵌入javascript的两种方法: 1、 直接嵌入javascript语法...
  • HTML 1 - 浏览器 | 浏览器页面构成 2 - 浏览器 | 浏览器内核相关知识点...5 - 标签 | meta相关知识点 6 - 标签 | label相关知识点 7 - 标签 | link 与 @import 8 - 属性 | 全局属性一览 9 - 属性 | target属性 ...
  • html5在html4的基础上增删了一些标签,也让更多语义化的结构化代码标签代替了大量的div标签,提升了网页的质量和用户体验。 ☆html5布局与传统布局 &nbsp;&nbsp;&nbsp;&nbsp;传统布局 &nbsp;&...
  • 1.响应式布局;...使用流式布局是需要注意几:margin,padding 设置这两个数值时, 需要根据屏幕宽度变化而改变数值(并不是高度)即:margin数值/屏幕宽度(父级宽度)= 百分比,left,top,right,bottom 需
  • h5知识点总结

    2016-07-19 21:46:04
    Web Workers javaScript语言采用的是单线程模型,也就是说,所有任务排成一个队列,一次只能做一件事。  Web Worker的目的:就是为JavaScript创造多...当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到
  • H5知识点总结

    2018-04-20 08:30:50
    一发展历史1991年出现html,只能简单把网页上传到网站上。1996年出现了JS和CSS极大美化了网页。在这儿阶段,html一直没有发展,一直到2009年W3C正式推出H5的草案。2014年在移动端大力发展,越来越普及的时期,H5在...

空空如也

1 2 3 4 5 ... 20
收藏数 10,905
精华内容 4,362
关键字:

html5 总结