01 HTML 和 CSS
HTML 和 CSS
1.1 B/S 軟體的結構
2.1 前端的開發流程
3.1 網頁的組成部分
頁面內容由三部分內容組成！
分別是內容(結構)、表現、行為。
內容(結構)，是我們在頁面中可以看到的資料。我們稱之為內容。一般內容，我們使用html技術來展示
表現，指的是這些內容在頁面上的展示形式。比如說。佈局，顏色，大小等等。一般使用CSS 技術實現
行為，指的是頁面中元素與輸入裝置互動的響應。一般使用 javascript 技術實現。
4.1 HTML簡介
Hyper Text Markup Language （超文字標記語言） 簡寫：HTML
HTML 通過標籤來標記要顯示的網頁中的各個部分。網頁檔案本身是一種文字檔案，
通過在文字檔案中新增標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）
注：Java 檔案是需要先編譯，再由 java 虛擬機器跑起來。但 HTML 檔案它不需要編譯，直接由瀏覽器進行解析執行。
5.1 HTML 檔案的書寫規範
6.1 HTML標籤介紹
1.標籤的格式: <標籤名>封裝的資料 </ 標籤名>
2.標籤名大小寫不敏感。
3.標籤擁有自己的屬性。
i. 分為基本屬性： bgcolor="red" 可以修改簡單的樣式效果
ii. 事件屬性： o nclick="alert('你好！');" 可以直接設定事件響應後的程式碼。
4.標籤又分為，單標籤和雙標籤。
i. 單標籤格式： <標籤名 /> br 換行 hr 水平線
ii. 雙標籤格式: <標籤名> ...封裝的資料...
標籤的語法：
語法上錯誤 但是在瀏覽器上顯示正確，由於瀏覽器會修改部分錯誤
<body> <!-- ①標籤不能交叉巢狀 --> 正確：<div><span>早安，尚矽谷</span></div> 錯誤：<div><span>早安，尚矽谷</div></span> <hr /> <!-- ②標籤必須正確關閉 --> <!-- i.有文字內容的標籤： --> 正確：<div>早安，尚矽谷</div> 錯誤：<div>早安，尚矽谷 <hr /> <!-- ii.沒有文字內容的標籤： --> 正確：<br /> 錯誤：<br> <hr /> <!-- ③屬性必須有值，屬性值必須加引號 --> 正確：<font color="blue">早安，尚矽谷</font> 錯誤：<font color=blue>早安，尚矽谷</font> 錯誤：<font color>早安，尚矽谷</font> <hr /> <!-- ④註釋不能巢狀 --> 正確：<!-- 註釋內容 --> <br/> 錯誤：<!-- 註釋內容 <!-- 註釋內容 -->--> <hr /> </body>
7.1 常用標籤介紹
文件：w3cschool.CHM
7.1.1 font 字型標籤
需求 1：在網頁上顯示 我是字型標籤 ，並修改字型為 宋體，顏色為紅色。
<body>
<!-- 字型標籤
需求 1：在網頁上顯示 我是字型標籤 ，並修改字型為 宋體，顏色為紅色。
font標籤是字型標籤，它可以用來修改文字的字型，顏色，大小(尺寸)
color屬性修改顏色
face屬性修改字型
size屬性修改文字大小
-->
<font color="red"face="宋體"size="7">字型樣式</font>
</body>
7.1.2 特殊字元
一些字元在 HTML 中擁有特殊的含義，比如小於號 (<) 用於定義 HTML 標籤的開始。如果我們希望瀏覽器正確地顯示這些字元，我們必須在
HTML 原始碼中插入字元實體。
空格是 HTML 中最普通的字元實體。
通常情況下，HTML 會裁掉文件中的空格。假如你在文件中連續輸入 10 個空格，那麼 HTML 會去掉其中的9個。如果使用 ，就可以在文件中增加空格。
<body>
<!-- 特殊字元
需求 1：把 <br> 換行標籤 變成文字 轉換成字元顯示在頁面上
< ====> <
> ====> >
空格 ====>
-->
你好<br> 哈哈哈
嗚呼嗚呼 ggg
</body>
7.1.3 標題標籤
標題標籤是 h1 到 h6
需求 1：演示標題 1 到 標題 6 的
<body>
<!-- 標題標籤
需求 1：演示標題 1 到 標題 6
h1 - h6 都是標題標籤
h1最大 h6最小
align 屬性是對齊屬性
left 左對齊(預設)
right 右對齊
center 居中
-->
<h1 align="left">標題1</h1>
<h2 align="right">標題2</h2>
<h3 align="center">標題3 </h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
</body>
7.1.4 超連結(重點)
在網頁中所有點選之後可以跳轉的內容都是超連線
需求 1：普通的 超連線
<body>
<!-- 超連結
需求 1：普通的 超連線
href屬性設定連線的地址
target屬性設定哪個目標進行跳轉
_self 表示當前頁
_blank 表示開啟新頁面進行跳轉
-->
<a href="http://localhost:8080" target="_self">百度</a><br/>
<a href="http://localhost:8080" target="_blank">百度</a>
</body>
7.1.5 列表標籤
無序列表 、 有序列表
需求 1：使用無序，列表方式，把東北 F4，趙四，劉能，小瀋陽，宋小寶，展示出來
<body>
<!-- 需求 1：使用無序，列表方式，把東北 F4，趙四，劉能，小瀋陽，宋小寶，展示出來
nl 是無序列表
type屬性可以修改列表項前面的符號
li是列表項
ol 是有序列表
-->
<ul type="none">
<li>趙四</li>
<li>劉能</li>
<li>宋小寶</li>
<li>小瀋陽</li>
</ul>
</body>
7.1.6 img標籤
img 標籤可以在 html 頁面上顯示圖片。
需求 1：使用 img 標籤顯示一張美女的照片。並修改寬高，和邊框屬性
<body>
<!--
需求 1：使用 img 標籤顯示一張美女的照片。並修改寬高，和邊框屬性
img標籤是圖片標籤，用來顯示圖片
src屬性可以設定圖片的路徑
width屬性設定圖片的寬度
height屬性設定圖片的高度
border屬性設定圖片的邊框
alt屬性設定當前路徑找不到圖片時，用來代替顯示的文字內容
在web中分為相對路徑和決定路徑
相對路徑：
. 表示當前檔案所在的目錄
.. 表示當前檔案所在的上一級目錄
檔名 表示當前檔案所在目錄的檔案，相當於 ./檔名
絕對路徑：
正確格式 http://ip:port/工程名/資源路徑
錯誤個數：碟符:/目錄/檔名
-->
<img src="../imgs/1.jpg" width="200" height="200" border="1" alt="找不到圖片"/>
<img src="../imgs/2.jpg" width="200" height="200" border="1"/>
<img src="../imgs/3.jpg" width="200" height="200" border="1"/>
</body>
7.1.7 表格標籤(重點)
需求 1：做一個 帶表頭的 ，三行，三列的表格，並顯示邊框
需求 2：修改表格的寬度，高度，表格的對齊方式，單元格間距
<body>
<!--
需求 1：做一個 帶表頭的 ，三行，三列的表格，並顯示邊框
需求 2：修改表格的寬度，高度，表格的對齊方式，單元格間距。
table標籤是表格標籤
border 設定表格邊框
width 設定表格寬度
height 設定表格長度
align設表格對齊方式
tr 是行標籤
th 是表頭標籤
td 是單元格標籤
align設定單元格對齊方式
b是加粗標籤
-->
<table align="center" border="1" width="200" height="200" cellpadding="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<th>2.1</th>
<th>2.2</th>
<th>2.1</th>
</tr>
<tr>
<th>3.1</th>
<th>3.2</th>
<th>3.3</th>
</tr>
</table>
</body>