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 网络流量 网络流量就是网 ...
随机推荐
- Cracking the Code Interview 4.3 Array to Binary Tree
Given a sorted (increasing order) array, write an algorithm to create a binary tree with minimal hei ...
- JavaScript中,{}+{}等于多少?
最近,Gary Bernhardt 在一个简短的演讲视频“Wat”中指出了一个有趣的 JavaScript 怪癖: 在把对象和数组混合相加时,会得到一些意想不到的结果. 本篇文章会依次讲解这些计算结果 ...
- Chapter9：顺序容器
现代C++程序应该使用标准库容器,而不是更原始的数据结构,例如内置数组. 新标准库容器的性能几乎肯定与最精心优化过的同类数据结构一样好. 当我们用一个对象来初始化容器时,或将一个对象插入到容器中时,实 ...
- C#/.net给textbox添加回车事件
前端js代码,放到<head>标签下 <script type="text/javascript"> function EnterTextBox(butto ...
- ios自定义View自动布局时计算大小
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Impleme ...
- 【转】使用json-lib进行Java和JSON之间的转换
原文链接:http://www.cnblogs.com/mailingfeng/archive/2012/01/18/2325707.html 1. json-lib是一个java类库,提供将Java ...
- jspace2d——A free 2d multiplayer space shooter
http://code.google.com/p/jspace2d/ —————————————————————————————————————————————————————————————— We ...
- Labview中局部变量和全局变量
局部变量的作用域是整个VI,它用于在单个VI中传输数据: 全局变量的作用域是整台计算机,它主要用于多个VI之间共享数据
- hdu 2084 数塔 (简单dp)
http://acm.hdu.edu.cn/showproblem.php?pid=2084 数塔 Time Limit: 1000/1000 MS (Java/Others) Memory L ...
- Unity3d:编辑器中运行正常，发布后的exe提示找不到文件
解决方案1:查看文件路径拼写方式,如果是用“+”拼接的,请改用System.IO.Path.Combine()方式拼接.经过测试,两种拼接方式打印出来的路径是一样的,但为什么 加号 的方式拼接unit ...