HTML+css整理笔记 | 易学教程

HTML+CSS

一、元素

1. <html>HTML文件</html>

2. <head>头</head> 详见: 二 mata用法和属性及外部文件引入

3. <title>标题</title>

4. <meta /> 详见: 二 mata用法和属性

5. <body>主体</body> 插入背景图片详见: 三 img用法和属性及背景图

6. <h1>标题</h1> : 标题取值1-6, 1字体最大,6字体最小;

7. <b>粗体</b>: 粗体;

8. <i>斜体</i>: 斜体;

9. <u>下划线</u>: 下划线;

10. <em>斜体强调</em>: 斜体强调;

11. <strong>粗体强调</strong>: 粗体强调;

12. <font>字体</font>: 字体;

13. <p>段落</p>: 段落;

14. <button>按钮</button> : 按钮;

15. <pre>原格式输出</pre> : 原格式输出;

16. <br/> : 换行;

17. <hr/> : 水平线;

18. <img /> : 插入图片; 详见: 三 img用法和属性及背景图

19. <embed>视频音乐</embed> : 插入视频音乐; 详见: 四 embed用法和属性

20. <a></a> : 链接详见: 五 a用法和属性

21. <span>内嵌</span>: ; 详见: 六 span css用法和属性

22. <div>盒子</div>: ; 详见: 七 div css用法和属性

23. <label></label> 详见: 其它标签和属性

24. <table> 表格详见: 八表格属性

a) <tr><th>表头</th></tr> 表头

b) <tr><td>表单</td></tr> 表单

</table>

25. <ul> 无序列表详见: 九无序列表属性

a) <li>无序列表</li>

b) <li>无序列表</li>

c) <li>无序列表</li>

</ul>

26. <ol> 有序列表详见: 十有序列表属性

a) <li>有序列表</li>

b) <li>有序列表</li>

c) <li>有序列表</li>

</ol>

27. <dl> 预定一列表

a) <dt>定义表头</dt>

b) <dd>释意表头</dd>

</dl>

28. <from>表单</from> : 表单; 详见: 十一表单属性

29. <input /> 表单输入类型

30. <textarea><textarea> 文本域

31. <select> 下拉列表

a) <option></option>

b) <option></option>

</select>

32. <frameset></frameset> 框架集详见: 十二框架属性和用法

33. <frame></frame> 框架

34. <iframe></iframe> 内联框架

二.Meta用法和属性及外部文件引入

<head>

<!— 设置字符集 -->

<!— 站点标题 -->

<!— 关键词 -->

<!— 描述 -->

<!— ico图标-->

<!— layer弹出层 -->

<!— elementCenter 垂直水平居中-->

<!— Validform 表单验证 -->

<linkrel="stylesheet"href="__PUBLIC__/extend/Validform_v5.3.2/css/style.css"type="text/css" media="all" />

<scripttype="text/javascript"src="__PUBLIC__/extend/Validform_v5.3.2/js/Validform_v5.3.2_min.js"></script>

<linkrel="stylesheet"href="__PUBLIC__/extend/Validform_v5.3.2/plugin/passwordStrength/passwordStrength.css"type="text/css" media="all" />

<scripttype="text/javascript"src="__PUBLIC__/extend/Validform_v5.3.2/plugin/passwordStrength/passwordStrength-min.js"></script>

</head>

文件引入

1. CSS : <link rel="stylesheet" type="text/css" href="css/RRdai.css" />

2. JQ : <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

三.Img用法和属性及背景图

<bodybackground="../img/2015-07-30_182219.png"bgproperties="fixed">

</body>

CSS background 属性

1. Background-color: red; 背景颜色;

2. Background-image: url(); 背景图片;

3. Background-repeat:repeat;=>[norepeat][repeat-x][repeat-y] 背景图排列;

4. Background-attachment:scroll; =>[fiexd] 背景图片滚动(scroll)固定(fiexd);

5. background-position::top left;=>[top center] [top right] [center left] [center certer] [certer right][bottom left] [bottom center] [bottom right] [x% y%] 设置背景图像的起始位置;

6. background-size:100% 100%;

<img src="/Html/HTML笔记/img/loading2_cd92b1a.gif"title="小熊" alt="小熊" /

1. Src = ‘url’ 引入文件路径

2. Title 鼠标移入显示该图片名称

3. Alt 浏览器无法加载时显示图片名称

四.embed用法和属性

五.a用法和属性

1. Href=’url’; 跳转路径

2. Target=’_blank’;在新的页面打开;[_self]本页面打开[_parent] 在父窗口中打开 [_top] 在整个窗口中打开----- <head><base target="_blank"/></head> base默认 –定义所有a标签打开效果

CSS a链接伪类样式

#ID-1-2_1 a:link{

text-decoration:none;

color:#29AADF;

}

#ID-1-2_1a:visited{

color:#CCCCCC;

}

#ID-1-2_1a:hover{

color:#FFFFFF;

font-size:18px;

}

3. <a href="javascript:;" id="bottom">></a>详见轮播图片

4. location把用户带到一个新的地址location.herf; 详见location对象

5. 链接到指定位置: <ahref="__URL__/bill?id={$vo['logistics_id']}& #t{$signlist['type']} ">去对账</a>

指定位置: <div class="list_box "><aid="t{$i}{$ck.logistics_supplier_id}"name="t{$i}{$ck.logistics_supplier_id}"></a></div>

六.span css用法和属性

1. 一般做为块元素使用: display : ’block’; 显示; display : ‘none’; 隐藏;

2. 也可以定位:float : left; 左浮动; float : right; 右浮动; position: absolute;绝对定位; 和div定位相同

七.div css用法和属性

1. float : left; 左浮动; float :right; 右浮动;

#div{

float:left;

width:20px;

height:20px;

border:1pxsolid hotpink;

margin-top:10px;

margin-right:10px;

Padding-right:20px;

Padding-bottom:20px;

}

2. Position: relative; 相对定位; position:absolute;绝对定位; position: fixed; 固定定位;

#div{

position:absolute;

width:100px;

height:100px;

top:100px;

left:100px;

margin:0px;

padding:0px;

Background-color: pink;

z-index:2;/*设置层*/

opacity:0.7;/*设置透明度*/

}

八.表格属性

1. Color : 颜色;

2. Width : 宽;

3. Height : 高;

4. Align = ‘center’ => 居中; align = ‘left’=> 居左; align = ’right’ =>居右;

5. valign="bottom";垂直居下 valign="baseline"垂直居上

6. Border : 边框; => border: 1px solid red ;边框1像素,实线,红色;

7. Bordercolor : 边框颜色;

8. Background : 背景图片;

9. Bgcolor : 背景颜色;

10. Cellspacing : 单元格外间距;

11. Cellpadding : 单元格内边距;

12. Colspan : 合并列;

13. Rowspan : 合并行;

九.无序列表属性

1. Type : <ul type="square">方块 <ul type="circle">空心圆

2. CSS样式

#li{

float:left;

list-style-type:none;/*设置显示样式无*/

width:20px;

height:20px;

border:1pxsolid hotpink;

margin-right:10px;

}

十.有序列表属性

1. <ol type="i"> <ol start="3">

十一.表单属性和用法

<body>

用户名:<input type="text" name="name1" maxlength="16" size="30"placeholder="手机号/E-mail"value="请输入用户名"/><br>

密　码:<input type="password" name="password" maxlength="16"placeholder="Password"/><br />

性　别:<input type="radio" name="sex1"/>男

国　家:<input type="text" name="country" value="China" readonly="readonly"/><br/>

籍　贯:<select name="nativp">

</select><br/>

介　绍:<br/>　　　 <textarea name="jieshao" cols="30" rows="5">这里输入</textarea><br/>

爱　好:<input type="checkbox" name="hobby[]" value="music"/>音乐

<input type="checkbox" name="hobby[]" value="tiyu"/>体育

<input type="checkbox" name="hobby[]" value="meishu" checked="checked"/>美术

<input type="checkbox" name="hobby[]" value="lishi"/>历史

<br />

上传文件:<input type="file" name="file"><br/><br/>

</form>

</body>

十二.框架属性和用法

</frameset>

</frameset>

十三.字体属性

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

1. font-family:"黑体"; 字体

2. font-size: 300px; 字体大小

3. font-style:italic; 字体风格

4. font-variant: normal;=> This is a paragraph

5. font-variant: small-caps;=> THIS IS A PARAGRAPH

6. font-weight: bold; 字体粗细

十四.文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

1. word-spacing: 30px;

2. letter-spacing: 20px;

3. text-transform 属性处理文本的大小写。这个属性有 4 个值：

· none 无样式

· Capitalize 首字母大写

· uppercase 大写

· Lowercase 小写

4. text-decoration 属性文本装饰这个属性有 5 个值:

· none 无样式

· underline 下划线

· overline 顶端画一个上划线

· line-through 在文本中间画一个贯穿线

· blink 会让文本闪烁

5. 下面的表格总结了 white-space 属性的行为:

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

6. line-height:10px; 行高

7. 文本对其方式:

a) h1{text-align: center}

b) h2{text-align: left}

c) h3{text-align: right}

8. text-indent:2em; 缩进文本

十五.边框属性

属性	描述	CSS
outline	在一个声明中设置所有的轮廓属性。	2
outline-color	设置轮廓的颜色。	2
outline-style	设置轮廓的样式。	2
outline-width	设置轮廓的宽度。	2

1. outline-style:

a) p.dotted {outline-style:dotted}

b) p.dashed {outline-style:dashed}

c) p.solid {outline-style: solid}

d) p.double {outline-style:double}

e) p.groove {outline-style:groove}

f) p.ridge {outline-style: ridge}

g) p.inset {outline-style: inset}

h) p.outset {outline-style:outset}

十六.其它标签及属性

1. 透明度:opacity : 0.7;

a) filter:alpha(opacity=60); /*IE滤镜，透明度50%*/

b) -moz-opacity:0.6; /*Firefox私有，透明度50%*/

c) opacity:0.6;/*其他，透明度50%*/

1. 层及关系:z-index:999;

2. 设置圆角:border-radius:20px;

a) -moz-border-radius:50px; /* Gecko browsers */

b) -webkit-border-radius:50px; /* Webkit browsers */

c) border-radius:50px; /* W3C syntax */

1. <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>

a) <span style="cursor:auto">Auto</span><br/>

b) <spanstyle="cursor:crosshair">Crosshair</span><br />

c) <spanstyle="cursor:default">Default</span><br />

d) <spanstyle="cursor:pointer">Pointer</span><br />

e) <spanstyle="cursor:move">Move</span><br />

f) <span style="cursor:e-resize">e-resize</span><br/>

g) <spanstyle="cursor:ne-resize">ne-resize</span><br />

h) <spanstyle="cursor:nw-resize">nw-resize</span><br />

i) <spanstyle="cursor:n-resize">n-resize</span><br />

j) <spanstyle="cursor:se-resize">se-resize</span><br />

k) <span style="cursor:sw-resize">sw-resize</span><br/>

l) <spanstyle="cursor:s-resize">s-resize</span><br />

m) <spanstyle="cursor:w-resize">w-resize</span><br />

n) <spanstyle="cursor:text">text</span><br />

o) <spanstyle="cursor:wait">wait</span><br /><spanstyle="cursor:help">help</span>

2. overflow 属性

a) overflow: scroll 确定是否显示滚动条等行为

b) overflow: hidden隐藏溢出元素中溢出的内容

c) overflow: auto设置浏览器来自动地处理溢出

3. <marquee direction="right"bgcolor="#00ff33"><font color="#ff0000"size="5"><b>余秋雨散文集 </b></font></marquee><br/> marquee文字滚动

4. <label></label> for 属性规定 label 与哪个表单元素绑定

a) 显式的联系：<labelfor="SSN">Social Security Number:</label>

b) 隐式的联系：<label>Date of Birth: <input type="text" name="DofB"/></label>

c) 让字体与文本域对齐：<label style="vertical-align:top;"> 商品描述:</label> <textarea name="remark"></textarea>

5. 标签样式初始化css reset 原则:

a) body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}

b) ol,ul{margin:0;padding:0;list-style:none;}

c) a{text-decoration:none;}

d) img{border:none;}

6.根据窗口大小调整布局

@media (min-width:1730px ){

.s_banner_des{

left:155px;

top:145px

}

@media (min-width:1320px )and(max-width:1730px){

.s_banner_des{

left:115px;

top:115px

}

@media (max-width:1320px ){

.s_banner_des{

left:75px;

top:25px

}

7. 判断IE各版本

a)       
b)      
c)      
d)      
e)      
f)