前端基礎——一篇文章帶你瞭解HTML語法
前言
在做web開發時，我們必不可少的要使用到Html，因為它包含了最基礎的網頁結構，雖然Html只能幫助我們構建靜態網頁，但是卻是我們最不能缺少的部分，如果把網頁比作一個房子，那麼Html就是地基，也就是第一件要做的事，可見它的重要性。那麼，現在大家就跟隨我的腳步去學習下吧。
一、Html基本語法
要想知道Html的語法規則，首先我們得建立一個以Html為字尾的檔案，當然也可以是Htm 或者是XHtml，這裡不講述它們的區別。
在寫Html之前容我給大家介紹一個神器，它擁有所見即所得的神器效果，也就是說有了它，我們可以編寫Html程式碼邊看結果，完全不用瀏覽器，可以說是相當方便，它就是ExHtmlEditor。
下載地址：
https：//u062。com/file/7715018-445508413
下載解壓後即可使用，無需安裝，方便快捷。
下面就讓我們透過這個軟體來正式敲開Html的大門吧。
1。標題
我們經常寫文章的時候，常會使用標題，可以發現標題的字型一般比段落的字型要大，因為它要突出整篇文章的核心，用最簡短的文字描繪出來。Html中設定標題的相關程式碼就是
~
，注意一定要寫關閉它們，否則會引發位置的錯誤。我們常常將這些尖括號裡的東西叫做標籤，下面我們來看下：
可以看到，標題的字型越來越小。
2。段落
一篇文章除了標題，當然就是一個個段落了，段落中我們常常使用的標籤有p標籤，寫法同上，只是標籤名不同而已。
3。段落中的文字樣式
我們都知道，一個段落裡的文字總是比較多的，這就不乏會有一些比較大的引人注目的文字，也會有比較小的文字，更有帶顏色的文字。那麼這是怎麼實現的了，下面我們來看看：
粗體
大號字
著重文字
斜體字
小號字
加重語氣
下標
上標
插入字
刪除字
下劃線
計算機程式碼
鍵盤文字
計算機程式碼樣本
打字機程式碼
變數
預格式文字
縮寫
地址首字母縮寫
文字方向
長引用
短引用
引用
定義專案
別看著挺多的內容就被嚇到了，其實這些東西很好學的，主要是現在的Html編輯器都有自動提示功能，所以你根本不需要記住它們的全稱就可以很輕鬆寫出程式碼來，不過，光是這樣還不行。
4。換行，水平線
當我們寫文章時必須要換行，有時候還要使用水平線進行分割才能讓文章顯得更有層次感，那麼該怎麼做了，也是很簡單的。
5。註釋程式碼
在寫程式碼時難免會寫註釋，這個時候我們需要寫一寫註釋來說明程式碼的作用。格式為：
<！—— 這是註釋 ——>
<！—— 註釋完畢——>
6。連結
我們在瀏覽網頁時點選一個地方的按鈕它會跳到另一個地方，那麼這就是所謂的連結了。
一般它用a標籤包裹，裡面有標籤名，標籤跳轉的地址等資訊，我們來看看。
1）。連結的表現形式
百度 #可以是一個url地址，點選即可開啟百度首頁
百度 #也可以是一個Html檔案
傳送郵件#建立電子郵箱連結
2）。連結的跳轉方式
另外，它還可以定義你開啟的頁面是當前頁面還是新的頁面或者說是上一個頁面：
百度 #新視窗打卡百度
百度 #上一個視窗開啟百度
百度 #父視窗開啟百度
百度 #當前視窗開啟百度
3）。錨鏈接
它可以快速定位頁面中的某些標題，可以透過設定name屬性來設定錨鏈接。
7。圖片
為了美化我們的網頁，有時候肯定會新增圖片，那麼該怎樣新增圖片了，下面請看：
1）。插入圖片
#我們只需輸入圖片地址即可，後面兩項為滑鼠放在圖片上顯示的內容和圖片顯示不出來的時候的替代文字
2）。設定背景圖片
需要在body標籤中設定背景為圖片地址。
3）。圖片對映
透過點選圖片跳轉到相應連結頁面。
8。表格
有時候我們也需要插入表格來展示一些資料，表格的製作稍微有點麻煩，不過用Sublime Text 3它可以十分輕鬆的建立表格。表格一般由表頭，表的標題，表的內容組成。最常用的就是Table標籤了。
<！—— 表格邊框1px，單元格邊距5px，單元格間距10px，背景顏色灰色，背景圖片1。jpg——>
| 1——one | <！—— 表格表頭，相當於列 跨兩行 ——>2——two | 3——three | 4——four |
|---|---|---|---|
| a | <！—— 表格單元 ——>b | c | d |
| h | j | k | l |
9。列表
列表就是我們常常見到的一篇文章的目錄，它一般以一種樹型狀存在著，它可以分為有序列表和無序列表。
1）。有序列表
以標籤ol為主體，li為父目錄，具體表現為：
- 任性
- 90後
- boy
- 90後
- boy
- 任性
- 90後
- boy
- 任性
- 90後
- boy
- 任性
- 90後
- boy
- 任性
- 90後
- boy
- 任性
可以看出有序列表支援多種排序字首，它就好比Word中的專案符號一樣。
2）。無序列表
與有序列表唯一不同的就是沒有數字也沒有字母，只有圖形，也是猶如專案符號一樣。
- 任性
- 90後
- boy
- 90後
- boy
- 任性
- 90後
- boy
- 任性
- 90後
- boy
- 任性
可以看出無序列表的預設專案符號就是型別就是黑圓圈
3）。自定義列表
- 1
- 計算機
- 2
- 電腦
- 3
- PC
可以看到自定義列表由我們自己定義列表專案符號，專案的內容
10。塊級元素和內聯元素
1）。塊級元素
什麼是塊級元素，其實就是這個元素在進行顯示後會換行輸出下一個元素，比如我們的P標籤，還有Blockquote 標籤都是，不過今天我們要說的是Html中運用的最廣的塊級元素，它就是Div。
可以看到在Div中的塊級元素都換行了，然而內聯元素都沒有換行。
2）。內聯元素
和塊級元素正好相反，不用換行輸出的那種，比如a標籤，或者是Big Small這些段落中的文字標籤都是內聯元素，當然也有例外，比如Pre標籤，這裡不再細說。今天我們要著重討論的是Span標籤。
小花貓
小懶貓
注意：Span標籤是沒有Align屬性的。
11。框架
框架是什麼？框架就是在一個視窗可以顯示多個頁面內容的一個容器。框架又分為垂直和水平框架。
1）。垂直框架
不可與Body標籤同時出現
2）。水平框架
不可與Body標籤同時出現
3）。內聯框架
#存在body標籤中
frameborder：是否顯示框架周圍的邊框 0隱藏 1顯示
scrolling：是否顯示捲軸 yes顯示 no隱藏 auto自動
width：寬度
height：高度
name：錨點名稱
4）。判斷是否支援框架
12。表單元素
這個算是Html中的重中之重了，因為用的比較多，基本上所有的表單元素都包含在Form標籤中。每一個表單中的空間要麼獨立存在，要麼處於Input中，下面我們來詳細瞭解下：
action：處理表單資料的伺服器指令碼語言（如php）
method：請求方法 如get post
accept-charset：提交表單時的字元編碼 如utf-8
target：頁面跳轉方式
autocomplete：自動完成表單 off關閉 on開啟
enctype：表單資料的編碼 如application/x-www-form-urlencoded（預設），multipart/form-data（檔案上傳），text/plain
novalidate：瀏覽器不驗證表單
formtarget 覆蓋target屬性，用於type=“submit”和type=“image”。
formnovalidate覆蓋novalidate屬性，用於 type=“submit”
formmethod 覆蓋method 屬性，用於 type=“submit”以及type=“image”
formenctype 覆蓋enctype屬性，用於type=“submit”以及type=“image”，僅針對method=“post”的表單
formaction 提交表單時處理該輸入控制元件的檔案的URL
form 規定input元素所屬的一個或多個表單
autofocus 當頁面載入時自動獲得焦點
disabled 輸入欄位應該被禁用
max 輸入欄位的最大值
maxlength 輸入欄位的最大字元數
min 輸入欄位的最小值
pattern 透過其檢查輸入值的正則表示式
readonly 輸入欄位為只讀
required 輸入欄位是必需的
size 輸入欄位的寬度
step 輸入欄位的合法數字間隔
value 輸入欄位的預設值
multiple 常用於郵箱和檔案，可多個上傳檔案
placeholder 提示使用者該如何正確輸入
13。Html 頭部，標題
之所以現在講這個，是不想一開始就長篇大論，增加一些沒必要的修飾，免得擾亂學習的進度。
我們都知道Html，既然是Html，怎麼可以沒有Html標籤了，當然是有的，只是我一開始沒有寫罷了，當然也可以不用寫，不過為了美觀為了不出錯，建議寫上。瀏覽器標題在瀏覽器頭部裡面被它包裹著。
瀏覽器頭部引入外部css檔案
設定瀏覽器內容型別為Html，編碼為utf-8
五秒重新整理
五秒後跳轉到百度
設定搜尋關鍵字 SEO
http-equiv 瀏覽器的內容頭部
content-type 內容型別
expires cookie過期時間
refresh 重新整理
set-cookie 設定cookie
charset 編碼
name 一般做搜尋關鍵詞
author 作者
description 頁面描述內容
keywords 關鍵詞
generator 生成器
revised 修改後的值
others 其它
scheme 用於翻譯網頁文字的格式
http https 協議
YYYY-MM-DD 日期格式
瀏覽器主體內容
14。音、影片
在Html中也是可以播放音訊和影片的，不過這項功能新增在了Html最新版5。0版中的，下面來看看：
1）。音訊
比如說我們經常熟知的Mp3，Wav，可以透過Audio標籤來進行播放。
1））。embed
還可播放Flash動畫 只需將src屬性中的內容換位1。swf即可，不過得先保證你有1。swf這個檔案
2））。object
3））。audio
4））。a標籤
2）。影片
1））。embed
2））。object
3））。video
4））。a標籤
15。Html5中的文章佈局
可以幫我們省去一些不必要的排版標籤，利用新式佈局標籤會顯得更加專業，而且程式碼量更少。
header 頁首
nav 導航
section 文件中的節
article 獨立的自包含文章
aside 側欄
footer 頁尾
details 額外的細節
summary details的標題
CCTV
CCTV-1
CCTV-2
CCTV-3
新聞聯播
大家好，歡迎來到新聞聯播。下面請看簡訊
一男子每天靠擺地攤賺錢，這是怎麼回事呢？
其它簡訊
後浪們，擺攤吧~
擺攤入門知識
商務合作www。這你都信。com
可以看到，文章結構緊湊，排版更加讓人覺得一目瞭然。
二、總結
雖然Html總體來說，可能難度不是很大，但是要想學好，也不是一件容易的事，把一件小事做好，定能出彩。
想要學習更多，請前往Python爬蟲與資料探勘專用網站：
http：//
pdcfighting。com/
想學習更多Python網路爬蟲與資料探勘知識，可前往專業網站：
http：//
pdcfighting。com/
