HTML+css整理笔记

来源：互联网发布：js合并数组中的集合编辑：程序博客网时间：2024/06/11 11:14

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>

<metahttp-equiv="content-type"content="text/html"charset="utf-8">

<!— 设置字符集 -->

<!— 站点标题 -->

<metaname="keywords"content="xx">

<!— 关键词 -->

<metaname="description"content="xx,电话：400-xxx-xxx，邮箱:xxx@qq.com,微信公众号: xxx,地址: xx省xx市。">

<!—描述 -->

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

<metaname="applicable-device"content="pc,mobile">

<metahttp-equiv="Cache-Control"content="no-transform">

<metaname="location"content="province=xx省;city=xx市;coord=114.063497,22.538719">

<linkrel="shortcut icon"href="../images/0favicon.ico"type="image/x-icon">

<!— ico图标-->

<metahttp-equiv="refresh"content="2; URL =http://baidu.com/">

<metahttp-equiv="expires"content="Wed, 20 Fed 201509:21:33: GMT"/>

<metahttp-equiv="Pragma"content="no-cach"/>

<metahttp-equiv="set-cookie"content="cookievalue=xxx;expires=Wed, 20 Fed 2015 09:21:33: GMT; path=/"/>

<scriptsrc="./public/extend/jQuery/jquery-1.11.0.js"></script>

<linkhref="./public/extend/bootstrap/css/bootstrap.min.css"rel="stylesheet">

<scriptsrc="./public/extend/bootstrap/js/bootstrap.min.js"></script>

<!— layer弹出层 -->

<scriptsrc="./public/extend/layer/layer.js"></script>

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

<scriptsrc="./public/extend/elementCenter/center.js"></script>

<scriptsrc="./public/extend/SuperSlide2.1/jquery.SuperSlide.2.1.1.js"></script>

<linkhref="./public/css/main.css"rel="stylesheet">

<linkhref="./public/css/banner.css"rel="stylesheet">

<scripttype="text/javascript"src="__PUBLIC__/public/ueditor/ueditor.config.js"></script>

<scripttype="text/javascript"src="__PUBLIC__/public/ueditor/ueditor.all.min.js"></script>

<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=omVGMaKgDICeduc4B5R5B8p7&v"></script>

<scripttype="text/javascript"src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>

<linkrel="stylesheet"href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css"/>

<!— 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 : <linkrel="stylesheet"type="text/css"href="css/RRdai.css"/>

2. JQ : <scripttype="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%;

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

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

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

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

四.embed用法和属性

<embedsrc="Higher.mp3"width="200px"height="120px"></embed>

五.a用法和属性

<ahref=""target=""></a>

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

2. Target=’_blank’;在新的页面打开;[_self]本页面打开[_parent] 在父窗口中打开 [_top] 在整个窗口中打开-----<head><basetarget="_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. <ahref="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>

<formaction=""method="get">

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

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

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

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

籍　贯:<selectname="nativp">

</select><br/>

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

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

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

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

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

<br />

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

<inputtype="hidden"name="hidden"value="1001"><br/><br/>

</form>

</body>

十二.框架属性和用法

<framesetrows="104px,*,80px"border="1px"bordercolor="red">

<framesrc="frame_1.html"scrolling="no"noresize="noresize"/>

<framesetcols="200Px,*">

</frameset>

<framesrc="frame_4.html"/>

</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

在一个声明中设置所有的轮廓属性。

outline-color

设置轮廓的颜色。

outline-style

设置轮廓的样式。

outline-width

设置轮廓的宽度。

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) 让字体与文本域对齐：<labelstyle="vertical-align:top;">商品描述:</label> <textareaname="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)

8. 标签样式初始化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;}

b) a{text-decoration:none;}

d) img{border:none;}

0 0