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 网络流量 网络流量就是网 ...
随机推荐
- Linux securecrt破解
其实,以前接触过破解的东西,但是很多东西早就忘记了,何况是在Linux环境下. 结果我常识更改时间,哦,不是更改日期,往后推4天,结果显示了26 days remaining. 所以完全可以更改日期来 ...
- Linux下IP的配置
修改ip地址1.即时生效:# ifconfig eth0 192.168.1.102 netmask 255.255.255.02.启动生效:修改/etc/sysconfig/network-scri ...
- collectionView/tableview刷新时关闭动画无效
collectionView/tableview reloadSections/reloaddata时去掉动画无效时可以尝试使用 [UIView performWithoutAnimation:^{ ...
- koa 笔记 运行错误
按照 演示的代码 直接运行会出错,大家需要调整方式. http://koajs.cn/ 要安装以下 $ npm install -g n$ n 0.11.12$ node --harmony my-k ...
- 第三百四十六天 how can I 坚持
徐斌的电脑来了,thinkpad,感觉还好,电脑也就这样,联想..不好说,不做评论,末日王者吧. 为什么写博客tab键不管用了呢. 下午又去奥体跑了一圈,好累,刚跑完腿疼,现在还好. 还没洗澡呢,都这 ...
- 邮件发送服务AWS SES，Mailgun以及SendCloud（转）
原文:http://www.l4zy.com/posts/aws_ses-mailgun-sendcloud.html 电子邮件这一已经诞生很多年的互联网基础服务并没有随着时间的推移而慢慢消亡,实际上 ...
- cocos2d-x 2.2.5 安卓工程编译的问题
原址:http://www.cocoachina.com/bbs/read.php?tid=217124 新的cocos2d-x 2.2.5 在使用Eclipse的安卓NDK 9 的编译器进行编译的时 ...
- JVM系列一：JVM内存组成及分配
java内存组成介绍:堆(Heap)和非堆(Non-heap)内存 按照官方的说法:“Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配.堆是在 Java 虚拟机启动时 ...
- Working with Other Node Types II
[Working with Other Node Types II] An SKCropNode object does not directly render content, like a spr ...
- HDU 3923 Invoker（polya定理+逆元）
Invoker Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 122768/62768 K (Java/Others)Total Su ...