html
HTML
Web
- 结构标准（HTML）：超文本标记语言，不是一种编程语言，没有编译过程，直接由浏览器解析执行。从语义的角度描述页面的结构。
- 表现标准（CSS）：层叠样式表。用于设置网页元素的版式、颜色、大小等外观
- 行为标准（JS）：用于定义网页的交互和行为。
浏览器的组成部分
- 渲染引擎（即：浏览器内核）：用来解析 HTML与CSS。渲染引擎是浏览器兼容性问题出现的根本原因
- JS 引擎：解析网页中的JavaScript代码
VS Code 用法
快速生成HTML骨架：
- 新建一个空的html文件，输入!，然后按下enter键，即可生成html骨架
- 新建一个空的html文件，输入html:5，然后按住 Tab键，即可生成html骨架
Emmet 语法：
- 可以直接在 html、haml、jade、slim、jsx、xml、xsl、css、scss、sass、less、stylus、handlebars、php 和 javascriptreact 中使用 Emmet
- 其他语言可以通过如下设置将其打开:
# 将不支持emmet的vue-html语言映射成html语言，Emmet 就会把它当作 html 来处理了
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"razor": "html",
"plaintext": "jade"
}
- 编辑器输入 ul>li*6 ，然后按下 Tab 键可生成列表的格式
html
全局属性
contenteditable="true" 表示元素是否可被用户编辑
html写法
------------------------------------------------------------
html越来越只负责语义了、样式都通过css
1. HTML不区分大小写，但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写。
2. 后缀名不能决定文件格式，只能决定打开文件打开的方式
3. 所有的属性必须有值，且用引号引起来
4. 单标签：如<br> 建议写成 <br />
5. <!-- 我是 html 注释 -->
6. 文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素，p不属于上述三种。（a标签里不能放a和input）
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
7. 任何的标签都可以携带 id 属性和 class（类） 属性。整个页面中的 id 不能重，是唯一的。同一个标签下可以有多个class属性，是用空格隔开的。class属性交给 css 使用，id属性交给 js 使用。vs中创id的快捷键 p#haha + tab， vs中创class的快捷键 p.haha + tab
8. 缩进一定要写对，否则会显示错
------------------------------------------------------------
<!DOCTYPE html> <!-- html5的声明头，让浏览器以标准模式渲染 -->
<html lang="en"> <!-- 指定页面的语言类型，zh-CN 为中文 -->
<head> <!-- head 区域的元素，不会在页面上留下直接的内容 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <!-- 或gb2312（更小巧，加载更快），meta标签声明的html文档的编码类型，一定要和保存的文件编码类型一样 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口宽度等于屏幕宽度 -->
<meta name="Author" content="">
<meta name="Keywords" content="厉害很厉害" /> <!-- 关键词，提高搜索命中率 -->
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" /> <!-- 搜索结果显示的，该技术叫 SEO 搜索引擎优化 -->
<meta http-equiv="refresh" content="3;http://www.baidu.com"> <!-- 3秒之后，自动跳转到百度页面 -->
<title>Document</title> <!-- 网页标题，有助于SEO搜索引擎优化 -->
<base href="/"> <!-- 指定网页中所有链接的根路径 -->
</head>
<body link="" alink="" vlink="" bgcolor="" background="" text="" leftmargin="" topmargin="" rightmargin="" bottommargin=""> <!-- body只能设置一页，里面的元素会直接出现在页面上，属性：设置整个网页的 超链接默认显示的颜色、鼠标点击但是还没有松开时的颜色、点击完成之后显示的颜色，背景颜色、背景图片、文本颜色、网页的边距 -->
<h1 align="">H1：千古壹号，永不止步</h1> <!-- 标题有h1-h6,属性有对齐方式left、center、right -->
<p align="">This is a paragraph</p> <!-- 段落 -->
<hr align="" size="2" width="500 or 70%" noshade /> <!-- 水平分隔线，单标签; 属性：线条置放位置、线条粗细、线条长度、默认线条具阴影。有border、margin，有两种方法设置颜色，一种是给上边框或下边框设置颜色；另一种是将border设置成none，然后设置高，然后设置背景颜色。 -->
<br/> <!-- 强制换行 -->
<div align="" class=""></div> <!-- 把标签中的内容分割为独立的区块，必须单独占据一行。通常和CSS组合，div标签负责布局、结构、分块，css负责样式 -->
<span></span> <!-- 和div的作用一致，但不换行。 -->
<a href="02页面.html">点击进入另外一个文件</a> <!-- 链接到外部文件 -->
<a href="http://www.baidu.com" title="" target="">点我点我</a> <!-- 链接到外部。属性：href为目标URL、title悬停文本、target告诉浏览器用什么方式来打开目标页面（默认_self在同一个网页中显示、_blank在新窗口中打开、_parent在父窗口中显示、_top在顶级窗口中显示）。想要段落中的所有文字都能够被点击，那么应该是p包裹a（a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。） -->
<a name="name1" id="name1">点我</a><!-- 设置锚点，id和name的意义是一样的，两个都写是为了向上兼容 -->
<a href="a.html#name1">点我</a> <!-- 如果是本页a.html可不加，跳转到锚点；href=""刷新页面；"#"跳转到当前页面的顶部（不会刷新）；"javascript:void(0)"什么都不做；"javascript:;"什么都不做 -->
<img src="1.jpg" width="" height="" alt="" title="" align="" /> <!-- html5中width要像素，html4中可像素可百分比，要等比例缩放，高宽只设置一个就好，alt是图片无法显示时，代替图片显示的内容，title是鼠标悬停时出现的文本，align比普通的多bottom(默认)和top。插入的是图片的引用地址，所以要先把图片上传到服务器上。能插jpg(jpeg)、gif、png、bmp等，不能插psd、ai等。2.jpg和./2.jpg都代表当前目录下的图片，../2.jpg表上级目录，../../1.png表上上级目录，绝对路径C:\images\1.jpg 。网页在C盘，图片在D盘（理论上是没办法的，虽然这样 file://C:\images\1.jpg 也行，但最好别用） -->
<!-- 无序列表 -->
<ul type=""> <!-- type: disc(实心原点)、square(实心方点)、circle(空心圆) -->
<li type="">默认1</li> <!-- 列表项 -->
<ul>
<li>1. 海淀区</li>
</ul>
</ul>
<!-- 有序列表 -->
<ol type="" start=""> <!-- type：可1可a可i，start：从几开始 -->
<li>呵呵哒1</li> <!-- 列表项 -->
</ol>
<!-- 定义列表：dt、dd只能在dl里面；dl里面只能有dt、dd；但dt和dd是容器级标签，都可以放 -->
<dl>
<dt>第一条</dt> <!-- 列表的标题（必须） -->
<dd>你若是</dd> <!-- 列表的列表项（非必须） -->
</dl>
<!-- 表格标签：表格是由行组成的（行是由列组成的） -->
<table border="" style="border-collapse:collapse;" width="" height="" bordercolor="" align="" cellpadding="" cellspacing="" bgcolor="" background="路径src/..." bordercolorlight="" bordercolordark="" dir=""> <!-- 边框(填像素)、这个样式表示表格的两边框合并为一条、bordercolor边框颜色、align表格的水平对齐方式，不是单元格的、cellpadding单元格内容到dir设置的ltr的l也就是左边的距离、cellspacing单元格和单元格之间的距离（外边距）、bgcolor表格的背景颜色、background背景图片，背景图片的优先级大于背景颜色、bordercolorlight表格的上、左边框，以及单元格的右、下边框的颜色（为了3D效果）、dir单元格内容的排列方式（ltr：left to right默认） -->
<caption align=""></caption> <!-- 表格的标题,标题相对于表格的位置 -->
<thead> <!-- 标记这行在头，可不写，写了加载表的时候可以不用加载完整个表就显示，还有<tbody></tbody>和<tfoot></tfoot> -->
<tr dir="" bgcolor="" height="" align="" valign=""> <!-- 行,valign该行的内容垂直居中（top、middle、bottom） -->
<th></th> <!-- 加粗单元格，相当于<td> + <b> -->
<td align="" valign="" width="" height="" bgcolor="" background="" colspan="2" rowspan="2"></td> <!-- 单元格,width填百分数、colspan横向合并，表要占据2个单元格、rowspan纵向合并，colspan横向合并 -->
</tr>
</thead>
</table>
<!-- 内嵌框架 -->
<iframe src="a.html" width="" height="" scrolling="no" name=""></iframe> <!-- src内嵌的页面、scrolling是否需要滚动条 -->
<!-- 多媒体 -->
<bgsound src="王菲 - 清风徐来.mp3" loop="-1"></bgsound> <!-- 播放音乐：loop播放次数，-1代表循环播放 -->
<embed src="王菲 - 清风徐来.mp3" loop="-1" autostart="false" width="" height="" quality="" pluginspage="" type="" wmode="transparent"></embed> <!-- 非W3C规范，播放多媒体文件（音频、视频等），可以支持 mp4、wav等，autostart是否开启自动播放、width指Flash文件的宽度、指Flash的播放质量(hight、low)、如果指定的Flash插件不存在，则从pluginspage指定的地方进行下载、type指定Flash的文件格式类型、wmode指Flash的背景是否透明 -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="202"> <!-- classid指定Flash插件的ID号，一般存在于注册表中、codebase如果Flash插件不存在，则从codebase指定的地址下载。为了同时兼容多种浏览器，可在<object>中嵌套<embed> -->
<param name="movie" value="images/banner.swf"> <!-- <param>标签设置具体的详细参数 -->
<param name="quality" value="high">
<embed src="images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
<marquee behavior="alternate" direction="up" scrollamount="" loop="" scrolldelay="1000" width="300" height="200" bgcolor="#8c5dc1">我来了</marquee> <!-- 滚动字幕标签：behavior（slide只移动一次、scroll循环固定方向移动默认、alternate循环往返移动）、direction移动方向（left、right、up、down）、scrollamount移动速度、loop循环圈数，负值表无限循环、scrolldelay移动一次休息1000毫秒=1秒 -->
<!-- H5 多媒体 -->
<!-- 音频1 -->
<audio src="music/yinyue.mp3" autoplay controls> </audio><!-- 音频播放：autoplay 自动播放，controls 控制条，loop 循环播放，preload 预加载 如果和 autoplay 一起写 预加载将失效 -->
<!-- 音频2 -->
<audio controls loop> <!-- 兼容性写法 -->
<source src="music/yinyue.mp3"/>
<source src="music/yinyue.ogg"/>
<source src="music/yinyue.wav"/>
抱歉，你的浏览器暂不支持此音频格式
</audio>
<!-- 视频1 -->
<video src="video/movie.mp4" controls autoplay></video><!-- 视频播放：属性和音频播放一样，还多了width和height属性 -->
<!-- 视频2 -->
<video controls autoplay><!-- 兼容性写法 -->
<source src="video/movie.mp4"/>
<source src="video/movie.ogg"/>
<source src="video/movie.webm"/>
抱歉，不支持此视频
</video>
<!-- 网页中显示多个页面，一个框架显示一个页面（已从Web标准里删除） -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<frameset rows="200或30%,*" cols="30%,*" bordercolor="" > <!-- *代表剩余的，上面的框架占30%，下面的框架占剩余的。分成多列，用逗号隔开就行了。cols左右分割 -->
<frame src="top.html" scrolling="no" noresize bordercolor="" frameborder="0" name=""></frame> <!-- noresize框架大小将固定、frameborder隐藏框架线、name给框架命名，方便在框架里进行超链 -->
<frameset rows="200或30%,*" cols="30%,*">
</frameset>
</frameset>
</html>
表单
<body>
<!-- 表单标签 -->
<form> <!-- 表单就是收集用户信息的，让用户填写的、选择的 -->
<fieldset> <!-- 表单的语义化，和legend连用，会有一个名为账号信息的框 -->
<legend>账号信息</legend>
姓名：<input type="text" name="" id="" value="呵呵" size="50" readonly disabled>你好<br> <!-- input输入标签（文本框）、type【text默认、password密码类型、radio单选按钮（一组设置相同的name不同的id）、checkbox多选按钮（一组设置相同的name）、checked单选按钮或多选按钮的默认、hidden隐藏框用户不可见、button普通按钮、submit提交按钮、reset重置按钮、image图片按钮（有图片的一些属性，和提交按钮功能一样，可显示图片）、file文件选择框】、name和id都是名字，name可重id必须唯一、value文本框里的默认内容、size文本框内能显示的字符数（一个英中都是一个字符）、readonly文本框只读不能编辑、disabled文本框只读不能编辑 -->
<!-- 1 -->
<input type="radio" name="sex" /> 男
<!-- 2 -->
<input type="radio" name="sex" id="nan" />
<label for="nan">男</label> <!-- label标签可以把input和汉字包裹起来作为整体，点‘男’也可以选上按钮，只要label的for属性等于input的id属性就行。任何表单元素都有label -->
</fieldset>
<!-- 下拉列表 -->
<select multiple size="3"> <!-- 下拉列表标签: multiple多选、size默认为1下拉视图，大于1的都是滚动视图 -->
<option selected="">小学</option> <!-- 选项：selected预选中，双引号里面就是空 -->
</select>
<!-- H5 输入框+下拉列表（即能输又能选） -->
<input type="text" list="myData">
<datalist id="myData">
<option>本科</option>
</datalist> <!-- id得和input的list绑定 -->
<!-- H5 <keygen>密钥对生成器 -->
<!-- 当提交表单时，会生成两个键：一个公钥(发送到服务器,用于验证用户的客户端证书)，一个私钥（存于客户端） -->
<!-- H5 度量器 -->
<meter value="81" min="0" max="100" low="60" high="80"/> <!-- value当前值，low低于该值后警告，max最大值 -->
<!-- 多行文本输入框 -->
<textarea name="txtInfo" rows="4" cols="20" readonly>不爱</textarea> <!-- 多行文本输入框，超出了会有滚轮，rows指定文本区域行数、cols指定列数、readonly只读 -->
</form>
</body>
H5表单type=""
email 只能输入email格式。自动带有验证功能。
tel 手机号码。
url 只能输入url格式。
number 只能输入数字。
search 搜索框
range 滑动条
color 拾色器
time 时间
date 日期
datetime 时间日期
month 月份
week 星期
H5表单属性
placeholder 占位符（提示文字）
autofocus 自动获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭默认的验证功能（只能加给form）
required 表示必填项
pattern 自定义正则，验证表单。
H5表单事件
oninput 用户输入内容时触发
oninvalid 验证不通过时触发
var txt1 = document.getElementById('txt1');
var txt2 = document.getElementById('txt2');
var num = 0;
txt1.oninput = function () { //用户输入时触发
num++; //用户每输入一次，num自动加 1
txt2.value = num//将统计数显示在txt2中
}
txt1.oninvalid = function () { //验证不通过时触发
this.setCustomValidity('亲，请输入正确哦'); //设置验证不通过时的提示文字
}
字体、转义字符
下划线、中划线、斜体、上标、下标
<u>：下划线标记
<s>或<del>：中划线标记（删除线）
<i>或<em>：斜体标记，推荐用em
<sup>：上标
<sub>：下标
<b>：加粗
&#四位编码 : Unicode码
<p>：<p>
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
html5
HTML5是新一代开发 Web 富客户端应用程序整体解决方案。包括：HTML5，CSS3，Javascript API在内的一套技术组合。
兼容
- IE低版本不能正常解析HTML5新标签。
- 解决办法：HTML5的新标签全部通过
document.createElement('tagName')来创建
- 解决办法：HTML5的新标签全部通过
- IE8 及以下版本的浏览器不支持 H5 和 CSS3。
- 解决办法：引入html5shiv.js文件
<!-- 条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
H5 标签
<section> 表示区块
<article> 表示文章。如文章、评论、帖子、博客
<header> 表示页眉
<footer> 表示页脚
<nav> 表示导航
<aside> 表示侧边栏。如文章的侧栏
<figure> 表示媒介内容分组。
<mark> 表示标记 (用得少)
<progress> 表示进度 (用得少)
<time> 表示日期
H5 自定义属性
<!-- 给标签添加自定义属性 必须以data-开头 -->
<div class="box" title="盒子" data-my-name="smyhvae" data-content="我是一个div">div</div>
<script>
var box = document.querySelector('.box');
//获取自定义的属性 需要通过 dateset[] 的方式
console.log(box.dataset["content"]);
</script>
H5 js DOM操作
/* 获取元素 */
document.querySelector("div") //获取第一个div
document.querySelectorAll("div") //获取所有div，返回类数组
/* 操作类名class */
Node.classList.add("class") //添加class
Node.classList.remove("class") //移除class
Node.classList.toggle("class") //切换class，有则移除，无则添加
Node.classList.contains("class") //检测是否存在class
拖拽属性
draggable="true" 元素是否可拖拽，图片、链接默认是开启拖拽的
拖拽元素的事件
ondragstart 当拖拽开始时调用
ondragleave 当鼠标离开拖拽元素时调用
ondragend 当拖拽结束时调用
ondrag 整个拖拽过程都会调用
目标元素的事件
ondragenter 当拖拽元素进入时调用
ondragover 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
ondrop 当在目标元素上松开鼠标时调用
ondragleave 当鼠标离开目标元素时调用
// 当拖拽元素在 目标元素上时，连续触发
two.ondragover = function (e) {
//阻止拖拽事件的默认行为
e.preventDefault(); //【重要】如果想让拖拽元素在目标元素里做点事情，一定要加这一行代码，否则，后面的方法 ondrop() 无法触发。
}
地理位置定位
必须先得到用户明确许可，才能获取用户的位置信息
获取地理信息的方式
1、IP地址
2、三维坐标（GPS、Wi-Fi定位仅限于室内、手机信号定位）
navigator.getCurrentPosition(successCallback, errorCallback, options) //获取当前地理信息。当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）
navigator.watchPosition(successCallback, errorCallback, options) //重复获取当前地理信息
position.coords.latitude //纬度
position.coords.longitude //经度
元素全屏显示
/* 事件设置 */
var box = document.querySelector('.box');
// box.requestFullscreen(); //直接这样写是没有效果的。之所以无效，应该是浏览器的机制，必须要点一下才可以实现全屏功能。
document.querySelector('.box').onclick = function () {
// 开启全屏显示的兼容写法
if (box.requestFullscreen) {
box.requestFullscreen(); //对应的cancleFullscreen()为关闭全屏显示
} else if (box.webkitRequestFullScreen) {
box.webkitRequestFullScreen(); //对应的webkitCancleFullScreen()为关闭全屏显示
} else if (box.mozRequestFullScreen) {
box.mozRequestFullScreen(); //对应的mozCancleFullScreen()为关闭全屏显示
}
}
document.fullScreen //检测当前是否处于全屏状态
document.webkitIsFullScreen //兼容写法
document.mozFullScreen //兼容写法
/*css设置全屏伪类：当元素处于全屏时，改变元素的背景色*/
.box:full-screen {} /* 写法1 */
.box:-moz-full-screen {} /* 兼容写法2 */
.box:-webkit-full-screen {/* 兼容写法3 */
background-color: red;
}
H5 Web存储
//只能存储字符串，可以将对象 JSON.stringify() 编码后存储
// window.sessionStorage 会话存储 5M 当窗口关闭时数据销毁 存内存里
// window.localStorage 本地存储 20M 永久生效，除非手动删除或清理垃圾 存硬盘上
window.sessionStorage.setItem(key, value) //设置存储内容
window.sessionStorage.getItem(key) //读取存储内容
window.sessionStorage.removeItem(key) //根据键，删除存储内容
window.sessionStorage.clear() //清空所有存储内容
window.sessionStorage.key(n) //根据索引值来获取存储内容
网络状态
//window.online：用户网络连接时被调用。
//window.offline：用户网络断开时被调用（拔掉网线或者禁用以太网）
window.addEventListener('online', function () {
alert('网络连接建立！');
});
缓存清单
cache manifest 缓存清单文件，里面写离线访问的资源。推荐使用 .appcache作为后缀名，另外还要添加MIME类型。
（1）顶行写CACHE MANIFEST
（2）CACHE: 另起一行写需要缓存的离线文件
（3）NETWORK: 另起一行写需要在线访问的文件，可使用通配符
（4）FALLBACK: 另起一行写当被缓存的文件找不到时的备用文件
CACHE MANIFEST
CACHE:
./images/img1.jpg
NETWORK:
http://img.smyhvae.com/2016040101.jpg
FALLBACK:
./offline.html
<html manifest="01.appcache"> <!-- 在html标签里添加缓存清单 -->
安全问题
CSRF攻击：跨站伪造请求。
-
登入网站A，浏览器会生成A网站的cookie，在没登出网站A的情况下，访问了危险网站B，B网站会发送请求，让浏览器带着A的cookie访问A网站，已达到模拟该用户操作A网站的目的
-
防御：
- token验证（服务器发送给客户端一个token，客户端提交的表单中带着这个token，如果这个 token 不合法，那么服务器拒绝这个请求）也可以把 token 隐藏在 http 的 head头中
- Referer 指的是页面请求来源。只接受本站的请求，服务器才做响应；如果不是，就拦截
xss攻击：跨域脚本攻击。
- 不需要你做任何的登录认证，它会通过合法的操作（比如在url中输入、在评论框中输入），向你的页面注入脚本（可能是js、hmtl代码块等）。最后可能导致：盗用Cookie、破坏页面的正常结构，插入广告等恶意内容、D-doss攻击
- 防御：对用户输入的数据进行 HTML Entity 编码转文本，然后用DOM Parse转成DOM对象，然后过滤（移除用户输入的Style节点、Script节点(支持跨域)、Iframe节点；移除用户输入的和事件相关的属性。如onerror可以自动触发攻击，还有onclick等）
搜索引擎优化
- logo是图片，图片里有很重要的公司名之类的，但搜索引擎是搜不到图片的，所以将原本放logo图片的img标签换成放logo文字的超链接a标签，然后通过text-indent缩进的属性把文字赶到视线以外的地方，然后a标签设置logo图片为背景
浙公网安备 33010602011771号