HTML & CSS 小总结

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;
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="images/1.jpg" alt="Coffee pic" />
```
```
  13:          </p>
```
```
  14:          <p>
```
```
  15:              <img src="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="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-	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- 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-	thin;
	border-style:	solid;
	border-color:	#007e7e;
		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 {
		360px;
	border: 2px;
	border-style:	solid;
	border-color:	green;
	float:	right;
}
#floatt {
	 	300px;
	float: 	right;
}

#cle {
	clear:	right;
}
```
- PICTURE
相关阅读:
vue 实现左侧分类列表，右侧文档列表
 C# string数组与list< string >的相互转换
 c# List<string>的用法
 类数组数组
 事件
 js封装方法和浏览器内核
 dom
try...catch es5
data对象定时器
 call apply 原型原型链
原文地址：https://www.cnblogs.com/moveofgod/p/3371713.html