整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML（Hyper Text Markup Language超文本標識語言）
HTML發展的5個階段
1.HTML1.0版本是因為當時有很多不同版本，有些人認為蒂姆·伯納斯·李的版本應該最初版，這個版本沒有IMG元素。
2.在IETF主持下，1995年11月在瑞士日內瓦舉行的第一次www會議上成立了一個HTML工作小組，它的主要任務是把HTML形式化成為一中SGML DTD，稱之為HTML Level2。
3.HTML3.0規范是有當時成立的W3C于1995年3月推出，提供了很多新的特性，例如表格，文字繞排，和復雜數學元素顯示，雖然它是設計用來兼容2.0版本的，但是實現這個標準的工作在當時過于復雜，在草案于1995年過期時，標準開發業因為缺乏瀏覽器支持而終止了。3.1版本從未被正式提出，而下一個被提出的版本是HTML3.2，去掉了大部分3.0中的新特性，但是加入了很多特定瀏覽器。
4.HTML4.0同樣也加入了很多特定瀏覽器的元素和屬性，但是同時也開始“清理”這個標準，把一些元素和屬性標記為過時的，建議不再使用它們。HTML的未來和CSS結合會很好。
5.HTML5目前仍為草案，并已經被W3C認可。
主體部分包含文本、圖像和鏈接。它包括在<BODY>...</BODY>標簽內
頭部部分包含標題和其他說明信息。包括在<HEAD>...</HEAD>標簽內
一個HTML文件是由一系列的元素和標簽組成的
HTML標簽的介紹
HTML的標簽分為單獨出現的標簽和成對出現的標簽兩種
說明：在每個HTML標簽，大、小寫混寫均可
例如<HTML>、<html>和<Html>,其結果都是一樣的。
HTML元素介紹
當用一組HTML標簽將一段文字包含在中間時，這段文字與包含文字的HTML標簽被稱之為一個元素
在所有HTML文件，最外層的元素是有<html>標簽建立的。在<html>標簽所建立的元素中，包含了練個主要的子元素，這兩個子元素是由<head>標簽與<body>標簽所建立的。<head>標簽所建立的元素內容為 文件標題，而<body>標簽所建立的元素內容為文件主體。
1.手工直接編寫
記事本等，存成.htm或.html格式
2.使用可視化HTML編輯器
Frontpage、Dreamweaver等
3.有web服務器（或稱http服務器）一方實時動態地生成。
演示用記事本創建網頁：
網頁的布局有很多種方式，一般分為以下幾個部分：
一般網頁的布局
頭部區域部分位于整個網頁的頂部，一般用于設置網頁的標題或者網頁的圖標：
實例如下：
代碼1
效果1
代碼2
效果2
部分代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS網頁布局教程</title>
<style>
body {
margin: 0;
}
/* 頭部樣式 */
.header {
background-color:darkslategrey;
padding: 25px;
text-align: center;
}
h1
{
color: aliceblue;
}
</style>
</head>
<body>
<div class="header">
<h1>頭部區域部分</h1>
</div>
</body>
</html>菜單導航條包含了一些鏈接，可以引導用戶瀏覽其他頁面：
代碼1
代碼1
效果
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 網頁布局 </title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* 頭部樣式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* 導航條 */
.topnav {
overflow: hidden;
background-color:midnightblue;
}
/* 導航鏈接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鏈接 - 修改顏色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="header">
<h1>頭部區域</h1>
</div>
<div class="topnav">
<a href="#">導航鏈接</a>
<a href="#">導航鏈接</a>
<a href="#">導航鏈接</a>
</div>
</body>
</html>內容區域一般形式（根據屏幕分辨率和舒適的視覺體驗）:
內容區域一般形式
創建一個響應式布局PC和以設備有不一樣的布局，如下：
部分代碼
PC 換顯示
移送設備顯示
IPad顯示
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 網頁布局(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* 頭部樣式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* 導航條 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 導航鏈接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鏈接 - 修改顏色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 創建三個不相等的列 */
.column {
float: left;
padding: 10px;
}
/* 左右兩側寬度 */
.column.side {
width: 25%;
}
/* 中間區域寬度 */
.column.middle {
width: 50%;
}
/* 列后面清除浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 響應式布局 - 寬度小于600px時設置上下布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>頭部區域</h1>
<p>重置瀏覽器大小查看效果。</p>
</div>
<div class="topnav">
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#">鏈接</a>
</div>
<div class="row">
<div class="column side">
<h2>左側欄</h2>
<p>網頁布局教程 - 網頁布局教程</p>
</div>
<div class="column middle">
<h2>主區域內容</h2>
<p>網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程</p>
<p>網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程</p>
</div>
<div class="column side">
<h2>右側欄</h2>
<p>網頁布局教程 - 網頁布局教程</p>
</div>
</div>
</body>
</html>底部區域部分在網頁的最下方，一般包含版權信息，爬蟲信息和聯系方式等。
HTML代碼
CSS代碼
效果
實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 網頁布局 </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* 頭部樣式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* 導航條 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 導航鏈接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鏈接 - 修改顏色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 創建三個相等的列 */
.column {
float: left;
padding: 10px;
}
/* 左右兩側寬度 */
.column.side {
width: 25%;
}
/* 中間區域寬度 */
.column.middle {
width: 50%;
}
/* 列后面清除浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 響應式布局 - 寬度小于600px時設置上下布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
/* 底部樣式 */
.footer {
background-color:black;
padding: 10px;
text-align: center;
}
p
{
color:white;
}
</style>
</head>
<body>
<div class="header">
<h1>頭部區域</h1>
<p>重置瀏覽器大小查看效果。</p>
</div>
<div class="topnav">
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#">鏈接</a>
</div>
<div class="row">
<div class="column side">
<h2>左側欄</h2>
<p>菜鳥教程 - 學的不僅是技術，更是夢想！</p>
</div>
<div class="column middle">
<h2>主區域內容</h2>
<p>菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！</p>
<p>菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！</p>
</div>
<div class="column side">
<h2>右側欄</h2>
<p>菜鳥教程 - 學的不僅是技術，更是夢想！</p>
</div>
</div>
<div class="footer">
<p>底部區域</p>
</div>
</body>
</html>下次詳細講解另一種響應式網頁的實現，感謝點贊助力！
另一種響應式頁面
.HTML 介紹
是網頁的后綴，txt 后綴是文本 ，py 后綴是 python ，html 后綴就是網頁的意思。我們如果想創建一個網頁的話，可以直接將文本的后綴改為 html 。HTMLSHI 超文本標記語言，是一種標識性的語言。它包括一系列標記標簽，通過這些標記標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。
1.html 的介紹
頁面整體分為兩部分：
一部分是head部分，主要是頁面的整體信息和配置，內容不會出現在瀏覽器內部。
一部分是body部分，這部分內容則會在瀏覽器中展示出來
我們使用 pycharm 創建一個 html ，打開后就是下圖模樣。
（1）文檔類型聲明（默認的可以不用設置）
<!DOCTYPE html>（2）開始標簽和結束標簽
一般的標簽是成對出現的，一般稱第一個標簽是開始標簽，第二個是結束標簽。開始和結束標簽也稱為開放標簽和閉合標簽。
開始標簽：
<html lang="en">其中的 html 為根元素，是所有元素的基礎。lang 表示語言，en 表示英文。
結束標簽：
</html>（3）頭部標簽
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>其中 utf-8 表示字符編碼格式，如果沒有寫這個就會發生亂碼。Title 表示文檔的標題。
（4）身體標簽
<body>
</body>身體標簽是文檔的主題，可視化區域，所有的音頻，視頻，圖片，文字都可在其中搭建，相當于我們打開網頁時所看到內容。
（5）標簽的特點
標簽是由一對尖括號包裹單詞構成的，標簽要使用小寫。 一般的標簽是成對出現的，一般稱第一個標簽是開始標簽，第二個是結束標簽。開始和結束標簽也稱為開放標簽和閉合標簽。
二.標簽
標簽分為塊級標簽和內聯標簽（運行時點擊右上角的谷歌模式的小圓圈就可以）
1.內容的書寫
（1）塊級標簽（p）
兩個 p 中間可隨意書寫內容
<p>故事和酒，淘寶都有</p>（2）內聯標簽（span）
<span>故事和酒，淘寶都有</span>完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有</p>
<!--內聯標簽-->
<span>故事和酒，淘寶都有</span>
</body>
</html>運行后：
運行后看不出塊級標簽和內聯標簽的區別，所有我們使用檢查。右擊后點擊檢查
在點擊下圖中左上角的方框箭頭，變成藍色說明正在運行，之后就可以查看有關的數據了
無需點擊，只要將箭頭放在文字上就會出現相關內容
上面兩圖可以明顯看出兩句話的寬度不相同。
塊級標簽：在不設置寬度的情況下，寬度始終和瀏覽器寬度保持一致。
內聯標簽：寬度和內容有關
2.設置高度寬度
<p style="width: 500px;height: 50px;">故事和酒，淘寶都有</p>
<span style="width: 500px;height: 50px;">故事和酒，淘寶都有</span>
如圖所示，只有塊級標簽寬高改變了，內聯標簽不改變。由此可得，塊級標簽設置寬高有效，內聯標簽設置寬高無效。
3.多個標簽同時存在
<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有</p>
<p>故事和酒，淘寶都有</p>
<!--內聯標簽-->
<span>故事和酒，淘寶都有22</span>
<span>故事和酒，淘寶都有22</span>
</body>
多個塊級標簽同時存在的情況下，排列方式從上往下
多個內聯標簽同時存在的情況下，排列方式從左往右
4.是否包含
<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有
<span>故事和酒，淘寶都有22</span>
</p>
<!--內聯標簽-->
<span>故事和酒，淘寶都有22
<p>故事和酒，淘寶都有</p>
</span>
</body>
由此可知，塊級標簽可以包含內聯標簽，但內聯標簽不可以包含塊級標簽，只可以包含內聯標簽。
5.塊級標簽與內聯標簽相互轉換
（1）塊級轉內聯
<body>
<!--將塊級標簽轉化成內聯標簽-->
<p style="display: inline">故事和酒，淘寶都有</p>
<p style="display: inline">故事和酒，淘寶都有</p>
</body>
（2）內聯轉塊級（display: block）
內聯轉為塊級之后，具有了塊級的性質。
<span style="display: block">故事和酒，淘寶都有222</span>
<span style="display: block">故事和酒，淘寶都有222</span>
（3）內聯塊元素（display: inline-block）
內聯塊元素包含了內聯標簽和塊級標簽的部分特性。
<span style="display: inline-block">故事和酒，淘寶都有333</span>
<span style="display: inline-block;height: 50px">故事和酒，淘寶都有333</span>
（4）段落標簽（p）
<!--段落標簽-->
<p></p>（5）標題標簽（h）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
