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下给mysql创建用户并分配权限及问题解决方案
在linux下安装mysql请参考在linux系统中安装mysql服务器详细步骤 1.新建用户 //登录MYSQL @>mysql -u root -p @>密码 //创建用户 mysql ...
- ajax 提交數據
$.ajax({ type: "get", async: false, url: "/book/UpdateSession", data: { }, dataT ...
- javascript高级程序设计--笔记01
概述 JavaScript的实现包含三个部分: 1 核心(ECMAScript) 提供核心语言功能 2 文档对象模型(DOM) 一套提供了访问以及操作网页内容的API 3 浏览器对象模型( ...
- Javascript调用ActiveX示例
Javascript调用ActiveX示例 写一个ActiveX控件比如叫做MyNameSpace.SecreteInfo,安装在客户机器上,这样可以通过c++获取到机器的几乎任何信息. 在网 ...
- delegate事件绑定
为了代码的健壮性,绑定事件之前先解绑再进行绑定. var _$div = $("#id");_$div.undelegate("click mouseover mouse ...
- 模拟ATM机将输入的数据插入数据库
ATM抽象类 public abstract class ATM { private double balance; private String idcard; private String pas ...
- Linux_07------Linux的用户和用户组管理
段 * 用户名:密码占位符:用户编号:用户组编号:用户注释信息:用户主目录:shell类型 * 每一行对应一个用户 * * /etc/shadow 存储用户密码 * 与passwd配置文件一一对应, ...
- VC++ MFC中如何将应用程序的配置信息保存到注册表中（二）
在上一篇中介绍了几个写入注册表数据和读取注册表数据的接口,并介绍了使用方法. 这一片教你如何使得你的应用程序在下次打开时保持上一次关闭前的状态. 在上一篇添加的代码的基础上,要添加WM_CLOSE消息 ...
- JAVA课程实验报告 实验五 Java网络编程及安全
北京电子科技学院(BESTI) 实 验 报 告 课程:Java程序设计 班级:1353 姓名:韩玉琪 学号:20135317 成绩: 指导教师:娄嘉 ...
- Intellij_idea-14官方快捷键中文版
编辑类: Ctrl+Space 基本代码实例(类.方法.变量) Ctrl + Shift + Space 智能代码实例(根据需要的类型过滤方法和变量) Ctrl + Shift + Enter 完整的 ...