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

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 小总结的更多相关文章

  1. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  2. HTML+CSS小实战案例

    HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...

  3. CSS小tip整理

    CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...

  4. css小细节罗列

    有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...

  5. css小随笔（二）与通用样式

    51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟cs ...

  6. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  7. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

  8. html+css小总结

    html+css小总结 1.块级元素 <div> <h1> <hr /> <p> <pre> <ol> <ul> & ...

  9. 【前端词典】几个有益的 CSS 小知识

    今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码:   HTML 代码:   记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...

  10. 几个有益的 CSS 小知识

    样式的顺序 CSS 代码:   HTML 代码:   记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 ...

随机推荐

  1. ios 流媒体 资料

    (1)“Real-Time Streaming Protocol (RTSP)”比较官方的资料(链接). (2)“ffmpeg”在百度百科的简介(链接). (3)“ffmpeg”的官网:http:// ...

  2. web项目首页提示404

    我也是服了,估计是项目有问题,只能找jsp,找不到html和htm.把list中多余的都删掉,只保留index.jsp <welcome-file-list> <welcome-fi ...

  3. Science：给青年科研工作者的忠告

  4. BZOJ 1088

    真是智商不够, 智商题:.... 假如:第1,2个格子已知,然后根据第二列的情况,就可以把所有满足的情况推出来,又萌萌哒.. 无耻攒字数: #include<stdio.h> using ...

  5. asp.net各种类型视频播放代码(全)

    1.avi格式 代码片断如下: <object id="video" width="400" height="200" border= ...

  6. ubuntu 点点滴滴

    pptpd http://linux.cn/article-3376-1.html 命令行升级ubuntu版本 do-release-upgrade -d  寻找最新的稳定版本,加上-d参数则包括不稳 ...

  7. 【面试题043】n个骰子的点数

    [面试题043]n个骰子的点数 题目:     把n个骰子扔在地上,所有骰子朝上一面的点数之和为s, 输入n,打印出s的所有可能的值出现的概率.   n个骰子的总点数,最小为n,最大为6n,根据排列组 ...

  8. URAL 1517 Freedom of Choice(后缀数组，最长公共字串)

    题目 输出最长公共字串 #define maxn 200010 int wa[maxn],wb[maxn],wv[maxn],ws[maxn]; int cmp(int *r,int a,int b, ...

  9. POJ 2092

    #include <iostream> #include <algorithm> #define MAXN 10005 using namespace std; int _m[ ...

  10. mysql 中的bool值

    boolean在MySQL里的类型为tinyint(1) 很奇怪.