HTML的基本認識

1.HTML

HTML全稱是Hypertext Markup Language,中文名字是超文本標記語言。那么什么叫做超文本標記語言,我們一次解析一下。

語言

這里的語言是指要和瀏覽器打交道,這個語言是瀏覽器能夠識別的。

標記

標記產自于外國,所以標記是不允許使用漢文來寫的,他必須由尖括號包裹起來。標簽通常是成對出現的,標簽對中第一個稱為開始標簽,第二個稱為結束標簽。開始標簽和結束標簽也被稱為開放標簽和閉合標簽。當然也存在空元素,空元素是在開始標簽中關閉的。(空元素也可以稱為單標簽,以反斜杠結束)

超文本

一個網頁上的文字就叫做文本,但是一個網頁上不僅有文本還有圖片、聲音、視頻。而這些圖片、聲音、視頻遠遠超出了文本所覆蓋的內容。這就稱為超文本。

2.HTML的書寫格式

首先告訴瀏覽器我要開始寫一個文檔里,文檔使用doc(document)表示的。同時我還需要告訴瀏覽器我的文檔類型,文檔類型用type表示。那么到底文檔類型是什么?所以在后面告訴瀏覽器的是HTML類型。總結一下,聲明的寫法是:
<!doctype html>
寫完聲明之后,接下來開始寫網頁,就要用到了HTML標簽(所有的網頁一出現就是一個整體,這個整體就是HTML來標記)。這個整體都會包含一個頭部和一個主體,頭部包含了標題名、網址等。主體就是我們看到的頁面。因此,接下來要寫的是頭部和主體。這就引入另外的兩個標簽head和body。總結一下,寫法:

<!doctype html>
<html>
    <head><head/>
    <body><body/>
<html/>

剛才我們說到head中會有標題名,也就是在head中添加一個title標簽。為了讓我們所寫的網頁在全世界都能解析出來,我們還要添加一個標簽meta(這就是上面提到的空元素標簽,他的內容在meta后面在反斜杠之前結束),標簽中提供編碼方式。在HTML加了個lang屬性,是指定元素內容的語言,en表示為英文,瀏覽器打開后它會認為是英文的,會自動給翻譯(如果設置了自動翻譯的話),當然這個屬性是可以用不用寫的。具體寫法如下:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title><title/>
    <head/>
    <body><body/>
<html/>

在這里我們繼續說說這個編碼的問題。當我們用文本文檔編寫的時候,保存時將其后綴名修改為.html,容易出錯的是我們忘記將其編碼方式也修改為utf-8,如果不改,仍然出現亂碼的情況。其實上面的內容在文件創建的時候很多編輯器都幫我們完成以上內容的書寫,我們基本完成我們需要的布局即可。

3.css

css全稱為Cascading Style Sheet,即層疊樣式表。他是通過鍵值對的方式來實現的。
<div style="width:100px;height:100px;background:url(http://img1.3lian.com/2015/w7/98/d/22.jpg);border:8px solid blue;">這是一張圖片</div>
圖片上是對層疊樣式表的個人理解:

層疊樣式.png

注意
上面采用的是內聯樣式表插入的方法,注意每條命令后面有個分號,尤其最后一個命令后面也有。經過測試,最后一個分號是可以沒有的,鍵值對間的分號不能少,個人建議都把分號加上。

3.JavaScript

JavaScript是腳本語言,給了我們頁面一個動作。在這里給出個事例:

<div onclick="this.style.width='800px';this.style.height='800px'"
style="width : 100px;height : 100px;transition:1s;
background:url(http://img1.3lian.com/2015/w7/98/d/22.jpg);
border : 8px solid blue;">這是一張圖片</div>

我們主要看下面的內容

onclick="this.style.width='800px';this.style.height='800px'"

這句話中onclick表示給div 一個點擊事件。那么點擊后會發生什么事那?this可以理解為一個代詞,代指當前的標簽div,點可以理解為“的”,那么可以將其翻譯為,給div一個點擊事件,點擊后,div的樣式表中的width值修改為800px,div的樣式表中的height值修改為800px。style中的transtion,表示該事件執行的時間。

在這里我們區分一下JavaScript寫法和css寫法的區別:

  • JavaScript中的鍵值對是通過等號連接,css是通過冒號連接;
  • JavaScript中的值需要用引號包裹起來(引號包裹的時候是有要求的,如果最外面的是雙引號,那值就用單引號,如果外面是單引號,那么值中就是用雙引號,這里說的比較簡單,詳細內容可以百度一下)。css中不需要用引號包裹。

如果有錯誤的地方,歡迎大家指出來。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,565評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,115評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,577評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,514評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,234評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,621評論 1 326
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,641評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,822評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,380評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,128評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,319評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,879評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,548評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,970評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,229評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,048評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,285評論 2 376

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,779評論 1 92
  • HTML基礎 本文包括 HTML基本知識與結構 HTML常見標簽 標簽寫法與嵌套的討論 HTML、CSS、java...
    廖少少閱讀 2,104評論 2 21
  • 本課來自http://www.imooc.com/learn/9請不要用作商業用途。 HTML5 HTML介紹 H...
    PYLON閱讀 3,285評論 0 5
  • 格式后期處理。 Jeremy Keith在 Fronteers 2010 上的主題演講 今天我想跟大家談一談HTM...
    LordZhou閱讀 1,145評論 0 17
  • 清空 昨日的疲憊 碧空里靜靜的等 和我密切相關的 哪怕那是一枚綠葉 我也要等它長大 等它繁華 滿天的星啊 寄我一往...
    藍色的海sunshine閱讀 140評論 0 1