<-! Table used ->
<h3> distal daily </ H3>
<Action = "https://www.baidu.com" form>
<Table border = "1px" cellspacing = "0px"> <-! cellspacing cell gap ->
< thead> </ thead> <tbody>
<COL span = "2" width = "100px"> <-! width changing the first two columns ->
<COL = span ". 1" width = "100px"> <! - - varying the width of the last single ->
<TR>
<TD width = "100px" align = left = "Center">. 11 </ TD>
<TD colspan = "2"> 22 is </ TD> <-! colspan occupy two column degrees ->
</ TR> <TR>
<TD rowspan = "2" align = left = "center "> sdfs </ td> <-! rowspan occupy rows 2, the next row need to delete the appropriate column ->
<TD> <INPUT type =" text "name =" LoginName "> </ TD> <! - -radio radio file file checkbox check ->center "> sdfs </ td> <-! rowspan occupy rows 2, the next row need to delete the appropriate column ->
<TD> <INPUT type =" password "name =" pwd "> </ TD>
</ TR > <tr align = "center" >
<td colspan="2">
<input type="submit" value="确认">
<input type="reset" value="重置">
</td>
</tr></tbody>
<tfoot></tfoot>
</table>
</form>
Some basics
The title small to large <hi> - <h6>, <i> <em> the same (logical style, physical style),
<B> <strong> as underlined <u> <br/> wrap <hr /> level, <p> paragraph mark
Character entities: to write an HTML document inside a special font <,>, &, etc., to begin with general or & # &,
& Nbsp; = spaces, & gt; = <, & lt; =>, & copy; record icon
Form elements
1. The form fields: <name = "" method = "post / get" action = "" form>, get data from the server is obtained, Post transmission data, safety factors, typically with post
2.input:
txt: placeholder (css3 of similar value)
password:
subbmit: submission, refresh the page, submit data to the server
reset: reset, no refresh the page
radio: radio button, name the group the same, disabled = "disabled" Disable
checkbox: check box, name the best write about checked = "checked" checked by default,
button: to make a jump, general use as the link.
select:下拉菜单<select><option></option><option></option></select>
textarea: multi-line text boxes, cols = "50" 50 characters wide, rows = "3" 3 Row Height
css tag
css stylesheet established: 1, internal style sheet (the head), the priority: the back row to see who
2, the inline style sheet (the tag), the highest priority
3, reference to the external style sheet, priority: see who the back row
<style rel="stylesheet" type="text/css" href="style.css" />
Rel definitions related documents, indicates that the associated style sheet.
css syntax
1. Selectors
Element selectors (selectors marker): div span weight 0001
Class Selector: .class weight 0010
id selectors: #id weight 0100
Pseudo class selectors: only four below, the order can not be reversed weights 0010
a {color: red} a: hover {color: green} across different addition, other styles same
a: link {} initial state
a: visited: {} after being accessed
a: hover {} across
a: active { } pressed
Group selectors: .class, # id, div
Tsuhaifu (*):
Pseudo object selectors: 0010 Weight
Selector comprising: div span weight, and the selector
1 100 1 10 1 =113权重
ul #NAV li.active a
Inline style Weight: 1000
Inheriting styles Weight: 0000
Text class properties
font-family {character 1, character 2; font-size:; color :; font-weight: bolder / bold / normal / 100-900 (600-900 will see the bold state);
font-style: Italic / oblique (inclination greater amplitude) / normal; text-align: justify ( boundary alignment at both ends); line-height: Normal;
text-Decoration: none / underline / overline / line-through;
text-indent: 50px first line indent, may negative, hidden text, only the first line of work, if not the first line of text will remain unchanged;}
Find the user's computer font library, the English font on the front, put in front of the Chinese character fonts will have an impact in English, a word do not need double quotation marks, "Times New Roman" print fonts, 1em = 16px, h1 = 2em, but It will vary depending on the font-size of the parent element.
List Properties
list-style-image: url, use the picture as a list of symbols,
General background image with the replaced: url () no-repeat left 50%; padding-left: 20px
list-style-position: default location outside / inside, the symbol definition list, the outer frame box li, when a margin: 0; padding: After 0, outside vary
list-style: none, remove the list style
Unordered list
"Circle" open circle "square" square (a browser display is not the same, if the list-style-image, if the font size change, this method is not suitable for general use background-image)
<ul type="disc">实心圆,默认，
<li><a href="#" title="提示文本">sfsdfsdfsdf</a></li>
<li><a href="#">sfsdfsdfsdf</a></li>
</ul>
Ordered list
<ol type="1"> 默认 ，"A""I""a"
<li><a href="#">sfsdfsdfsdf</a></li>
<li><a href="#">sfsdfsdfsdf</a></li>
</ol>
Custom list dl
<DL>
<dt> term </ dt>
<dd> explained </ dd> reverse two display cells, can take a lot dt dd
</ DL>
Background Properties
backgroud:{#444 url() norepeat left top;};
background-color
background-image:url(background-repeat:no-repeat/repeat/repeat-x/repeat-y;
background-positoin:水平px（left/center/right） 垂直px(top/center/bottom););
Browser Compatibility
Five browser kernel
Trident:IE,Maxthon,theworld,360
Gecko: Mozilla Firefox, the advantage of cross-platform, open source
Webkit: Safari, Chrome, open source
Presto: Opera, advantage, rendering the fastest. Opera's layout engine developed
Blink: Opera and layout engine developed by Google
CSS BUG: CSS interpretation is inconsistent across browsers,
CSS HACK: hack refers to let CSS-compliant browser and belongs to the individual official CSS modification or patch, also called patch patch
Filter: filter, for a particular browser or browser set to show or hide stated rules or methods, is a type of filter browser hack
1. Picture gap: the best display: block, inline elements within or else there will be bug, will be less than the three elements of the parent element, if Adapt to text
2. Double float to: ie6 problems, float to float will double border is displayed margin-left: 50px become 100. Add _display: inline
3. The default height: ie6 problem, partial block element has a default height below 18px,
The method of 1, font-size: 0;
方法2,，overflow:hidden;
4. High form element row (line-height) is inconsistent: mz ie o c s, hack added to form elements float: left
The button element size inconsistent:
hack1, uniform size, class / (a node with a unified analog)
a{display: block;height: 40px;width: 50px;background: #333;text-align: center;
text-decoration: none;line-height: 22px;font-size:14px;border:1px solid #000;color:#666}
hack2, writing styles on the input, remove border
hack3, if the button is a picture, as a background to
6. Percentage Bug: ie6, rounded percentage, 50% plus 50% will be greater than 100%, hack: to clear float plus right: right
7. mouse pointer bug: hand cursor value can recognize only ie, hack: cursor: pointer may
8. Transparent Properties: ie: fliter: alpha (opacity = 1-100); compatible with other browsers written, opacity: 0-1;
There is a problem opacity, transparency will be transferred to sub-elements,
9. Filter filter:
1. underline attribute filter: IE6 can be read: such background _background (ie6)
2. important keyword filters:! This statement has the highest priority, because IE6 does not support, so you can use this to make BUG ie6 compatible with other browsers, background: # 000! important
3. Attribute * Filter: only be identified when an attribute ie7 * increases.
Form Form Advanced Properties
表单域：<form name="" method="" action=""></form>
Form controls: <input type = "text" value = "" />
Message:
<label for="male">男</label><input type="radio" name="sex" id="male"/> <label for="female">女</label><input type="radio" name="sex" id="female" />
Click to label the same effect