整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、HTML的核心標記
1、HTML的文檔結構
<html> //告訴瀏覽器后面的代碼是html代碼
<head> //告訴瀏覽器當前網頁如何顯示，如編碼，關鍵詞
</head>
<body> //告訴瀏覽器這里是主體部分，顯示到網頁中
</body>
</html> //html結束
<html></html>：告訴瀏覽器，其中的代碼用的什么格式；
<head></head>：告訴瀏覽器，這是網頁的頭部，包括了定義網頁的一些內容的標簽，如：標題、字符集等
<meta>：就是定義網頁字符集、描述、關鍵詞等內容的。
如：<meta charset=”utf8”> 字符集：?功能：告訴瀏覽器，如何翻譯漢字。
<title></title>：當前網頁的標題，在網頁中是必須的
<body></body>：網頁的主體部分,網頁中主要內容都要寫到body里。
2、HTML的注釋
<!--寫注釋內容-->
3、代碼的規范
4、html標記分類
單標記：標記只有一個，不是修飾內容的而是顯示某個功能的，如果圖片，設置編碼，設置關鍵詞等
語法：<標記名稱 屬性=”值” 屬性2=”值2” />：接收的/可以有可以沒有，必須根據開發網站時 要求來
例：<img src=”圖片在服務器中的地址，盤符/文件夾/文件名” />
<img src=”d:/php07/images/01.jpg” />
雙標記：是修飾內容的標記，有開始有結束標記，中間寫要修飾的內容
語法：<標記名稱 屬性=”值”>要修飾的內容</標記名稱>
例：<div>內容</div> <font color=”red”>文本</font>
5、body的屬性
Bgcolor：背景顏色 例：<body bgcolor=”顏色”>
顏色：單詞、16進制、rgb方式
Background：背景圖片 例：<body background=”圖片的地址”>
6、文本修飾標記
Font的標記的屬性：
Color：文本的顏色 值：顏色
Size：文本的大小 值：1-6
7、排版標記
hr常用的屬性：
Size：粗細 值：1-100
Color：顏色 值：顏色
Width：寬度 值：數值(固定)或百分比(根據瀏覽器的窗口大小自動調整)
百分比一般用于響應式網站的開發
8、HTML實體字符
功能：在網頁中顯示一些特殊的字符，如，RMB，書名號,+-*/
9、div和span標記
Div是雙標記，是沒有任何意義的塊元素，又用的最多，和CSS配合使用，一般稱為“DIV+CSS”
語法：<div>這里可以放入任何的元素</div>
塊元素：不管內容有多少，都會占整個瀏覽器的一行。一般都是塊元素布局。P,h,pre,div,ul,li,ol
行內元素：內容多少占多少,一般都是行內元素嵌套到塊元素中。
想了解更多請掃描下方二維碼
<div>元素是個有故事的元素，這個元素很早就出現在html超文本標記語言中，它設計之初就是為了解決網頁頁面布局的需求。但是遺憾的是它出生后一直懷才不遇。
在我還上初中的時候，智能手機還沒有出現，更沒有平板電腦等移動設備。上網是通過擺在桌子上的計算機來完成的。
那時，大街小巷上有好多網吧。
那時，馬云剛剛辭去工作準備創業。
那時，發送郵件的操作都會出現在計算機課程中。
那時，對頁面還沒有現在的跨平臺要求。
那時，flashplayer大行其道。
那時，dreamwaver、flash、fireworks被稱為網頁三劍客！
那時，制作網頁可以不用懂的html的寫法！
第一次接觸網頁制作是在大學的專業課上，使用三劍客，通過點擊軟件菜單中的按鈕就能制作網頁，精力都放在了如何使用flash制作酷炫的交互動畫上了。
那時，對html還沒有深刻的認識，但是卻對<table></table>這個標簽有著極深的印象。
因為當時的dreamwaver通過非代碼方式生成的頁面都是使用<table>表格元素進行布局的！
也就是說，在移動智能設備誕生之前，在用戶對頁面還沒有可以適應不同屏幕比例的要求前，<table>這個本來用來做表格的元素同時兼職了<div>的頁面布局工作，而且把兼職干成了主業，讓<div>這個專業的塊元素閑置了好久。
直到智能手機，平板電腦產生后，由于對頁面的跨平臺顯示的要求的出現（這類適應多平臺的頁面布局叫做響應式布局），<table>表格制作的頁面在響應式布局大行其道的今天，用它布局的頁面開始出現代碼冗余，維護困難等諸多問題。手機端的瀏覽器在播放視頻或其他交互動畫時也不再依賴flashplayer這個給我們帶來無數反感和惱火的插件。
從此，頁面制作的世道變了，從不需要編程就能制作頁面的三劍客，變成了必須懂得相關代碼寫法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復了寫代碼做頁面的操作方式，過去的點擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁面制作核心技術的從業人感到難受。
dreamwaver的老東家Adobe后來也嘗試過推出新模式下通過界面操作來制作網頁的軟件，還搞出一個叫做Muse的軟件，但是依舊沒能撬動代碼書寫的方式。
這個故事在開始學習<div>和css布局之前我都會講給學生（一群文科生）聽，我只是想告訴大家，學習任何計算機技術，我們可以從簡單易學的方式入手，但要有透過這種方式向下挖掘核心知識的決心和勇氣！對于自己從事的工作我們不能滿足于會做，還要盡量透析它的原理，這樣才能在技術換代中不會被輕易淘汰。
在我研究生階段，有一門讓我終生難忘的選修課，這門課叫做《數字娛樂技術概述》，這門課既不娛樂也不概述，但是通篇都是數字，那位年輕的教授為我們透析了游戲、影視特效的核心----計算機圖形學。
從此我開始學習數學。因為老師的一句話：從2000年到現在（2014）雖然各種軟件層出不窮，但是計算機圖形學的核心算法卻幾乎沒什么改變。
向下挖掘雖然很難，但是有必要！與各位共勉！
下面開始今天的內容。
首先，我們將之前的"第一個頁面.html"文件復制一個，叫做"塊元素學習.html"。然后把<body></body>中間的內容清空。
如圖：
下面，我們在<body></body>中間添加<div></div>標簽。示例代碼如下：
<body><div></div></body>我們看看效果：
啦啦啦，什么都沒有！
為了讓大家可以看出來不同，我們為<div>添加邊框屬性！
我們使用style屬性為<div>添加邊框，style屬性里的代碼就是以后在CSS中使用的代碼！實際上我們已經開始接觸CSS的一些內容了。具體寫法的講解大家可以看這個教程，這里不再贅述。
示例代碼如下：（通過style="border-style: solid;"可以為很多元素添加邊框，就不需要大家記憶或查詢不同元素的不同寫法，是不是很方便?。?/p>
<div style="border-style: solid;">效果如圖：
因為里面沒有內容，所以<div>的寬度是0，因此顯示的就是一條直線。下面我們向<div>中添加內容。
為了看起來花哨些，加張圖片吧！
示例圖片
示例代碼如下：
<div style="border-style: solid;"><img src="img/示例圖片/image4.jpg"/ style="width:50%；"></div>大家請按照<img>中的scr自行建立文件夾和命名吧！如果您看不懂請參照《HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作》
效果如下：
其中，我們也是使用了style的方式為<img>設置的寬度，這個設置方法在<div>中一樣使用！
代碼示例：大家注意寫法，不同的屬性都添加到style的雙引號中即可，同時使用；隔開！
<div style="border-style: solid; width:50%;">
<img src="img/示例圖片/image4.jpg"/ style="width:50%;">
</div>效果如圖：
整個邊框縮小了50%，圖片更有趣，尺寸變成了div的50%乘以自身的50%。這個特性大家要記住。
為了方便觀看，我們去掉div的width設置。同時在<div>中繼續添加<div>標簽。為了方便顯示，我們在新的<div>中添加一段文字！
示例代碼如下：
<div style="border-style: solid;">
<img src="img/示例圖片/image4.jpg"/ style="width:50%;">
<div>
<p>學習網頁制作非常有趣！</p>
</div>
</div>效果如下：
如果為了美觀，我們讓文字到圖片右邊的空間中怎么做呢？
示例代碼如下：
<div style="float:right;"><p>學習網頁制作非常有趣！</p></div>
我們通過為新的<div>標簽中的style屬性添加float（浮動）屬性，同時設置為right（右）。
頁面效果如圖：
大家思考一下如何讓圖片與文字都靠在左邊呢？
是不是為圖片style添加float:left;同時把新<div>的float改為left？
我們試試看！
示例代碼如下：
<div style="border-style: solid;">
<img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
<div style="float:left;">
<p>學習網頁制作非常有趣！</p>
</div>
</div>頁面效果：
效果完全不對，圖片和文字跑到外邊來了。
這是div布局中經常出現的一個問題！解決方案有點奇葩，既不是修改<img>屬性也不是修改<div>屬性，而是增加一組空的<div></div>標簽！給這個新的空的<div>的style設置為"clear:both"即可修正。
示例代碼如下：
<div style="border-style: solid;">
<img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
<div style="float:left;">
<p>學習網頁制作非常有趣！</p>
</div>
<div style="clear:both;"></div>
</div>頁面效果如下：
值得注意的是，如果您不使用<div>的話直接使用<img>和<p>，同時對兩個標簽的style設置為float：left，是沒有問題的，只有把它們放到<div>中才會出現上面的情況。
代碼如下：
<body>
<img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
<p style="float:left;">學習網頁制作非常有趣！</p>
</body>頁面顯示效果如下：
大家觀察一下，文字也變小了。至于為什么去掉<div>之后就不會出現上面那種出框的情況，而且文字也變小的問題在以后的講解中我們再深入探討！
現在希望大家可以記牢這個情況和操作，更多布局問題我們會在CSS的浮動（float）的講解中詳細說明。
疫情期間，請大家少出門，不聚會，沒事在家學學網頁制作，即抗擊疫情又提高自己!
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
上網的時候，經常需要輸入一些信息，如用戶注冊資料、用戶意見等。填寫完信息后，單
擊提交按鈕，就可以將有關信息提交給網站。這里要填寫的文本框、下拉列表框等元素組合
在一起就稱為表單（form)。就ASP來說，表單設計非常重要，因為在大部分情況下,客戶端
都是通過表單將信息提交給服務器端。只有這樣，才能實現客戶端和服務器端的互動與交流
，也才能實現“真正”的動態網頁程序設計。
現在介紹如何編輯一個表單，至于向服務器端提交表單信息，將在后面詳細講解。下面先來
看一個典型的表單例子：
<html>
<head>
<title>用戶注冊表單示例</mie>
</head>
<body leftmargin="100">
<h1 align="cemer">用戶注冊</h1>
<p><font color="red">以下內容請如實填寫，其中帶有*號的欄目是必須填寫的 <fonn
name="frmUserReg" methods="POST" action="mailto:jjshang@263.net" >
<p>請選擇用戶名:
<input type="text" name="txtUserld" size="15">*
<P>請輸入你的密碼：
<input type="password" name="txtPwd" size="8" maxlength="8">*(密碼不能超過8位
）
<P>請再次輸入密碼：
<input type="password" name="txtPwd2" size="8" maxlength="8">*
<p>請輸入你的姓名：
<input typc="text" name="txtUserName" size="15">*
<p>請選擇你的性別：
<input type="Radio" name="rdoSex" value="male" checked >男
<input type="Radio" name="rdoSex" value="femail">女*
<p>請輸入你的生日：
<input type="text" name"txtYear" size=”4"> 年
<input type="text" name="txtMonth" size="2">月
<input type="text" name="txtDay" size="2">日
<P>請選擇你的最髙學歷：
<select size="1" namc="sltEducation">
<option value="髙中">高中</option>
<option value="本科" selectd>大學本科</option>
<option value="碩士">碩士</option>
<option value="博士">博士</option>
</select>
<p>請選擇你的愛好：
<input type="checkbox" name="chkLove" value="book">讀書
<input type="checkbox" name="chkLove" value="movie">看電影
<input type="checkbox" name="chkLove" value="travel">旅游
<input type="checkbox" name="chkLove" value="other">其他
<P>你有什么意見嗎？
<textarea name="txtMemo" rows="4" cols="40"></tcxtarea>
<p align="center"> <input type="submit" name="btnSubmit" value="提交">
<input type="reset" name="btnReset" value="取消">
</form>
</body>
</html>
下面來詳細介紹構成表單的各個標記及屬性。
<form>與</form>標記:該標記用于定義一個表單，任何一個表單都是以<form>開始，以</form>結束。在其中包含了一些表單元素，如文本框，按鈕，下拉列表框等。其屬性名稱有name，methed，action。
<input>與</input>標記：該標記用于在表單中定義單行文本框，密碼框，單選框，復選框，按鈕等表單元素。不同的元素有不同的屬性，詳細的屬性名稱有type,name,size,maxlengh,value,checked。
<select>與</select>標記：該標記用于定義一個列表框，其中的一個<option>標記就是列表框中的一項。其中有name,size,multiple等屬性。
<textarea>與</textarea>:該標記用于定義一個多行文本框（也叫文本區域），常用于需要輸入大量文字內容的網頁中，如留言板，BBS等。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
