序言
之前一直想把自己的一個學習記錄,以文章形式記錄下來,方便於自己後期查找和溫故.自己想了想準備建個人博客站來做記錄,但是又想到了csdn的大家庭；所以就放棄了用個人站記錄的想法，關於這裏簡單說明下web應用開發學習具體記錄方向；
HTML/CSS→Javascript→Jquery→PHP→框架設計→mysql→Linux
關於框架設計這塊我個人先推薦一款比較適合新手學習的YDTDPHP框架；推薦目的不是爲了讓你必須去看懂,必須就會立刻自己設計出來,而是對於一起初步的前期瞭解,相對於後面的學習更有助；(該框架也是於2018年低-19年個人所完成的)!
本文章目錄
在開始整個教程記錄前聊聊關於WEB行業的行情：
爲什麼從事web開發
隨着互聯網的發展，越來越多的傳統企業把產品服務都搬到互聯網。而這些企業都需要做web應用，導致這方面的人才需求也隨着增加，工資待遇屢創新高。從短期來講，互聯網都是屬於上升階段，所以需求量還是在不斷的增加，通過招聘平臺得來的數據，單純北上廣這三個地方，日招聘需求量就是高達3萬+。
什麼樣的人適合做web開發
到底是什麼樣的人適合做開發，並沒有絕對的事。任何人都是從不會到會的過程。所以不能說你就不能做開發，其它人就可以做開發。只是說如果有以下條件的朋友，學開發會相對比其它同學容易些。
- 有其它開發語言基礎的。語言都是有共性的，如果有其它語言基礎，學起來會容易很多。
- 英語比較好的，web開發使用的是英語，很多函數通過函數名就可以大概的瞭解函數的作用，另外特別多的技術文檔是英語，所以英語好的人比較有優勢。
- 有計算機基礎的，當然如果瞭解計算機原理的人更好。還有打鍵盤速度要快，不要一指禪(所謂一指彈就是一個手指頭看半天鍵盤點一下的)。
- 理科生，對數據比較敏感。在做數據處理時比較有優勢。
- 邏輯能力比較好。業務開發中，離不開對流程的控制。邏輯能力比較好的朋友，思路清晰，效率高。
萬事沒有絕對的事，並不是說沒有以上條件的朋友就不能學，只是可能需要花比大家更多多的時間和精力。
學習過程中需要注意什麼
有耐心
很多朋友包括我自己身邊的朋友(我推薦去學習)剛開始學習，三分鐘熱度，(當然我也在高中和大學期間也是自學和在某在線教育機構平臺學習也是三分鐘熱度,可是我現在面臨的是畢業,面臨出校園後關於自己的未來選擇,沒辦法我開始給自己下更多的功夫每天大概就睡了3-4小時,目的就是爲了多學習我還不知道的東西還不能熟練運用的東西)學習一段時間就放鬆或者放棄，從事開發需要做事認真,有耐性,能耐的住寂寞(這是我之前在教育機構上學習時候老師說的話)。
知行合一
學的過程中，很多人以爲自己懂了，但是讓自己做又做不出來，知道是一回事，能做出來又是一會事，經驗是通過實踐積累出來的，紙上談兵的人大把，想脫穎而出，那麼你就得比別人做得更好。看一萬遍不如練一遍。古言："讀書萬卷書，行萬里路"；平時多看看大牛分享的乾貨或站點內的基礎視頻等之類,但是不能只是看看必須練，因爲這東西你不練 只是看看,那永遠不會有進步的空間！要讓自己親身體驗,讓你的手指和大腦靈活運用起來！
本教程的優點
1.常用的，不照本宣科講大量的理論
2.供快捷易懂的學習內容
3.不需要特意去背
4.提升學習能力，解決問題能力
web應用開發結構：
web應用
Web應用程序是一種可以通過Web訪問的應用程序。Web應用程序的一個最大好處是用戶很容易訪問應用程序。用戶只需要有瀏覽器即可，不需要再安裝其他軟件。通俗的講，web應用就是大家通常接觸到的網站。
應用程序有兩種模式C/S、B/S。C/S是客戶端/服務器端程序，也就是說這類程序一般獨立運行。而B/S就是瀏覽器端/服務器端應用程序，這類應用程序一般藉助IE等瀏覽器來運行。WEB應用程序一般是B/S模式。Web應用程序首先是“應用程序”，和用標準的程序語言，如C、C++等編寫出來的程序沒有什麼本質上的不同。然而Web應用程序又有自己獨特的地方，就是它是基於Web的，而不是採用傳統方法運行的。換句話說，它是典型的瀏覽器/服務器架構的產物。更多關於WEB應用的瞭解
web應用概念
網站
網站是構成web的基礎，所謂網站(Website)，就是指在網際網絡（萬維網）上，根據一定的規則，使用HTML等工具製作的用於展示特定內容的相關網頁的集合, 同時也是構成web的基礎。
網頁
網頁，是網站中的頁面，是構成網站的基礎。 網頁是構成網站的基本元素，是承載各種網站 應用的平臺。簡單來說，網站就是由網頁組成 的。 網頁通常是HTML格式（文件擴展名爲.html 或.htm或.php或.aspx或.asp或.jsp等）。網頁要通過網頁瀏覽器來閱讀。在瀏覽器訪問相對應的url（地址）就可以往服務器發給送請求
web請求
當客戶端向服務器的程序提出請求時，web服務器根據請求響應對 應的頁面，當頁面中含有php腳本時，服務器會交給PHP解釋器進 行解釋執行，將生成的html代碼再回傳給客戶端，客戶端的瀏覽器 解釋html代碼，最終形成網頁格式的頁面。
web應用開發結構
如何構建一個一個完整的web應用，需要了解到web應用的主要結構。
- 展現層面
展現層面指用戶可以看到的網頁，開發一個網頁需要學習（html+css+javascript+jq）,也就是通常講的前端開發
- 邏輯/業務層面
接受用戶的請求或者數據，進行相關業務流程的處理，這部分需要學習（php或者其它語言java,python,ASP等）;也就是通常講的後端開發
- 存儲層面
一個完整的應用需要把數據進行存儲，讀取，需要學習（mysql或者其它數據庫SQL Server，mongodb等）。
開發工具/環境
優秀的工具，可以使你的開發工作事半功倍，幫助你創建出高品質的Web應用。以下工具在整個web開發過程中慢慢會用到。
PhpStorm
PhpStorm 是 JetBrains 公司開發的一款商業的 PHP 集成開發工具，旨在提高用戶效率，可深刻理解用戶的編碼，提供智能代碼補全，快速導航以及即時錯誤檢查。智能PHP編輯器、JavaScript 編輯器、HTML/CSS編輯器、輕量級IDE、智能的環境、可在Windows, Mac OS X, Linux上運行。
下載地址：https://www.jetbrains.com/phpstorm/
Sublime Text
Sublime Text 是一個輕量、簡潔、高效、跨平臺的編輯器，方便的配色以及兼容vim快捷鍵等各種優點博得了很多前端開發人員的喜愛!Sublime Text 2這款程序員必備代碼編輯器，幾乎每位程序員提到Sublime Text 2都是讚不絕口！它體積小巧，無需安裝，綠色便攜；它可跨平臺支持Windows/Mac/Linux；支持32與64位操作系統，它在支持語法高亮、代 碼補全、代碼片段（Snippet）、代碼摺疊、行號顯示、自定義皮膚、配色方案等所有其它代碼編輯器所擁有的功能的同時，又保證了其飛快的速度！(個人推薦Sublime Text)
下載地址：
http://www.sublimetext.com/3
picpick
PicPick是一款免費截圖軟件，它可以抓取全屏幕或是局部的畫面，而且操作也很簡單，還具備了一般最常用到的基本圖像編輯、屏幕尺、角度、測距、及屏幕演示白板等功能。在前端學習開發中非常有。
git
Git是一款免費、開源的分佈式版本控制系統，用於敏捷高效地處理任何或小或大的項目。管理代碼時候用到。
PhpStudy
PhpStudy就是Windows Apache Mysql PHP集成安裝環境，即在window下的apache、php和mysql的服務器軟件。
支持CentOS、Ubuntu、Debian、Fedora、deepin，Web端管理，QQ羣及論壇技術支持
一鍵創建網站、FTP、數據庫、SSL；安全管理，計劃任務，文件管理，PHP多版本共存及切換；自帶LNMP與LAMP下載地址：https://www.xp.cn/
navicat
強大的數據庫管理和設計工具,支持 Win、Mac 和 linux。直觀的 GUI 讓用戶簡單地管理 MySQL、MariaDB、SQL Server、SQLite、Oracle 和 PostgreSQL 的數據庫。
Xshell
Xshell 是一個強大的安全終端模擬軟件，它支持SSH1, SSH2, 以及Microsoft Windows 平臺的TELNET 協議。
8uFtp
8UFTP客戶端工具,涵蓋其它FTP工具所有的功能。8uftp不佔內存,體積小,多線程,支持在線解壓縮。
SourceTree
SourceTree 是 Windows 和Mac OS X 下免費的 Git 和 Hg 客戶端管理工具，同時也是Mercurial和Subversion版本控制系統工具。
展現層面（HTML/CSS）
HTML簡介
一、網頁的構成
展現形式上的構成
文字，圖片和鏈接是構成一個網頁最基本的元素。除此之外，網頁的元素還包括表單（控件），表格，動畫、音樂、視頻等等。
代碼結構上的構成
從代碼結構上講，網頁的構成就是由html標籤組成，我們需要掌握不同的標籤分別代表着什麼意義，掌握在網頁中展現不同的東西分別需要用什麼標籤。
二、什麼是 HTML
HTML 是用來描述網頁的一種語言。
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標籤 (markup tag)
- HTML 使用標記標籤來描述網頁
- 更多關於HTML的介紹
HTML 文檔 = 網頁
三、如何創建一個HTML文檔
包含HTML標籤的文件叫HTML文檔，文件擴展名爲.html 或.htm等。HTML文檔要通過網頁瀏覽器來閱讀。瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。
通過谷歌或者火狐瀏覽器，我們可以很方便的看HTML文檔的源代碼或者HTML文檔的結構。
通過使用任意文本編輯器直接新建一個文件，文件擴展名爲.html 或.htm保存就創建了一個HTML文檔。通過瀏覽器訪問這個HTML文件。
HTML是一種描述性的語言，沒有邏輯 性，所以學習起來非常容易
四、自己的第一個頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YDTD丶Annuo</title>
</head>
<body>
這是我的第一個html頁面
</body>
</html>
**PS：**看到這朋友你有心動了嘛？不妨趕快打開你的編輯器跟着我建立自己的第一個網頁，並通過瀏覽器訪問吧！
HTML基礎
一、HTML頁面主體結構
<html>
<head>
<!–- 對html文檔進行詮釋、定義、描述不會顯示在文檔當中-->
</head>
<body>
<!-– 對頁面內容進行排版、編輯、顯示在頁面當中，是html頁面的主體-->
</body>
</html>
二、HTML語法結構
1、 HTML標籤
所有標籤：
HTML 標記標籤通常被稱爲 HTML 標籤 (HTML tag)。
- HTML 標籤是由尖括號包圍的關鍵詞，比如<body>
- HTML 標籤通常是成對出現的，比如 <b> 和 </b>
- 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
- 開始和結束標籤也被稱爲開放標籤和閉合標籤
- 關於HTML基礎標籤除了上面給出的菜鳥及W3sc之前我也整理過一篇文章 HTML基礎標籤 用於參考
- 標記符結束中的標記元素用尖括號括起來，帶斜槓的元素表示該標記結束，大多數標記符必須成對使用，以表示作用的起始和結束。
- 結束標記一定要以"/"結束，引號必須使用英文引號，標籤之間不能交叉嵌套，例如<strong>YDTD丶Annuo<li></strong></li>。
- 用兩個尖括號括起來。
- 不區分大小寫，但推薦採用小寫
- 每個標籤都是閉合的
- 同一標籤可以同時擁有N個不同屬性】
對標籤
- 包含起始標籤和結束標籤
- 內容寫在對標籤中間
- 屬性寫在起始標籤尖括號內
- 例如<a href='http://www.ydtdml.com'>YDTD丶Annuo</a>
單標籤
- 只有一個由尖括號括的標籤
- 屬性直接寫在標籤尖括號內
- 例如<img src='ydtd.jpg' alt='YDTD' />
2、HTML屬性
必須放在開始標籤裏面，屬性可以爲標籤提供更多樣化的特性。
3、元素
開始和結束標籤連同包含在他們之間內容，我們通常叫做元素
三、HTML註釋
註釋其實就是對代碼的解釋說明，在代碼書寫過程中合理運用 註釋是十分有必要的。瀏覽器不會解析註釋。說白了，註釋是給人看的，不是給瀏覽 器看的。在sulime Text 中，用Ctrl+?可快速的註釋。
<!-- 註釋內容 -->
四、常用頭部標籤的含義
<head>
<meta charset="UTF-8">
<title>標題標籤</title>
<meta name="keywords" content="關鍵詞，多個關鍵詞用英文逗號隔開"/>
<meta name="description" content="本篇網頁的概述"/>
</head>
例子解釋<meta charset="編碼">編碼設置<title>標題標籤，顯示在瀏覽器標籤中。<keywords> 關鍵詞，多個關鍵詞用英文逗號隔開。<description> 本篇網頁的概述，一段話，對 網站的進一步描述。
五、常見字體標籤
<h1>標題字(最大)</h1>
<h6>標題字(最小)</h6>
<strong>粗體字</strong>
<em>斜體字</em>
<span>無意義的文字標籤 </span>
<u>添加下劃線</u>
<i>斜體</i>
<b>加粗</b>
標題字(最大)
標題字(最小)
粗體字
斜體字
無意義的文字標籤
添加下劃線
斜體
加粗
**PS：**跟着我建一個完整的html文檔，並且把常用的字體標籤練習幾遍吧。
HTML編碼
一、字符編碼
計算機要準確的處理各種文字，需要進行字符編碼，以便計算機能夠識別和存儲各種文字。
案例：
在顯示器上看見的文字、圖片等信息在電腦裏面其實並不是我們看見的樣子，即使你知道所有信息都存儲在硬盤裏，把它拆開也看不見裏面有任何東西，只有些盤片。假設，你用顯微鏡把盤片放大，會看見盤片表面凹凸不平，凸起的地方被磁化，凹的地方是沒有被磁化；凸起的地方代表數字1，凹的地方代表數字0。硬盤只能用0和1來表示所有文字、圖片等信息。那麼字母”A”在硬盤上是如何存儲的呢？可能小張計算機存儲字母”A”是1100001，而小王存儲字母”A”是11000010，這樣雙方交換信息時就會誤解。比如小張把1100001發送給小王，小王並不認爲1100001是字母”A”，可能認爲這是字母”X”，於是小王在用記事本訪問存儲在硬盤上的1100001時，在屏幕上顯示的就是字母”X”。也就是說，小張和小王使用了不同的編碼表。（諜戰密碼本）；
常用字符編碼
- GBK - 漢字內碼擴展規範，兼容GB2312。
[danger]* UTF-8 - 萬國碼（推薦）。- 關於更多字符編碼介紹
二、亂碼產生的原因
文件存儲的字符編碼與瀏覽器在解析的字符編碼不一致。
網頁編碼可以理解爲兩部分：
- head頭部設置的編碼(瀏覽器在解析的字符編碼)
- 網頁文件本身的編碼
解決亂碼也很簡單，只需要將兩部分編碼保持一致即可。
使用editplus等編輯器可以查看文件的存儲編碼。
<meta charset="編碼">
**PS：**建一個HTML文件，以utf-8保存，charset設置爲gbk,瀏覽看是否亂碼吧！
HTML鏈接
HTML 使用超級鏈接與網絡上的另一個文檔相連。 幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。 當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變爲一隻小手。
一、a標籤
Html語法中最重要的標籤之一。通過使用 href 屬性，創建指向另外一個頁面的鏈。通過使用id 屬性，創建一個文檔內部的文檔片段的書籤(可直接跳到文檔指定位置--錨鏈接)。
普通鏈接
<a href="https://www.csdn.net/" target="_blank" title="顯示">YDTD丶Annuo</a>
例子解釋
href屬性規定鏈接的目標- YDTD丶Annuo 始標籤和結束標籤之間的文字被作爲超級鏈接來顯示。
target定義被鏈接的文檔在何處顯示,target="_blank"新窗口打開title鼠標移過時顯示的文字
錨鏈接
給頁面當中的某個特定位置添加標記，可以通過a鏈接直 接指向這個位置，經常用在頁面內容比較多的情況。我們可以創建直接跳至該命名錨（比如頁面中某個小節）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
<div class="d1">
<a href="#mao1">點我跳轉mao1</a>
<div class="d2">
<a name="mao1">我是mao1</a>
</div>
</div>
例子解釋
<a name="mao1">定義錨點<a href="#mao1">跳轉到mao1這個位置
**PS：**頁面中增加a鏈接，指向CSDN，點擊新窗口打開。在頁面的底部設置一個錨點，點擊跳轉到頂部。
HTML圖像
通過使用 HTML，可以在文檔中顯示圖像。
一、img標籤
<img src="/images/logo.png" alt="網站LOGO" title="LOGO" width="280" height="140">
例子解釋
src源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。alt屬性用來爲圖像定義一串預備的可替換的文本，一般用於圖片加載失敗時的文本提示。title鼠標移過時顯示的文字。width圖片寬度。height圖片高度。
img標籤爲單標籤，沒有結束標籤
關於更多img標籤的介紹https://www.runoob.com/html/html-images.html
二、圖片知識
| 格式 | 透明度 | 動畫 | 特點 | 適用場景 |
|---|---|---|---|---|
| JPG/JPEG | × | × | 色彩豐富，壓縮比高，畫質損失小，體積小 | 色彩豐富、要求 體積要小 |
| PNG | √ | × | 色彩豐富，w，設置任意透明度，體積較小，但比jpg體積大一些。 IE6不支持png圖片透明 | 對色彩有特殊要求、需要透明效果 |
| GIF | √ | √ | 僅支持256種顏色，體積小，只有 透明和不透明兩種效果 | 圖片顏色少、需要透明效果 |
| BMP | × | × | 色彩豐富，畫質清晰，但體積偏大 | 不推薦在網頁中使用 |
三、路徑知識
絕對路徑
絕對路徑就是指帶有域名的完整路徑。或者從盤符開始，具體的目標位置。
比如"中國北京市朝陽區建國裏二巷27號"這就是一個生活動中的經典" 絕對"方式的描述
相對路徑
相對路徑則是從當前目錄說起，參照起點爲本文件。
相對於本目錄<a href="./1.html">本目錄下頁面</a>。
相對於上級目錄<img src="../meinv.jpg" title="YDTD" />。
**PS：**試一試在網頁中分別會絕對路徑和相對路徑插入不同的圖片。
HTML列表
在頁面設計中，一系列類似的結構或者數據，可以通過列表的形式來處理。
無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始於<ul> 標籤。每個列表項始於<li> 。
<ul>
<li>鈺嵩君</li>
<li>情感語錄平臺</li>
</ul>
效果如下
- 鈺嵩君
- 情感語錄平臺
有序列表
同樣，有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。
<ol>
<li>鈺嵩君</li>
<li>情感語錄平臺</li>
</ol>
效果如下
- 鈺嵩君
- 情感語錄平臺
定義列表
自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>鈺嵩君</dt>
<dd>簡單而深情</dd>
<dt>總有一句話</dt>
<dd>爲你而寫</dd>
</dl>
效果如下
鈺嵩君
簡短而深情
總有一句話
爲你而寫
以上效果都是沒有做修飾，爲默認效果。實際開發中會以css進行修飾。
**PS：**試着把三種列表都練習幾遍，理清結構和寫法。
HTML表單
HTML 表單用於蒐集不同類型的用戶輸入,是Web瀏覽器和Web服務器進行通信的最常用的手段，即通 過表單，瀏覽器不僅能從Web服務器中獲得信息，而且還能向Web 服務器反饋信息。HTML爲此提供了表單(Form)元素來設計和實現這種交互界面。
常用表單元素
表單形成的交互界面上有許多元素，負責收集用戶輸入 的各種信息，這些元素一般稱爲控件。
- 單行/多行文本框
- 複選框
- 單選按鈕
- 文件域
- 隱藏域
- 下拉菜單
- 提交按鈕
- 重置按鈕
<form method="post" action="">
<!--單行文本-->
<input type="text" />
<!--密碼-->
<input type="password" />
<!--單選框-->
<input type="radio" />
<!--多選框-->
<input type="checkbox" />
<!--隱藏域-->
<input type="hidden" />
<!--提交按鈕-->
<input type="submit" />
<!--文件域-->
<input type="file" />
<!--重置按鈕-->
<input type="reset" />
<!--按鈕-->
<input type="button"/>
<!--文本區域-->
<textarea></textarea>
<!--下拉框-->
<select>
<option>下拉1</option>
<option>下拉2</option>
</select>
</form>
效果如下：
input標籤共有的一些屬性
- type 控件的類型
- value 指定默認值
- name 用於服務器獲取數據
radio單選和checkbox多選
- checked 默認的選中項
- value 該選項被選中後提交到服務器的值
- name 用於服務器獲取數據
select元素（下拉列表）
HTML是通過
<select>和<option>標記來定義輸入列表框的。列表框標記<select>是成對出現標記，首標記<select>和尾標記</select>之間的內容就是一個列表框的內容。和<option>標記用於定義列表框中的各個選項
<select name="" id="" size="" multiple="">
<option value="">下拉1</option>
<option value="">下拉2</option>
<option value="" selected="">...</option>
<option value="">下拉n</option>
</select>
例子解析
name用於服務器獲取數據sizesize屬性是可選的，用於定義列表框的長度。size屬性的 參數值是數字，表示顯示在列表框中的選項數目。當size屬性的參數 值小於列表框中的列表項數目時，瀏覽器會爲該列表框添加滾動條， 用戶可以使用滾動條來查看所有的選項。size屬性的缺省值爲1。
*multiple表示可以多選，如果不設置本屬性，那麼只能單選；按 Ctrl可以多選. 用法：multiple="multiple"value當該項被選中並提交後，web瀏覽器 傳送給服務器的數據。缺省時，瀏覽器將傳送選項的內容selected用來指定選項的初始狀態，表示該選項在初始時 是被選中的。
label標籤
用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上
<p>請點擊文本標記之一，就可以觸發相關控件：</p>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
效果如下：
請點擊文本標記之一，就可以觸發相關控件：
例子解析
for規定label綁定到哪個表單元素。id需要綁定的元素加個標識。
**PS：**試着把所有常用的表單都練習幾遍，理清不同類型表單的作用。
HTML表格
表格由
<table>標籤來定義。每個表格均有若干行（由<tr>標籤定義），每行被分割爲若干單元格（由<td>標籤定義）。字母<td>指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
效果如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
跨行或跨列的表格單元格
跨列
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>Annuo</td>
<td>183 2070 282</td>
<td>183 2070 232</td>
</tr>
</table>
效果如下：
| 姓名 | 電話 | |
|---|---|---|
| Annuo | 183 2070 282 | 183 2070 232 |
例子解釋
屬性colspan橫跨的列數 （合併列）。
跨行
<table border="1">
<tr>
<td>姓名</td>
<td>Annuo</td>
</tr>
<tr>
<td rowspan="2">電話</td>
<td>183 2070 282</td>
</tr>
<tr>
<td>183 2070 232</td>
</tr>
</table>
效果如下：
| 姓名 | Annuo |
| 電話 | 183 2070 282 |
| 183 2070 232 |
例子解釋
屬性rowspan橫跨的行數
表格中的空單元格
在一些瀏覽器中，沒有內容的表格單元顯示得不太好。如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。爲了避免這種情況，在空單元格中添加一個空格佔位符，就可以將邊框顯示出來。
綜合運用：把所有以上的知識點的全部結合一下，通過以上學習內容，運用表格標籤和表單標籤，布出下面簡歷。
HTML 實體
在 HTML 中，某些字符是預留的。 在 HTML 中不能使用小於號（< ）和大於號（>），這是因爲瀏覽器會誤認爲它們是標籤。 如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體。
HTML 中有用的字符實體
在 HTML 中，某些字符是預留的。 在 HTML 中不能使用小於號（< ）和大於號（>），這是因爲瀏覽器會誤認爲它們是標籤。 如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體。
HTML 中有用的字符實體
| 顯示結果 | 描述 | 實體名稱 | 實體編號 |
|---|---|---|---|
| 空格 | |   | |
| < | 小於號 | < | < |
| > | 大於號 | > | > |
| & | 和號 | & | & |
| " | 引號 | " | " |
| ' | 撇號 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 鎊 | £ | £ |
| ¥ | 日圓 | ¥ | ¥ |
| € | 歐元 | € | € |
| § | 小節 | § | § |
| © | 版權 | © | © |
| ® | 註冊商標 | ® | ® |
| ™ | 商標 | ™ | ™ |
| × | 乘號 | × | × |
| ÷ | 除號 | ÷ | ÷ |
HTML框架
幀窗口是一種頁面技術，應用幀技術可以使得用戶在同一個瀏覽 器中，瀏覽不同的頁面，並且各個頁面之間相互聯繫，並且能夠 相互訪問和進行操作。
實現思路
將瀏覽器的窗口按照不同的功能分割成多個小窗口，每個窗口 對應自己的HTML頁面，按照一定的方式組合起來，實現特殊 的效果。
應用場景
網站後臺操作界面,內容層級明確的頁面
缺點
頁面佈局比較複雜，效率沒有單頁面高，對搜索引擎的友好程度不高
一、 frameset
- 不能和body共存。
- 表示框架開始，指定框架的個數以及邊框等屬性
- 屬性：rows="" 、cols=""、值可以是百分比也是可以是具體的數字，也可以是* 進行等分
- frameborder="" ,0表示沒有邊框，1表示有邊框
例1
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
例2
<frameset rows="50%,50%">
<frame src="frame_a.html">
<frameset cols="25%,75%">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</frameset>
二、 iframe
用於在網頁內顯示網頁,可以和body體共存，用法和類似，用於早期 實現異步傳輸等視覺效果。
實例
<iframe class="HtmlEdit" width="100%" frameborder=0 height="100" scrolling="no" src="https://www.csdn.net/" MARGINHEIGHT="1" MARGINWIDTH="1" name="testframename">
</iframe>
<a href="http://www.ydtdml.com" target="testframename">點擊指向其它框架</a>
| 屬性 | 值 | 描述 |
|---|---|---|
| align |
|
不贊成使用。 請使用樣式代替。 規定如何根據周圍的元素來對齊此框架。 |
| frameborder |
|
規定是否顯示框架周圍的邊框。 |
| height |
|
規定 iframe 的高度。 |
| longdesc | URL | 規定一個頁面，該頁面包含了有關 iframe 的較長描述。 |
| marginheight | pixels | 定義 iframe 的頂部和底部的邊距。 |
| marginwidth | pixels | 定義 iframe 的左側和右側的邊距。 |
| name | frame_name | 規定 iframe 的名稱。 |
| sandbox |
|
啓用一系列對 <iframe> 中內容的額外限制。 |
| scrolling |
|
規定是否在 iframe 中顯示滾動條。 |
| seamless | seamless | 規定 <iframe> 看上去像是包含文檔的一部分。 |
| src | URL | 規定在 iframe 中顯示的文檔的 URL。 |
| srcdoc | HTML_code | 規定在 <iframe> 中顯示的頁面的 HTML 內容。 |
| width |
|
定義 iframe 的寬度。 |
**PS：**那麼咱們對於HTML的介紹及實例介紹到這就結束了；如果有了解不透的點擊下方鏈接詳細瞭解
文章持續更新中...下篇是CSS的展現層面介紹！