01-快速入門：HTML

HTML · 發表 2018-10-15 19:46:00

摘要： html概述和基本結構 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

html概述和基本結構

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
</head>
<body>
網頁顯示內容
</body>
</html>

注：定義成中文是’lang=”zh-CN”‘

html段落標籤、換行標籤與字元實體

<p></p>標籤定義一個文字段落，
一個段落含有預設的上下間距，
段落之間會用這種預設間距隔開.
換行：<br />
空格： 
注：“<” 和 “>” 的字元實體為 < 和 >

html塊標籤、含樣式的標籤

html塊標籤

1、<div> 標籤 塊元素，表示一塊內容，沒有具體的語義。
2、<span> 標籤 行內元素，表示一行中的一小段內容，沒有具體的語義。

含樣式和語義的標籤

1、<em> 標籤 行內元素，表示語氣中的強調詞
2、<i> 標籤 行內元素，表示專業詞彙
3、<b> 標籤 行內元素，表示文件中的關鍵字或者產品名
4、<strong> 標籤 行內元素，表示非常重要的內容

語義化的標籤

語義化的標籤，就是在佈局的時候多使用有語義的標籤，搜尋引擎在爬網的時候能認識這些標籤，理解文件的結構，方便網站的收錄。

比如：

h1標籤是表示標題，
p標籤是表示段落，
ul、li標籤是表示列表，
a標籤表示連結，
dl、dt、dd表示定義列表等，
語義化的標籤不多。

html影象標籤，絕對路徑和相對路徑

html影象標籤

<img>標籤可以在網頁上插入一張圖片，它是獨立使用的標籤，它的常用屬性有：

src屬性 定義圖片的引用地址
alt屬性 定義圖片載入失敗時顯示的文字，搜尋引擎會使用這個文字收錄圖片、盲人讀屏軟體會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。

<img src="images/pic.jpg" alt="產品圖片">

絕對路徑和相對路徑

絕對地址：相對於磁碟的位置去定位檔案的地址。

相對地址：相對於引用檔案本身去定位被引用的檔案地址。

絕對地址在整體檔案遷移時會因為磁碟和頂層目錄的改變而找不到檔案，相對路徑就沒有這個問題。相對路徑的定義技巧：

“ ./ ” 表示當前檔案所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
“ ../ ” 表示當前檔案所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images資料夾中的pic.jpg的圖片。

html連結標籤

href屬性：定義跳轉的位置
title屬性：定義滑鼠懸停時彈出的提示文字框
target屬性：定義連結視窗開啟的位置
target="_self" 預設值，新頁面替換原來的頁面，在原來位置開啟
target="_blank" 新頁面會在新開的一個瀏覽器視窗開啟

html列表

有序列表

在網頁上定義一個有編號的內容列表可以用<ol>,<li>配合使用來實現，程式碼如下：
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>

無序列表

在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現，程式碼如下：
<ul>
<li><a href="#">新聞標題一</a></li>
<li><a href="#">新聞標題二</a></li>
<li><a href="#">新聞標題三</a></li>
</ul>

定義列表

定義列表通常用於術語的定義。
<dl>標籤表示列表的整體。
<dt>標籤定義術語的題目。
<dd>標籤是術語的解釋。
一個<dl>中可以有多個題目和解釋，程式碼如下：
<h3>前端三大塊</h3>
<dl>
<dt>html</dt>
<dd>負責頁面的結構</dd>

<dt>css</dt>
<dd>負責頁面的表現</dd>

<dt>javascript</dt>
<dd>負責頁面的行為</dd>

</dl>

html表單

1、<form>標籤 定義整體的表單區域

action屬性 定義表單資料提交地址
method屬性 定義表單提交的方式，一般有“get”方式和“post”方式

2、<label>標籤 為表單元素定義文字標註

3、<input>標籤 定義通用的表單元素

type屬性
type="text" 定義單行文字輸入框
type="password" 定義密碼輸入框
type="radio" 定義單選框
type="checkbox" 定義複選框
type="file" 定義上傳檔案
type="submit" 定義提交按鈕
type="reset" 定義重置按鈕
type="button" 定義一個普通按鈕
type="image" 定義圖片作為提交按鈕，用src屬性定義圖片地址
type="hidden" 定義一個隱藏的表單域，用來儲存值
value屬性 定義表單元素的值
name屬性 定義表單元素的名稱，此名稱是提交資料時的鍵名

4、<textarea>標籤 定義多行文字輸入框

5、<select>標籤 定義下拉表單元素

6、<option>標籤 與<select>標籤配合，定義下拉表單元素中的選項

登錄檔單例項：
<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密碼：</label><input type="password" name="password" />
</p>
<p>
<label>性別：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>愛好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>個人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍貫：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">廣州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input型別為submit定義提交按鈕
還可以用圖片控制元件代替submit按鈕提交，一般會導致提交兩次，不建議使用。如：
<input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>

html表格

1、<table>標籤：宣告一個表格，它的常用屬性如下：

border屬性 定義表格的邊框，設定值是數值
cellpadding屬性 定義單元格內容與邊框的距離，設定值是數值
cellspacing屬性 定義單元格與單元格之間的距離，設定值是數值
align屬性 設定整體表格相對於瀏覽器視窗的水平對齊方式,設定值有：left | center | right

2、<tr>標籤：定義表格中的一行

3、<td>和<th>標籤：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格，它們的常用屬性如下：

align 設定單元格中內容的水平對齊方式,設定值有：left | center | right
valign 設定單元格中內容的垂直對齊方式 top | middle | bottom
colspan 設定單元格水平合併，設定值是數值
rowspan 設定單元格垂直合併，設定值是數值

頁面佈局概述

佈局也可以叫做排版，它指的是把文字和圖片等元素按照我們的意願有機地排列在頁面上，佈局的方式分為兩種：

1、table佈局：
通過table元素將頁面空間劃分成若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實現佈局。這種佈局方式也叫傳統佈局，目前主要使用在EDM(廣告郵件中的頁面)中，主流的佈局方式不用這種。

2、HTML+CSS佈局(DIV+CSS)：
主要通過CSS樣式設定來佈局文字或圖片等元素，需要用到CSS盒子模型、盒子型別、CSS浮動、CSS定位、CSS背景圖定位等知識來佈局，它比傳統佈局要複雜，目前是主流的佈局方式。

table佈局以及例項

table來做整體頁面的佈局，佈局的技巧歸納為如下幾點：

1、按照設計圖的尺寸設定表格的寬高以及單元格的寬高。

2、將表格border、cellpadding、cellspacing全部設定為0，表格的邊框和間距就不佔有頁面空間，它只起到劃分空間的作用。

3、針對區域性複雜的佈局，可以在單元格里面再巢狀表格，巢狀表格劃分區域性的空間。

4、單元格中的元素或者巢狀的表格用align和valign設定對齊方式

5、通過屬性或者css樣式設定單元格中元素的樣式