更新時間:2019-08-11 09:00:00 來源:動力節(jié)點 瀏覽7600次
一、html+css基礎(chǔ)
1-1
Html和CSS的關(guān)系
學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握:HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術(shù)都是用來實現(xiàn)什么的:
1-2
HTML標(biāo)簽不區(qū)分大小寫,<h1>和<H1>是一樣的,但建議小寫,因為大部分程序員都以小寫為準(zhǔn)。
1-3
一個HTML文件是有自己固定的結(jié)構(gòu)的。
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解:
<html></html>稱為根標(biāo)簽,所有的網(wǎng)頁標(biāo)簽都在<html></html>中。
<head> 標(biāo)簽用于定義文檔的頭部,它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標(biāo)簽,頭部標(biāo)簽在下一小節(jié)中會有詳細介紹。
在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容,如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽,在這里的標(biāo)簽中的內(nèi)容會在瀏覽器中顯示出來。
1-4
1.下面這些標(biāo)簽可用在 head 部分:
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
2.代碼注釋不僅方便程序員自己回憶起以前代碼的用途,還可以幫助其他程序員很快的讀懂你的程序的功能,方便多人合作開發(fā)網(wǎng)頁代碼。
語法:
<!--注釋文字 -->
3.CSS注釋代碼
就像在Html的注釋一樣,在CSS中也有注釋語句:用/*注釋語句*/來標(biāo)明(Html中使用<!--注釋語句-->)
1-5
1.語義化:說的通俗點就是:明白每個標(biāo)簽的用途(在什么情況下我可以使用這個標(biāo)簽才合理)比如,網(wǎng)頁上的文章的標(biāo)題就得用標(biāo)題標(biāo)簽,網(wǎng)頁上的各個欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽。
2.語義化的作用
2-1
如果想在網(wǎng)頁上顯示文章,這時就需要<p>標(biāo)簽了,把文章的段落放到<p>標(biāo)簽中。
語法:
<p>段落文本</p>
2-2
<hx>標(biāo)簽來制作文章的標(biāo)題。
標(biāo)題標(biāo)簽一共有6個,h1、h2、h3、h4、h5、h6分別為一級標(biāo)題、二級標(biāo)題、三級標(biāo)題、四級標(biāo)題、五級標(biāo)題、六級標(biāo)題。并且依據(jù)重要性遞減。<h1>是最高的等級。
語法:
<hx>標(biāo)題文本</hx> (x為1-6)
文章的標(biāo)題前面已經(jīng)說過了,可以使用標(biāo)題標(biāo)簽,另外網(wǎng)頁上的各個欄目的標(biāo)題也可使用它們
2-3
有了段落又有了標(biāo)題,現(xiàn)在如果想在一段話中特別強調(diào)某幾個文字,這時候就可以用到<em>或<strong>標(biāo)簽。
但兩者在強調(diào)的語氣上有區(qū)別:<em> 表示強調(diào),<strong> 表示更強烈的強調(diào)。并且在瀏覽器中<em> 默認(rèn)用斜體表示,<strong> 用粗體表示。兩個標(biāo)簽相比,目前國內(nèi)前端程序員更喜歡使用<strong>表示強調(diào)
2-4
<em>、<strong>、<span>的區(qū)別:
1.<em>和<strong>標(biāo)簽是為了強調(diào)一段話中的關(guān)鍵字時使用,它們的語義是強調(diào)。
2.<span>標(biāo)簽是沒有語義的,它的作用就是為了設(shè)置單獨的樣式用的,把一段話圈起來,然后用css設(shè)置樣式。
2-5
q標(biāo)簽,短文本引用
比如在你的網(wǎng)頁的文章里想引用某個作家的一句詩,這樣會使你的文章更加出彩,那么<q>標(biāo)簽是你所需要的。
語法:
<q>引用文本</q>
1、注意要引用的文本不用加雙引號,瀏覽器會對q標(biāo)簽自動添加雙引號。
2、注意這里用<q>標(biāo)簽的真正關(guān)鍵點不是它的默認(rèn)樣式雙引號(如果這樣我們不如自己在鍵盤上輸入雙引號就行了),而是它的語義:引用別人的話
blockquote標(biāo)簽,長文本引用
<blockquote>的作用也是引用別人的文本。但它是對長文本的引用
<q>標(biāo)簽是對簡短文本的引用,比如說引用一句話就用到<q>標(biāo)簽。
語法:
<blockquote>引用文本</blockquote>
瀏覽器對<blockquote>標(biāo)簽的解析是縮進樣式
2-6
換行標(biāo)簽<br/>
<br/>標(biāo)簽作用相當(dāng)于word文檔中的回車。
分割線標(biāo)簽<hr/>
<hr/>標(biāo)簽和<br/>標(biāo)簽一樣也是一個空標(biāo)簽,所以只有一個開始標(biāo)簽,沒有結(jié)束標(biāo)簽。
<hr/>標(biāo)簽的在瀏覽器中的默認(rèn)樣式線條比較粗,顏色為灰色,可能有些人覺得這種樣式不美觀,沒有關(guān)系,這些外在樣式在我們以后學(xué)習(xí)了css樣式表之后,都可以對其修改。
2-7
html特殊字符
空格: (;分號必不可少)
2-8
address標(biāo)簽,為網(wǎng)頁加入地址信息
語法:
<address>地址信息</address>
如:
<address>北京市西城區(qū)德外大街10號</address>
在瀏覽器上顯示的樣式為斜體,如果不喜歡斜體,當(dāng)然可以,可以在后面的課程中使用css樣式來修改它<address>標(biāo)簽的默認(rèn)樣式
2-9
在介紹語言技術(shù)的網(wǎng)站中,必免不了在網(wǎng)頁中顯示一些計算機專業(yè)的編程代碼,當(dāng)代碼為一行代碼時,你就可以使用<code>標(biāo)簽了,如下面例子:
<code>var i=i+300;</code>
語法:
<code>代碼語言</code>
注意:在文章中一般如果要插入多行代碼時不能使用<code>標(biāo)簽,如果是多行代碼,可以使用<pre>標(biāo)簽。
<pre> 標(biāo)簽的主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。如果用以前的方法,回車需要輸入<br>簽,空格需要輸入 。
注意:<pre> 標(biāo)簽不只是為顯示計算機的源代碼時用的,在你需要在網(wǎng)頁中預(yù)顯示格式時都可以使用它,只是<pre>標(biāo)簽的一個常見應(yīng)用就是用來展示計算機的源代碼。
3-1
1.無序列表
ul-li是沒有前后順序的信息列表。
語法:
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
舉例:
<ul>
<li>精彩少年</li>
<li>美麗突然出現(xiàn)</li>
<li>觸動心靈的旋律</li>
</ul>
ul-li在網(wǎng)頁中顯示的默認(rèn)樣式一般為:每項li前都自帶一個圓點
2.有序列表
語法:
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
舉例:
下面是一個熱點課程下載排行榜:
<ol>
<li>前端開發(fā)面試心法 </li>
<li>零基礎(chǔ)學(xué)習(xí)html</li>
<li>JavaScript全攻略</li>
</ol>
<ol>在網(wǎng)頁中顯示的默認(rèn)樣式一般為:每項<li>前都自帶一個序號,序號默認(rèn)從1開
3-2
<div>容器標(biāo)簽
在網(wǎng)頁制作過程過中,可以把一些獨立的邏輯部分劃分出來,放在一個<div>標(biāo)簽中,這個<div>標(biāo)簽的作用就相當(dāng)于一個容器。
語法:
<div>…</div>
確定邏輯部分:
什么是邏輯部分?它是頁面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁中的獨立的欄目版塊,就是一個典型的邏輯部分。如下圖所示:圖中用紅色邊框標(biāo)出的部分就是一個邏輯部分,就可以使用<div>標(biāo)簽作為容器
注釋:<div> 是一個塊級元素,也就是說,瀏覽器通常會在 div 元素前后放置一個換行符。
3-3
創(chuàng)建表格的五個元素:
table、tbody、tr、th、td
1.<table>…</table>:整個表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束。
2.<tbody>…</tbody>:當(dāng)表格內(nèi)容非常多時,表格會下載一點顯示一點,但如果加上<tbody>標(biāo)簽后,這個表格就要等表格內(nèi)容全部下載完才會顯示。如右側(cè)代碼編輯器中的代碼。(這個標(biāo)簽基本上不怎么用了)
3.<tr>…</tr>:表格的一行,所以有幾對tr 表格就有幾行。
4.<td>…</td>:表格的一個單元格,一行中包含幾對<td>...<td/>,說明一行中就有幾列。
5.<th>…</th>:表格的頭部的一個單元格,表格表頭。
6.表格中列的個數(shù),取決于一行中數(shù)據(jù)單元格的個數(shù)。
表格還是需要添加一些標(biāo)簽進行優(yōu)化,可以添加標(biāo)題和摘要
<table summary="本表格記錄2012年到2013年庫存記錄,記錄包括U盤和耳機庫存量">
<caption>2012年到2013年庫存記錄</caption>
3-4
1.使用<a>標(biāo)簽,鏈接到別一個頁面
使用<a>標(biāo)簽可實現(xiàn)超鏈接,它在網(wǎng)頁制作中可以說是無處不在,只要有鏈接的地方,就會有這個標(biāo)簽。
語法:
<a href=”目標(biāo)網(wǎng)址”>鏈接顯示的文本</a>
例如:
<a >click here!</a>
上面例子作用是單擊click here!文字,網(wǎng)頁鏈接到http://www.imooc.com這個網(wǎng)頁。
3-5
認(rèn)識<img>標(biāo)簽,為網(wǎng)頁插入圖片
在網(wǎng)頁的制作中為使網(wǎng)頁炫麗美觀,肯定是缺少不了圖片,可以使用<img>標(biāo)簽來插入圖片。
語法:
<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">
舉例:
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
講解:
4-1
表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端,這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。
語法:
<form method="傳送方式" action="服務(wù)器文件">
講解:
4-2
<input>輸入框
文本輸入框、密碼輸入框
當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時,就會用到文本輸入框。文本框也可以轉(zhuǎn)化為密碼輸入框。
語法:
<form>
<input type="text/password" name="名稱" value="文本" />
</form>
1.type:
當(dāng)type="text"時,輸入框為文本輸入框;
當(dāng)type="password"時, 輸入框為密碼輸入框。
2.name:為文本框命名,以備后臺程序ASP 、PHP使用。
3.value:為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)
4-3
文本域,支持多行文本輸入
當(dāng)用戶需要在表單中輸入大段文字時,需要用到文本輸入域。
語法:
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
4-4
單選框,復(fù)選框
語法:
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1.type:
當(dāng)type="radio"時,控件為單選框
當(dāng)type="checkbox"時,控件為復(fù)選框
2.value:提交數(shù)據(jù)到服務(wù)器的值(后臺程序PHP使用)
3.name:為控件命名,以備后臺程序ASP、PHP使用
4.checked:當(dāng)設(shè)置checked="checked"時,該選項被默認(rèn)選中
注意:同一組的單選按鈕,name取值一定要一致,這樣同一組的單選按鈕才可以起到單選的作用。
4-5
下拉列表框,節(jié)省空間
下拉列表在網(wǎng)頁中也常會用到,它可以有效的節(jié)省網(wǎng)頁空間。既可以單選、又可以多選。
語法:<option value="提交值">選項</option>
提交值是向服務(wù)器提交的值,選項是顯示的值。
<form action="save.php" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅游" selected="selected">旅游</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
</form>
4-6
使用下拉列表框進行多選
下拉列表也可以進行多選操作,在<select>標(biāo)簽中設(shè)置multiple="multiple"屬性,
就可以實現(xiàn)多選功能,進行多選時按下Ctrl鍵同時進行單擊,可以選擇多個選項。
如下代碼:
<form action="save.php" method="post" >
<label>愛好:</label>
<select multiple="multiple">
<option value="看書">看書</option>
<option value="旅游">旅游</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
</form>
4-7
在表單中有兩種按鈕可以使用,分別為:提交按鈕、重置。
1,提交按鈕:當(dāng)用戶需要提交表單信息到服務(wù)器時,需要用到提交按鈕。
語法:
<input type="submit" value="提交">
type:只有當(dāng)type值設(shè)置為submit時,按鈕才有提交作用
value:按鈕上顯示的文字
2.重置按鈕,重置表單信息
當(dāng)用戶需要重置表單信息到初始時的狀態(tài)時,比如用戶輸入“用戶名”后,發(fā)現(xiàn)書寫有誤,可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以。
語法:
<input type="reset" value="重置">
type:只有當(dāng)type值設(shè)置為reset時,按鈕才有重置作用
value:按鈕上顯示的文字
5-1
認(rèn)識css樣式
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”,它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式,如文字大小、顏色、字體加粗等。
如下列代碼:
p{
font-size:12px;
color:red;
font-weight:bold;
}
使用CSS樣式的一個好處是通過定義某個樣式,可以讓不同網(wǎng)頁位置的文字有著統(tǒng)一的字體、字號或者顏色等。
5-2
CSS代碼語法
css 樣式由選擇符和聲明組成,而聲明又由屬性和值組成
選擇符{屬性:值}
p{color:red;}
選擇符:又稱選擇器,指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素,如本例中是網(wǎng)頁中所有的段(p)的文字將變成藍色,而其他的元素(如ol)不會受到影響。
聲明:在英文大括號“{}”中的的就是聲明,屬性和值之間用英文冒號“:”分隔。當(dāng)有多條聲明時,中間可以英文分號“;”分隔,如下所示:
p{font-size:12px;color:red;}
5-3
從CSS 樣式代碼插入的形式來看基本可以分為以下3種:
內(nèi)聯(lián)式、嵌入式和外部式三種
1,內(nèi)聯(lián)式css樣式
就是把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中,如下面代碼:
<p style="color:red">這里文字是紅色。</p>
css樣式代碼要寫在style=""雙引號中,如果有多條css樣式代碼設(shè)置可以寫在一起,中間用分號隔開。如下代碼:
<p style="color:red;font-size:12px">這里文字是紅色。</p>
2,嵌入式css樣式,
就是可以把css樣式代碼寫在<style type="text/css"></style>標(biāo)簽之間。如下面代碼實現(xiàn)把三個<span>標(biāo)簽中的文字設(shè)置為紅色:
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css樣式必須寫在<style></style>之間,并且一般情況下嵌入式css樣式寫在<head></head>之間。
3,外部式css樣式
寫在單獨的一個文件中
外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個單獨的外部文件中,這個css樣式文件以“.css”為擴展名,在<head>內(nèi)(不是在<style>標(biāo)簽內(nèi))使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi),如下面代碼:
<link href="base.css" rel="stylesheet" type="text/css" />
注意:
相關(guān)閱讀