1.HTML小記劲阎,
1. 概述:
??
<h1></h1>就是標(biāo)題標(biāo)簽
3.? <p></p>是段落標(biāo)簽。
4.? ? ? 網(wǎng)頁(yè)上那張小女生的圖片刨沦,由img標(biāo)簽來(lái)完成的诗宣,
? ? ? ? 它在網(wǎng)頁(yè)上的代碼寫成<img src="1.jpg">
5.html中的標(biāo)簽一般都是成對(duì)出現(xiàn)的,分開始標(biāo)簽和結(jié)束標(biāo)簽想诅。結(jié)束標(biāo)簽比開始標(biāo)簽多了一個(gè)/召庞。
如:
<p></p>
標(biāo)簽與標(biāo)簽之間是可以嵌套的,但先后順序必須保持一致来破,如:<div>里嵌套<p>篮灼,那么</p>必須放在</div>的前面。如下圖所示徘禁。
??
6. . HTML標(biāo)簽不區(qū)分大小寫诅诱,<h1>和<H1>是一樣的,但建議小寫送朱,因?yàn)榇蟛糠殖绦騿T都以小寫為準(zhǔn)娘荡。
7.什么是代碼注釋?代碼注釋的作用是幫助程序員標(biāo)注代碼的用途
語(yǔ)法:
<!--注釋文字 -->
8. <body>標(biāo)簽驶沼,網(wǎng)頁(yè)上顯示的內(nèi)容放在這里
9.標(biāo)題標(biāo)簽一共有6個(gè)炮沐,h1、h2回怜、h3大年、h4、h5玉雾、h6分別為一級(jí)標(biāo)題翔试、二級(jí)標(biāo)題、三級(jí)標(biāo)題复旬、四級(jí)標(biāo)題垦缅、五級(jí)標(biāo)題、六級(jí)標(biāo)題赢底。并且依據(jù)重要性遞減失都。<h1>是最高的等級(jí)。
????
10. 加入強(qiáng)調(diào)語(yǔ)氣幸冻,使用<strong>和<em>標(biāo)簽
<em> 默認(rèn)用斜體表示,<strong> 用粗體表示咳焚。
2.? <span>標(biāo)簽是沒有語(yǔ)義的洽损,它的作用就是為了設(shè)置單獨(dú)的樣式用的。
11.? ? 1. <q>引用文本</q> ; 注意要引用的文本不用加雙引號(hào)革半,瀏覽器會(huì)對(duì)q標(biāo)簽自動(dòng)添加雙引號(hào)碑定。
? ? ? ? 2. <blockquote>標(biāo)簽流码,長(zhǎng)文本引用? 語(yǔ)法:<blockquote>引用文本</blockquote> (瀏覽器對(duì)<blockquote>標(biāo)簽的解析是縮進(jìn)樣式)
? ? ? ???
? ? ? 3.在需要加回車換行的地方加入<br />,<br />標(biāo)簽作用相當(dāng)于word文檔中的回車延刘。
? ? ? 4.要想輸入空格漫试,必須寫入 。
? ? ? ??
? ? ? 5.<hr>標(biāo)簽碘赖,添加水平橫線驾荣。html4.01版本: <hr>? xhtml1.0版本: <hr />
? ? ? 注:<hr />標(biāo)簽和<br />標(biāo)簽一樣也是一個(gè)空標(biāo)簽,所以只有一個(gè)開始標(biāo)簽普泡,沒有結(jié)束標(biāo)簽播掷。
? ? ? 6. <address>標(biāo)簽,為網(wǎng)頁(yè)加入地址信息
? ? ? 語(yǔ)法:<address>聯(lián)系地址信息</address>
? ? ? 7.使用<code>標(biāo)簽,當(dāng)代碼為一行代碼時(shí)撼班,你就可以使用<code>標(biāo)簽歧匈,注:如果是多行代碼,可以使用<pre>標(biāo)簽砰嘁。
? ? ? 語(yǔ)法:<code>var i=i+300;</code>
? ? ? 語(yǔ)法: <pre>語(yǔ)言代碼段</pre>
12.使用ul件炉,添加信息列表
1.ul-li是沒有前后順序的信息列表。
<ul>
? <li>信息</li>
? <li>信息</li>
? ......
</ul>
2. ul-li在網(wǎng)頁(yè)中顯示的默認(rèn)樣式一般為:每項(xiàng)li前都自帶一個(gè)圓點(diǎn)矮湘,如:
??
3.<ol>標(biāo)簽來(lái)制作有序列表來(lái)展示斟冕。
語(yǔ)法:
<ol>
? <li>信息</li>
? <li>信息</li>
? ......
</ol>
如:? ? ? ? ??
4.把一些獨(dú)立的邏輯部分劃分出來(lái),放在一個(gè)<div>標(biāo)簽中板祝,這個(gè)<div>標(biāo)簽的作用就相當(dāng)于一個(gè)容器宫静。
語(yǔ)法:<div>…</div>
5. 給div命名? ? <div? id="版塊名稱">…</div>
6.創(chuàng)建表格的四個(gè)元素:
table、tbody券时、tr孤里、th、td
1橘洞、<table>…</table>:整個(gè)表格以<table>標(biāo)記開始捌袜、</table>標(biāo)記結(jié)束。
2炸枣、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加載完后才顯示虏等。加上這些表格結(jié)構(gòu), tbody包含行的內(nèi)容下載完優(yōu)先顯示适肠,不必等待表格結(jié)束后在顯示霍衫,同時(shí)如果表格很長(zhǎng),用tbody分段侯养,可以一部分一部分地顯示敦跌。(通俗理解table 可以按結(jié)構(gòu)一塊塊的顯示,不在等整個(gè)表格加載完后顯示逛揩。)
3柠傍、<tr>…</tr>:表格的一行麸俘,所以有幾對(duì)tr 表格就有幾行。
4惧笛、<td>…</td>:表格的一個(gè)單元格从媚,一行中包含幾對(duì)<td>...</td>,說(shuō)明一行中就有幾列患整。
5拜效、<th>…</th>:表格的頭部的一個(gè)單元格,表格表頭并级。
6拂檩、表格中列的個(gè)數(shù),取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)嘲碧。
注:1稻励、table表格在沒有添加css樣式之前,在瀏覽器中顯示是沒有表格線的
2愈涩、表頭望抽,也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示
7.caption標(biāo)簽,為表格添加標(biāo)題和摘要
摘要:<table summary="表格簡(jiǎn)介文本">
標(biāo)題語(yǔ)法:
<table>
? ? <caption>標(biāo)題文本</caption>
? ? <tr>
? ? ? ? <td>…</td>
? ? ? ? <td>…</td>
? ? ? ? …
? ? </tr>
…
</table>
13.使用<a>標(biāo)簽履婉,鏈接到另一個(gè)頁(yè)面
1.<a>標(biāo)簽可實(shí)現(xiàn)超鏈接語(yǔ)法:
? ? ? <a? href="目標(biāo)網(wǎng)址"? title="鼠標(biāo)滑過(guò)顯示的文本">鏈接顯示的文本</a>
2.title屬性的作用煤篙,鼠標(biāo)滑過(guò)鏈接文字時(shí)會(huì)顯示這個(gè)屬性的文本內(nèi)容
3. 在新建瀏覽器窗口中打開鏈接 <a href="目標(biāo)網(wǎng)址" target="_blank">click here!</a>
4.使用mailto在網(wǎng)頁(yè)中鏈接Email地址? ? 利用mailto做許多其它事情:
??
注意:如果mailto后面同時(shí)有多個(gè)參數(shù)的話,第一個(gè)參數(shù)必須以“?”開頭毁腿,后面的參數(shù)每一個(gè)都以“&”分隔辑奈。
5. <img>標(biāo)簽的使用:
??
14. 使用表單標(biāo)簽,與用戶交互
1.網(wǎng)站怎樣與用戶進(jìn)行交互已烤?答案是使用HTML表單(form)鸠窗。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端
2.語(yǔ)法:? ? ? <form? method="傳送方式"? action="服務(wù)器文件">
3.表單講解
??
4.文本輸入框、密碼輸入框
??
5. 文本域胯究,支持多行文本輸入
??
6.單選框和復(fù)選框
1.兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)稍计,而復(fù)選框中用戶可以任意選擇多項(xiàng),甚至全選裕循。
??
例子:
??
注意:同一組的單選按鈕臣嚣,name 取值一定要一致,比如上面例子為同一個(gè)名稱“radioLove”剥哑,這樣同一組的單選按鈕才可以起到單選的作用硅则。
7. 使用下拉列表框,節(jié)省空間
1.例子:
??
講解:
1株婴、value:
2抢埋、selected="selected":
設(shè)置selected="selected"屬性,則該選項(xiàng)就被默認(rèn)選中督暂。
8. 使用下拉列表框進(jìn)行多選
1.在<select>標(biāo)簽中設(shè)置multiple="multiple"屬性揪垄,就可以實(shí)現(xiàn)多選功能
例子:
??
9.使用提交按鈕,提交數(shù)據(jù)
??
10.使用重置按鈕逻翁,重置表單信息
1.比如用戶輸入“用戶名”后饥努,發(fā)現(xiàn)書寫有誤,可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)八回。只需要把type設(shè)置為"reset"就可以酷愧。
??
11.form表單中的label標(biāo)簽
??
2.CSS小記,
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”缠诅,它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式溶浴,如文字大小、顏色管引、字體加粗等士败。
??
2.
??
3.CSS代碼語(yǔ)法
??
4.CSS注釋代碼
??
5.內(nèi)聯(lián)式css樣式
??
6.外部式css樣式,寫在單獨(dú)的一個(gè)文件中
??
注:三種式的優(yōu)先級(jí):他們的優(yōu)先級(jí):內(nèi)聯(lián)式 > 嵌入式 > 外部式?
其實(shí)總結(jié)來(lái)說(shuō)褥伴,就是--就近原則(離被設(shè)置元素越近優(yōu)先級(jí)別越高)谅将。
7.什么是選擇器?
??
8.類選擇器
??
9.ID選擇器
??
10.類和ID選擇器的區(qū)別
??
??
11.子選擇器
??
12.包含(后代)選擇器
??
13.通用選擇器
??
14.偽類選擇符
??
15.分組選擇符
??
16.繼承
??
17.特殊性
??
18.層疊
??
19.重要性
??
20.文字排版--字體
??
21.文字排版--字號(hào)重慢、顏色
??
22.文字排版--粗體
??
23.文字排版--斜體
??
24.文字排版--下劃線
??
25.文字排版--刪除線
??
26.段落排版--縮進(jìn)
??
注意:2em的意思就是文字的2倍大小饥臂。
27.段落排版--行間距(行高)
??
28.段落排版--中文字間距、字母間距
??
29.段落排版--對(duì)齊
??
30.元素分類
1.在CSS中似踱,html中的標(biāo)簽元素大體被分為三種不同的類型:塊狀元素隅熙、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素。
??
31.元素分類--塊級(jí)元素
??
32.元素分類--內(nèi)聯(lián)元素
??
33.元素分類--內(nèi)聯(lián)塊狀元素
??
34.盒模型--邊框(一)
1.盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線核芽,這條線你可以設(shè)置它的粗細(xì)囚戚、樣式和顏色(邊框三個(gè)屬性)。
??
35.盒模型--邊框(二)
??
36.盒模型--寬度和高度
??
??
37.盒模型--填充
??
38.盒模型--邊界
??
39.css布局模型
在網(wǎng)頁(yè)中狞洋,元素有三種布局模型:
1弯淘、流動(dòng)模型(Flow)
2、浮動(dòng)模型 (Float)
3吉懊、層模型(Layer)
1庐橙、流動(dòng)模型(Flow):
??
??
2.浮動(dòng)模型
??
??
3.層模型
??
(1)層模型--絕對(duì)定位
??
??
(2)層模型--相對(duì)定位
??
??
(3)層模型--固定定位
??
40.Relative與Absolute組合使用
??
41.顏色值縮寫
??
42.字體縮寫
??
??
43.顏色值
??
配色表:
??