前端筆記1.0

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.要想輸入空格漫试,必須寫入&nbsp;。

? ? ? ??


? ? ? 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.顏色值

??

配色表:

??

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市借嗽,隨后出現(xiàn)的幾起案子态鳖,更是在濱河造成了極大的恐慌,老刑警劉巖恶导,帶你破解...
    沈念sama閱讀 212,029評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浆竭,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)邦泄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,395評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門删窒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人顺囊,你說(shuō)我怎么就攤上這事肌索。” “怎么了特碳?”我有些...
    開封第一講書人閱讀 157,570評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵诚亚,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我午乓,道長(zhǎng)站宗,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,535評(píng)論 1 284
  • 正文 為了忘掉前任益愈,我火速辦了婚禮梢灭,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘腕唧。我一直安慰自己或辖,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,650評(píng)論 6 386
  • 文/花漫 我一把揭開白布枣接。 她就那樣靜靜地躺著颂暇,像睡著了一般。 火紅的嫁衣襯著肌膚如雪但惶。 梳的紋絲不亂的頭發(fā)上耳鸯,一...
    開封第一講書人閱讀 49,850評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音膀曾,去河邊找鬼县爬。 笑死,一個(gè)胖子當(dāng)著我的面吹牛添谊,可吹牛的內(nèi)容都是我干的财喳。 我是一名探鬼主播,決...
    沈念sama閱讀 39,006評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼斩狱,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼耳高!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起所踊,我...
    開封第一講書人閱讀 37,747評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤泌枪,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后秕岛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體碌燕,經(jīng)...
    沈念sama閱讀 44,207評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡误证,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,536評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了修壕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片愈捅。...
    茶點(diǎn)故事閱讀 38,683評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖叠殷,靈堂內(nèi)的尸體忽然破棺而出改鲫,到底是詐尸還是另有隱情,我是刑警寧澤林束,帶...
    沈念sama閱讀 34,342評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站稽亏,受9級(jí)特大地震影響壶冒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜截歉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,964評(píng)論 3 315
  • 文/蒙蒙 一胖腾、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧瘪松,春花似錦咸作、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,772評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至壳嚎,卻和暖如春桐智,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背烟馅。 一陣腳步聲響...
    開封第一講書人閱讀 32,004評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工说庭, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人郑趁。 一個(gè)月前我還...
    沈念sama閱讀 46,401評(píng)論 2 360
  • 正文 我出身青樓刊驴,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親寡润。 傳聞我的和親對(duì)象是個(gè)殘疾皇子捆憎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,566評(píng)論 2 349