html+css 知识整理
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.itcast.cn"/> 设置页面定时跳转
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. 空格
© 版权号
® 商标号
& &
< <
> >
" "
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(剪切或者滚动条)
html+css 知识整理的更多相关文章
- html+css知识整理
1.学网页最好的方法:学习别人的网页. 2.文档结构 <html>(超文本标记语言) <head> <title> </title> & ...
- CSS知识整理
1. 权重问题(CSS优先级): 继承或 * :0,0,0,0 标签:0,0,0,1 每个类,伪类:0,0,1,0 每个ID:0,1,0,0 每个行内式:1,0,0,0 !important:无穷大 ...
- css与JS知识整理
CSS知识 CSS选择器:基础中的核心,选择器指明了{}中“样式”作用的对象,也就是“样式”作用于网页中的哪些元素. CSS选择器类型:一共三大类. 基础选择器 属性选择器 组合选择器 ...
- 《HTML与CSS知识》系列分享专栏
收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站 ...
- Web前端基础怎么学？ JavaScript、html、css知识架构图
以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...
- js事件(Event)知识整理
事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下 鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemo ...
- CSS知识回顾--读《CSS 那些事儿》笔记
由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...
- Kali Linux渗透基础知识整理（四）：维持访问
Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...
- Kali Linux渗透基础知识整理（二）漏洞扫描
Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...
随机推荐
- Mysql的AB复制(主从复制)原理及实现
Mysql复制(replication)是一个异步的复制,从一个Mysql 实例(Master)复制到另一个Mysql 实例(Slave).实现整个主从复制,需要由Master服务器上的IO进程,和S ...
- 父视图 使用 UIViewAnimationWithBlocks 时,如何让子视图无动画
tableView使用 UIViewAnimationWithBlocks 时 上面的cell也会一起出现动画, 所以在设置cell的时候 添加 [UIView performWithoutAnima ...
- openjdk sunjdk区别
使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的openjdk,那么到底什么是openjdk,它与sun jdk有什么关系和区别呢? 历史上的 ...
- Operation not applicable
ClientDataSet.DataSetProvider1 Operation not applicable ClientDataSet1->Open(); 解决办法 1.update new ...
- C#操作Access的一些小结
C#操作Access的一些小结 好久没有写blog,感觉今年一年都没怎么真正开心过,整天有一些事围绕在身边,使心情难以平静下来,真正写点有意义的东西.博客园是天天看的,看得多,写的少,偶尔也是Copy ...
- JSF 2 panelGrid example
In JSF , "h:panelGrid" tag is used to generate HTML table tags to place JSF components in ...
- maven 部署到tomcat 的 resource问题
1.maven resource结构 如图,我将resoures下建立四个子文件夹,base存放的是不随环境变化的配置项,而其他三个均是对应环境的配置文件. 2.问题 我执行maven命令是没有的,但 ...
- (转载)ETL利器Kettle实战应用解析系列一【Kettle使用介绍】
http://www.cnblogs.com/limengqiang/archive/2013/01/16/kettleapply1.html ETL利器Kettle实战应用解析系列一[Kettle使 ...
- POJ 2378 Tree Cutting （DFS）
题目链接:http://poj.org/problem?id=2378 一棵树,去掉一个点剩下的每棵子树节点数不超过n/2.问有哪些这样的点,并按照顺序输出. dfs回溯即可. //#pragma c ...
- iOS Framework lipo报错 lipo: can't map input file
fatal error: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ ...