零基礎教你學前端-3.HTML基本格式

天我們來學習HTML基本格式。

H1 標簽定義了一個文檔的標題，雖然在瀏覽器里顯示了預期的效果，但它并不是一個符合規(guī)范的 html 文檔，今天我們就來定義一個標準的 html 文檔。

這是一個 html 文檔的基本格式，來深入的剖析一下

<!DOCTYPE html> 這個標簽會告訴瀏覽器，后面書寫的是HTML5規(guī)范的語法，瀏覽器會按照 HTML5 的語法規(guī)范進行解析

<html lang='en'> 包裹了整個頁面的所有內容，有時被稱為根元素。

<head> 是所有頭部元素的容器，描述了文檔的各種屬性和信息，比如文檔的標題，文檔引用的樣式表和JS腳本文件，頁面元信息等等，絕大多數(shù)文檔頭部包含的數(shù)據(jù)，都不會真正作為內容顯示給瀏覽者。

<title> 設置頁面的標題，也就是出現(xiàn)在瀏覽器標簽中的內容，它描述頁面被加入入書簽或收藏時的標題

<body> 它包含了頁面展示的所有內容，比如文字，圖片，視頻，游戲，可播放的音樂等等

一般情況下一個符合規(guī)范的 html 文檔都應該使用這個基本格式

回到編輯器我們創(chuàng)建一個文件名字叫 base.html 我們快速的編寫好 html 基本格式，在 <body> 標簽里寫一個 h1 在里面寫一些內容，瀏覽器中打開頁面正常的顯示了，每個頁面都寫這么多東西很麻煩我們有 vscode。

刪除所有內容在頁面里只需一個感嘆號，再按一下 tab 鍵，html 基本格式自動生成了，這時就可以直接在 body 內編寫網(wǎng)頁內容了。

通過觀察基本結構發(fā)現(xiàn) 標簽前面有的有空格有的沒有空格這是為什么呢實際上當出現(xiàn)標簽嵌套的時候需要保持一個固定的縮進，一般采用兩個或者四個空格具體看個人習慣和開發(fā)團隊的規(guī)范，為了方便閱讀不推薦混用。有些標簽嵌套在一起，這就是標簽結構嵌套

在一個標簽內再次書寫一個標簽他們之間形成了這樣的包裹關系，別包裹的叫做子標簽，包裹的就是父標簽。

在父子標簽嵌套的時候子標簽整體相對于父標簽多一套縮進，更加方便閱讀。

疊樣式表（Cascading Style Sheet，簡稱：CSS）是為網(wǎng)頁添加樣式的代碼。本節(jié)將介紹 CSS 的基礎知識，并解答類似問題：怎樣將文本設置為黑色或紅色？怎樣將內容顯示在屏幕的特定位置？怎樣用背景圖片或顏色來裝飾網(wǎng)頁？

CSS 究竟什么來頭？

和 HTML 類似，CSS 也不是真正的編程語言，甚至不是標記語言。它是一門樣式表語言，這也就是說人們可以用它來選擇性地為 HTML 元素添加樣式。舉例來說，要選擇一個 HTML 頁面里所有的段落元素，然后將其中的文本改成紅色，可以這樣寫 CSS：

p {
  color: red;
}

不妨試一下：首先新建一個 styles 文件夾，在其中新建一個 style.css 文件，將這三行 CSS 保存在這個新文件中。

然后再將該 CSS 文件連接至 HTML 文檔，否則 CSS 代碼不會對 HTML 文檔在瀏覽器里的顯示效果有任何影響。（如果你沒有完成前幾節(jié)的實踐，請復習處理文件和 HTML 基礎。在筆記本里有這個方面的內容?。?/span>

1、打開 index.html 文件，然后將下面一行粘貼到文檔頭（也就是 <head> 和 </head> 標簽之間）。

<link href="styles/style.css" rel="stylesheet">

2、保存 index.html 并用瀏覽器將其打開。應該看到以下頁面：

如果段落文字變紅，那么祝賀你，你已經(jīng)成功地邁出了 CSS 學習的第一步。

“CSS 規(guī)則集”詳解

讓我們來仔細看一看上述CSS：

整個結構稱為 規(guī)則集（通常簡稱“規(guī)則”），各部分釋義如下：

選擇器（Selector）
HTML 元素的名稱位于規(guī)則集開始。它選擇了一個或者多個需要添加樣式的元素（在這個例子中就是 p 元素）。要給不同元素添加樣式只需要更改選擇器就行了。
聲明（Declaration）
一個單獨的規(guī)則，比如說 color: red; 用來指定添加樣式元素的屬性。
屬性（Properties）
改變 HTML 元素樣式的途徑。（本例中 color 就是 `` 元素的屬性。）CSS 中，由編寫人員決定修改哪個屬性以改變規(guī)則。
屬性的值（Property value）
在屬性的右邊，冒號后面即屬性的值，它從指定屬性的眾多外觀中選擇一個值（我們除了 red 之外還有很多屬性值可以用于 color ）。

注意其他重要的語法：

每個規(guī)則集（除了選擇器的部分）都應該包含在成對的大括號里（{}）。
在每個聲明里要用冒號（:）將屬性與屬性值分隔開。
在每個規(guī)則集里要用分號（;）將各個聲明分隔開。

如果要同時修改多個屬性，只需要將它們用分號隔開，就像這樣：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

多元素選擇

也可以選擇多種類型的元素并為它們添加一組相同的樣式。將不同的選擇器用逗號分開。例如：

p, li, h1 {
  color: red;
}

不同類型的選擇器

選擇器有許多不同的類型。上面只介紹了元素選擇器，用來選擇 HTML 文檔中給定的元素。但是選擇的操作可以更加具體。下面是一些常用的選擇器類型：

選擇器名稱	選擇的內容	示例
元素選擇器（也稱作標簽或類型選擇器）	所有指定(該)類型的 HTML 元素	p 選擇 <p>
ID 選擇器	具有特定 ID 的元素（單一 HTML 頁面中，每個 ID 只對應一個元素，一個元素只對應一個 ID）	#my-id 選擇 <p id="my-id"> 或 <a id="my-id">
類選擇器	具有特定類的元素（單一頁面中，一個類可以有多個實例）	.my-class 選擇 <p class="my-class"> 和 <a class="my-class">
屬性選擇器	擁有特定屬性的元素	img[src] 選擇 <img src="myimage.png"> 而不是 <img>
偽（Pseudo）類選擇器	特定狀態(tài)下的特定元素（比如鼠標指針懸停）	a:hover 僅在鼠標指針懸停在鏈接上時選擇 <a>。

選擇器的種類遠不止于此，更多信息請參閱選擇器。

字體和文本

譯注：再一次說明，中文字體文件較大，不適合直接用于 Web Font。

在探索了一些 CSS 基礎后，我們來把更多規(guī)則和信息添加至 style.css 中，從而讓示例更美觀。首先，讓字體和文本變得更漂亮。

第一步:找到之前Google Font 輸出的地址。并以<link>元素的形式添加進index.html文檔頭（<head>和</head>之間的任意位置）。代碼如下：

 <link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">

以上代碼為當前網(wǎng)頁下載 Open Sans 字體，從而使自定義 CSS 中可以對 HTML 元素應用這個字體。

第二步：接下來，刪除 style.css 文件中已有的規(guī)則。雖然測試是成功的了，但是紅字看起來并不太舒服。

第三步：將下列代碼添加到相應的位置，用你在 Google Fonts 找到的字體替代 font-family 中的占位行。（ font-family 意味著你想要你的文本使用的字體。）這條規(guī)則首先為整個頁面設定了一個全局字體和字號（因為 <html> 是整個頁面的父元素，而且它所有的子元素都會繼承相同的 font-size 和 font-family）：

html {
  /* px 表示 “像素（pixels）”: 基礎字號為 10 像素 */
  font-size: 10px;
  /* Google fonts 輸出的 CSS */
  font-family: 'Open Sans', sans-serif;
}

注：CSS 文檔中所有位于 /* 和 */ 之間的內容都是 CSS 注釋，它會被瀏覽器在渲染代碼時忽略。你可以在這里寫下對你現(xiàn)在要做的事情有幫助的筆記。

譯注：/*``*/ 不可嵌套，/*這樣的注釋是/*不行*/的*/。CSS 不接受 // 注釋。

接下來為文檔體內的元素（<h1> (en-US)、<li>和<p>）設置字號。將標題居中顯示，并為正文設置行高和字間距，從而提高頁面的可讀性。

   h1 {
     font-size: 60px;
     text-align: center;
   }
   
   p, li {
     font-size: 16px;
     /* line-height 后而可以跟不同的參數(shù)，如果是數(shù)字，就是當前字體大小乘上數(shù)字 */
     line-height: 2;
     letter-spacing: 1px;
   }

可以隨時調整這些 px 值來獲得滿意的結果，以下是大體效果：

一切皆盒子

編寫 CSS 時你會發(fā)現(xiàn)，你的工作好像是圍繞著一個一個盒子展開的——設置尺寸、顏色、位置，等等。頁面里大部分 HTML 元素都可以被看作若干層疊的盒子。

并不意外，CSS 布局主要就是基于盒模型的。每個占據(jù)頁面空間的塊都有這樣的屬性：

padding：即內邊距，圍繞著內容（比如段落）的空間。
border：即邊框，緊接著內邊距的線。
margin：即外邊距，圍繞元素外部的空間。

這里還使用了：

width ：元素的寬度
background-color ：元素內容和內邊距底下的顏色
color ：元素內容（通常是文本）的顏色
text-shadow ：為元素內的文本設置陰影
display ：設置元素的顯示模式（暫略）

開始在頁面中添加更多 CSS 吧！大膽將這些新規(guī)則都添加到頁面的底部，而不要糾結改變屬性值會帶來什么結果。

更改頁面顏色

html{
  background-color:#00539f;
}

這條規(guī)則將整個頁面的背景顏色設置為所計劃的顏色。

文檔體格式設置

body{
   width:600px;
   margin:0 auto;
   background-color:#ff9500;
   padding:0 20px 20px 20px；
   border:5px solid black;
}

現(xiàn)在是 <body> 元素。以上條聲明，我們來逐條查看：

width: 600px; —— 強制頁面永遠保持 600 像素寬。
margin: 0 auto; —— 為 margin 或 padding 等屬性設置兩個值時，第一個值代表元素的上方和下方（在這個例子中設置為 0），而第二個值代表左邊和右邊（在這里，auto 是一個特殊的值，意思是水平方向上左右對稱）。你也可以使用一個，三個或四個值，參考這里。
background-color: #FF9500; —— 如前文所述，指定元素的背景顏色。我們給 body 用了一種略微偏紅的橘色以與深藍色的 `` 元素形成反差，你也可以嘗試其它顏色。
padding: 0 20px 20px 20px; —— 我們給內邊距設置了四個值來讓內容四周產生一點空間。這一次我們不設置上方的內邊距，設置右邊，下方，左邊的內邊距為20像素。值以上、右、下、左的順序排列。
border: 5px solid black; —— 直接為 body 設置 5 像素的黑色實線邊框。

定位頁面主標題并添加樣式

h1{
  margin: 0;
  padding:20px 0;
  color: #00539f;
  text-shadow:3px 3px 1px black
}

你可能發(fā)現(xiàn)頁面的頂部有一個難看的間隙，那是因為瀏覽器會在沒有任何 CSS 的情況下給 <h1>en-US等元素設置一些默認樣式。但這并不是個好主意，因為我們希望一個沒有任何樣式的網(wǎng)頁也有基本的可讀性。為了去掉那個間隙，我們通過設置margin: 0;來覆蓋默認樣式。

至此，我們已經(jīng)把標題的上下內邊距設置為 20 像素，并且將標題文本與 HTML 的背景顏色設為一致。

需要注意的是，這里使用了一個 text-shadow 屬性，它可以為元素中的文本提供陰影。四個值含義如下：

第一個值設置水平偏移值 —— 即陰影右移的像素數(shù)（負值左移）。
第二個值設置垂直偏移值 —— 即陰影下移的像素數(shù)（負值上移）。
第三個值設置陰影的模糊半徑 —— 值越大產生的陰影越模糊。
第四個值設置陰影的基色。

不妨嘗試不同的值看看能得出什么結果。

圖像居中

img{
  display:block；
  margin:0 auto；
}

最后，我們把圖像居中來使頁面更美觀?？梢詮陀?body 的margin: 0 auto，但是需要一點點調整。<body>元素是塊級元素，意味著它占據(jù)了頁面的空間并且能夠賦予外邊距和其他改變間距的值。而圖片是內聯(lián)元素，不具備塊級元素的一些功能。所以為了使圖像有外邊距，我們必須使用display: block 給予其塊級行為。

注：以上說明假定所選圖片小于頁面寬度（600 pixels）。更大的圖片會溢出 body 并占據(jù)頁面的其他位置。要解決這個問題，可以：

1）使用圖片編輯器來減小圖片寬度； 2）用 CSS 限制圖片大小，即減小 <img> 元素 width 屬性的值（比如 400 px）。

注：如果你暫時不能理解 display: block 和塊級元素與行內元素的差別也沒關系；隨著你對 CSS 學習的深入，你將明白這個問題。

小結

如果你按部就班完成本文的實踐，那么最終可以得到以下頁面

簡化聯(lián)系表格

Yummygum

Yummygum的聯(lián)系頁面很干凈很簡單，只有3個框和一個提交按鈕。簡單的好處是不會讓游客望而卻步。

大號的文字顯得簡練易讀，方便瀏覽者快速校對信息，從而有更大的滿足感。

以現(xiàn)在的網(wǎng)頁技術很容易創(chuàng)建一個動態(tài)的聯(lián)系表格。通常留有3-6個框供瀏覽者填寫姓名，郵件和個人信息。

大多數(shù)網(wǎng)站游客偏愛這種聯(lián)系表，因為比較節(jié)省時間——不需要打開自己的郵件客戶端、拷貝郵箱地址。目前網(wǎng)站聯(lián)系表格通常包含網(wǎng)絡安全技術比如CAPTCHA，所以安全性是很強的。

這種表格的所有元素看起來很統(tǒng)一，給人感覺很完整。另外建議使用JavaScript顯示提示和幫助，確保用戶知道他們的消息已發(fā)送成功。

Princeink

復雜一點表格看Prince Ink quote form網(wǎng)站，頁面分為4部分。

記住，不是每個框都要填寫。只有帶星號是必填的。大部分情況下，游客能夠識別星號，但是部分游客可能發(fā)現(xiàn)不了。如果是設計更大的聯(lián)系表格，要突出必填的項目。這樣將簡化提交過程，優(yōu)化用戶體驗。

統(tǒng)一中表現(xiàn)審美

表格既要講統(tǒng)一性，也要講審美。畢竟表格是網(wǎng)站外觀的一個重要部分。

Underbelly

Underbelly是一個設計創(chuàng)意機構網(wǎng)站，聯(lián)系頁面很獨特。顯而易見，這個聯(lián)系表格用了CSS樣式表和JavaScript。輸入界面看起來像一般正式文件的表格形式。設計獨特整潔，讓人覺得發(fā)送電子郵件也成了一種樂趣！

Dangerousrobot

Dangerous Robot 網(wǎng)站的設計跟上一個不同，聯(lián)系表格與其他元素通過明亮的暖色和矢量圖案很好的融合在一起。聯(lián)系表格基本采取居中模式，每個框里加上圖標，使得辨識度和閱讀速度得到提高。

添加地圖標注

一個公司的地理位置在商務交往中往往扮演著重要的角色。加入嵌入式地圖則把企業(yè)地址可視化。谷歌地圖有一個自定義的嵌入功能，允許開發(fā)者添加全功能的谷歌地圖到聯(lián)系頁面。

Bkwld

BKWLD的聯(lián)系頁，除了一些基本的郵件/電話信息，添加了MAPbox動態(tài)地圖，調高了交互性。

Fortyonetwenty

也可以考慮使用一個定制的照片，不用JavaScript地圖。在FortyOneTwenty網(wǎng)站聯(lián)系頁面，使用一個世界地圖，上面的藍點標注了全球分公司和員工分布情況。

由于這張照片是作為背景圖像，所以融合更自然。地圖讓位于內容，顯得不喧賓奪主。

添加社交網(wǎng)站鏈接

在聯(lián)系頁面添加社交網(wǎng)站鏈接，可賦予企業(yè)可觸摸的人格。這些鏈接可供瀏覽者在無法或者不宜使用電話、郵件的情況下聯(lián)系企業(yè)，并且可以瀏覽企業(yè)更多動態(tài)信息。最好能在同一頁上提供不同的社交賬號鏈接，讓瀏覽者決定選擇哪一個。

Tone

我最喜歡的英國創(chuàng)意機構非Tone莫屬，無論是它的作品或者是作品集網(wǎng)站。它的聯(lián)系頁使用定位他們辦公室的完整地圖和動態(tài)聯(lián)系表格。

往下滾動鼠標，你會發(fā)現(xiàn)一個長長的的社交媒體圖標水平列表。這些鏈接包括該公司的各種社交賬號包括Twitter,LinkedIn,Instagram。按鈕大而醒目，但是并沒有放在頁面頂部，因為郵件，電話和地址才是最重要的。

Positiveadvertising

Positive Advertising網(wǎng)站的社交賬號圖標設置的比較小。這個網(wǎng)站是單網(wǎng)頁網(wǎng)站。社交賬號圖標位于電話號碼，電子郵件地址和郵寄地址的下面。圖標采取了統(tǒng)一的單色處理。

展示團隊成員

這個方法使用較少，但是可以增加網(wǎng)頁的個性。個人網(wǎng)站可以在聯(lián)系頁面加上本人照片。大一點的公司往往把照片轉移到“公司團隊”頁面，每個重要人物有單獨的照片和介紹。

Blueskyresumes

Blue Sky Resumes網(wǎng)站的“關于我們”頁面包含一段團隊的介紹。每個雇員都有自己單獨的網(wǎng)頁鏈接。

“聯(lián)系我們”頁面的頂部，注意到沿左邊一個固定的滾動塊沒有，滾動塊小按鈕鏈接到電子郵件，手機信息，還可以發(fā)送一個請求報價。這個網(wǎng)站聯(lián)系頁面非常生動，讓人耳目一新。

Etsy

Etsy的“團隊”頁面。每個團隊成員照片鏈接到各人簡介頁面。這種個性化的設計無論是對于客戶還是公司的第三方供應商來講是都很棒的。

這個團隊網(wǎng)頁不直接鏈接到他們的聯(lián)系頁面。這是一種有目的的設計選擇，因為公司有那么多職員，足夠撐起一個網(wǎng)頁。不過該網(wǎng)頁可以鏈接到“關于”網(wǎng)頁，“新聞”網(wǎng)頁，其中包含一些電子郵件聯(lián)系信息。

團隊成員列表不是必須有的，但在合適的時機可以作為良好的補充。

任何網(wǎng)頁的最重要的是可用性，只要你學會迎合用戶體驗，那么設計精良的聯(lián)系頁面就不在話下了。

在線咨詢

上一篇：把HTML轉成PDF的4個方案及實現(xiàn)方法
下一篇：CSS background-repeat 屬性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商