首页 > 代码库 > 基础总结
基础总结
表格
1.表格
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
2.跨行或跨列的表格单元格
<h4>单元格跨两格:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
3.单元格边距
<h4>有单元格边距:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
4.单元格间距
<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
列表
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<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>
表单
文本
<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="http://www.mamicode.com/male">Male<br>
<input type="radio" name="sex" value="http://www.mamicode.com/female">Female
</form>
复选框
<form>
<input type="checkbox" name="vehicle" value="http://www.mamicode.com/Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="http://www.mamicode.com/Car">I have a car
</form>
提交按钮
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="http://www.mamicode.com/Submit">
</form>
下拉
<form action="">
<select name="cars">
<option value="http://www.mamicode.com/volvo">Volvo</option>
<option value="http://www.mamicode.com/saab">Saab</option>
<option value="http://www.mamicode.com/fiat">Fiat</option>
<option value="http://www.mamicode.com/audi">Audi</option>
</select>
</form>
预选下拉
<form action="">
<select name="cars">
<option value="http://www.mamicode.com/volvo">Volvo</option>
<option value="http://www.mamicode.com/saab">Saab</option>
<option value="http://www.mamicode.com/fiat" selected>Fiat</option>
<option value="http://www.mamicode.com/audi">Audi</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>
<embed> 定义嵌入的内容，比如插件。
<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 width:100px box-flex:1 2.默认横向布局，box-orient（控制元素方向） 3.box-align（垂直方向向上、向下、居中） 4.box-pack(水平方向左中右) 5.box-direction(子元素排列顺序，正序倒序)
css常用工具
1.css兼容性前缀 2.css文件压缩(gulp\grunt)
常用css布局方式
1.固定布局（固定宽度：稳定、简单、一般最大宽度960） 2.(流式布局：适合终端窗口变化不太大的情况，比如pc和pad，还需注意图片最大宽度，图片宽度固定的解决方法就是max-width:100% height:auto) 3.（响应式布局）
css3:
2D
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
translate() 移动
rotate() 旋转
scale() 翻转
skew() 缩放
matrix() 所有效果一起实现
3D
rotateX() x轴旋转
rotateY() y轴旋转
渐变（过渡）
transition
规定您希望把效果添加到哪个 CSS 属性上（比如宽度变成300px 或者left：100）
规定效果的时长
动画
@keyframes 无需触发
动画：
jQuery animate() 一次性
CSS3 @keyframes 循环的动画 可执行一次 回到最初
CSS3 transition 一次性
基础总结