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&eacute;
  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

HTML & CSS 小总结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 小总结

HTML & CSS 小总结

HTML & CSS 小总结

上一篇:Windows API 之 CreateFile


下一篇:uC/OS-II 内存管理