HTML总结整理HTML 以及前端一些常用知识。 HTML5新特性语义化标签(正确的人做正确的事，加载时更清晰)： <

整理HTML 以及前端一些常用知识。

HTML5新特性

语义化标签(正确的人做正确的事，加载时更清晰)： <Header> <footer> <nav> <article>
新特性： canvas video audio websocket background

BOM

BOM是浏览器对象 1.location对象： location.href：返回或设置当前文档url location.hostname：返回主域名 location.pathname：返回域名后内容

2.history history.go()：前进或后退指定页面数 history.back():后退一页 history.forward():前进一页

3.Navigator navigator.userAgent：返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串) navigator.cookieEnabled：返回浏览器是否支持(启用)cookie

CSS画三角形

边框均分原理：border三边为transparent，一边为有值：

div {
width:0px;
height:0px;
border:10px solid red;
border-color:transparent transparent transparent 10px;
}

DOM

DOM，文档对象模型(document object model) 常用DOM操作

document.getElementsByTagName() 标签，这些返回的都是动态的HtmlCollection
document.getElementById() ID
document.getElementsByClassName() 类
document.querySelector()/document.querySelectorAll() 第一个/所有满足的元素，返回的是静态的NodeList
document.createElement() 创建元素
document.createDocumentFragment() 创建元素片段
document.removeChild() 删除元素
on事件名称事件属性
addEventListener(type,func,)

input属性

type： password,checkbox,ratio,text,file value:当前值

event

event.target: 返回触发事件的元素 event.currentTarget: 返回绑定事件的元素

Canvas

Canvas是html5的一个新标签，属于h5的新特性，是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，三角形，折线等等,也可以用来画logo, 通过javascript来画的，即脚本绘制图形。

Canvas可以用于制作Web网页游戏、数据可视化(ECharts基于canvas)等

基本用法

<body onload="draw()">
    <canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
<script>
    function draw() {
        // 获取画布
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) { // 用于验证浏览器是否支持canvas
            var ctx = canvas.getContext("2d"); // 可选2d和3d
            ctx.fillStyle = "rgba(200, 0, 0, 1)"; // 填充色
            // 画矩形的方法，前两个表示相对于canvas的位置x,y坐标，后面表示长宽
            ctx.fillRect (10, 10, 55, 50); 
            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect (30, 30, 55, 50);
            // 绘制一个矩形,清除特定矩形，绘制边框
            ctx.fillRect(100, 100, 100, 100);
            ctx.clearRect(112.5, 112.5, 75, 75); // 清除矩形
            ctx.strokeRect(125, 125, 50, 50); // 矩形边框
        }
    }
</script>

1px问题

1px是在移动端开发中，1css像素≠1物理像素，是由于视口的改变造成的，即物理像素与逻辑像素不匹配造成。

解决方法：

1.媒体查询利用设备像素比缩放，设置小数像素，两选一：

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

<body><div id="main" style="border: 1px solid #000000;"></div>         </body>
<script type="text/javascript">
    if (window.devicePixelRatio && devicePixelRatio >= 2) {
        var main = document.getElementById('main');
        main.style.border = '.5px solid #000000';
    }
</script>

2.viewport+rem，实现动态的修改页面的缩放比

100vw = 1视口宽度 1rem = 1 html字体大小 1em = 当前字节大小

初始化

<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

通过js动态修改缩放比

var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
} 
if (window.devicePixelRatio == 2) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
} 
if (window.devicePixelRatio == 3) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
} 
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;

Web Quality(无障碍)

能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。通过使用

iframe

iframe元素会创建包含另一个文档的内联框架，缺点是会阻塞主页面的onload事件。

Doctype

声明于文档最前面，告诉浏览器以何种方式来渲染页面，分为严格模式和混杂模式。

严格模式：排版和JS 运作模式是以该浏览器支持的最高标准运行。

混杂模式：向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。