在講解本次課程前:我們先來看下什么是瀏覽器:
所謂瀏覽器就是可以解釋和執行HTML代碼的工具。還有一個概念我們需要搞清楚,瀏覽器!=IE,IE只是瀏覽器當中的一種。除了IE還有N多瀏覽器,google一把,就可以知道。我們就不再贅述了。
首先我們來了解下什么是HTML
什么是HTMLHTML全稱:Hyper Text Mark-up Language(超文本標記語言)。就是描述網頁長相以及網頁內容的文本。HTML之所以能展現出各種各樣的效果,是瀏覽器的功能。
補充內容:這里我們再來擴充一些內容,就是相同的HTML文本,在不瀏覽器上,效果可能不一樣。這是因為先出現了多個瀏覽器,然后才有了對應的標準。鑒于這種情況,我們可以使用IETester來測試相同的HTML代碼在不同瀏覽器上的兼容性問題。
2,靜態頁面和動態頁面
還有一點我們需要知道,靜態頁面和動態頁面的區別。
首先,網站的頁面分為靜態頁面和動態頁面兩種。
靜態頁面:后綴為html或者htm的都是靜態頁面,在服務器上有一個固定的html頁面
動態頁面:服務器上沒有用戶需要瀏覽的頁面,但是服務器可以動態生成客戶所需的html頁面,然后展現給客戶。
用一句話概括兩者的區別:動態頁面執行服務器端代碼,靜態頁面不會執行服務器端代碼(現在大家先了解下就ok,畢竟靜態頁面是咱們今天的討論重點)
3.如何書寫一個HTML頁面?
書寫HTML有多種工具,相信記事本大家都知道,用記事本就可以書寫HTML頁面。當然是用EditPlus/UltraEdit等高級記事本也可以書寫,還可以是用Dreamweaver等工具。
下圖是一個HTML網頁基本結構
通過上圖可以看出,所有內容都在<html></html>標簽之內;<head></head>內放的是頭部信息,對頁面的描述,該內容不會顯示在頁面中。<title></title>中設置的是頁面的標題,<title>只能放到<head>中;<body></body>是頁面的主體,該標簽內的文本會在網頁上顯示。當然所有頁面至少應包含這些部分。
提示:title標簽的結束標簽如果沒有閉合,則整個頁面都不顯示。
4.HTML和XML的異同點
相同點:都是標記語言,都可以通過dom方式訪問,都可通過css來改變外觀
不同點:
xml比html語法更嚴格:有開始標簽就需要有結束標簽、大小寫一致、屬性用雙引號等。xml側重數據存儲,html側重數據顯示。5.xhtml和dhtml
Xhtml:可擴展標記語言,是更符合xml語法規范的html。Xhtml的出現主要是為了向xml過渡。Xhtml要求:全部小寫、標簽配對、屬性用雙引號。
dhtml: Dynamic HTML的簡稱,就是動態的html。 HTML、樣式表和JavaScript 的組合
補充:Web標準不是一個標準,而是一系列標準的集合。
網頁由三部組成:結構,表現和行為
結構:文字、圖片等 對應語言:xml,xhtml
表現:也稱為樣式,如文字大小和顏色等,這些也都是通過樣式來實現的。css
行為:客戶端的動態效果,一般通過javascript來完成。DOM,ECMAScript
接下來咱們進入正題:學習html常用標簽。
6.html標簽
01,h標簽(標題),HTML定義了<h1></h1>到<h6></h6>六個h標簽,分別表示不同大小的字體。h1最大,h6最小。
02, <br/>只是回車,是自身閉合的標簽
03, <p>是分段。<p>前后會有比較大的空白,而<br/>則沒有。
04, <center>居中</center>居中顯示.(不推薦使用)
05, <b>a</b>粗體,推薦<strong>。<i>b</i>斜體。<u>c</u>帶下劃線。<em>強調,斜體</em>
06, <font></font>字體標簽,<font color=“red“ size=“7” face=“隸書”>紅色</font>
07,<hr> 水平線 常用屬性:color size(厚度) width(長度) align=left/center/right (默認為劇中顯示)
7.html特殊字符
" "
& &
< <
> >
空格
© ©
® ®
2 ²
¥ ¥
3 ³
8.圖像格式擴展
9.圖像標簽:<img alt=”無法顯示時提示文本”>
Alt:無法顯示圖片時的提示文本。
10.超鏈接:
href指出要連接的目標頁面,target指向目標窗口為值,取值
_blank :在新窗口中打開
_self :在自己的窗口中打開
_parent :父窗口中打開
_top :表示在頂級窗口打開
框架名稱:在指定框架中打開。(了解)
錨鏈接:01設置錨的位置
<a name="showBigImg"><img src="image/02.jpg"></a>
02.調用錨
<a href="#showBigImg">看美女圖片</a>
11.Html中的列表:
分為無序列表,有序列表和定義列表
下面我們看下各種列表的顯示效果圖
無序列表:
<ul>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
</ol>
定義列表:
<dl>
<dt>中國</dt>
<dd>上海</dd>
<dd>廣州</dd>
<dd>北京</dd>
</dl>
type的取值可以是:1、a、A、i、I、disc、circle、square。
12.表格:顯示規整的數據,有時也用于布局。
從上圖可以看出,表格由行和列組成,行用tr表示,列用td表示。還可以使用rowspan(合并行)、colspan(和并列)進行單元格的合并。
練習一:用html代碼輸出一下表格
練習2:表格的跨行和跨列
13.表單
action默認向本頁提交數據
如果要把數據提交到服務器,則需要將<input>、<textarea>、<select>等表單元素放到form中。Input的類型取值如下:
Checked屬性是為單選按鈕和復選框準備的
單選按鈕用于一組相互排斥的值,效果圖如下
復選框效果圖如下
按鈕主要有三種:提交按鈕,重置按鈕和普通按鈕
下拉列表框
語法:
14.多行文本框:
<textarea>文本</textarea>,cols=“50”、rows=“15”屬性表示行數和列數。
常見表單元素的使用:
今天咱們對html的討論就先到這里。
新聞熱點
疑難解答