HTML 综合知识HTML 指的是超文本标记语言（Hyper Text Markup Language），是用来描述网页

HTML 指的是超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种语言，不是编程语言。

HTML

开发快捷键

键	作用
ctrl+s	保存
ctrl+a	全选
ctrl+x、ctrl+c、ctrl+v	剪切、复制、粘贴
ctrl+z、ctrl+y	撤销、前进
shift+end	从头选中一行
shift+home	从尾部选中一行
shift+alt+↓	快速复制一行
alt+↑ 或 ↓	快速移动一行
tab	向后缩进
tab+shift	向前缩进
alt+鼠标左键	多光标
ctrl+d	选择相同元素的下一个
tab + 单词 -> <单词>	创建标签的快捷键

元素

HTML 元素指的是从开始标签到结束标签的所有代码
HTML 元素以开始标签起始，以结束标签终止
某些 HTML 元素具有空内容
空元素在开始标签中进行关闭，<br/>换行，<hr/>水平线
大多数 HTML 元素可拥有属性
大多数 HTML 元素可以嵌套
建议 HTML 标签使用小写

属性

属性总是以名称/值对的形成出现，name="value"
属性总是在 HTML 元素的开始标签中规定
大多数 HTML 元素属性：class、id、style、title(id 在页面中只能使用一次，class 在页面中可以重复使用)

注释

ctrl+/ 单行注释
alt+shift+/ 或 ctrl+shift+/,多行注释
条件注释，定义只有 Internet Explorer 执行的 HTML 标签

<!-- This is a comment -->
<!--[if IE 8]> .... some HTML here .... <![endif]-->

标题

通过<h1>~<h6>标签进行定义
h1 只能出现一次，h5,h6 一般不用
align 定义对齐方式:left 居左\center 居中\right 居右

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

段落

通过<p>标签进行定义
通过<br/>进行折行，或插入一个新的空行

<p>
  This is a<br />
  paragraph.
</p>

链接

通过<a>标签进行定义
href路径，title鼠标悬停上去之后的提示信息，target规定在何处打开文档
target 属性：_blank新窗口中打开；_self在一同窗口打开链接；_parent在父窗口打开链接；three在对应窗口展示；_top在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架

<!-- 文字超链接 -->
<a href="http://www.w3school.com.cn">This is a link</a>
<!-- 图像超链接 -->
<a href="http://www.w3school.com.cn"><img src="/i/eg_buttonnext.gif" /></a>
<!-- 死链接 -->
<a href="javascript:void(0);">点此无反应javascript:void(0)</a>
<a href="javascript:;">点此无反应javascript:</a>
<a href="" onclick="return false;">return false;</a>
<a href="#" onclick="return false;">return false;</a>

锚点

# + id 属性

<a href="#html">html</a>
<h2 id="html">html超文本标记语言</h2>

# + name 属性

<a href="#html">html</a>
<a name="html"></a>
<h2>html超文本标记语言</h2>

图片

通过<img>标签进行定义
src 图片的路径地址,alt 图片加载不出来显示的提示文字,title 鼠标移到图片上显示的描述文字,width 图片的宽度,height 图片的高度,border 图片边框
图像对齐方式，align:top 居上\middle 居中\bottom 居下\left 居左\center 居中\right 居右
【注】插入图片自带的有 3-5 像素左右的间距。解决方法：1.img{vertical-align:top}，2：img{ display:block; }

<img src="w3school.jpg" width="104" height="142" />

字符实体

名称	符号
空格	` `
版权 ©	`©`
注册商标 ®	`®`
大于号>	`>`
小于号<	`<`
和号&	`&`
人民币￥	`¥`
摄氏度	`°`
空格	` `

格式化

文本格式化

标签	含义
`<b>`	粗体
`<big>`	大号字
`<em>`	着重文字
`<i>`	斜体
`<small>`	小号字
`<strong>`	加重语气
`<sub>`	下标
`<sup>`	上标
`<ins>`	插入字
`<del>`	删除字

计算机“输出”

标签	含义
`<code>`	计算机代码
`<kbd>`	键盘码
`<samp>`	计算机代码样本
`<tt>`	打字机代码
`<var>`	定义变量 `E = m c²`
`<pre>`	定义预格式文本

引入和术语定义

标签	含义
`<abbr>`	定义缩写etc.
`<acronym>`	定义首字母缩写
`<address>`	定义地址
`<bdo dir="rtl">`	定义文字方向
`<blockquote>`	长/块引用
`<q>`	短引用
`<cite>`	定义引用、引证
`<dfn>`	定义一个定义项目WHO

css

外部样式表

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部样式表

<head>
  <style type="text/css">
    body {
      background-color: red;
    }
    p {
      margin-left: 20px;
    }
  </style>
  <head></head>
</head>

内联样式

<p style="color: red; margin-left: 20px">This is a paragraph</p>

列表

无序列表

<!-- type:disc\circle\square -->
<ul type="circle">
  <li>Coffee</li>
  <li>Milk</li>
</ul>

有序列表

<!-- type:A\a\1\i -->
<ol type="A">
  <li>Coffee</li>
  <li>Milk</li>
</ol>

定义列表

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

表格

宽度 width，高度 heigh，边框 border，边框色 bordercolor，对齐方式 align（水平 left、center、right；垂直 top、middle、bottom），合并单元格（rowspan 行、colspan 列），cellspacing 单元格与单元格之间的间距，cellpadding 单元格与内容之间的距离，bgcolor 背景色，background 背景图像

<table
  border="1"
  cellpadding="10"
  cellspacing="10"
  bgcolor="red"
  background="/i/eg_bg_07.gif"
></table>

th 表头、tr 表格行、td 表格单元、thead 表格的页眉、tbody 表格的主体、tfoot 表格的页脚、col 表格列属性、colgroup 表格列组。一个 table 中，tBody 可以出现多次，tHead、tFood 只能出现一次

<table border="1">
  <caption>
    表格标题
  </caption>
  <tr>
    <th>Heading</th>
    <th>Another Heading</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <!-- 这是一个空单元格 -->
    <td></td>
    <td>row 2, cell 2</td>
  </tr>
</table>

表单

<!-- 文本 -->
<input type="text" />
<!-- 多行文本 -->
<textarea cols="30" rows="10"></textarea>
<!-- 单选 -->
<input type="radio" name="sex" value="male" checked />Male
<!-- label辅助，让可选的范围变大 -->
<input type="radio" name="gender" id="man" /><label for="man">男</label>
<input type="radio" name="gender" id="woman" /><label for="woman">女</label>
<!-- 多选 -->
<input type="checkbox" name="city" value="北京" checked />北京
<input type="checkbox" name="city" value="天津" />天津
<input type="checkbox" name="city" value="上海" />上海
<!-- 下拉选：不可选、size指的是让下拉菜单显示的项数、多选 -->
<select>
  <option selected disabled>请选择</option>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
</select>
<select size="3">
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
</select>
<select multiple>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
</select>
<!-- 上传文件，multiple表示一次可以上传多个文件 -->
<input type="file" multiple />
<!-- number类型 -->
<input type="number" name="quantity" min="1" max="5" />
<!-- date类型 -->
<input type="date" name="bday" />
<!-- 提交 -->
<form action="" method="GET"></form>
<input type="submit" value="Submit" />
<!-- 重置 -->
<input type="submit" value="Submit" />
<!-- fieldset组合表单数据，autocomplete="on"启用自动填写表单数据，novalidate规定提交时不对表单数据进行校验 -->
<form action="" autocomplete="on" novalidate>
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br />
    <input type="text" name="firstname" value="Eileen" />
    <br />
    Last name:<br />
    <input type="text" name="lastname" value="Murphy" />
    <br /><br />
    <input type="submit" value="Submit" />
  </fieldset>
</form>
<!-- h5新增，规定预定义选项列表 -->
<form action="/demo/demo_form.asp">
  <input list="browsers" name="browser" />
  <datalist id="browsers">
    <option value="Internet Explorer"></option>
    <option value="Firefox"></option>
    <option value="Chrome"></option>
    <option value="Opera"></option>
    <option value="Safari"></option>
  </datalist>
  <input type="submit" />
</form>

块、行内元素

块元素：p h1 h2 h3....h6 br hr ol li ul li dl dt dd div form table
行内元素：b td strong i em sup sub u del span img a input
行内元素设置 width、height 无效，margin 上下无效、padding 上下无效，可设置 line-height

内联框架

<!-- url映射地址；frameborder是否显示边框；width、height设置宽高 -->
<iframe src="demo_iframe.htm" url="" frameborder="0" width="200" height="200" />

使用 iframe 作为链接的目标

<iframe src="index_demo.html" name="iframe_here"></iframe>
<p>
  <a href="http://cn.bing.com" target="iframe_here">W3School.com.cn</a>
</p>

HTML5

语义化标签

标签	含义
`header`	定义文档或节的页眉
`footer`	定义文档或节的页脚
`nav`	定义导航链接的容器
`section`	定义文档中的节
`article`	定义独立的自包含文章
`aside`	定义内容之外的内容（比如侧栏）
`details`	定义额外的细节
`summary`	定义 details 元素的标题
`figcaption`	定义 figure 元素的标题
`figure`	规定自包含内容，比如图示、图表、照片、代码清单等
`dialog`	定义对话框，比如提示框
`main`	规定文档的主内容
`mark`	定义重要的或强调的文本

表单控件

控件

<input type="color" name="" id="" />
<input type="date" name="" id="" />
<input type="datetime" name="" id="" />
<input type="datetime-local" name="" id="" />
<input type="email" name="" id="" />
<input type="month" name="" id="" />
<input type="number" name="" id="" />
<input type="range" name="" id="" />
<input type="search" name="" id="" />
<input type="tel" name="" id="" />
<input type="time" name="" id="" />
<input type="url" name="" id="" />
<input type="week" name="" id="" />

属性

标签	含义
`placehoder`	简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失
`required`	要求填写的输入域不能为空
`min 和 max`	设置元素最小值与最大值
`step`	为输入域规定合法的数字间隔
`height 和 width`	用于 image 类型的 `<input>` 标签的图像高度和宽度
`autofocus`	规定在页面加载时，域自动地获得焦点
`multiple`	规定`<input>` 元素中可选择多个值

媒体元素

可链接多个元素，链接不同的音频文件，将使用第一个支持的音频文件
controls 有播放、暂停、控制音量控件，也可以使用浏览器自带的 play()、pause()方法

audio

元素支持三种音频格式文件: MP3, Wav, 和 Ogg

<!-- 浏览器不支持显示提示文本 -->
<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.wav" type="audio/wav" />
  您的浏览器不支持 audio 元素。
</audio>

video

元素支持三种视频格式文件：MP4, WebM, 和 Ogg

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  您的浏览器不支持 video 元素
</video>

绘图

canvas

绘制矩形

fillRect(x, y, width, height) 绘制一个填充的矩形
strokeRect(x, y, width, height) 绘制一个矩形的边框
clearRect(x, y, widh, height) 清除指定的矩形区域，然后这块区域会变的完全透明

绘制路径

beginPath() 新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
moveTo(x, y) 把画笔移动到指定的坐标(x, y)，相当于设置路径的起始点坐标
closePath() 闭合路径之后，图形绘制命令又重新指向到上下文中
stroke() 通过线条来绘制图形轮廓
fill() 通过填充路径的内容区域生成实心的图形

贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y) 二次贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 三次贝塞尔曲线

绘制圆弧

arc(x, y, r, startAngle, endAngle, anticlockwise) 以(x, y) 为圆心，以 r 为半径，从 startAngle 弧度开始到 endAngle 弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)
arcTo(x1, y1, x2, y2, radius) 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点

添加颜色和样式

fillStyle=color 设置图形的填充颜色
strokeStyle=color 设置图形轮廓的颜色
globalAlpha=transparencyValue canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0
lineWidth 线宽,只能是正值,默认是 1.0
lineCap=type 线条末端样式（butt 方形、round 圆形、square 方形）
lineJoin=type 同一个 path 内，线条与线条间的结合样式（round 扇形、bevel 三角、miter 菱形）

虚线

setLineDash 方法接受一个数组，来指定线段与间隙的交替
lineDashOffset 属性设置起始偏移量

绘制文本

fillText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的
strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的

文本样式

font = value 绘制文本的样式。默认的字体是 10px sans-serif
textAlign = value 文本对齐选项。可选的值包括：start, end, left, right or center。默认值是 start。
textBaseline = value 基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit

图像

drawImage(image, x, y, width, height) 图片为 img，位置(x,y),设置图片大小
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 切片，前四个参数定义切片源的位置和大小，后 4 个定义切片的目标位置和大小

状态的保存和恢复

save() canvas 状态存储在栈中，每当 save()方法被调用后，当前的状态就被推送到栈中保存(类似数组的 push())
restore() 每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复(类似数组的 pop())

变形

translate(x,y) x 左右偏移，y 上下偏移
rotate(angle) 旋转坐标轴
scale(x, y) x,y 分别为横轴、纵轴缩放因子，>1 放大，<1 缩小
transform(a, b, c, d, e, f) 变形矩阵

合成（globalCompositeOperation = type）

source-over 默认，新图像会覆盖在原图像上面
source-in 仅显示新图像与原图像重叠部分的新图像，其余都透明
source-out 仅显示新图像没有与原来图像重叠部分，其余都透明
source-atop 新图像仅展示与原来图像重叠部分，原来图像照常展示
destination-over 新图像会展示在原来图像下面
destination-in 仅展示新图片与原图像重叠部分的原来图像，其余都透明
destination-out 仅展示原来图像没有与新图像重叠部分，其余都透明
destination-atop 原来图像仅展示与新图像的重叠部分，新图像在原来图像的下面，其余都透明
lighter 新老图像都展示，但重叠区域颜色做加处理
darken 新老图像都展示，保留重叠部分最黑的像素
lighten 新老图像都展示，保留重叠部分最亮的元素
xor 新老图像都展示，重叠部分会变透明
copy 只有新图像被保留，其余都透明

裁剪

clip()

动画（控制常用方法）

setInterval()
setTimeout()
requestAnimationFrame()

<canvas id="tutorial" width="300" height="300"></canvas>
<script>
  function draw() {
    // 渲染上下文
    var canvas = document.getElementById("tutorial");
    // 支持性判断
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    // 开始绘制矩形
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect(10, 10, 55, 50);
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(30, 30, 55, 50);

    // 虚线
    ctx.setLineDash([20, 5]); // [实线长度, 间隙长度]
    ctx.lineDashOffset = -0;
    ctx.strokeRect(50, 50, 210, 210);

    // 文本
    ctx.font = "100px sans-serif";
    ctx.fillText("天若有情", 10, 100);
    ctx.strokeText("天若有情", 10, 200);

    // 图片
    var img = new Image(); // 创建img元素
    img.onload = function () {
      ctx.drawImage(img, 0, 0);
    };
    img.src = "icon.png"; // 设置图片源地址

    // 变形
    ctx.transform(1, 1, 0, 1, 0, 0);
    ctx.fillRect(0, 0, 100, 100);

    // 合成
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 200, 200);
    ctx.globalCompositeOperation = "source-over"; //全局合成操作
    ctx.fillStyle = "red";
    ctx.fillRect(100, 100, 200, 200);

    // 裁剪
    ctx.beginPath();
    ctx.arc(20, 20, 100, 0, Math.PI * 2);
    ctx.clip();
    ctx.fillStyle = "pink";
    ctx.fillRect(20, 20, 100, 100);
  }
  draw();
</script>

svg

svg 内容：直线 line，矩形 rect，圆形 circle，椭圆 ellipse，折线 polyline，多边形 polygon，路径 path，文本 text
svg 属性：width、height、fill、stroke、stroke-width、style、opacity、fill-opacity、stroke-opacity
直线 line

<svg width="300" height="300">
  <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

矩形 rect

<svg width="300" height="300">
  <rect
    width="100"
    height="100"
    x="50"
    y="50"
    rx="20"
    ry="50"
    stroke-width="3"
    stroke="red"
    fill="pink"
  ></rect>
</svg>

圆形 circle

<svg width="300" height="300">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

椭圆 ellipse

<svg width="300" height="300">
  <ellipse rx="20" ry="100" fill="purple" cx="150" cy="150"></ellipse>
</svg>

折线 polyline

<svg width="300" height="300">
  <polyline
    points="0,0,50,0,50,50,100,50,100,100,150,100,150,150"
    stroke="green"
    fill="none"
  ></polyline>
</svg>

多边形 polygon

<svg width="300" height="300">
  <polygon
    points="0,0,100,50,200,50,300,20"
    stroke="purple"
    stroke-width="1"
    fill="none"
  ></polygon>
</svg>

路径 path
M 开始，L 直线达到，H 水平线达到，V 垂直线达到，C 弯曲线达到，S 平滑曲线达到，Z 关闭路径

<svg width="300" height="300">
  <path
    d="M 10 10  L 10 30  L 30 30 L 30 10 Z"
    fill="red"
    stroke="black"
  ></path>
</svg>

文本 text

<svg width="500px" height="200px">
  <text x="50" y="50" font-family="Verdana" font-size="55">
    Hello, out there
  </text>
</svg>

滤镜 feGaussianBlur（模糊效果）

<svg>
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect
    width="90"
    height="90"
    stroke="green"
    stroke-width="3"
    fill="yellow"
    filter="url(#f1)"
  />
</svg>

滤镜 feOffset（阴影）

<svg width="200" height="200">
  <defs>
    <filter id="offset" width="180" height="180">
      <feOffset in="SourceGraphic" dx="60" dy="60" />
    </filter>
  </defs>

  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    stroke="black"
    fill="green"
    filter="url(#offset)"
  />
</svg>

滤镜 gradient（渐变）

<!-- 线性渐变 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color: rgb(255, 255, 0); stop-opacity: 1" />
      <stop offset="100%" style="stop-color: rgb(255, 0, 0); stop-opacity: 1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

<!-- 放射性渐变 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop
        offset="0%"
        style="stop-color: rgb(255, 255, 255); stop-opacity: 0"
      />
      <stop offset="100%" style="stop-color: rgb(0, 0, 255); stop-opacity: 1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

web 存储

localStorage

存储的是没有截止日期的数据，当浏览器被关闭时数据不会被删除
相同的协议、主机名、端口

// 新建
localStorage.setItem("lastname", "Gates");
// 获取
localStorage.getItem("lastname");
// 移除单个
localStorage.removeItem("lastname");
// 删除所有
localStorage.clear();
// 得到某个索引的key
localStorage.key(index);

sessionStorage

只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除
相同的协议、主机名、端口、同一窗口下

新技术

webworker
websocket

插件

<object width="100%" height="100px" data="demo.html"></object>
<object data="icon.png"></object>
<object height="100" width="100" src="song.mp3"></object>

<embed width="100%" height="100px" src="demo.html" />
<embed src="icon.png" />
<embed height="100" width="100" src="song.mp3" />

名称	符号
空格	` `
版权 ©	`©`
注册商标 ®	`®`
大于号>	`>`
小于号<	`<`
和号&	`&`
人民币￥	`¥`
摄氏度	`°`
空格	` `

名称	符号
空格	` `
版权 ©	`©`
注册商标 ®	`®`
大于号>	`>`
小于号<	`<`
和号&	`&`
人民币￥	`¥`
摄氏度	`°`
空格	` `

名称	符号
空格	` `
版权 ©	`©`
注册商标 ®	`®`
大于号>	`>`
小于号<	`<`
和号&	`&`
人民币￥	`¥`
摄氏度	`°`
空格	` `