标签：mit multiple 英文 col 保留 hit input code 文本框
HTML
<h1> - - - <h6>标题字体逐渐变小；
表强调<em>斜体 <strong>粗体；
<div> 会自动换行，使用 <span> 就会保持同行；
<q>引用，自动加双引号，引用文字较多时，用<blockquote>，缩进样式；
<br/>回车； 空格, Non-breaking Space；
<hr/>分割线；
<code>代码语言</code>；多行代码，可以使用<pre>标签，<pre>标签里保留空格回车；
<ul>
<li>第一个列表</li>
<li>第二个列表</li> <ul>没有顺序的信息列表，前面是粗点；
</ul>
<ol>
<li>第一个列表</li>
<li>第二个列表</li> <ol>有顺序的信息列表，前面是序号；
</ol>
定义标签：<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd></dl>
表格<table>,全部加载结束再显示表格需要添加<tbody></tbody>, 每一行<tr>, 第一行（表头）<th>,第二行以后<td>；加CSS样式时，table tr th,td { ...... }；
<table summary=”表格摘要，不显示在浏览器中”>；<caption>表格标题</caption>；
<a href="目标网址" title="鼠标滑过显示的文本" target=”_blank”>Click here！</a>
<img src="图片地址" alt="下载失败时的替换文本" title = "鼠标滑过时提示文本">；
与用户进行交互时，使用<form>标签
使用表单标签，与用户进行交互<form method="传送方式" action="服务器文件">
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" >
<label for="pass">密码:</label>
<input type="password" name="pass" >
<input type="submit" value="确定" name="submit" >
<input type="reset" value="重置" name="reset" >
</form>
<form>
姓名：
<input type="text" name="myName">
<br/>
密码：
<input type="password" name="pass">
</form>
type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
name：为文本框命名，以备后台程序ASP 、PHP使用。
value：为文本输入框设置默认值。(一般起到提示作用)
文本域：<textarea cols="50" rows="10">在这里输入内容...</textarea>；
单选框、复选框：<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
<form method="post" action="save.php">
<label>你爱运动吗？</label><br>
<input type="radio" name="radioLove" value="喜欢" checked="checked">喜欢
<input type="radio" name="radioLove" value="不喜欢">不喜欢
<input type="radio" name="radioLove" value="一般般">一般般
<br>
<label>你喜欢什么明星？</label><br>
<input type="checkbox" name="checkbox1" value="刘亦菲" checked="checked">刘亦菲
<input type="checkbox" name="checkbox2" value="刘德华" checked="checked">刘德华
<input type="checkbox" name="checkbox3" value="张学友">张学友
<input type="checkbox" name="checkbox4" value="周杰伦">周杰伦
</form>
下拉按钮：<select>
<option value=”足球” selected=”selected”>足球</option>
<option value=”篮球”>篮球</option>
<option value=”羽毛球”>羽毛球</option>
</select>
下拉多选：<select multiple=”multiple”>
提交按钮<input type="submit" value="提交"> ；
重置按钮<input type=”reset” value=”重置”>。
type：只有当type值设置为submit / reset时，按钮才有提交/重置作用
value：按钮上显示的文字。
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。这样，当用户单击选中该label标签时，浏览器就会自动将焦点转到相关表单控件上。如：
<label for="male">男</label>
<input type="radio" name="gender" id="male" >
CSS
内联式、嵌入式、外部式。
外部式：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
类选择器：class .
ID选择器：id #
子选择器 >
.food>li{border:1px solid red;}
后代选择器 空格
.food span{color=red;}
>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器 * 匹配html中所有标签元素
*{color=red;}
伪选择符
a:hover{color:red;} 鼠标滑过字体颜色变为红色特效。
分组选择符 ，
.first,#second{color:red;}
1.继承性，
2.特殊性（优先性），
优先性根据权值：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。 例如：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
p{color:red!important;}
p{color:green;} 这时p段落显示为红色
font-family:Microsoft Yahei;
font-weight: bold;
font-style: italic;
text-decoration（文字修饰）: underline（下划线）;line-through（删除线）；
text-indent:2em; （首行缩进）
line-height: 1.5em;（行高）
letter-spacing:50px;（字或字母间隔） word-spacing:50px;（单词间隔）
text-align:center; （排版）
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素（行内元素）有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
1.将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
2.将块状元素div转换为内联元素。
div{display:inline;}
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
3.内联块状元素
display:inline-block;
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
border(border-bottom/left/right/top): solid/dotted/dashed
一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
CSS布局：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
a、绝对定位(position: absolute)
b、相对定位(position: relative)
c、固定定位(position: fixed)
* Relative与Absolute组合使用：
（把box4定位到图片(box3)的底部）
#box3{
width:200px;
height:200px;
position:relative;
}
#box4{
width:99%;
position:absolute;
bottom:0px;
}
<div id=”box3”>
<div id=”box4”>当我还是一个小女生的时候</div> （box4是box3的子元素）
</div>
缩写：
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
（在缩写时 font-size 与 line-height 中间要加入“/”斜扛）
水平居中：
1. 文本、图片等行内元素设置水平居中，是通过给父元素设置：
html代码：
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
css代码：
<style>
.txtCenter{
text-align:center;
}
</style>
A.定宽块状元素：块状元素的宽度width为固定值。通过设置“左右margin”值为“auto”来实现居中的。
div{
border:1px solid red;
width:200px;
margin:20px auto;
}
B.不定宽块状元素：
1.加入 table 标签；
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
html代码：
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
css代码：
<style>
table{ border:1px solid;
margin:0 auto;
}
</style>
2.设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置；
改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：
html代码：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
display:inline;
}
.container li{
margin-right:8px;/* margin-right:8px（设置li文本之间的间隔）*/
display:inline;
}
</style>
3.设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的；（div左移50%，ul右移50%，即可实现居中）
代码如下：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
垂直居中：
1. 父元素高度确定的单行文本：设置父元素的 height 和?line-height?高度一致。
.container{
height:100px;
line-height:100px;
}
<body><table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div></td></tr></tbody></table>
</body>
css代码：
table td{height:500px;background:#ccc} /*因为td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。*/
*** 有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。如：
.container a{
position:absolute;
width:200px;
background:#ccc;
}
标签：mit multiple 英文 col 保留 hit input code 文本框
原文地址：http://www.cnblogs.com/licong654c/p/7495988.html
