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下重启tomcat,日志查看
版权声明:本文为楼主原创文章,未经楼主允许不得转载,如要转载请注明来源. 一:关闭tomcat 1.使用cd命令以及常用的tab补全命令进入到tomcat bin所在的目录(可以不用到此目录也行,楼主 ...
- NOIP2012 同余方程-拓展欧几里得
题目描述 求关于 x 的同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入输出格式 输入格式: 输入只有一行,包含两个正整数 a, b,用一个空格隔开. 输出格式: 输出只有一行,包含一个正 ...
- 嵌入式Linux内核I2C子系统详解
1.1 I2C总线知识 1.1.1 I2C总线物理拓扑结构 I2C总线在物理连接上非常简单,分别由SDA(串行数据线)和SCL(串行时钟线)及上拉电阻组成.通信原理是通过对SCL和SDA线高 ...
- 计算hashCode的常见方法
把某个非零常数值,比如说17,保存在一个叫result的int类型的变量中. 2.对于对象中每一个关键域f(值equals方法中考虑的每一个域),完成以下步骤: a.为该域计算int类型的散列吗c: ...
- 移动端自动化环境搭建-python的安装
安装python A.安装依赖 由于 Robot Framework 框架是基于 Python 语言开发的,要想使用 Robot Framework 首先需要有 Python环境. B.安装过程 下载 ...
- java 下载 断点续传
1 import java.io.BufferedInputStream; 2 import java.io.File; 3 import java.io.FileInputStream; 4 imp ...
- ASP.NET ZERO 学习 事件总线
用于注册和触发客户端的全局事件. 介绍 Pub/sub事件模型广泛用于客户端,ABP包含了一个简单的全局事件总线来 注册并 触发事件. 注册事件 可以使用abp.event.on来注册一个全局事件.一 ...
- Genome-wide Complex Trait Analysis(GCTA)-全基因组复杂性状分析
GCTA(全基因组复杂性状分析)工具开发目的是针对复杂性状的全基因组关联分析,评估SNP解释的表型方差所占的比例(该网站地址:http://cnsgenomics.com/software/gcta/ ...
- C++奇数魔方阵
理解了算法的思想就很简单了, 首先将1放到第一排的中间,然后向左上角走,当行数超过索引,则将该数放到最后一排接下来的一列中去,当列数超过索引,则放到上一排的第一列中去,若都没有超过索引,但是此时的右上 ...
- EnterpriseLibrary 6.0中DAAB独立数据库配置文件初始化
string path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "database.config"); IC ...