HTML & CSS 小总结
1. web 主机代理商 web hosting company, 让他们的服务器为你的页面服务
2. 选择网站名字 例如: www.1234.com
3. 寻找 把文件从电脑传到主机的途径
4. 把新网站告诉朋友
域名：用来定位你的网站的独一无二的名字 1234.com
网站名：www.1234.com
http://www.1234.com/index.html ( 其中后面的 / 就是服务器根目录, index.html是页面文件 )
http://， 输入的地址是URL, 统一资源定位符, http://是传输协议
目标锚: 主要目的是链接到比较长的页面中的特定位置, 以便浏览者不用滚动页面来找
<a href="index.html#chai">See Chai Tea</a> 加目标锚的方法：网页后边加#号定位
这里的 chai 是html元素的id ( 这个目标锚可以实现本网页内的快速定位, 而非查找其他网页 )
w3c 校验器, 检查你的网页是否符合标准 http://validator.w3.org
div 用于逻辑划分块
span 只一样内 某些内容的组合, 以便有统一的式样， 比如一个表里的某一行
关于元素 a
一个链接可以处于多种不同状态, 未访问过, 已访问过, 鼠标停留 等等 使用伪类
a:link {
color: green;
}
一般认为合理的顺序是: link, visited, focus, hover, active
-- css
css 中的类可以定义多个元素一起, 表示他们在一个类里, 具体办法是
p.greentea {} 这样, 只定义段落中是 greentea 的类得式样
.greentea 这样, 就定义所有的类为 greentea 的元素的式样
一个元素可以在多个类中, <p class="greentea raspberry blueberry">
http://jigsaw.w3.org/css-validator/ css 校验器
css 属性
color: 用来设置文本元素的字体颜色
16进制：最常用, 每两位数字代表 红色, 绿色, 蓝色, #cc6600 #代表是16进制数,
可以使用在线颜色表查找对应颜色
红,绿,蓝: rgb(80%, 40%, 0% ) 或 rgb(255, 255, 0);
颜色名字 ( 名字很少, 只有17种 ) yellow
font-weight: 控制文本的粗细(bold, normal)
left: 元素如何放置它的左侧
line-height: 文本之间的行间距
top: 控制元素顶部位置
background-color: 背景颜色
border: 元素周围边框
margin: 想在元素边缘和内容之间有一些空间, 边界
font-size: 把文本变大变小
定义大小可以用像素 : font-size: 14px;
定义大小可以用百分数 : font-size: 150%; ( 相对于父元素 )
定义大小可以用倍数: font-size: 1.2em; ( 表明放大父元素1.2倍 )
定义大小可以用关键字 : font-size: small; ( xx-small, x-small 等等, 基本上不同级别相差20% )
技巧: 选择一个关键字(推荐用small或medium)定义body字体大小, 也就是默认网页字体
用em或百分比把别的元素的字体大小指定为参照body字体大小的尺寸
这个技巧的好处是, 当需要修改字体时, 只需要修改默认字体就可以达到全部都变的作用.
font-style: italic; 斜体 not italic
text-align: 本文对齐样式
font-family: 字体系, 例如 Verdana 等(用于不一样的场合, 如报纸印刷 等等 )
1. sans-serif family : 可读性好
2. serif family: 报纸印刷
3. monospace family: 等宽字体
4. Cursive family: 比较有趣
5. Fantasy Family: 比较有趣
text-decoration: 给文本添加更多样式,下划线等 ( underline, overline, line-through, none )
盒子: 由里到外
内容区 -> 补白 -> 边框 -> 边界 ( 有点类似夹心, 共3层 )
除了大小之外, 不能编辑补白和边界的其他方面.
可以指定多个式样表，顺序很重要, 一个式样表会覆盖在它之前链接式样表中的式样, 最下边的优先权最高
块元素是从头流到尾, 每两个元素之间有换行( 默认占满屏幕整个宽度 )
内联元素在水平方向上一个接一个地流, 从左上方到右下方( 宽度不够时, 就会向下 )
当浏览器并排放置两个内联元素, 这两个元素之间的空间是两个内联元素边界之和
当浏览器并列放置两个块元素，这两个元素之间(上下) 是两个块元素中较大的边界值
float 属性让一个元素尽可能靠左或靠右, 然后让它后面的元素流到这个元素的周围.
飘移元素会放在正常元素之上, 就感觉它飘起来一样, 因为飘移元素不再是正常流的一部分
====================流动布局========= important ==================================
flow: 网页正常的布局流, 块元素从上到下, 会有换行, 内联元素从左上到右下, 当碰到
float时, 理解 float的元素为漂移, 即飘到整个网页之上, 但是 float最好是放置在块级别上,
例如<p>, 那么 这段文件会飘在网页上, 它下边的html元素会向上跟它高度对齐, 并且会“围绕”
着它，将自己的内容显示出来.
无论飘移元素是左还是右, 都不会影响它后边的元素正常的流布局, 即 后边元素的高度和“围绕”
做布局时, 跟编程一样, 先从大的逻辑环境着手, 比如先分2块地方, 2块地方再继续分别跟多
要有逻辑层次
左右分栏问题：
例如：当你需要左右分两边时, 由于float是漂浮, 比如右边设置的是漂浮, 那么你可以把左边部分
的边界设置的比右边漂浮部分的宽度宽一些, 这样其实漂浮内容是覆盖在左边内容上, 但是由于左边
边界很宽, 所以看起来像是分了左右部分, 例如漂浮部分宽度是 280, 左边部分边界就可以设置为330
左边或右边, 只能固定一遍宽度, 一般固定漂浮宽度, 然后让别人“围绕”，如果两边都设置宽度, 当浏览器宽度
变更时, 就会出现两边谁也不管谁, 出现重叠或大缺口现象
clear 属性, 不准许漂浮元素出现在它的左,右. 例如 clear: right; 在页脚中使用可以防止页脚上移
因为 页脚元素不准许漂浮出现在它的左右.
=================凝胶布局========== important ====================================
介于冻结布局和流动布局之间
内容区的宽度是固定的，单边界随着浏览器窗口扩大或缩小
凝胶物布局锁定了页面中内容区得宽度，单把它放到浏览器中央.
把元素的左右边界设置为 aoto, margin-left: auto; margin-right: auto
=================绝对布局========== important ====================================
绝对布局来分栏
position: absolute; ( static, absolute, fixed, relative )
top: 100px;
right: 200px;
width: 280px;
绝对布局也在流布局以外
流元素中的内容根本不知道绝对布局的存在
设置表格边框的间距
border-spacing: 10px30px;
border-collapse: collapse; // 压缩表格边框为一个边框
可以将表格中的单元格扩展为多行多列
<td rowspan="2" colspan="2"> // 扩展为 2 行, 2 列
table 可以嵌入<td> 标签中嵌入 <table>
table table th { // 嵌套表格的式样
background-color: white;
}
<ul>
<li>
</ul>
li {
list-style-type: disc;
list-style-image: url(images/backpack.gif);
}
xhtml 头文件
<!DOCTYPE html PUBLIC "-//W3C//DTD/ XHTML 1.0 Strict// EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8895-1" />
表单内的提交元素只要掌握 3 个就够了
<input> // radio 这个选项的name属性是一样的, 比如你有一系列值为“red” "green" "blue" 而名字为 "color"的单选按钮
这些按钮名都是color, 不过某一时间只能选择一个按钮, 所以这一组的安牛逼命名为一个名字才有意义.
<select>
<textarea>
表单通信方式
post: 把表单变量打包后隐藏在后台发送给服务器
get: 把表单变量打包后, 不过在它想浏览器发送请求之前, 附加在URL末端, 例如 baidu
什么时候需要使用GET方式呢？当你的WEB应用程序返回一个搜索结果列表时，你可能希望用户能够标记返回的结果，
这样用户不用再填满表单就能看到结果了.
get 是用来从服务器上获得数据, 而post是用来向服务器上传递数据
get 传输数据量下, 主要受URL长度限制
get 以 URL 字串本身传递数据参数, 在服务器端可以从"QUERY_STRING"这个变量中直接读取, 效率高, 但缺乏安全性,
也无法用来处理复杂数据
Post 传输方式会打包在数据报中传输, 从CONTENT_LENGTH 这个环境变量中读取, 便于传送较大一些数据, 安全性高, 不会暴露数据在浏览器地址中,
效率相对会受到影响
表单中, name属性十分重要, 当单击提交按钮时, 浏览器提取所有的名字连同它们的值一起
发送到服务器。
表单使用表格布局比较方便
另外 filedset 和 legend 也可用于表单中, 组别内容时
label 也可以用于表单中, 这样只要点到这个字, radio就会跟着变
文件传输
<input type="file" name="doc" />
为了提高网页排序并告知搜索引擎网页相关内容, 需要<head>添加两个<meta>标签，一个列举关键字, 另一个提供内容描述
<meta name=“description” content="This would be your description of what is on your page">
<meta name="keywords" content="keyword 1, keyword 2" />
例子
-HTML
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3: <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
4: <head>
5: <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
6: <title>Head First Lounge</title>
7: <link type="text/css" href="CoffeeRomm.css" rel="stylesheet" />
8: </head>
9: <body>
10: <h2>Weekly Elixir Specials</h2>
11: <p id="amazing">
12: <img src="data:images/1.jpg" alt="Coffee pic" />
13: </p>
14: <p>
15: <img src="data:images/3.jpg"/ alt="Coffee logo" />
16: </p>
17: <h3>Lemon Coffee</h3>
18: <p class="guarantee">
19: The ultimate healthy drink, this elixir combines
20: herbal botanicals, minerals, and vitamins with
21: a twist of lemon into a smooth citrus wonder
22: that will keep your immune system going all
23: day and all night.
24: </p>
25:
26:
27: <div id="cats">
28: <h3>Chai Chiller</h3>
29: <p>
30: Not your traditional chai, this elixir mixes maté
31: With chai spices and adds an extra chocolate kick for
32: a caffeinated taste sensation on ice.
33: haha<br />
34: </p>
35: </div>
36: <p>
37:
38: <img id="floatt" src="data:images/2.jpg" alt="Coffee pic"/>
39: fdafodalfdkasfdlasfjdklasfjkldasjlkfdajklsfjdklasjfkdajkflkjdajkfldjaklfdjffffffff
40: fdjlakfdjaklfdjasklfdasjklfffffffffffffffffffffffffffffffffffffffffffffffffffff
41: ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
42:
43: </p>
44: <h3>Black Brain Brew</h3>
45: <p id="cle">
46: Want to boost your memory ? Try our Black Brain Brew
47: elixir, made with black oolong tea and just a touch
48: of espresso. Your brain will thank you for the boost.
49: </p>
50: <p>
51: Join us any evening for these and all our
52: other wonderful
53: <a href="aaa/aaa.html" title="Head First Lounge Elixirs">elixirs</a>
54: </p>
55: p>
56: Want to boost your memory ? Try our Black Brain Brew
57: elixir, made with black oolong tea and just a touch
58: of espresso. Your brain will thank you for the boost.
59: </p>
60: <p>
61: Join us any evening for these and all our
62: other wonderful
63: <a href="aaa/aaa.html" title="Head First Lounge Elixirs">elixirs</a>
64: </p>
65: <form action="http://www.nihao.com" method="POST">
66: <p>Just type in your name (and click Submit) to
67: enter the contest:<br />
68: First name: <input type="text" name="firstname" value="" /><br />
69: Last name : <input type="text" name="lastname" value="" /><br />
70: Sex : <input type="radio" name="sex" value="" /><br />
71: <input type="submit" value="OK"/>
72: <textarea name="comments" rows="10" cols="48"></textarea>
73: <select name="characters" multiple="multiple">
74: <option value="Buckaroo">Buckaroo Banzai</option>
75: <option value="Tommy">Perfect Tommy</option>
76: </select>
77: </p>
78: <p>Extras: <br />
79: <input type="checkbox" name="extras[]" value="gifwarp"/> Gift warp<br />
80: <input type="checkbox" name="extras[]" value="catalog" checked="checked" />Include
81: <input type="file" name="doc" />
82: </p>
83: </form>
84:
85: </body>
86:
87: </html>
- CSS
body {
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6 em; /* 相当于字体大小的1.6倍 */
}
h1, h2 {
color: #007e7e;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 130%;
}
/* class */
.guarantee {
border-color: black;
border-width: 1 px; /* thin, medium, thick */
border-style: solid; /* dotted, double, dashed, groove, inset, outset, solid, ridge */
border-top-color: black; /* 定义边框的一侧 */
border-top-style: dashed;
border-top-width: thick;
background-color: #a7cece; /* red, rgb(255,255,0), #ff0000 */
padding: 25px; /* 增加 补白, 左下右上 */
padding-left: 80px; /* 左侧补白 */
margin: 30px; /* 增加 边界 */
margin-right: 250px; /* 增加右侧边界 */
/* 插入背景图片, 用 html 的 <img> 也可以, background-image 只能用于给元素设置背景图片 */
background-image: url(images/background.gif);
background-repeat: no-repeat; /* repeat-x, repeat-y, inherit, repeat */
background-position: top left;
}
/* id */
#footer {
color: red;
}
p#footer {
color: red;
}
#cats {
background-image: url(images/bg1.jpg);
border-width: thin;
border-style: solid;
border-color: #007e7e;
width: 200px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-left: 20px;
text-align: center;
background-repeat: repeat-x;
line-height: 1.5em;
}
div h3 {
font-size: 180%;
}
#footer h3 {
}
a:link {
color: green;
}
a:visited {
color: red;
}
a:hover {
color: yellow;
}
#amazing {
width: 360px;
border: 2px;
border-style: solid;
border-color: green;
float: right;
}
#floatt {
width: 300px;
float: right;
}
#cle {
clear: right;
}
- PICTURE
HTML & CSS 小总结的更多相关文章
- css小技巧（1）
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- HTML+CSS小实战案例
HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...
- CSS小tip整理
CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...
- css小细节罗列
有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...
- css小随笔（二）与通用样式
51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟cs ...
- iconfont字体图标和各种CSS小图标
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
- CSS 小技巧
CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...
- html+css小总结
html+css小总结 1.块级元素 <div> <h1> <hr /> <p> <pre> <ol> <ul> & ...
- 【前端词典】几个有益的 CSS 小知识
今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...
- 几个有益的 CSS 小知识
样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 ...
随机推荐
- 重定向 vs output redirect
http://asawicki.info/files/visual_cpp_redirect.png http://asawicki.info/news_1496_redirecting_output ...
- 浅谈c#枚举
结构中的成员可以赋值,枚举呢....是取值,只读的 以下情况可以考虑将类创建为结构:(1)如果一个类其中的字段非常少,所有字段占用的内存总量不超过8.16字节:(2)如果一个类中的字段都是值类型: 关 ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- Request/Server模式
Request-------HTTP/SOAP----------Server Request模块只是Client的一小部分,Client还有HTML, Data(Text/JSON/HTML/XML ...
- POJ 1468
#include <iostream> #define MAXN 5005 using namespace std; struct node { int b_x; int b_y; int ...
- MYSQL判断某个表是否已经存在
方法一.You don't need to count anything. SELECT 1 FROM testtable LIMIT 1; If there's no error, table ex ...
- 使用动态SQL语句实现简单的行列转置（动态产生列）
原始数据如下图所示:(商品的销售明细)date=业务日期:Item=商品名称:saleqty=销售数量: -- 建立测试数据(表)create table test (Date varchar(10) ...
- Codeforces Round #336 (Div. 2) D. Zuma 区间dp
D. Zuma Genos recently installed the game Zuma on his phone. In Zuma there exists a line of n gems ...
- MongoDB 安装，启动与基本使用
一.MongoDB简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式.Mongo使用C++ ...
- Fiddler如何抓取使用了SSL或TLS传输的Android App流量
上篇文章介绍了Burpsuite如何抓取使用了SSL或TLS传输的Android App流量, 那么使用Fiddler的时候其实 也会出现与burpsuite同样的情况,解决方案同样是需要将Fiddl ...