logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

html+css 知识整理

 昵称10504424 2013-12-16

1.学网页最好的方法：学习别人的网页。

2.文档结构

<html>(超文本标记语言)

<head> <title> </title> </head>

<body> </body>

</html>

3. <font size="7" color="red"></font> 字体标记,大小为7，颜色为红色

4. <b></b> 加粗

<strong></strong> 加强语气

<i></i> 斜体 <em></em> 加强语气

<sup></sup> 上标

<sub></sub> 下标

<br /> 换行

<hr width="80%" size="" noshade="noshade" /> 水平线、占屏幕的80%宽,大小，实体型

<u></u> 下划线

<s></s> 删除线

<p align="center"></p> 段落

<h1 align="right"></h1> 标题

5.meta标记

(1)放在head标记里面

(2)<meta name="keywords" content="value1,value2"> 设置网页关键字

(3)<meta name="description" content="对value1进行拓展"> 设置描述

(4)<meta name="author" content="作者名"> 设置作者

(5)<meta http-equiv="content-type" content="text/html;charset=gb2312"> 设置字符集 ，content-type表示中文，

(6)<meta http-equiv=="refresh" content="2;URL=http://www."/> 设置页面定时跳转

6.<!--注释标记-->

7.不懂看w3cschool帮助手册

8.<body bgcolor="red" text="white" leftmargin="0"></body>

9.某些html标记有一些默认值

10.用适合的html标记去描述我们的网页

11.80%与80px的区别

12.记住制作网页的过程

13.<blockquote cite="URL"></blockquote> 整段缩进2个字符 ，定义一个块引用，及转载的地址

14.<pre></pre> 预格式化

15.   空格

&copy; 版权号

&reg; 商标号

& &

< <

> >

" "

16.无序列表 <ul type=""></ul> <li type=""></li> type的值:disc,circle,square

有序列表 <ol type=""></ol> <li type=""></li> type的值:A a 1

自定义列表 <dl></dl> <dt></dt> <dd></dd>

17.gif(图形交换格式)：256种颜色，支撑透明色，动画

jpeg(联合图像专家组):1670种颜色

png(网络可移植格式):1670种颜色，支撑透明色

18.<img src="图片的路径" alt="文本" title="鼠标移到图片是显示的文本" border=2 width="" height="" align="" vspace=10px hspace=10px/>

19.绝对路径 相对路径 src="01.png" src="pic/01.png" src="../01.png"

20.html的作用------控制页面显示

21.表格 <table border="" bordercolor="" bordercolorlight="" bordercolordark="" cellspacing="" cellpadding="" align="" width="" height="" frame="" rules="none">

<caption align="top"></caption> 表题

<colgroup align="" valign="" bgcolor="" span=""></colgroup>

<thead>

<th></th>

<th></th>

</thead>

<body>

<tr> <td colspan="" align="" valign="" bgcolor=""> 1 </td> <td rowspan=""> 2 </td> </tr>

</body>

<foot> </foot>

</table>

22.<a href="" title="" target="_blank另外,_self自身,_parent上级,_top"></a>

23.<a href=mailto:电子邮件地址></a>

24.<a href="#name"></a>

<a name="name"></a> 锚链接

<a href="xx.html#name"></a> 跳转到xx.html页面的锚点#name

25.<form action=url method="post,get" name="">

<input type="text,password" name="" value="" size="" maxlength="" readonly="readonly" />

<input type="submit" value="确定"/>

<input type="reset" value="取消" />

<input type="button" value="确定" />

<input type="radio" name="sex" value="man" checked="cehcked"/>男

<input type="radio" name="sex" value="woman" />女

<lable for="man">男</lable>

<input type="radio" name="sex" value="man1" id="man" />

<lable for="woman">女</lable>

<input type="radio" name="sex" value="woman1" id="woman" />

<select>

<optgroup lable="地区">

<option value="1">北京</option>

<option value="2">南京</option>

</optgroup> <option value="3">广州</option>

</select>

<select name="" size="2" multiple="multiple">

<option value="1">北京</option>

<option value="2">南京</option>

</select>

<input type="checkbox" name="" value=""/>

<input type="file" name="" />

<input type="image" src=""/>

<textarea name="" cols="" rows=""></textarea>

<fieldset> <legend></legend> </fieldset>

</form>

26.web标准组成:结构xhtml、表现css(层叠样式表)、行为javascript 好处：表现和内容分离

27.<style type="text/css"> 选择器{属性:值；} </style>

29.想用一个特殊的字体，可以考虑用图片表示；设计的时候尽量用通用的字体

30.长度单位:em px

31.网页方式 (1)内嵌式：<p style="color:red;"></p>

(2)嵌入式：<style type="text/css"></style>

(3)外部链接式：<link href="" rel="stylesheet" type="text/css" />

(4)导入式：<style type="text/css"> @import url(""); </style>

32. 1.标签选择符: h1

2.类选择符: .

3.id选择符: #

4.通配符：*

5.包含选择符：body p（常用）

6.选择符分组：p,div,body

7.标签指定式选择符：p#class

8.组合选择符：h1.p1,#conternt h1,h2

33.css样式特点 1.继承：子元素会继承父元素的某些样式

2.层叠：子元素的某些样式会覆盖父元素的样式

3.后面的样式，会覆盖前面的样式

34.css样式的优先权 1.内嵌--嵌入--外部链接--导入 2. !important 提权

35.文本 1.text-indent:2em

2.text-align:left center right

3.white-space(对象中空白处理):normal pre nowrap

4.vertical-align(元素的垂直对齐方式):sup sub top text-bottom

5.color:#FFFFFF，red

6.font-size:12px

7.font-family:Arial,'宋体'

8.line-height:1.5em

9.font-weight:bold,normal(正常)

10.font-style:normal italic(斜体)

11.text-decoration:none underline overline line-through(删除线)

12.letter-spacing(字符间距):normal length

13.word-spacing(单词间距):normal length

36.伪类 1. :link 未访问

2. :visited 已经访问

3. :hover 鼠标移动到链接上

4. :active 鼠标按下链接 a.a1:link{}

37.命名方法 1.驼峰：navMenuRedButton

2.帕斯卡：NavMenuRedButton

3.匈牙利：red_navMenuButton

38.盒子模型 content 内容

padding 内填充(不要轻易为外层添加这个属性，因为会改变外层的宽度)

border 边框

margin 外填充(不要轻易为外层添加这个属性，因为会改变外层的宽度) 公式：=content+(padding*2)+(border*2)+(margin*2)

39. margin:20px :表示上右下左

margin:20px 20px : 表示上下、右左

margin:20px 20px 20px : 表示上、右左、下

margin:20px 20px 20px 20px

margin:0 auto; 表示盒子居中

40. border:1px solid red :表示上右下左边框像素为1，实线，红色

41.将我们用到的元素，默认内外边距归零

42.padding:10px :表示上右下左

43.列表 list-style:none outside none; :表示列表样式为无

44.元素的分类 1.块状元素：div,p, body,h1~h6 可以作为容器且独占一行

2.内联元素：a,span

3.可以通过：内联元素：{display:block;} 把内联变成块状，这样子设置内联元素的高宽就起作用

45.背景 background:颜色 图片 平铺方式 固定方式 位置

background-color:gold; background-image:url(); background-repeat:no-repeat; background-position:center center 水平垂直居中 background-attachment:fixed 固定图片 (scroll滚动) IE6只有html与body两个元素，支撑这 个功能

46.css精灵 思路1：准备两张大小相同，内容不同的图片，一张正常，一张通过伪类进行启用

思路2：准备一张合成图片，通过background-position:进行定位。

47.布局 1.默认文件流

2.浮动 ：float:left; 浮动原理：从文件流中分离出来，原先占据的位置就被后面的对象填上。 如果想多个快同一列，把浮动方向一致就可以了

3.绝对定位 : position:absolute 原理：从文件流中分离出来，相对的对象如果没有指定就是body，用position:relative在对象上 指定 相对定位 : position:relative top="" left="" 原理：不从文件流中分离出来，相对的对象是自己本身

4.清除浮动：clear:both; 消除浮动对子类的影响 消除浮动对父类的影响 1.增加一个空子类，类名为.class{clear:both}; 2.overflow:hidden 子类不能有定位布局 3..clearFix:after{ clear:both; display:block; visibility:hidden; height:o; line-height:0; centent:""; } .clearFix{zoom:1;} 48.溢出 overflov:visible(不剪切也不添加滚动条) hidden(不显示超过对象尺寸的内容) scroll(显示滚动条) auto(剪切或者滚动条)

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 昵称10504424 > 《工作》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多