常用代码整理

目录
一、网页代码 (2)
（一）文本段落 (2)
（二）、CSS基础 (3)
（三）、DIV：容器。

(4)
一、网页代码
（一）文本段落
1、网页名称 <title>网页名称</title>
2、标题 <h数字>标题名称</h数字>
3、段落 <p>段落名称内容</p>
4、网页链接 <a href=“网址”>网站名字</a>
5、新的窗口 <a href=“网址” target=“_blank”网页名</a>
6、列表 <li>列表内容</li>
7、有序列表 <ol><li>列表内容</li></ol>
8、无序列表 <ul><li>列表内容</li></ul>
9、插入图片 <img src = “images/带格式图片名”/>
10、代码解释 <!—解释内容 -->
11、网页换行 <br/>
12、内容空格 &nbsp；
13、字体加粗 <strong>加粗内容</strong> <b>
加粗内容</b>【b标签慢慢在被淘汰】
14、无框表格 <table>表格</table>
15、有框表格<table border=“1px”>表格</table>
16、表内无间歇 <table border=“1px”cellpadding=“0px”>表格</table>
17、表间无间歇<table border=“1px”cellspacing=“0px”>表格</table>
18、表格大小 height="150px" width="500px"
19、表格行 <tr>内容</tr>
20、表格列 <td>内容</td>
21、表格列 <th>内容</th>
22、合并单元格 <td colspan=“数字”>内容</td>
<td rowspan="数字">内容</td>
23、居中 <tr align=“center”>内容</tr>
24、表单格式<form name=“名称” action="表单处理程序的URL"
method="getlpost">表单内容</form>
25、输入型表单 <input type =“输入的类型” name=“XXX”checked/>
26、按钮 <input type =“button（button:按钮）”value=“表单元
素的值” name=“btnReg”/>
27、清除/注册 <form name=“名称” action="表单处理程序的URL"
method="getlpost"><input type=“reset/submit” value=“表单元素的值”></form>
28、下拉序列表选择框： <select name=“select”>
<option>下拉选项内容<option>
29、文字颜色 style="color:颜色"
30、表格颜色 style="border-color:颜色"
31、单表表宽高 <textarea cols="70" rows="5"></textarea>
32、表单输入对应类型：
Text……名字 date……日期选单 email……邮箱
button/submit……注册按钮 reset……清空按钮
password……密码(掩码显示) radio……单选按钮
Checkbox……复选按钮submit……提交按钮
（二）、CSS基础
1、备注/*备注内容*/
2、文字大小font-size：数字px；font-size：数字em；font-size：数字%
3、文字粗细Font-weight：normal/bold/bolder/lighter
4、文字字体font-family：字体样式；
5、文本缩进text-indent:缩进字符数em;
6、使用样式类名<p class="样式类名">这是第二段文字</p>
7、CSS颜色表示方式：h3{color:blue;} 使用颜色的英文名称作为属性值
h3{color:#0000ff;} 使用是十六进制数值
h3{color:#00f;} 第二种方式的简写
h3{color:rgb(0,0,255);} 使用给定红绿蓝3种颜色分量的十进制数值
h3{color:rgb(0%,0%,100%);} 使用给定红绿蓝3种颜色分量的百分比
8、设置字体倾斜效果font-style: normal; /*正常字体模式*/
font-style:italic;/*斜体*/
9、设置文字加粗效果
font-weight:nomail; /*正常*/
font-weight:bold; /*粗体*/
font-weight:bolder; /*加粗*/
font-weight:100/*范围100-900，数字越大字体越粗*/
10、文字的装饰效果text-decoration: none; /*正常显示（无下划、删除、上划线……）*/
text-decoration: underline; /*下划线*/
text-decoration: line-through; /*删除线*/
text-decoration: overline; /*顶线（上划线）*/
11、段落样式text-indent:数字em；/*首行缩进距离*/
letter-spacing:数字px;/*英文字母间距离*/
word-spacing:数字px;/*英文单词间距离*/
line-height:数字；/*可用长度、倍数、百分比*/
text-align:lift/center/right/*文本水平位置左对齐、居中、右对齐*/
12、背景色与图像background-color:red; /*背景色*/
color:blue; /*前景色*/
background-image: url (bg.jpg)
13、图片缩放img{ width：数字%/数字px}/*相对宽度/绝对宽度*/
img｛height:数字%/数字px｝/*相对高度/绝对高度*/
14、图文混排vertical-align: 对齐方式; /* 文本与图片对齐方式*/
border-width: ; /*边框线条的粗细*/
border-color: ; /*边框的颜色*/
border-style: ; /*边框线型*/
（三）、DIV：容器。

可以放置任何html元素。

1、块级元素：div，h1—h6、p、li等，摆放的顺序默认情况下是从上到下摆放的；默认情况下高度是没
有的，款速是默认延伸到伏击元素的宽度。

2、行级元素：span、img、em、font等级都属于行级元素。

默认情况下是么有宽度和高度；默认摆放顺
序是从左到右的摆放，摆满一行自动提行。

3、标准文档流：按照网页标准，元素在网页中所显示的位置。

标准文档流就是网页里的元素按照标准所
显示的位置。

4、浮动：针对的是快捷元素。

改变它所在的标准文档流的位置。

Float: left\right\
5、padding：top，left，right，bottom
6、内边距：调整内边距，会改变盒子本身的大小的。

7、盒子的宽度和高度的计算：
div-width=盒子本身的宽度+左右两边的边框线+左右两边的内边距；200+2+100；
div-height=盒子本身的高度+上下两边的边框线+上下两边的内边距；200+2+50；
8、margin：外边距。

margin:0px auto;外边距的顶部距离为0px，auto表示自动计算左右两边等距。

（前提是不能设置浮动）
9、定位：
标记元素在网页中的位置。