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