HTML 创建结构控制内容的布局为网页设计提供结构任何网页端基本结构块 CSS 使得网站风格化将样式应用于网页元素针对不同的屏幕尺寸，是网页响应良好，主要处理网页的外观和感受 Javascript 增加互动为网页添加互动性处理复杂的功能和特性增加功能的编程代码通用特性：验证用户的输入简单的客户端计算更大的控制权平台无关的处理数据和时间生成HTML内容检测用户的浏览器和操作系统 HTML 基本语法标签（元素）Element 文本Text 注释Comment DTD Document Type Defination 处理信息 ProcessingInstruction 标签分类文档型闭合型闭合标签

空标签
换行型块级标签

,

...

行内标签 H5新元素语义化标签媒体标签表单标签功能标签 head title 标题，全局唯一 base 向页面所以相对URL提供前缀全局唯一，不建议使用 meta 通常是约好的键值对例外：charset,http-equiv link rel决定类型，href决定引入地址 script type指定MIME类型可内嵌代码，可外链文件用对比不用好，不用比用错好 HTML5语义化标签 .... .... .... ..... .... .... HTML5 Audio // 创建一个音频上下文 const audioCtx = new (window.AudioContext window.webkitAudioContext); // 创建一个正弦振荡器 const osci = audioCtx.createOscillator(); // 创建一个音量增幅器 const gain = audioCtx.createGain(); // 正弦振荡器关联音量增幅器 osci.connect(gain); // 音量增幅器关联音频上下文的音频输出器 gain.connect(audioCtx.destination);// 开始正弦波动 osci.start(); HTML5 Video const mediaSource = new MediaSource(); const video = document.createElement('video'); video.src =mediaSource; mediaSource.addSourceBuffer(...); video.play(); HTML5 二进制 function loadAsText(file){ const reader = new FileReader(); reader.onload = function(loadedEvent) { // result contains loaded file. console.log(loadedEvent.target.result); // 输出文本字符串格式 reader.readAsText(file); //输出二进制数组格式 reader.readAsArrayBuffer(file); // 输出DataURL格式字符串 reader.readAsDataURL(file);} HTML5 API const position = navigator.geolocation.getCurrentPosition(showPosition); console.log('Latitude: ', position.coords.latitude); console.log('Longitude: ', position.coords.longitude);

	 function allowDrop(ev) { 
	 ev.preventDefault();)
     function drag(ev) {
     ev.dataTransfer.setData("text",ev.target.id);)
     function drop(ev) { 
	     ev.preventDefault();
         var data = ev.dataTransfer.getData("text");
         ev.target.appendChild(document.getElementById(data));)
		 
	 <div
     style="width:350px;height:70px;border:1px solid #aaa;" ondrop="drop(event)"
    ondragover="allowDrop(event)"/>
	<img
     src="https://www.w3schools.com/html/img_logo.gif" 
	 draggable="true"
     ondragstart="drag(event)" 
	 width="336" height="69">
	 
HTML5 Web Socket
     // Create WebSocket connection.
     const socket =new WebSocket(ws://localhost:8080);
     // Connection opened
     socket.addEventListener('open',(event)=> {
     socket.send('Hello Server!');});
     // Listen for messages
     socket.addEventListener('message',(event)=> {
     console.log('Message from server',event.data);});
HTML5 WebAssmbly
     是一中新的编码方式，可以直接在浏览器中运行	
     const buffer = await0005
     fetch('...')
     .then(resp	resp.arrayBuffer());	
     const instance =
     WebAssembly.instantiate(buffer);
Web
     对用户友好
	 对开发者友好
	 领域成熟度
	 未来的方向

前端与HTML | 青训营

,

...