前端开发文档-HTML篇
HTML元素
元素分类
块级元素：div、h1-h6、hr、menu、ol、ul、li、dl、dt、dd、table、p、form
含义：块级元素是指本身属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建
独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
可以直接控制宽度、高度以及盒子模型的相关css属性(width/height/border/margin/padding)
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下，块级元素的高度是它本身内容的高度
可以嵌套其他元素
ul li、ol li 、dl dt dd 成组出现，p标签不能嵌套它自己本身
| 标签 | 作用 |
| div | 常用块级容器，也是css layout的主要标签 |
| h1-h6 | 标题 |
| hr | 水平分隔线 |
| menu | 菜单列表 |
| ol、ul、li | 有序列表、无序列表、列表项 |
| dl、dt、dd | 定义列表、定义标题、定义描述 |
| table | 表格 |
| p | 段落 |
| form | 交互表单 |
内联元素：span、a、strong、i、em，s、u，textarea、input、select，label、img、sup，sub
行内(内联)元素是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的搭建.
和其他内联元素从左到右在一行显示,从左到右，达到父级元素的最大宽度时，会自动折行
不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
内联元素的宽高是由本身内容的大小决定（文字、图片等）
内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
在编辑代码时，元素之间有回车或者换行的时候，元素和元素之间有间隙
行内块级元素：textarea、input、img
在一行排布，从左到右，达到父级元素的最大宽度时，会自动折行
设置盒子模的CSS属性
默认不设置宽度和高度的时候，宽高都是由本身内容决定的
在编辑代码时，元素之间有回车或者换行的时候，元素和元素之间有间隙
语义化标签
语义化标签
语义化的标签，旨在让标签有自己的含义。p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签则没有独特的含义。
尽量减少使用无意义标签，如span和div
尽量不使用标签本身的CSS属性，如b、font、s
需要强调的部分，使用strong、em
表格搭建时，使用<thead>表格头部</thead>、<tbody>表格主体</tbody>、<tfoot>表格尾部</tfoot>
列表搭建时，使用<ul>无序列表</ul>、<ol>有序列表</ol>、<dl>定义列表</dl>
新增标签的兼容问题
HTML5语义化标签在IE6-8下，默认当成行内元素展示。
通过引入js解决IE9以下新增标签的兼容问题
Forms
新增input元素的种类：
search：搜索输入框email：邮件输入框number：数字输入框rang：特定范围内的数值选择器color：颜色选择器 只在Opera和Blackberry浏览器datetime：显示完整日期和时间 UTC标准时间datetime-local：显示完整日期和时间time：显示时间month：显示月份week：显示周placeholder：输入框占位符，用作输入提示
autocomplete：是否保存用户输入值，默认为on，关闭为off
autofocus：自动聚焦<input autofocus>
autofocus 属性是一个布尔属性。autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。
注意：Internet Explorer 9 及之前的版本不支持 <input> 标签的 autofocus 属性。
required：此项必填，不能为空
pattern：正则验证 <input type="number" pattern="\d">
注释：pattern 属性适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 。
form：加上form属性，表单元素可以放在页面的任意位置
然后只需要将这个从属元素的form属性指定为表单的ID，切记，在使用时，必须引用所属表单的ID
formnovalidate/novalidate：
表示不需要验证表单，直接提交（novalidate用户form标签）
formnovalidate用于submit类型的提交按钮
<form><input name="email" type="email" /><input name="url" type="url" /><input name="num" type="number" /><input name="range" type="range" min="1" max="10"/><input type="submit" value="提交"/></form>
表单新特性：
<form action="#" method="post" id="form1"><input type="tel" autofocus/><input type="button" value="提交"></form><input type="text" placeholder="请输入你的名字" form="form1"><!-- 这个主要是说明了HTML5的新属性，以前的form表单的控件必须要在form的双标签之内，现在的话，不用了，我们可以脱离form的双标签在别的地方写控件了，只要在控件的末端加上主要的form表单的ID就可以了，如上面的form = form1。-->
SVG指南
SVG指南
简介
SVG是在XML中描述二维图形的语言。这些图形由路径，图片和文本组成，并能在不失真的情况下任意变换尺寸。
把SVG插入到项目：内联、img、background-iamge、<object>或者Data URI。
基本图形
SVG包含基本形状元素集：矩形，圆形，椭圆形，直线，折线和多边形。
SVG 有一些预定义的形状元素，可被开发者使用和操作：
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
矩形
<svg><rect width="300" height="200" fill="#ccc"></rect></svg>//其他属性x和y坐标，rx和ry属性创建圆角。
圆形
<svg><circle cx="75" cy="75" r="75" fill="#bbc42a"></circle></svg>
椭圆
<svg><ellipse cx="100" cy="100" rx="100" ry="50" fill="#bbc42a"></ellipse></svg>
直线
<svg><line x1="5" y1="5" x2="100" y2="100" stroke="#765373" stroke-width="8"></line></svg>
折线
points:属性里定义了各个点的坐标，x和y坐标之间用逗号分别，多个坐标之间用空格分割
fill：填充颜色(画折线一般把属性设置为none)
stroke：边框颜色
stroke-width：边框宽带
ill-opacity：透明度
stroke-opacity：边框的透明度
<svg version="1.1"><polyline points="120,120 120,80 160,80 160,40 200,40"style="fill:white;stroke:#68f;stroke-width:2"/></svg>
多边形
<svg height="210" width="500"><polygon points="200,10 250,190 160,210"style="fill:lime;stroke:purple;stroke-width:1"/></svg>//points 属性定义多边形每个角的 x 和 y 坐标
路径
<svg version="1.1"><path d="M150 0 L75 200 L225 200 Z" /></svg>//开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径
未完待续.....
回复“领取前端电子书”，可领取~~~