基础总结

表格

1.表格

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

2.跨行或跨列的表格单元格

<h4>单元格跨两格:</h4>

<tr>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>单元格跨两列:</h4>

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

</tr>

<tr>

</tr>

</table>

3.单元格边距

<h4>有单元格边距:</h4>

<table border="1"

cellpadding="10">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

4.单元格间距

<h4>单元格间距="10":</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

列表

无序列表

<ul>

<li>Coffee</li>

</ul>

有序列表

<ol>

<li>Coffee</li>

</ol>

自定义列表

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

表单

文本

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框

提交按钮

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

下拉

<option value="volvo">Volvo</option>

</select>

</form>

预选下拉

<option value="volvo">Volvo</option>

</select>

</form>

html5:

canvas 与SVG的使用（画图）

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas和SVG是HTML5中主要的2D图形技术，前者提供画布标签和绘制API，后者是一整套独立的矢量图形语言

SVG适用场景

SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景

新多媒体元素

<audio> 定义音频内容

<video> 定义视频（video 或者 movie）

<source> 定义多媒体资源 <video> 和 <audio>

<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

新表单元素

<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。(类似历史记录，点击表单出来选项)

<keygen> 规定用于表单的密钥对生成器字段。（加密传数据库）

<output> 定义不同类型的输出，比如脚本的输出。（表单选值方式）

新的语义和结构元素

<article> 定义页面独立的内容区域。

<aside> 定义页面的侧边栏内容。

<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。

<command> 定义命令按钮，比如单选按钮、复选框或按钮

<details> 用于描述文档或文档某个部分的细节

<dialog> 定义对话框，比如提示框

<summary> 标签包含 details 元素的标题

<figure> 规定独立的流内容（图像、图表、照片、代码等等）。（可以定义图片的属性）

<figcaption> 定义 <figure> 元素的标题（和figure一起用）

<footer> 定义 section 或 document 的页脚。

<header> 定义了文档的头部区域

<mark> 定义带有记号的文本。（带个背景色）

<meter> 定义度量衡。仅用于已知最大和最小值的度量。（进度条）

<nav> 定义运行中的进度（进程）。

<progress> 定义任何类型的任务的进度。（进度条）

<ruby> 定义 ruby 注释（中文注音或字符）。（加拼音）

<rt> 定义字符（中文注音或字符）的解释或发音。（和ruby一起用）

<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。（和ruby一起用）

<section> 定义文档中的节（section、区段）。

<time> 定义日期或时间。

<wbr> 规定在文本中的何处适合添加换行符。

css

css盒子模型

内容，边框，外边距，内边距，就像盒子一样设置float（浮动），会脱离文档流，默认情况父级高度会跟随子集高度调整，但是子集脱离文档就会导致父级高度是0

选择器

1.组选择器：html input[type='button'] 2.li:nth-child(2) 3.p:nth-of-type(3) 第2种和第三种区别在于，第二种数第三个，如果第三个是div就会失效，第三种，数第三个是div就跳过

字体

1.个性化字体：@font-face 2.反射：.box-reflect 3.字体描边 .text-stroke 4.分栏 column-count 分几栏 column-gap 每栏宽度 column-rule分栏中间样式

图片

1.想沾满容器高度：background-size:auto 100% 或者background-size:cover 2.指定背景图的起始位置 background-origin background-clip

变化（transform）渐变（transition）和动画(animation)

1.transform :roate旋转 skew（扭曲变换，不支持3D） scale（比例缩放） translate（位移）

2.@keyframes制作动画

flex布局

1.box-flex:1 100px box-flex:1 2.默认横向布局，box-orient（控制元素方向） 3.box-align（垂直方向向上、向下、居中） 4.box-pack(水平方向左中右) 5.box-direction(子元素排列顺序，正序倒序)

css常用工具

1.css兼容性前缀 2.css文件压缩(gulpgrunt)

常用css布局方式

1.固定布局（固定宽度：稳定、简单、一般最大宽度960） 2.(流式布局：适合终端窗口变化不太大的情况，比如pc和pad，还需注意图片最大宽度，图片宽度固定的解决方法就是max-100% height:auto) 3.（响应式布局）

css3:

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

translate() 移动

rotate() 旋转

scale() 翻转

skew() 缩放

matrix() 所有效果一起实现

rotateX() x轴旋转

rotateY() y轴旋转

渐变（过渡）

transition

规定您希望把效果添加到哪个 CSS 属性上（比如宽度变成300px 或者left：100）

规定效果的时长

动画

@keyframes 无需触发

动画：

jQuery animate() 一次性

CSS3 @keyframes 循环的动画可执行一次回到最初

CSS3 transition 一次性,设置过渡属性

css3 transform 变形