以下是为您添加标题层级数字的内容:
1 超文本标记语言(Hyper Text Markup Language)
1.1 html 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
</body>
</html>
1.2 相关链接
1.3 checkbox 的三种状态
indeterminate 状态应用于在有全选/全不选的时候,如果子项只选中了其中几个,则全选/全不选的状态是indeterminate 。
<input type="checkbox" name="" id="checked" value="checked" />选中
<input type="checkbox" name="" id="unchecked" value="unchecked" />未选中
<input type="checkbox" name="" id="indeterminate" value="indeterminate" />选中了部分时候的状态
<script type="text/javascript">
document.getElementById("checked").checked=true;
document.getElementById("unchecked").checked=false;
document.getElementById("indeterminate").indeterminate=true;
</script>
1.4 使网页进入可编辑状态
控制台输入
document.body.contentEditable='true';
地址栏输入,然后删掉开头的 s,按 enter 执行,加 s 的原因是,如果不加javascript:
部分会被浏览器直接屏蔽掉
sjavascript:void(document.body.contentEditable='true')
或者把上面的代码去掉 s 保存为书签也行
1.5 浏览器变编辑器
data:text/html, <html style="color:green;" contenteditable>
1.6 移动端适配元标签
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
1.7 X-UA-Compatible 和 IE=Edge,chrome=1 的作用
HTML Meta 中添加 X-UA-Compatible 和 IE=Edge,chrome=1 有什么作用_百度知道
https://zhidao.baidu.com/question/519877248479525325.html
X-UA-Compatible 是自从 IE8 新加的一个设置,对于 IE8 以下的浏览器是不识别的。通过在 meta 中设置 X-UA-Compatible 的值,可以指定网页的兼容性模式设置。
在网页中指定的模式优先权高于服务器中(通过 HTTP Header)所指定的模式。兼容性模式设置优先
IE=Edge,chrome=1″这样简单快捷,但是弊端是代码将无法通过 W3C 验证。其实这并不是问题,毕竟标准只是标准,如果只有这一个“错误”完全不会有任何不良的影响。
扩展资料:注意事项:
1,根据官网定义 X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话,它不起作用
2,content 的内容是 IE=8,或者 IE=edge 等值,注意不是 IE8 或者直接写个 edge 的值,否则不起作用。
<meta http-equiv="X-UA-Compatible" content="IE=7">
#以上代码告诉 IE 浏览器,无论是否用 DTD 声明文档标准,IE8/9 都会以 IE7 引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=8">
#以上代码告诉 IE 浏览器,IE8/9 都会以 IE8 引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#以上代码告诉 IE 浏览器,IE8/9 及以后的版本都会以最高版本 IE 来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码 IE=edge 告诉 IE 使用最新的引擎渲染网页,chrome=1 则可以激活 Chrome Frame.
1.8 html 中各种宽高的理解和映射
常见的属性值有:
- width
- height
- left
- top
位置
- offset
- client
- scroll
4*3 总共 12 种
1.9 IE 判断
条件注释判断浏览器<!--[if!IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]> - likor - 博客园
https://www.cnblogs.com/xiaotianrui/p/8206612.html
<!--[if!IE]><!--> 除 IE 外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的 IE 可识别 <![endif]-->
<!--[if IE 6]> 仅 IE6 可识别 <![endif]-->
<!--[if lt IE 6]> IE6 以及 IE6 以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6 以及 IE6 以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅 IE7 可识别 <![endif]-->
<!--[if lt IE 7]> IE7 以及 IE7 以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7 以及 IE7 以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅 IE8 可识别 <![endif]-->
<!--[if IE 9]> 仅 IE9 可识别 <![endif]-->
1.10 a 标签的 target 值
HTML <a>
标签的 target 属性
https://www.w3school.com.cn/tags/att_a_target.asp
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
提示:这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略,因此,不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
_new
始终在同一个新窗口(这是新出的标签)
1.11 meta 自动跳转
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
1.12 电子邮件
<a href="mailto:335121817@qq.com">01 打开本地系统的默认电子邮件客户端+填写收件人</a><br />
<a href="mailto:335121817@qq.com?subject=主题写在这里(不要单双引号)">02 打开本地系统的默认电子邮件客户端+填写收件人+填写主题</a><br />
<a href="mailto:335121817@qq.com?cc=1466513634@qq.com">03 打开本地系统的默认电子邮件客户端+填写收件人+填写抄送</a><br />
<a href="mailto:335121817@qq.com?bcc=335121817@qq.com">04 打开本地系统的默认电子邮件客户端+填写收件人+填写密件抄送</a><br />
<a href="mailto:335121817@qq.com?subject=电子邮件主题&cc=335121817@qq.com&bcc=335121817@qq.com">05 打开本地系统的默认电子邮件客户端+填写收件人+填写主题+填写抄送+填写密件抄送</a><br />
<!--subject 邮件主题 ,cc 抄送收件人 ,bcc 暗送收件人-->
1.13 移动端适配
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
img
input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
canvas
<canvas id="canvas1" width="400" height="200">Your browser not support the canvas element</canvas>
/**
* 获取canvas 2d context
* @param {string} canvasId
*/
var getCtx = function (canvasId) {
var canvas = document.getElementById(canvasId);
var ctx = canvas.getContext("2d");
return ctx;
}
video
<video controls src="test.mp4">该浏览器不支持video元素</video>
audio
<audio controls src="test.mp3"></audio>
meter
progress
session storage
一个会话中的数据,关闭浏览器或标签页后数据就不存在了,但刷新,前进,后退后,数据仍然在。
local storage
除非主动删除,数据永不过期。
指定字符编码
<meta charset="UTF-8">
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />
将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
发表评论