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>
圖片上是對層疊樣式表的個人理解:
注意
上面采用的是內聯樣式表插入的方法,注意每條命令后面有個分號,尤其最后一個命令后面也有。經過測試,最后一個分號是可以沒有的,鍵值對間的分號不能少,個人建議都把分號加上。
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中不需要用引號包裹。
如果有錯誤的地方,歡迎大家指出來。