html HTML
A. Text modified
<font> (行内标签，不会换行)Attributes
size： 字体大小 最大值是7
color： 颜色值[red green blue] 颜色:RGB rgb(0,0,255) 十六进制： #0000ff
face： 字体[黑体 楷体 宋体 华文彩云]<b></b>加粗
<i></i>斜体
<u></u>下划线Character Entities
Some special characters in the show page
空格    
换行 <br>Second, the paragraph tag
<p> (块标签,独立成行,有行间距,无color)Attributes
align 对齐方式[centet left right]Third, title
<h1> ~ <h6> (块标签,独立成行,无color)Attributes
align 对齐方式[centet left right]Fourth, the dividing line
<hr>Attributes
size 线厚度大小
color 颜色
width 线长
align 对齐方式 [centet left right]V. sequence
Ordered
<ol> (块元素,有缩进有行间距)
<li>... ...</li>
<ol>Attributes
type 样式[1 a A i罗马 I大罗马]
start[n] 从第n个数开始计数Disorderly
<ul>(块元素,有缩进有行间距)
<li>... ...</li>
</ul>Attributes
type 样式[disc实心圆 circle空心圆 square 方块]Sixth, Pictures
<img>Attributes
src 路径
border 边框宽度
height width 宽高
alt 图片不存在时提示信息Seven, audio
<bgsound> (只对IE有效)Attributes
src 路径<embed> (通用,音视频均可)Attributes
src 路径
height width 大小可以为0隐藏Eight, hypertext
<a> (超链接)Attributes
href 资源地址
target [_blank]重新打开一个页 [_self _top]在本页打开Call the local mail client to send mail
<a href="mailto:[email protected]">点击发送邮件</a>Call javascript script
<a href="javascript:alert('???')">弹出</a>Bookmark anchor
<a name="跳转位置"> 第一章... ...</a>
<a href="#跳转位置">第一章</a>IX Form
<table>
<tr> 行
<td> 列(单元格)Attributes
caption 表头
border 边框线宽度
cellspacing 单元格之间距离
cellpadding 内容与单元格左边框距离，总宽度会增加
width 表格总宽度(列平分)
height 表格总高度(行平分)
align 水平对齐方式 [centet left right]在<table>中用是表格居中
valign 垂直对齐方式 [top maddle bottom]
background 背景图片
bgcolor 背景颜色Merge Cells
rowspan="n" n行合并
colspan="n" n列合并Ten, part shortcuts
alt + ↑ upward movement of the line
alt + ↓ downward movement line
shift + alt + ↑ line up copy
shift + alt + ↓ down line copy
ctrl + shift + k Delete Row
XI form
<form>Attributes
action 处理路径html
method 提交类型[get,post] <input> 输入框 Attributes
type [text,file,password,radio(设置相同name值，checked),checkbox,button,submit,reset,image(图片按钮),hidden]
name 名字(用于分组)
value 值(数据提交)<select>选择框
<option>1995</option>
<option>1996</option>
</select>年css Cascading Style Sheets
The method of introducing
内嵌式 <font style font-size:"100px"></font>
内部式 <head>
<style type="text/css">
u{
font-size: 100px;
color:red
}
</style>
</head>
外部式 xxx.css
<head>
<link rel="stylesheet" href="xxx.css">
</head>A selector definitions:
1. tag selector element
The definition of each selected element or tag may be present as [body, font ...]
Use this page all the style tags are used
2.id selector
# Plus defined using the identifier defined (# F1)
In the tag using the id = "f1" attribute references (using the specific pattern, is generally not repeated)
3.class class selector
Definitions used. Identifiers defined plus (.c1)
Use in the label using class = "c1" attribute references (of the same type of use, generally repeat)
4. Combination Selector
Definitions separated by commas, and the three selectors unified style.
Use font, f1, c1 {}
5. descendant selector
Definition defined (highest priority) in accordance with the nesting order selector
Use div pa {}
are f1 c1 {}
6. universal selector
There are all defined styles (lowest priority)
Use {*}
7. pseudo class selector
Defines the selector Title: pseudo-class properties
use:
#a1:LINK{ }鼠标点击后
#a1:VISITED{ }访问完毕时
#a1:HOVER{ }鼠标浮动时
#a1:ACTIVE{ }被激活时
p:HOVER{ color : yellow; background-color : pink }
p:FIRST-CHILD{ }p的父元素下的第一个p元素
ul li:FIRST-CHILD{ }ul下li的父元素下第一个liTwo, css style properties
1.css classification of Html element
Style property set by the display.
- Independent block elements in a row div, p, h1-h6, table
- Inline elements font abui span
- Inline elements into a plurality of block elements in a row, width and height of its own input, select
2. The box model
border: 1px solid red;线宽、样式、颜色，可乱序
border-bottom: 5px yellow solid;
border-radius: 10px;边框圆角
padding (内边距)
padding:上 右 下 左
margin (外边距)
margin：上 右 下 左3. Layer relations
Static relationships: between the blocks, the default position: static
Dynamic relationship:
z-index:5[大者在上]
left,top...(position为动态关系时,距离前后左右设置)
相对关系：position:relative 相对位置关系
绝对关系：position:absolute 相对于0，0点 4. Text
1. font
font-size: 80px; 文字大小
font-weight: bold; 文字加粗
font-style: italic;文字斜体
font-family:"楷体"; 文字字体 2. text
text-align: center; 对齐方式(块元素)
text-decoration: underline; 下划线
text-indent: 2em; 缩进2字符(块元素)
text-transform: uppercase; 转大写 3. letter
letter-spacing: 10px; 字间距10像素
line-hight:5px; 行高
word-spacing: 20px; 单词间距20像素
overflow:hidden[scroll] 内容超出部分处理方式[隐藏，滚动] 4 .background
background-color: turquoise; 颜色
background-image: url(/bg/2.jpg); 图片地址
background-repeat: no-repeat; 重复方式
background-position: left center; 摆放位置
background-position: 100px 300px; 绝对摆放方式
background-position: -1000px -300px;
float: left; 左悬浮，取消独立成行性