Skip to content

Web

HTML5

<!--注释内容--> 注释

<hr> 水平分割线

<br> 换行

字体样式

<strong> 强调

<b>加粗

<em>斜体

<del> 删除线

<ins> 下划线

无序列表

<li>容器中可以放置所有网页元素,包括嵌套的列表结构

1
2
3
4
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>

**有序列表 **

1
2
3
4
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>

自定义列表

1
2
3
4
5
6
7
8
<dl>
    <dt>列表项1</dt>
        <dd>列表数据1</dd>
        <dd>列表数据2</dd>
    <dt>列表项2</dt>
        <dd>列表数据3</dd>
        <dd>列表数据4</dd>
</dl>

锚点

  • 声明锚点

    以已有元素属性的形式存在，格式为<p id="idcore">，其中p为元素标记，引号内内容为自定义标识符

  • 引用锚点

    <a href="#idcore"></a>

图片

对于横幅等大尺寸图片通常使用有损压缩的jpg格式，图标、按钮通常使用GIF或PNG-8格式，需要保持透明底的图像使用png-24或png-32格式。

1
<img src="从域名指向的根目录开始的路径" 其他可选属性>

属性与属性之间使用空格分割，属性条目如下：

alt：如果图像没有成功加载的替换文本

title：提示文本

width：图像的指定宽度

hight：图像的指定高度

如果不指定width和hight，图像将以图像文件大小显示；如果只指定一项，另一项将按照比例自动缩放

CSS 层叠样式表

注意，css中的注释格式和html不同，通常是/*注释内容*/。
如果一个标签同时被内部样式和外部样式表定义，内部样式会覆盖外部样式，同一标签内仅被外部样式表指定的属性则仍然使用外部样式表的指定。

优先级：内联样式>内部样式>外部样式。
此外，对于外部样式，浏览器会根据不同选择器的权重进行计算。

引入外部样式表

通常使用css格式的文件。

1
2
3
4
5
6
7
...
<head>
    ...
    <link href="外部样式表路径" rel="stylesheet" type="text/css">
    ...
</head>
...

选择器

选择器优先级：ID选择器>类选择器>标记选择器

常用选择器

  • 标记选择器

    使用html标记作为选择器，引入后，会影响该html文件中的所有对应标签。通常格式为：

    标记名称{属性:属性值;属性:属性值;...}

  • 类选择器

    使用自定义类名称作为选择器，引入后，会影响该html文件中所有使用了class属性指定了类的元素。通常格式为：

    .类名称{属性:属性值;属性:属性值;...}

    指定格式为：

    <标记名称 class="类名称">内容<标记结束符>

  • ID选择器

    对某个特定id的元素生效。通常定义格式为：#id名称{属性:属性值;属性:属性值;...}

    声明id格式为：<标记 id="id名称">

  • 交集选择器

    由一个标记选择器和一个类选择器构成，只有当一个元素同时是指定标记并声明了指定类选择器，交集选择器才会生效。交集选择器的声明格式通常如下：

    1
2
3
4
    p{属性:属性值;属性:属性值;...}
.pi{属性:属性值;属性:属性值;...}
/*声明标记选择器和类选择器*/
p.pi{属性:属性值;属性:属性值;...}

    对于上述交集选择器，如需调用：

    1
    <p class="pi">内容</p>

  • 并集选择器

    并集选择器同时作用于多个选择器，其定义的格式对指定的所有选择器都生效。并集选择器的声明格式通常如下：

    1
    标记名称1，标记名称2，标记名称3，...{属性:属性值;属性:属性值;...}

  • 后代选择器

    后代选择器由两个选择器构成，选择器1中的所有选择器2都会应用指定的属性，无论选择器2在选择器1中向下嵌套的层数。后代选择器的声明格式通常如下：

    1
    选择器1 选择器2{属性:属性值;属性:属性值;...}

  • 子选择器

    和后代选择器类似，子选择器由两个选择器构成，但当且仅当选择器2是选择器1的直接子元素时，子选择器的属性才会生效。子选择器的声明格式通常如下：

    1
    选择器1>选择器2{属性:属性值;属性:属性值;...}

伪类选择器

伪类依附于类，以单个冒号作为标识，描述元素在某种状态或特性下的样式，可以链式拼接。常见伪类如下：

  • :hover：悬停
  • :active：激活（鼠标按下不放）
  • :focus：获取焦点
  • :link：未访问（链接）
  • :visited：已访问（链接）
  • disabled：禁用（表单）
  • :checked：勾选（表单）
  • :first-child：第一个子元素
  • :nth-child()：第n个子元素
  • :last-child：最后last一个子元素
  • :nth-last-child()：倒数第n个子元素
  • :not()：不匹配给定选择器
  • :has()有括号中的子元素的父元素，括号中可以是任何选择器

注意：一个元素加上伪类后，需要同时满足元素和伪类的需求，譬如对于.name:first-child，被选中的元素需要满足classname是.name，同时它是当前层级的第一个子元素；需要区分它不是“当前元素的第一个子元素”的意思。

CSS文本

对于网页字体，如果希望使用自定义字体且无法保证用户会安装该字体，则可以使用服务器字体。

服务器字体要求存放在css文件目录下，并用@font-face进行定义，语法如下：

1
@font-face{font-family:"字体名称";scr:url(字体文件路径)}

其中，字体路径是相对于css文件所在的路径，而不是相对域名绑定的html文件所在的路径。

定义后，就可以在font-family中使用指定的名称进行调用。

元素

html中的元素可以分为以下三类：

  • 块级元素

    每个块级元素都占据至少一行，且每个元素都从新的一行起，高度、宽度、以及顶部/底部边距都可设置。。
    常见的块级元素有\<p>,\<h1>,\<div>等。
    CSS属性display:block能将任何元素强制转换为块级元素。

  • 内联元素

    和块级元素相反，内联元素和其他元素处于同一行，呈现出“嵌入”的效果，高度、宽度、以及顶部/底部边距都不可设置。
    常见的内联元素有\<a>,\<br>等。
    CSS属性display:inline能将任何元素强制转换为内联元素。

  • 内联块级元素

    类似于内联元素，内联块级元素和其他元素位于同一行，但高度、宽度、以及顶部/底部边距都可设置。
    常见的内联块级元素有\<image>,\<input>等。
    CSS属性display:inline-block能将任何元素强制转换为内联块级元素。

盒子模型

所有元素都可以视为盒子模型，盒子模型是可嵌套的。

  • 盒子边框（border）

    用于定义盒子的边框，包括边框样式、颜色和宽度三个子属性

  • 内边距（pandding）

    用于定义填充内容和盒子边框之间的距离，如果填四个数据则按顺序对应上、右、下、左，两个则是上下、左右。
    top和bottom对行级元素无效。如果设置了背景，会存在视觉上的效果。

  • 外边距（margin）

    用于定义盒子和相邻元素值之间的距离，位于盒子最外部。
    top和bottom对行级元素无效外边框。
    当上下两个相邻元素有上下外边框，则外边框会合并，它们之间的垂直距离会取较大的外边距；当存在内外的父子嵌套关系时，外边框同样按照此规则合并。

  • 盒子类型（box-sizing）

    分为两种类型，分别是content-box和border-box。

    content-box
    默认的盒子类型，width和height属性只包括内容部分。

    border-box
    生产环境中常用的盒子模型。
    width和height属性包括内容、内边距和盒子边框。

盒定位

盒子模型的定位依赖五个属性：上（top)、右(right)、下(bottom)、左(left)和深度（z-index），深度越大越在前面。

盒子模型的定位共有五种模式，由position属性控制，其中只有static和relative不会脱离正常文档流。

  • static

    static是position的默认值，代表使用浏览器的页面流进行定位，此时再设置位置和深度属性将被忽略。

  • relative

    relative是相对定位，相对于它 在文档流原先位置产生偏移，不会脱离文档流的布局。
    不适用z-index属性。

  • absolute

    absolute是绝对定位，优先级高于页面流，相对父元素（如果父元素是static，则相对页面文档）偏移。

  • fixed

    fixed是固定定位，元素将始终处于窗口的固定位置，无论上下和左右滚动。

  • ** stick**

浮动

float元素共有right和left，只能水平移动不能垂直移动，会向左或向右浮动碰到包含框（content）或另一个元素的边框。元素会脱离文档流，相同父级下的其他文字内容围绕浮动元素排列。浮动元素不影响元素之前的文档流。

对块级元素设置浮动时，会使默认宽度变成内容自适应。

对行内元素设置浮动时，会成为块级元素。

如果同一行同一层级的浮动元素宽度总和超过了父元素的宽度总和，则超出宽度的浮动元素会保持浮动方向和贴边原则的同时，依次下移到最近的能够容纳元素宽度的位置，即向前贴边。

同一层级下，每个浮动元素的顶边不得高于上一个浮动元素的定边。

外边距合并

由于浮动元素的外边距不会正常合并，采用四边不同的外边距规避影响是正常的。

清除浮动
  • clear：写在空元素中，清除该元素前的浮动元素带来的（文档流的）影响；或写在非浮动元素中，清除该元素前的浮动元素带来的影响。属性包括left,right 和both。
  • ::after：伪元素选择器，在指定元素的子级最后添加一个元素，并使用选择器内部的样式（如：clear:both）。通常写在父级内。
  • `overflow:hidden：创建一个BFC。

BFC（待修正

块级格式化上下文，将一个块级元素内部设为独立渲染区域，无论里面的元素怎么排列，都不会影响外部。有以下方法可以创建BFC区域：

  • body根元素提供了一个BFC；
  • float属性设置为none以外的值；
  • position属性设置为除relative或static以外的值
  • overflow属性设置为visible以外的值；

BFC具有以下特性：

  • 元素垂直方向的距离由margin决定，同一个BFC内的相邻元素margin会叠加，取其中的最大值
  • BFC容器不会与浮动元素叠加。

弹性盒子（Flex）

弹性容器的子元素会自动设置为容器成员，称为flex item，其中float、clear和vertical-aling元素会失效。

当弹性容器宽度大于子元素宽度时，子元素的宽度使用style指定值；反之则按比例缩放。

对子元素设置max-width，min-width，max-height,min-height控制子元素的最大最小缩放。

对齐方式

容器水平方向的轴称为主轴，垂直方向称为交叉轴。

  • justify-content：该属性控制子元素在主轴上的对齐方式。
  • align-items：该属性控制子元素在交叉轴上的对齐方式。默认情况下，如果子元素没有设置高度，则会被拉伸到容器的高度。如果子元素存在换行的情况，会将容器的高度按行数切分成数份，并在每一份中对每一行使用对应对齐方式。
  • algin-content：该属性控制多根交叉轴线的对齐方式。
主轴方向

flex-direction属性控制主轴的方向。

  • row: 元素摆放的方向和文字方向一致。
  • row-reverse: 元素摆放的方向和文字方向相反。
  • column: 元素从上放到下。
  • column-reverse: 元素从下放到上。
换行

flex-wrap属性控制复数个子元素总宽度在超过父元素时，是否进行换行和换行的方式。

  • nowrap：不进行换行
  • wrap：在排满第一行的情况下，向下换行。
  • wrap-reverse；按照wrap的方式换行，但优先排满下方的行。

该属性可以和flex-direction简写为flex-flow:row wrap。

单个子元素的控制
  • align-self属性控制单个子元素在交叉轴上的对齐方式。
  • order属性的值越小，元素排在越前面。默认值为0.
  • flex-grow：设置放大倍率，当存在剩余空间时，会按照该属性的值进行分配。
  • flex-shrink：设置缩小倍率，默认值为1，仅在nowrap时生效。

溢出（待修正

当子元素宽度超过父元素时，称为溢出。

通过overflow属性管理溢出的显示，有以下值：

  • visible
  • hidden：溢出元素将会被裁切隐藏

JaveScript

引用外部文件中的js文件：<script src="Path"></script>

和html文件相同，路径从index.html所在的根目录起。

js由ES、DOM、BOM三大部分组成，其中ES是js的语言标准，规定了js的核心和语法。

使用方法时，可以直接在参数中定义新的函数。

输出

  • window.alert() 弹出警告框

  • decument.write()将内容写入到html文档中

    如果要修改html的值：decument.write("id")="修改后的值"，其中id是html文件中元素的id属性。

  • innerHTML 写入到html元素
  • console.log() 写入控制台

变量

如果不使用下列关键字声明变量而是直接赋值，则该变量将会成为window的属性。

特别的，在对象中声明成员变量不需要使用下列关键字。

  • var varname

    通常使用var来声明一个变量并赋值，具有函数级作用域。

    使用var声明的变量会提升（Hoisting），即声明语句提前到作用域的最前面执行，但赋值部分不会提升。

    如果在赋值（包括初始化）前调用该变量，则它的值将是undefined（未定义/空）。

    如果两次声明同名变量，且第一次进行了赋值，第二次没有，该变量会保留第一次声明的值

  • 使用let声明一个可变量，使用const声明一个不可变量，具有块级作用域，即向上的最近一个{}中的内容。

数据类型

和python类似，js的变量类型是动态的，在声明变量并初始化后，可以再给它赋一个完全不同类型的值。

声明新变量时，可以用new绑定其类型：var v=new String。

  • 值类型

    字符串、数字、布尔、空（null）、未定义（undefined）；

    未定义是变量在没有初始化时的默认值，空值则是显式声明，有意置空。

  • 引用类型

    对象、数组、函数、正则（RegExp)和日期。

所有数据类型都有constructor属性，返回该变量的构造函数。

数据类型转换

js存在自动数据类型转换，以下为强制数据类型转换。

  • String()：将传入变量转换为字符串
  • Number()：将传入字符串转换为数字
    特别的，传入空字符串返回0，传入非数字字符串返回NaN（不是数字）
  • parseFloat()：将传入字符串转换为浮点数
  • parseInt()：将传入字符串转换为整数
  • Operator +：将后面的变量转换为数字。
    此处为一元运算符而非四则运算。

正则表达式

声明正则表达式时使用/表达式主体/可选修饰符的格式。

正则表达式通常用于以下两个字符串方法（字符串对象自带方法）：

  • str.search()：检索字符串中指定的子字符串（传入参数），或检索与指定的正则表达式匹配的子字符串（传入参数），返回字符串起始位置。
  • str.replace()：在字符串中用一些字符串替换另一些字符串，或者替换一个与正则表达式匹配的子串。

正则表达式对象提供了exec()方法，该方法要求传入一个字符串，在传入字符串中查找符合该正则表达式对象的子串，返回一个匹配子串的数组。如果没有符合匹配的子串，返回null。

模板字符串（ES6）

模板字符串是js字符串的强化，使用反引号(`)包裹字符串，允许在字符串内换行，以及使用${vname}的形式在字符串中加入变量。

解构赋值（ES6）

对变量进行批量赋值，在js中的原型是对数组的赋值。

1
let [a,b,c]=[1,2,3]

解构赋值对于对象也同样适用。

类（ES6）

函数

声明函数使用关键字function，写法和其他编程语言类似：

1
2
3
function myFunction(parameter1,parameter2,...){
    //the functions's logic.
}

特别的，对象中的函数被称为方法(method)，有特殊的声明语法：

1
2
3
functionName:function(parameter1,parameter2,...){
    //the functions's logic.
}

结构语句

条件分支if语句、循环语句使用方法和java基本没有区别。

事件

事件是用户在网页上的操作，通常作为属性存在。

常用事件：HTML DOM 事件对象 | 菜鸟教程

如果需要在外部js文件为特定元素绑定事件监听和回调函数，可以使用decument.getElementById("id")和其他类似的方法获取对应元素，并通过obj.addEventListener()方法绑定回调函数。

例如，现在html文件中有以下内容：

1
<button id="myButton">Test Text</button>

要在外部js文件中绑定回调函数，使该按键被点击时弹出窗口，应该有如下代码：

1
2
3
4
5
6
7
8
9
// 等待页面加载完成
window.onload = function() {
    //获取元素
  let button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    //alter()是浏览器提供的弹出警告框的方法
    alert("This is test text.");
  });
};

如果用户在页面加载完成前就尝试以某种方法访问元素，则浏览器会报错，原因是无法找到指定元素。因此必须在页面完成加载后再绑定回调函数。

除此之外，有一种更简单的方式进行绑定：

1
2
3
4
5
6
7
window.onload = function() {
  let button = document.getElementById("myButton");
  // 通过赋值的方式为元素绑定点击事件
  button.onclick = function() {
    window.alert("This is test text.");
  };
};

这样做的缺点是，如果先前onclick已经绑定了一个回调函数，现在就会覆盖原有的。这是使用obj.addEventListener()进行绑定的一个优势：它是追加（Add）的绑定。

事件传播

事件传播按照时间顺序分为捕获和冒泡两个阶段。

  • 捕获（capture）：通过捕获，事件首先被最外面的元素捕获并传到内部元素。
  • 冒泡：通过冒泡，事件首先从最内层元素触发和处理，然后一层一层向外传递。

由此我们可以得出，如果事件在捕获阶段进行处理，它的执行顺序是从父级到子级；如果事件在冒泡阶段处理，则它的执行顺序是从子级到父级。

使用addEventListenner()方法为元素绑定事件时，可以通过useCapture参数控制事件的执行时机。默认值为false，使用冒泡传播；设置为true时，使用捕获传播。

DOM

获取元素

dom是文档对象模型，js通过dom进行对网页标签的操作。

  • decument.getElementById()：通过id获取dom元素，参数为id的字符串形式。
  • document.getElementsByClassName()：通过类名获取dom元素，参数为类名的字符串形式，返回一个伪数组形式。
  • document.getElementsByTagName()：通过标签名获取dom元素，参数为标签名的字符串形式，返回一个伪数组形式。
  • document.querySelector()：通过css选择器获取dom元素，支持css选择器语法，参数为选择器的字符串形式。
    返回值为查找到的第一个符合要求的元素；如果没有符合要求的元素，将返回空值。
  • document.querySelectorAll()：通过css选择器获取dom元素，支持css选择器语法，参数为选择器的字符串形式。
    返回值为查找到的所有符合要求的元素的列表（NodeList，使用方法和伪数组类似）；如果没有符合要求的元素，将返回空值。

通过以上方法获取到的元素（如果是数组，就是数组中的其中单个元素）可以进行以下操作：

  • item.previousElementSibling：返回该元素同级的前一个元素
  • item.nextElementSibling：返回该元素同级的后 一个元素
  • item.parentNode：返回父元素。
  • item.chidren :返回所有子元素的列表。

样式处理

  • item.style.cssPropertyName：返回指定样式的值的字符串形式，通过这种方法可以修改Dom元素的指定样式。该方法只会返回内联样式设置的样式。
  • window.getComputedStyle(item).cssPropertyName：返回指定样式的字符串形式，该方法和上一方法的区别在于，返回的样式是经过外部js、css等操作后的值。该方法的返回值是只读的，不能通过修改值的途径修改布局
  • item.className：返回元素的类名的字符串形式。
    一种快速修改样式的方式是，将改变后的样式存在一个类中，使用该属性修改类名为目标样式的类名。

文本处理

  • item.textCentent="text"：更改该元素中的文本内容。
    如果元素具有后代元素，且后代元素中有文字，则全部会被覆盖。
  • item.innerHTML="text"：更改该元素中的文本内容，该方法支持html和css语法，但存在性能损耗。

事件处理

如果需要在外部js文件为特定元素绑定事件监听和回调函数，可以使用decument.getElementById("id")和其他类似的方法获取对应元素，并通过obj.addEventListener()方法绑定回调函数。

例如，现在html文件中有以下内容：

1
<button id="myButton">Test Text</button>

要在外部js文件中绑定回调函数，使该按键被点击时弹出窗口，应该有如下代码：

1
2
3
4
5
6
7
8
9
// 等待页面加载完成
window.onload = function() {
    //获取元素
  let button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    //alter()是浏览器提供的弹出警告框的方法
    alert("This is test text.");
  });
};

如果用户在页面加载完成前就尝试以某种方法访问元素，则浏览器会报错，原因是无法找到指定元素。因此必须在页面完成加载后再绑定回调函数。

除此之外，有一种更简单的方式进行绑定：

1
2
3
4
5
6
7
window.onload = function() {
  let button = document.getElementById("myButton");
  // 通过赋值的方式为元素绑定点击事件
  button.onclick = function() {
    window.alert("This is test text.");
  };
};

这样做的缺点是，如果先前onclick已经绑定了一个回调函数，现在就会覆盖原有的。这是使用obj.addEventListener()进行绑定的一个优势：它是追加（Add）的绑定。

定时器

  • setTimeout(func,time)：延时计时器，第一个参数为延时执行的内容，第二个参数为延迟时间，单位为毫秒，数据类型为number。
  • setInterval(func,time)：间隔延时计时器，每间隔指定秒重复执行func内容。
    该方法会返回一个对象，如需停止计时器，使用clearInterval(obj)方法。

一种常见的做法是，同时开启延时计时器和间隔计时器，使用延时计时器控制间隔计时器的中断。

Canvas

默认情况下，Canvas的大小为300150px，并使用一个上下文对象*进行绘图。

设置通用格式：

1
2
3
4
//获取dom元素
const canvas=document.querySelector(".myCanvas");
//获取上下文
const ctx=canvas.getContext("2d")

替换内容

对于较低版本的浏览器，Canvas无法被正常渲染，因此可以在Canvas双标签之间写入替换内容。对于能够识别canvas的浏览器，双标签内的内容会被忽略。

画布大小

对于Canvas的绘图区域大小的设置，必须在js内通过canvas.width和canvas.height进行设置。

不应该使用使用CSS属性进行设置，否则会发生未经处理的错误。

空间坐标

Canvas以画布左上为顶点，向下为y轴正方向，向右为x轴正方向，单位为像素。