HTML常用标签
其实在w3school上都有详细的总结和描述，写在这里是为了理清自己的思路，整理比较常用的标签。
原地址：http://www.w3school.com.cn/ta...
<!DOCTYPE>
<html>
<head>
<title></title>
</head>
<body>
//tag
</body>
</html>基础标签
| 标签 | 描述 |
|---|---|
| <!DOCTYPE> | 定义文档类型。 |
| <html> | 定义 HTML 文档。 |
| <title> | 定义文档的标题。 |
| <body> | 定义文档的主体。 |
| <h1> to <h6> | 定义 HTML 标题，块级元素。 |
| p | 定义段落，块级元素。 |
| br | 定义简单的折行。 |
| hr | 定义水平线。 |
| <!--...--> | 定义注释。 |
格式标签
| 标签 | 描述 |
|---|---|
| b | 文本加粗 |
| strong | 语义化，文本加粗 |
| i | 文本倾斜 |
| em | 语义化，文本倾斜 |
| s | 文本添加删除线（不赞成） |
| del | 文本添加删除线 |
| u | 文本添加下划线（不赞成） |
| <ins> | 文本添加下划线 |
| center | 定义居中文本（不赞成） |
| font | 定义文本的字体、颜色、尺寸（不建议） |
| sup | 上标文本 |
| sub | 下标文本 |
表单标签
说明：标签后面带*，说明是单标签
| 标签 | 描述 | 属性 |
|---|---|---|
| form | 为用户输入创建HTML表单，用于向服务器传输数据，块级元素 | action/method |
| input* | 文本输入框，行内块 | type(text/button/checkbox/password/radio/submit)/value |
| textarea* | 多行文本输入框 | rows/cols |
| button* | 按钮 | type="button"/value |
| select | 下拉选择列表，内嵌option标签 | / |
| option | select选择列表中的选项 | value |
| optgroup | 选择列表中选项的组合，不能选中，内嵌option标签 | label="华北" |
| label | 为input元素定义标记 | for(类似id) |
| fieldset | 在form中，定义围绕表单中元素的边框，可分类打包 | / |
| legend | 为fieldset元素定义标题 | / |
框架标签
| 标签 | 描述 | 属性 |
|---|---|---|
| frameset | 框架集，内嵌frame | rows/cols |
| frame | 框架 | src |
| noframes | 在frameset中添加非frame标签，用于在浏览器不支持frame的时候显示文本，包括在body标签内部 | / |
| iframe | 创建包含另外一个文档的内联框架（即行内框架 | src/scrolling/width/height |
图像标签
| 标签 | 描述 | 属性 |
|---|---|---|
| img* | 图像，行内块 | src/alt(替代文本) |
| canvas | 图形容器，必须用JS脚本来绘制图形 | width/height |
音频/视频
| 标签 | 描述 | 属性 |
|---|---|---|
| audio | 音频 | src/controls(显示控件) |
| source* | 内嵌于<audio controls>，定义多个媒介资源，由浏览器自动选择支持的类型 | src/type |
| video | 视频 | src/controls(显示控件) |
链接
| 标签 | 描述 | 属性 |
|---|---|---|
| a | 超链接，行元素 | href |
| link* | 链接外部样式 | rel="stylesheet"/type="text/css"/href="main.css" |
| nav | 导航链接，内嵌a标签 | / |
列表
| 标签 | 描述 | 属性 |
|---|---|---|
| ul-li | 无序列表 | / |
| ol-li | 有序列表 | / |
| dl-dt-dd | 自定义列表 | / |
表格
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格中的表头单元格。 |
| <tr> | 定义表格中的行。 |
| <td> | 定义表格中的单元。 |
| <thead> | 定义表格中的表头内容。 |
| <tbody> | 定义表格中的主体内容。 |
| <tfoot> | 定义表格中的表注内容（脚注） |
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>样式/节
| 标签 | 描述 | 属性 |
|---|---|---|
| <style> | 定义文档的样式信息。 | type="text/css" |
| <div> | 定义文档中的节。 | |
| <span> | 定义文档中的节,组合行内元素 | |
| <header> | 定义 section 或 page 的页眉。 | |
| <footer> | 定义 section 或 page 的页脚。 | |
| <section> | 定义 section。 | |
| <article> | 定义文章。 |
元信息
| 标签 | 描述 | 属性 |
|---|---|---|
| meta* | 页面的元信息 | content(必须,http-equiv、name)/http-equiv/name |
<meta name="keywords" content="Java培训，web前端">//给SEO搜索引擎看的
<meta name="description" content="我们是正规的培训机构XXX">//给用户搜索看的简介
<meta name="http-equiv" content="5;http://www.baidu.com">//网页重定向编程
| 标签 | 描述 | 属性 |
|---|---|---|
| <script> | 客户端脚本 | type="text/javascript" |
CSS常用属性
背景属性
body
{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;//简写属性，可设置background-color，background-image，background-repeat，background-attachment，background-position背景属性
}body
{
background-image: url(bgimage.gif);//背景图像
background-attachment: fixed;//背景图像是否固定/随着页面其他部分滚动
background-repeat:no-repeat;//水平或垂直方向重复方式：repeat/repeat-x/repeat-y/no-repeat
background-position:center;//背景图像起始位置，top left center bottom right中的两个组合，如果只规定一个，另一个默认为center
background-size:80px 60px;//背景图像宽度和高度，不设置则默认为auto
}body
{
background-color:yellow;//颜色名称
}
h1
{
background-color:#00ff00;//十六进制
}
p
{
background-color:rgb(255,0,255);//rgb代码
}
div
{
background-color:transparent;//默认值，透明
}边框属性
p
{
border:5px solid red;//简写属性，顺序：border-width border-style border-color
}border-radius:25px;//四个角的形状，也可以设置某个角的形状，栗子：border-top-left-radiusdiv
{
box-shadow: 10px 10px 5px #888888;//添加阴影
}
//box-shadow: h-shadow v-shadow blur spread color inset;
//水平阴影，垂直隐形，（模糊距离），（阴影尺寸），（阴影颜色），（）border-top/right/bottom/left:;//可以设置单独边框的属性div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
//border-image-source/slice/width/outset/repeat
}CSS字体属性
font: font-style font-weight font-size/line-height font-family;//文字大小和字体为必写项font-weight:normal(400)|bold(700)|bolder|lighter|100-900CSS 外边距属性（Margin）
margin: top right bottom left;
margin: top left/right bottom;
margin: top/bottom left/right;CSS 内边距属性（Padding）
padding: top right bottom left;
padding: top left/right bottom;
padding: top/bottom left/right;
transform
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
JS
String
属性
legth
var str = "123";
str.length;//3方法
substring()
stringObject.substring(start,stop)
//提取子字符串，从 start 处到 stop-1 处的所有字符
//如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数
//不接受负的参数
var str="How are you doing today?"
str.substring(2,3);//"ow"slice()
stringObject.slice(start,end)
//从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符
//如果start/end是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
var str="How are you doing today?"
str.slice(-3,-1)//"ay" //(-1,-3)返回的时"" split()
stringObject.split(separator,howmany)
//返回一个字符串数组，从参数separator指定的地方分割 stringObject
//如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）注释：String.split() 执行的操作与 Array.join 执行的操作是相反的
indexOf()
stringObject.indexOf(searchvalue,fromindex)
//检索指定的字符串值searchvalue在字符串中首次出现的位置，fromindex指的是开始检索的位置
//不存在的时候返回-1lastindexOf()
stringObject.lastIndexOf(searchvalue,fromindex)
//返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。charAt()
stringObject.charAt(index)
//返回指定位置的字符contact()
stringObject.concat(stringX,stringX,...,stringX)
//连接两个或多个字符串match()
stringObject.match(searchvalue)
stringObject.match(regexp)
//在字符串内检索指定的值，或找到一个或多个正则表达式的匹配.
//与indexOf()不同，match返回的是匹配到的值，而indexOf返回的是位置replace()
stringObject.replace(regexp/substr,replacement)
//在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
//对大小写不敏感search()
stringObject.search(regexp)
//返回stringObject 中第一个与 regexp 相匹配的子串的起始位置
//从字符串的开始进行检索valueOf()
stringObject.valueOf()
//valueOf() 方法可返回 String 对象的原始值。
//原始值是由从 String 对象下来的所有对象继承的。
//valueOf() 方法通常由 JavaScript 在后台自动进行调用，而不是显式地处于代码中。toString()
stringObject.toString()
//返回原始字符串值今日头条面试题：
www.baidu.com.cn==>cn.com.baidu.www
var arry = str.split(".")-->var newArry = arry.reverse()-->newArry.join(".")Array
(2019.1.7更)
创建数组的方法
数组字面量法
var array = [1,2,3];构造函数法
var array = new Array(/n/1,2,3);属性
length
array.length;方法
concat()
arrayObject.concat(arrayX,arrayX,......,arrayX)
//在arrayObject后面连接两个或多个数组，返回一个新数组
//不改变现有数组join()
arrayObject.join(separator)
//以separator作为分隔符，把数组中的元素放入字符串
//与String对象的split()方法相反pop()
arrayObject.pop()
//删除数组的最后一个元素，并返回该元素shift()
arrayObject.shift()
//删除数组的第一个元素，并返回该元素push()
arrayObject.push(newelement1,newelement2,....,newelementX)
//添加一个或更多元素到数组的末尾，并返回新的数组长度unshift()
arrayObject.unshift(newelement1,newelement2,....,newelementX)
//添加一个或更多元素到数组的开头，并返回新的数组长度reverse()
arrayObject.reverse()
//反转数组
//注意：改变的是原来的数组，不会创建新数组slice()
arrayObject.slice(start,end)
//返回已有数组从start到end（不包括）的元素
//返回一个子数组，不改变原数组splice()
arrayObject.splice(index,howmany,item1,.....,itemX)
//删除从index开始的howmany（可以为0）个元素，并从删除的位置开始添加新的元素到原数组
//返回数组，改变原数组sort()
arrayObject.sort(sortby)
//对数组元素排序，在原数组上进行
//默认按照字母顺序进行排序如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
- 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
- 若 a 等于 b，则返回 0。
- 若 a 大于 b，则返回一个大于 0 的值。function sortNum(a,b) {
return a - b;//升序
//return b - a;//降序
}
array.sort(sortNum);//数值字符串数组按照数值的大小对数字排序toString()
array.toString()
//把数组转换为字符串，并返回该字符串
valueOf()
array.valueOf()
//返回数组对象的原始值
对比String和Array
| String | Array |
|---|---|
| slice | slice |
| split | join |
| concat | concat |
注意：Array里面slice和splice的区别——slice返回子数组，且不会改变原数组；splice从某个位置删除数组内元素，并添加新元素，改变原数组。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。