- w3cschool菜鳥教程.CHM（騰訊微云）：https://share.weiyun.com/c1FaX6ZD
- HTML/CSS學習筆記01【概念介紹、基本標簽、表單標簽】【day01】
- HTML/CSS學習筆記02【表單標簽】【day02】
- HTML/CSS學習筆記02【CSS概述、CSS選擇器、CSS屬性、CSS案例-注冊頁面】【day02】
目錄
第1節 概念介紹
今日內容
概念介紹_軟體架構
web概念概述
概念介紹_資源分類
web概念概述
HTML概念介紹
HTML快速入門
第2節 基本標簽
HTML標簽_檔案標簽
w3cschool菜鳥教程.CHM
Idea創建web專案
HTML標簽_文本標簽1
HTML標簽_文本標簽2
HTML標簽_文本標簽_練習
顏色取色器
特殊字符表
案例：公司簡介
HTML標簽_圖片標簽
相對路徑
HTML標簽_串列標簽
HTML標簽_鏈接標簽
HTML標簽_塊標簽
HTML標簽_語意化標簽
HTML標簽_表格標簽1
HTML標簽_表格標簽2
HTML標簽_綜合案例_分析
HTML標簽_綜合案例_實作
第1節 概念介紹
今日內容
- web概念概述
- HTML
概念介紹_軟體架構
web概念概述
* JavaWeb：
* 使用Java語言開發基于互聯網的專案* 軟體架構：
1. C/S: Client/Server 客戶端/服務器端
* 在用戶本地有一個客戶端程式，在遠程有一個服務器端程式
* 如：QQ、迅雷...
* 優點：
1. 用戶體驗好
* 缺點：
1. 開發、安裝、部署、維護 麻煩
2. B/S: Browser/Server 瀏覽器/服務器端
* 只需要一個瀏覽器，用戶通過不同的網址(URL)，可以訪問不同的服務器端程式
* 優點：
1. 開發、安裝、部署、維護 簡單
* 缺點：
1. 如果應用過大，用戶的體驗可能會受到影響
2. 對硬體要求過高
概念介紹_資源分類
web概念概述
* B/S架構詳解
* 資源分類：
1. 靜態資源：
* 使用靜態網頁開發技術發布的資源，
* 特點：
* 所有用戶訪問，得到的結果是一樣的，
* 如：文本、圖片、音頻、視頻, HTML、CSS、JavaScript
* 如果用戶請求的是靜態資源，那么服務器會直接將靜態資源發送給瀏覽器，瀏覽器中內置了靜態資源的決議引擎，可以展示靜態資源，
2. 動態資源：
* 使用動態網頁技術發布的資源，
* 特點：
* 所有用戶訪問，得到的結果可能不一樣，
* 如：jsp/servlet,php,asp...
* 如果用戶請求的是動態資源，那么服務器會執行動態資源，轉換為靜態資源，再發送給瀏覽器，* 我們要學習動態資源，必須先學習靜態資源！
* 靜態資源：
* HTML：用于搭建基礎網頁，展示頁面的內容，
* CSS：用于美化頁面，布局頁面，
* JavaScript：控制頁面的元素，讓頁面有一些動態的效果，
HTML概念介紹
1. 概念：是最基礎的網頁開發語言
* Hyper Text Markup Language 超文本標記語言
* 超文本:
* 超文本是用超鏈接的方法，將各種不同空間的文字資訊組織在一起的網狀文本.
* 標記語言:
* 由標簽構成的語言，<標簽名稱> 如 html，xml
* 標記語言不是編程語言，
HTML快速入門
2. 快速入門：
* 語法：
1. html檔案后綴名 .html 或者 .htm
2. 標簽分為
1. 圍堵標簽：有開始標簽和結束標簽，如 <html> </html>2. 自閉和標簽：開始標簽和結束標簽在一起，如 <br/>
3. 標簽可以嵌套：
需要正確嵌套，不能你中有我，我中有你
錯誤：<a><b></a></b>
正確：<a><b></b></a>4. 在開始標簽中可以定義屬性，屬性是由鍵值對構成，值需要用引號(單雙都可)引起來，
5. html的標簽不區分大小寫，但是建議使用小寫，* 代碼：
<html>
<head>
<title>title</title>
</head>
<body>
<FONT color='red'>Hello World</font><br/>
<font color='green'>Hello World</font>
</body>
</html>
第2節 基本標簽
HTML標簽_檔案標簽
w3cschool菜鳥教程.CHM
w3cschool菜鳥教程.CHM（騰訊微云）：https://share.weiyun.com/c1FaX6ZD
1. 檔案標簽：構成html最基本的標簽
* html：html檔案的根標簽，
* head：頭標簽，用于指定html檔案的一些屬性；引入外部的資源，
* title：標題標簽，
* body：體標簽，
* <!DOCTYPE html>：html5中定義該檔案是html檔案，
Idea創建web專案
HTML標簽_文本標簽1
2. 文本標簽：和文本有關的標簽
* 注釋：<!-- 注釋內容 -->
* <h1> to <h6>：標題標簽
* h1~h6:字體大小逐漸遞減
* <p>：段落標簽
* <br>：換行標簽
* <hr>：展示一條水平線
* 屬性：
* color：顏色
* width：寬度
* size：高度
* align：對齊方式
* center：居中
* left：左對齊
* right：右對齊
* <b>：字體加粗
* <i>：字體斜體
* <font>：字體標簽
* <center>：文本居中
HTML標簽_文本標簽2
2. 文本標簽：和文本有關的標簽
* 注釋：<!-- 注釋內容 -->
* <h1> to <h6>：標題標簽
* h1~h6:字體大小逐漸遞減
* <p>：段落標簽
* <br>：換行標簽
* <hr>：展示一條水平線
* 屬性：
* color：顏色
* width：寬度
* size：高度
* align：對齊方式
* center：居中
* left：左對齊
* right：右對齊
* <b>：字體加粗
* <i>：字體斜體
*<font>：字體標簽
*<center>：文本居中
* 屬性：
* color：顏色
* size：大小
* face：字體* 屬性定義：
* color：
1. 英文單詞：red、green、blue
2. rgb(值1，值2，值3)：值的范圍：0~255，如：rgb(0,0,255)
3. #值1值2值3：值的范圍：00~FF之間，如： #FF00FF
* width：
1. 數值：width='20' ,數值的單位，默認是 px(像素)
2. 數值%：占比相對于父元素的比例* 案例：公司簡介
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>文本標簽</title>
</head>
<body>
<!-- 注釋 -->
<!--br 換行-->
白日依山盡，<!--<br />--> <br>
黃河入海流，<br>
<!-- 標題標簽 h1~ h6-->
黑馬旅游網 <br>
<h1>黑馬旅游網</h1>
<h2>黑馬旅游網</h2>L
<h3>黑馬旅游網</h3>
<h4>黑馬旅游網</h4>
<h5>黑馬旅游網</h5>
<h6>黑馬旅游網</h6>
<!-- 段落標簽 p -->
<p>
1 黑馬旅游網黑馬旅游網黑馬旅游網馬旅游網黑馬旅游網馬旅游網黑馬旅游網馬旅游網黑馬旅游網馬旅游網黑馬旅游網馬旅游網黑馬旅游網黑馬旅游網 黑馬旅游網黑馬旅游網黑馬旅游網黑馬旅游網 黑馬旅游網黑馬旅游網黑馬旅游網黑馬旅游網，
</p>
<p>
2 黑馬旅游網黑馬旅游網黑馬旅游網黑馬旅游網 黑馬旅游網黑馬旅游網黑馬旅游網黑馬旅游網 黑馬旅游網黑馬旅游網黑馬旅游網黑馬旅游網，
</p>
<p>
3 黑馬旅游網黑馬旅游網黑馬旅游網黑馬旅游網 黑馬旅游網黑馬旅游網黑馬旅游網黑馬旅游網 黑馬旅游網黑馬旅游網黑馬旅游網黑馬旅游網，
</p>
<!-- hr 顯示一條水平線-->
<hr color="red" width="200" size="10" align="left"/>
<hr>
<!-- 加粗 b-->
白日依山盡<br>
<b>白日依山盡</b>
<hr>
<!-- 斜體 i -->
白日依山盡<br>
<i>白日依山盡</i>
<!-- 字體標簽 font-->
<hr>
<font color="red" size="5" face="楷體">白日依山盡</font> <br>
<font color="#3626F1" size="5" face="楷體">黑馬程式員</font> <br>
<hr color="red" width="50%" size="10" align="left"/>
<center>
<font color="red" size="5" face="楷體">白日依山盡</font> <br>
</center>
<br> <br> <br> <br> <br>
</body>
</html>HTML標簽_文本標簽_練習
顏色取色器
特殊字符表
案例：公司簡介
* 案例：公司簡介
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>黑馬程式員簡介</title>
</head>
<body>
<header>
<div id="header">
<h1>
公司簡介
</h1>
</div>
</header>
<hr color="#ffd700">
<p>
<font color="#FF0000">"中關村黑馬程式員訓練營"</font>是由<b><i>傳智播客</i></b>聯合中關村軟體園、CSDN，
并委托傳智播客進行教學實施的軟體開發高端培訓機構，致力于服務各大軟體企業，解決當前軟體開發技術飛速發展， 而企業招不到優秀人才的困擾，
</p>
<p>
目前，“中關村黑馬程式員訓練營”已成長為行業“學員質量好、課程內容深、企業滿意”的移動開發高端訓練基地， 并被評為中關村軟體園重點扶持人才企業，
</p>
<p>
黑馬程式員的學員多為大學畢業后，有理想、有夢想，想從事IT行業，而沒有環境和機遇改變自己命運的年輕人， 黑馬程式員的學員篩選制度，遠比現在90%以上的企業招聘流程更為嚴格，任何一名學員想成功入學“黑馬程式員”，
必須經歷長達2個月的面試流程，這些流程中不僅包括嚴格的技術測驗、自學能力測驗，還包括性格測驗、壓力測驗、 品德測驗等等測驗，毫不夸張地說，黑馬程式員訓練營所有學員都是精挑細選出來的，百里挑一的殘酷篩選制度確
保學員質量，并降低企業的用人風險，
中關村黑馬程式員訓練營不僅著重培養學員的基礎理論知識，更注重培養專案實施管理能力，并密切關注技術革新， 不斷引入先進的技術，研發更新技術課程，確保學員進入企業后不僅能獨立從事開發作業，更能給企業帶來新的技術體系和理念，
</p>
<p>
一直以來，黑馬程式員以技術視角關注IT產業發展，以深度分享推進產業技術成長，致力于弘揚技術創新，倡導分享、 開放和協作，努力打造高質量的IT人才服務平臺，
</p>
<hr color="#ffd700">
<footer>
<div id="footer">
<font color="gray" size="2">
<center>
江蘇傳智播客教育科技股份有限公司<br>
著作權所有Copyright 2006-2018©, All Rights Reserved 蘇ICP備16007882
</center>
</font>
</div>
</footer>
</body>
</html>HTML標簽_圖片標簽
相對路徑
相對路徑
* 以.開頭的路徑
* ./：代表當前目錄 ./image/1.jpg
* ../:代表上一級目錄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片標簽</title>
</head>
<body>
<!--展示一張圖片 img-->
<img src="image/jingxuan_2.jpg" align="right" alt="古鎮" width="500" height="500"/>
<img src="./image/jiangwai_1.jpg">
</body>
</html>HTML標簽_串列標簽
有序串列：
ol
li
無序串列：
ul
li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>串列標簽</title>
</head>
<body>
<!--有序串列 ol-->
早上起床干的事情
<ol type="A" start="5">
<li>睜眼</li>
<li> 看手機</li>
<li> 穿衣服</li>
<li> 洗漱</li>
</ol>
<!-- 無序串列 ul-->
早上起床干的事情
<ul type="disc">
<li>睜眼</li>
<li> 看手機</li>
<li> 穿衣服</li>
<li> 洗漱</li>
</ul>
早上起床干的事情
<ul type="square">
<li>睜眼</li>
<li> 看手機</li>
<li> 穿衣服</li>
<li> 洗漱</li>
</ul>
早上起床干的事情
<ul type="circle">
<li>睜眼</li>
<li> 看手機</li>
<li> 穿衣服</li>
<li> 洗漱</li>
</ul>
</body>
</html>HTML標簽_鏈接標簽
5. 鏈接標簽：
* a：定義一個超鏈接
* 屬性：
* href：指定訪問資源的URL(統一資源定位符)
* target：指定打開資源的方式
* _self：默認值，在當前頁面打開
* _blank：在空白頁面打開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>連接標簽</title>
</head>
<body>
<!--超鏈接 a-->
<a href="http://www.itcast.cn">點我</a>
<br>
<a href="http://www.itcast.cn" target="_self">點我</a>
<br>
<a href="http://www.itcast.cn" target="_blank">點我</a>
<br>
<a href="./5_串列標簽.html">串列標簽</a><br>
<a href="mailto:itcast@itcast.cn">聯系我們</a>
<br>
<a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>
</body>
</html>HTML標簽_塊標簽
6. div和span：
* div：每一個div占滿一整行（塊級標簽），
* span：文本資訊在一行展示（行內標簽、行內標簽），
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塊標簽</title>
</head>
<body>
<span>黑馬程式員</span>
<span>傳智播客</span>
<hr>
<div>黑馬程式員</div>
<div>傳智播客</div>
</body>
</html>HTML標簽_語意化標簽
7. 語意化標簽：html5中為了提高程式的可讀性，提供了一些標簽，
1. <header>：頁眉
2. <footer>：頁腳
HTML標簽_表格標簽1
8. 表格標簽：
* table：定義表格
* width：寬度
* border：邊框
* cellpadding：定義內容和單元格的距離，
* cellspacing：定義單元格之間的距離，如果指定為0，則單元格的線會合為一條，
* bgcolor：背景色
* align：對齊方式
* tr：定義行
* td：定義單元格
* th：定義表頭單元格
HTML標簽_表格標簽2
8. 表格標簽：
* table：定義表格
* width：寬度
* border：邊框
* cellpadding：定義內容和單元格的距離，
* cellspacing：定義單元格之間的距離，如果指定為0，則單元格的線會合為一條，
* bgcolor：背景色
* align：對齊方式
* tr：定義行
* bgcolor：背景色
* align：對齊方式
* td：定義單元格
* colspan：合并列
* rowspan：合并行
* th：定義表頭單元格
* <caption>：表格標題
* <thead>：表示表格的頭部分
* <tbody>：表示表格的體部分
* <tfoot>：表示表格的腳部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格標簽</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<tr>
<!-- <td>編號</td>
<td>姓名</td>
<td>成績</td>-->
<th>編號</th>
<th>姓名</th>
<th>成績</th>
</tr>
<tr>
<td>1</td>
<td>小龍女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>楊過</td>
<td>50</td>
</tr>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<thead>
<caption>學生資訊表</caption>
<tr>
<!-- <td>編號</td>
<td>姓名</td>
<td>成績</td>-->
<th>編號</th>
<th>姓名</th>
<th>成績</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#7fffd4" align="center">
<td>1</td>
<td>小龍女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>楊過</td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3</td>
<td>老頑童</td>
<td>10</td>
</tr>
</tfoot>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<tr>
<th rowspan="2">編號</th>
<th>姓名</th>
<th>成績</th>
</tr>
<tr>
<td>小龍女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">楊過</td>
</tr>
</table>
<hr>
</body>
</html>HTML標簽_綜合案例_分析
1. 確定使用table來完成布局（12行）
2. 如果某一行只有一個單元格，則使用<tr><td></td></tr>
3. 如果某一行有多個單元格，則使用
<tr>
<td>
<table></table>
</td>
</tr>4. 代碼實作 ...
HTML標簽_綜合案例_實作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑馬旅游網</title>
</head>
<body>
<!--采用table來完成布局-->
<!--最外層的table，用于整個頁面的布局-->
<table width="100%" align="center">
<!-- 第1行 -->
<tr>
<td>
<img src="image/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<!-- 第2行 -->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="image/logo.jpg" alt="">
</td>
<td>
<img src="image/search.png" alt="">
</td>
<td>
<img src="image/hotel_tel.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
<!-- 第3行 -->
<tr>
<td>
<table width="100%" align="center">
<tr bgcolor="#ffd700" align="center" height="45">
<td>
<a href="">首頁</a>
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
</tr>
</table>
</td>
</tr>
<!-- 第4行 輪播圖 -->
<tr>
<td>
<img src="image/banner_3.jpg" alt="" width="100%">
</td>
</tr>
<!-- 第5行 黑馬精選-->
<tr>
<td>
<img src="image/icon_5.jpg" alt="">
黑馬精選
<hr color="#ffd700">
</td>
</tr>
<!-- 第6行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第7行 國內游 -->
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
國內游
<hr color="#ffd700">
</td>
</tr>
<!-- 第8行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第9行 境外游 -->
<tr>
<td>
<img src="image/icon_7.jpg" alt="">
境外游
<hr color="#ffd700">
</td>
</tr>
<!-- 第10行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/jiangwai_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第11行 -->
<tr>
<td>
<img src="image/footer_service.png" alt="" width="100%">
</td>
</tr>
<!-- 第12行 -->
<tr>
<td align="center" bgcolor="#ffd700" height="40">
<font color="gray" size="2">
江蘇傳智播客教育科技股份有限公司
著作權所有Copyright 2006-2018©, All Rights Reserved 蘇ICP備16007882
</font>
</td>
</tr>
</table>
</body>
</html>加油~~~ 寧死不破~~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/257517.html
標籤：區塊鏈
上一篇：go實作websocket案例
下一篇：雪花演算法（Go）