前言：由于出差項目需要，學(xué)習(xí)一下html+css基礎(chǔ)和前人的經(jīng)驗總結(jié)，在此做下備注井赌，當然如果能幫到有需要的小伙伴再好不過。
html介紹
html是通過指定便簽來顯示內(nèi)容的贵扰，每個便簽都有相應(yīng)的開始和結(jié)束仇穗，建議都用小寫，層次間有相應(yīng)的縮進拔鹰。創(chuàng)建一個網(wǎng)頁文件很簡單：新建一個文本文件仪缸，將其命名為xxx.html或者xxx.htm（注意后綴名問題）
常用標簽介紹
Head
Head標簽中的內(nèi)容是不會在網(wǎng)頁中顯示的，一般設(shè)置標題,引入外部文件列肢，或者設(shè)置相應(yīng)的meta等信息
<head>
<title>index</title>
<meta name="author" content="Administrator" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
文本標簽
- 換行標簽
對于html而言恰画，代碼中的換行不會在頁面中顯示。需要使用相應(yīng)的瓷马，<br/>和<p></p>拴还。 - 標題標簽
<h1>~~~<h6>依次變小，用于網(wǎng)站的標題
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
效果如下
- 列表標簽
1.ul和li
<ul>
<li>你</li>
<li>我</li>
<li>他</li>
</ul>
效果如下
注意：
2.dl 欧聘，dt片林，dd：它們分別代表列表，標題和數(shù)據(jù)怀骤。
<dl>
<dt>水果</dt>
<dd>蘋果</dd>
<dd>橘子</dd>
</dl>
效果：
-
常用其它標簽
<a>超鏈接
//除了標簽還有自己的屬性费封，屬性全部在開始標簽寫多個標簽用空格分割
<a class="xyj" target="content" title=" 標題">我是個鏈接</a>
link是默認樣式，visited為點擊之后的效果蒋伦，hover為鼠標放上去的效果弓摘，注意：對于ie而言不會繼承l(wèi)ink的效果，所以在一般在前面會加上這個visited屬性痕届。
a.xyj:link,a.xyj:visited {
text-decoration:none;
font-size:12px;
color:#226;
}
a.xyj:visited {
color:#a21;
}
a.xyj:hover {
color:#191;
text-decoration:underline;
}
<img> 標簽用來展示圖片
//alt表示圖片沒加載成功顯示的文本
<img src="/i/eg_tulip.jpg" alt="上海鮮花 港 - 郁金香" />
<span> 常常嵌套在其它標簽中韧献，用來對文本進行簡單的控制末患。
| 注釋標簽 | |
|---|---|
| 小于標簽(<) | & lt; |
| 大于標簽(>) | & gt; |
| 空格 | & nbsp; |
| copy 符號（?） | & copy; |
| @符號 | @amp |
- 容器標簽
1.div
<div>塊級元素，用做容器锤窑，放置大量內(nèi)容
div是塊級元素獨占一行默認從上往下排列
<div > 我是一個div </div>
<div >我是另一個div </div>
2.表格
表單
常用的表單標簽:原則上所有的表單標簽都要放置在form標簽中
Input標簽可以用來設(shè)置文本框璧针，密碼框等數(shù)據(jù)
<form action="01.html">
<!--text表示文本輸入框，password代表密碼輸入框-->
用戶名:<input type="text"/><br/>
密碼:<input type="password"/><br/>
性別:<input type="radio" value="男" name="sex"/>男
<input type="radio" value="女" name="sex"/>女<br/>
興趣:<input type="checkbox"/>唱歌<input type="checkbox"/>打豆豆
<input type="checkbox"/>跳舞<br/>
籍貫:<select>
<option>北京</option>
<option>上海</option>
<option>廣東</option>
</select><br/>
<!--多行文本渊啰，cols表示多框探橱，rows表示多高-->
個人簡介:<textarea cols="50" rows="10"></textarea><br/>
<!--submit提交，當提交時會鏈接到action中-->
<input type="submit" value="用戶注冊"/>
<!--button表示按鈕绘证，點擊后沒有任任何控制-->
<input type="button" value="按鈕"/>
</form>
效果
3.Frameset標簽用與協(xié)調(diào)管理其它界面html文件走搁，靜態(tài)加載，cols表示橫向切分布局迈窟，rows，縱向切分布局
<!--第一列被設(shè)置為瀏覽器窗口的寬度的25%忌栅。第二列被設(shè)置為75%车酣。加入noresize = " noresize阻止用戶調(diào)整大小。
-->
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
CSS樣式表
HTML僅僅只是做數(shù)據(jù)的顯示索绪，CSS是對頁面的修飾湖员。
樣式表有三種方式進行編寫
1、內(nèi)嵌樣式：
嵌套在標簽中瑞驱，通過style屬性來聲明樣式娘摔，內(nèi)嵌樣式只對當前標簽有效，內(nèi)嵌樣式唤反，最后執(zhí)行凳寺，會把head中style樣式替換掉。
<h2 style="color:#212267;text-decoration:underline;font-size:12px">css文件</h2>
2彤侍、在html的title通過style標簽統(tǒng)一為該頁面編寫樣式肠缨，表示對頁面中對所有標簽都有效
<head>
<title>css樣式</title>
<style type="text/css">
／/對頁面中對所有h2標簽都有效
h2{
background:#aa1222;
color:#fff;
}
</style>
</head>
3、將樣式表文件編寫到一個xxx.css的文件中盏阶，然后在head中引入該樣式表文件,注意:對于樣式表而言晒奕，后定義的會把先定義的樣式表覆蓋掉
<head>
<title> 我是標題</title>
<link rel="stylesheet" href="css02.css" type="text/css"/>
</head>
選擇器
1、標簽選擇器：會對頁面中的所有標簽都有效
／/對頁面中所有h2標簽都有效
h2{
background:#aa1222;
color:#fff;
}
2名斟、ID選擇器（獲取id為xx的標簽）：可以對頁面中某個標簽進行樣式的設(shè)置脑慧，使用#號進行設(shè)置，注意匹配的id都適用這個標簽砰盐。
#d1,#p2 {
font-size:19px;
background:#999;
}
3闷袒、類選擇器（獲取標簽中class=xxx的標簽）：可以選擇頁面中的一組標簽，class="xxx的一組標簽
用.表示楞卡，可以加載多個類霜运，用空格來隔開
.p1 {
color:#54a;
font-size:16px;
}
// 樣式
<p class="p1 nav_last">
Apache Whisker allows a...
</p>
4脾歇、包含選擇符（獲取某個標簽中的所有的子標簽）
表示此標簽下的所有span都應(yīng)用這個css樣式，
注意：當使用了包含的操作符之后淘捡，它的加載時間比使用class的加載時間要低藕各，所以如果此時再來定義一個class的樣式，不會把使用包含的樣式覆蓋掉焦除。
div span {
background:#0ff;
}
5激况、子對象選擇符(獲取某個標簽的第一級子標簽)
僅對第一級生效
div>span {
background:#f0f;
}
6、分組選擇符（可以同時設(shè)定多個標簽膘魄，使用逗號進行分割）乌逐，
//d1，p2都使用該樣式创葡。
#d1,#p2 {
font-size:19px;
background:#999;
}
布局
1浙踢、盒子模型(box model)默認
2、span和a相類似的文本標簽
僅僅只是用來設(shè)置文本灿渴，諸如:a和span對于這兩個標簽而言洛波，注意：在W3C的標準中默認是不能進行width等樣式進行修飾的，所以直接為這些標簽設(shè)置width是沒有作用的骚露，需要通過display:block之后才有作用蹬挤。但是對于IE而言就是有作用。
3棘幸、padding的兼容性
如果一個標簽設(shè)置了height或者width,再進行padding的設(shè)置焰扳，對于IE而言，padding的值不會加到height或者width中（如果：一個div的高度為40,而padding-top:20;此時這個div的高度依然是40）误续；對于IE之外的所有瀏覽器吨悍，padding的值會加到height或者width中(如果：一個div的高度為40,padding-top為20，此時div的高度是60)蹋嵌。所以千萬不要使用padding來進行對齊操作
4畜份、定位Absolute和relative
Absolute是絕對定位，針對父級標簽中進行了absolute定位的標簽來進行l(wèi)eft欣尼、right等設(shè)置爆雹，如果父級標簽中都沒有這樣的定位方式，就會針對body來進行定位愕鼓，而且對于absolute而言钙态，該容器不再占用相應(yīng)的空間，原有的空間會被其他元素所占據(jù)菇晃。
Relative是相對定位册倒，都是針對父級元素進行定位的，而且空間會一直被占用
使用經(jīng)驗：經(jīng)常會使用relative來實現(xiàn)文本位置的移動磺送。所以如果要為某個容器設(shè)置里面的文本位置驻子，可以用span包裹處理<span>sssss</span>灿意，再為span設(shè)置
position：relative ；left ：10px崇呵；
5缤剧、float
float：元素會根據(jù)屬性值向左或向右浮動。一般用于橫向列表導(dǎo)航域慷，復(fù)雜界面等
一個塊級元素如果沒有設(shè)置height荒辕，其height是由子元素撐開的。對子元素使用了浮動之后犹褒，子元素會脫離標準文檔流抵窒，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷叠骑。要解決這樣的問題李皇，我們就是要使用清除浮動。分一下三種方式宙枷。
1疙赠、哪里有浮動元素，就在其父級元素的中增加一個（作為最后一個子元素）clear:both;
2朦拖、父級元素添加overflow:hidden，注意：子元素超出父元素的范圍厌衔，會造成超出的部分被隱藏
.clearfix{overflow:hidden;zoom:1}
3璧帝、利用after偽元素
// 例如消除<ul class="menu clearfix">
.clearfix: { zoom: 1; }
.clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }
6、讓容器居中
1富寿、body {text-align:center;}僅僅只有IE可以居中
2睬隶、margin:auto;僅僅只有IE之外的瀏覽器可以居中
3、推薦使用的居中方式
position:absolute;
left:50%;
marginLeft:-width;
7页徐、div等容器盒子設(shè)置邊框border
border-bottom: 1px solid #f1f1f1;
Flex 布局
彈性布局
容器和行內(nèi)元素都可以聲明Flex布局苏潜。
display: flex;
Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴display: -webkit-flex; /* Safari */
注意变勇，設(shè)為Flex布局以后恤左，子元素的float、clear和vertical-align屬性將失效搀绣。
采用Flex布局的元素飞袋，稱為Flex容器，它的所有子元素自動成為容器成員链患，簡稱”項目”巧鸭。
1、容器的屬性
//決定主軸方向
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
//控制一條軸線排不下麻捻，如何換行纲仍。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
//flex-direction屬性和flex-wrap屬性的簡寫形式呀袱，默認值為row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
//主軸上的對齊方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
//交叉軸上對齊方式
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
//多根軸線的對齊方式,如果只有一根軸線郑叠，該屬性不生效
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
2夜赵、項目屬性
//order屬性定義項目的排列順序
.item {
order: <integer>;
}
//放大比例
.item {
flex-grow: <number>; /* default 0 */
}
//縮小比例
.item {
flex-shrink: <number>; /* default 1 */
}
//項目占據(jù)的主軸空間
.item {
flex-basis: <length> | auto; /* default auto */
}
//單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
