JavaScript基础回顾2

HTML

`<meta>`

<!--描述 HTML 文档的元数据:每三十秒刷新界面-->
<meta http-equiv="refresh" content="2" />

`<link>`

<!--网站图标-->
    <link
      rel="shortcut icon"
      href="图片地址"
      type="image/x-icon"
    />

`<base>`

<!--规定页面上所有链接的默认 URL 和默认目标 置于头部之内-->
<base href="..." target="_blank">

`<style>`

/*media属性:对两种不同媒介类型使用不同样式表*/
<style type="text/css" media="print">

<style type="text/css" media="screen and (max-height:700px)">

/*应用样式到元素的父元素及其子元素。*/
<style type="text/css" scoped>

MDN参考文档

Media Types文档参照

`img、<map>、<area> 图像映射`

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

`<table>`

属性	表述	属性	表述
border	显示框线	bgcolor	表格背景
cellspacing	单元格之间的距离	cellpadding	单元格内容与其边框之间的空白

`<ol>`

<!--type:  a A i I 1 -->
<ol start="50" type="I" >
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

iframe

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200" frameborder="0" scrolling="auto">
</iframe>

HTML5

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。

`<canvas>`

<!--画布 -->
<canvas id="myCanvas" width="200" height="100"></canvas>

canvas基本了解

表单属性

required ：必填
placeholder ：提示
autofocus ：自动聚焦
autocomplete ：自动填充 on/off
formaction ：表单提交的URL地址.覆盖form的action属性与type="submit"配合使用
formenctype ：提交到服务器的数据编码与type="submit"配合使用 “ multipart/form-data ”

全局属性

hidden : 隐藏
contenteditable : 元素是否可编辑
accesskey : 配合Alt实现快捷访问超链接

CSS/CSS3

`<link>引入和@import引入差别`

本质的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。
加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候) ，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
兼容性的差别: @import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。
使用 dom(document o bject model文档对象模型 )控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。

文本

对齐方式： text-align
- center ：居中
- right ：居右
- justify : 两端对齐
文本修饰 : text-decoration: text-decoration-line text-decoration-color text-decoration-style
- overline : 上划线 red dotted/wavy
- line-through ：管穿线 red dotted/wavy
- underline ：下划线 red dotted/wavy *
文本转换： text-transform
- uppercase ：大写
- lowercase ：小写
- capitalize ：首字母大写
段落中的文本换行 : white-space
- normal ：默认。空白会被浏览器忽略。
- nowrap ：文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
- inherit ：规定应该从父元素继承 white-space 属性的值。
- pre : 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
- pre-wrap : 保留空白符序列，但是正常地进行换行。
- pre-line : 合并空白符序列，但是保留换行符。
单词、汉字间隔 : word-spacing
字母、汉字 : letter-spacing
文本方向： direction : rtl
设置元素的垂直对齐 : vertical-align

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	将元素升高或降低指定的高度，可以是负数。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

边框合并： border-collapse:collapse;
隐藏元素： visibility:hidden
控制内容溢出元素框时显示的方式 : overflow
visible : 默认值。内容不会被修剪，会呈现在元素框之外。
hidden ：内容会被修剪，并且其余内容是不可见的。
scroll ：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto ：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit ：规定应该从父元素继承 overflow 属性的值。
文本溢出显示： text-overflow
- ellipsis ：显示省略符号 ... 来代表被修剪的文本
- clip ：剪切文本
- string ：使用给定的字符串来代表被修剪的文本
允许长的内容可以自动换行： word-wrap:break-word ;
元素的总高度和宽度包含内边距和边框 : box-sizing: border-box;
box-shadow: h-shadow/水平阴影位置 v-shadow/垂直阴影位置 blur/模糊距离 spread/阴影大小 color/颜色 inset;

标注内容

mediatype : all/全部 ; print/打印机，screen/用于电脑屏幕，平板，智能手机等,speech/用于屏幕阅读器
not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。
all: 所有设备，这个应该经常看到。
and ：and 操作符用于将多个媒体查询规则组合成单条媒体查询，

多媒体查询

1. 在`<style>`中使用

/* 多媒体查询语法 */
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
    CSS 代码...;
}

/* 代码一 */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

/* 代码二 */
@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }

    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

/* 代码三 */
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

2. 在`<link>`中使用

<!-- 多媒体查询语法 -->
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

<!-- 代码 -->
<link rel="stylesheet" media="screen and (min-width:300px)" href="print.css">

3. 在@import中使用

/* 多媒体查询语法 */
@import url('landscape.css') screen and (orientation:landscape);

/* 代码 */
@import url('landscape.css') only screen and (min-width:400px);

JavaScript

this

all() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

JavaScript 静态方法

class Runoob {
  constructor(name) {
    this.name = name;
  }
  static hello() {
    return "Hello!!";
  }
}
 
let noob = new Runoob("菜鸟教程");
 
// 可以在类中调用 'hello()' 方法
document.getElementById("demo").innerHTML = Runoob.hello();
 
// 不能通过实例化后的对象调用静态方法
// document.getElementById("demo").innerHTML = noob.hello();
// 以上代码会报错

HTML

<meta>

<link>

<base>

<style>

img、<map>、<area> 图像映射

<table>

<ol>