專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：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)閱讀
官方微信
官方抖音
Java實驗班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號