HTML
Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
- 页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
- 刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
- 关键词
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" > - 描述
例如：cnblogs - X-UA-Compatible 浏览器兼容类型
< meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
< meta http-equiv="X-UA-Compatible" content="IE=edge" />
- TITLe
网页头部信息
- Link
引入外部文件
- css
< link rel="stylesheet" type="text/css" href="css/common.css" > - icon
< link rel="shortcut icon" href="image/favicon.ico">
- css
- Style
在页面中写样式
例如：
< style type="text/css" >
.bb{
background-color: red;
}
< /style>
- Script
- 引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> - 写js代码
< script type="text/javascript" > ...
- 引进文件
常用标签
标签一般分为两种：块级标签 和 行内标签
块级标签：显示外观按块显示，有一定的宽度和高度，并占据一行
行内标签：显示外观按行显示，多个行内标签可以再一行
标签
- h 标题标签 h1--h6表示不同等级的标题
- 上标和下标
上标：< sub></ sub>
下标：< sup></ sup> - 特殊符号
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html - a 超链接标签
- 页面链接
< a href="b.html"> - url连接
< a href="http://www.autohome.com.cn">
- 锚连接
1.命名标记 id=1 id需要唯一
2.锚连接 < a href="#1"> - 页面链接
- 行控制标签
- br/ 换行
- p 段落
- hr/ 水平线
- span 范围
- 表单 form
- 概念
作用：收集客户端的信息，实现交互
结构：
表单域 < form> < /form>
表单元素 < input />- 表单域
action 数据提交的目标地址
method 提交方式 get post- 表单元素
- 文本域 type='text'
- 密码框 type='password'
- 单选框 type='redio' 注意同表单中name需要指定，并且保持一致，并设置不同的选定值 value
- 复选框 type='checkbox' 需设定选定值value
- 列表菜单 select
< select>
< option>选项1< /option>
< option>选项2< /option>
< /select> - 提交按钮 type='submit'
- 重置按钮 type='reset'
- 普通按钮 type='butten'
- 图片按钮 type='image' src='图片'
- 文本区域 < testarea>< /testarea>
- 文件域 type='file'
- 列表
- 无序列表
< ul>
< li>< /li>
< li>< /li>
< /ul> - 有序列表
< ol>
< li>< /li>
< li>< /li>
< /ol> - 定义列表
< dl>
< dt>标题1< /dt>
< dd>选项1< /dd>
< dd>选项2< /dd>
< dt>标题2< /dt>
< dd>选项1< /dd>
< dd>选项2< /dd>
< /dl> - 无序列表
- 表格
- 格式：
< table>
< tr> 一列
< td>< /td> 一行
< td>< /td> 二行
< /tr>
< tr> 二列
< td>< /td> 一行
< td>< /td> 二行
< /tr>
< /table> - 合并单元格：
跨列（横向合并）：< td cospan=列数>。。。< /td>
跨行（纵向合并）: < tr rowspan=行数>。。。< /tr>
注意：合并多少，需在下一列或行减去对应的行数或列数 - 高级
- 标题 < caption>...< /caption>
- 表头 < th>..< /th>
- 页眉 < thread>...< /thread>
- 页脚 < tfoot>..< /tfoot>
- 格式：
行内标签
CSS
选择器
标签选择器
div{ background-color:red; }
<div > </div>
class选择器
.bd{ background-color:red; }
<div class='bd'> </div>
id选择器
#idselect{ background-color:red; }
<div id='idselect' > </div>
关联选择器
#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>
组合选择器
input,div,p{ background-color:red; }
属性选择器
input[type='text']{ width:100px; height:200px; }
优先级：
ID选择器>类选择器>标签选择器
按照代码的上下顺序，下面的优先级更高
内层标签>外层标签
行内标签优先级高于所有样式表
常用属性
- 背景属性
- background-color 规定要使用的背景颜色。
- background-position 规定背景图像的位置。
- background-size 规定背景图片的尺寸。
- background-repeat 规定如何重复背景图像。
- background-origin 规定背景图片的定位区域。
- background-clip 规定背景的绘制区域。
- background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。 1
- background-image 规定要使用的背景图像。
- inherit 规定应该从父元素继承 background 属性的设置。
- 边框属性
- border 简写属性，用于把针对四个边的属性设置在一个声明。
- border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
- border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
- border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
- border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
- border-bottom-color 设置元素的下边框的颜色。
- border-bottom-style 设置元素的下边框的样式。
- border-bottom-width 设置元素的下边框的宽度。
- border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
- border-left-color 设置元素的左边框的颜色。
- border-left-style 设置元素的左边框的样式。
- border-left-width 设置元素的左边框的宽度。
- border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
- border-right-color 设置元素的右边框的颜色。
- border-right-style 设置元素的右边框的样式。
- border-right-width 设置元素的右边框的宽度。
- border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
- border-top-color 设置元素的上边框的颜色。
- border-top-style 设置元素的上边框的样式。
- border-top-width 设置元素的上边框的宽度。
- outline 在一个声明中设置所有的轮廓属性
- outline-color 设置轮廓的颜色
- outline-style 设置轮廓的样式
- outline-width 设置轮廓的宽度
- 文本属性
- color 设置文本颜色
- direction 设置文本的方向、书写方向
- letter-spacing 设置字符间距
- line-height 设置行高
- text-align 设置文本的水平对齐方式
- text-decoration 设置添加到文本的装饰效果
- text-indent 设置缩进
- text-shadow 设置添加到文本的阴影效果
- word-spacing 设置单词间距
- 外边距属性
- margin 在一个声明中设置所有的外边距属性
- margin-bottom 设置下外边距属性
- margin-left 设置左外边距属性
- margin-right 设置右外边距属性
- margin-top 设置上外边距属性
- 内边距属性
- padding 在一个声明中设置所有的外边距属性
- padding-bottom 设置下内边距属性
- padding-left 设置左内边距属性
- padding-right 设置右内边距属性
- padding-top 设置上内边距属性
- 定位属性
- position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
- top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
- right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
- bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
- left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- overflow 设置当元素的内容溢出其区域时发生的事情。
- clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
- vertical-align 设置元素的垂直对齐方式。
- z-index 设置元素的堆叠顺序。
- cursor 设置光标类型
- display 是否显示
- float 设置浮动