今天小編帶領大家走進我們華信智原前端老師的課堂,一起了解HTML的相關知識,本次分享是第一節課哦,後續還會陸續更新全部課程知識,歡迎大家點擊關注我們,一起學習前端吧!
這節課的目標是認識HTML是什麼以及學會在DW中建立站點,併發布自己的第一個html頁面。
一、認識HTML
HTML概念:超本文標記語言(HyperText Markup Language)
超文本:瀏覽器就可以解釋的,比如http(超文本傳輸協議)。官方解釋:“超文本”就是指頁面內可以包含圖片、鏈接,甚至音樂、程序等非文字元素。
標記語言: 由一個一個的標記組成的語言。比如段落是
…
這個標記表示,圖像是由這個標記表示。超鏈接是 標記表示。學習標記語言的關鍵是明白網頁的元素(佈局、結構、內容等)應該由什麼標記來描述是最恰當的。我們要讓瀏覽器按照人的思維來顯示網頁,就必須掌握瀏覽器解釋網頁的html語言,明白標籤的作用,比如你想產生段落,就必須用
段落內容
的方式才能實現。HTML的歷史:
超文本標記語言(第一版)——在1993年6月作為互聯網工程工作小組(IETF)工作草案發布(並非標準):
HTML 2.0——1995年11月作為RFC 1866發佈,在RFC 2854於2000年6月發佈之後被宣佈已經過時
HTML 3.2——1997年1月14日,W3C推薦標準
HTML 4.0——1997年12月18日,W3C推薦標準
HTML 4.01(微小改進)——1999年12月24日,W3C推薦標準
XHTML1.0——發佈於2000年1月26日,是W3C推薦標準,後來經過修訂於2002年8月1日重新發布。
XHTML 1.1,於2001年5月31日發佈,W3C推薦標準。
XHTML 2.0,W3C工作草案。
HTML4.01 是常見的版本。
XHTML 5,從XHTML 1.x的更新版,基於HTML 5草案。
HTML 5——2014年10月28日,W3C推薦標準
HTML標記的語法:
標記只有兩種語法結構,一種包容標記,一種空標記。
1、包容標記 ...結束標記>,比如
...
、…
等。2、空標記 ,比如
等。
標記的屬性只能放在開始標記裡面。
1、
2、
在DW的"插入"菜單——標籤中,可以看到所有的html標籤,如下圖:
並不是所有標籤都是有用的,有些標籤隨著版本的升級會廢除,但是並沒有刪除,所以真正有用的標籤只有那麼幾十個。
二、在DW中建立站點,併發布第一個HTML頁面
基本步驟如下:
1、建立站點,設置好根目錄文件夾和默認圖片文件夾(非常重要)。
2、新建html頁面,並保存在根目錄文件夾下面。
3、再往保存好的頁面中添加內容,比如文字和圖片、超鏈接等。
詳細介紹如下:
1、點擊“管理站點”,在彈出的面板中點擊“新建站點”,如圖:
2、設置“站點名稱”和“本地站點文件夾”,本地站點文件夾就是你存放整個網站的根目錄,點擊後面的文件夾小圖標,選擇一個盤符,新建一個文件夾,選擇好就可以了。比如,選擇F盤下面的lianxi文件夾。
3、這一步非常關鍵,必須要設置“默認圖像文件夾”,點擊“高級設置”,再點擊後面的文件夾小圖標,在剛才設置好的“lianxi”根目錄文件夾下面再新建一個“images”文件夾,選擇好。要保證“images”文件夾必須在你設置的根目錄文件夾的下面。
建立這個默認圖像文件夾的好處是從站點以外選擇的圖片,都會自動把圖片複製到這個默認圖像文件夾的下面。保證了站點的所有資源都在站點內部,不會丟失圖片。
否則,如果你沒有設置這個圖像文件夾,每次從站點以外的地方插入圖片,都會有如下提示:
4、站點建立好後,就可以新建html頁面,保存併發布了。
按F12發佈的時候,默認是IE瀏覽器,如果想設置為別的瀏覽器,可以編輯瀏覽器列表。如圖所示:
2、點擊“+”按鈕,添加要發佈的瀏覽器。
3、以谷歌為例,找到谷歌的快捷方式,右鍵菜單中選擇“屬性”。
4、複製谷歌的路徑,一定是以“.exe”為後綴名的路徑,這是可執行文件。
5、粘貼到應用程序中,設置為“主瀏覽器”,確定即可。
6、回到DW中,按下F12,即可看到在谷歌中發佈了網頁。
怎麼樣?這HTML第一課大家學會了嗎?
關注華信智原,樂享更多好課。
閱讀更多 昆明華信智原 的文章