文章目錄
1.1 B/S 軟件的結構
1.2 前端的開發流程
1.3 網頁的組成部分
頁面由三個部分內容組成：①內容（結構）；②表現；③行爲
內容（結構）：是我們在頁面中可以看到的數據，我們稱之爲內容。一般內容，我們使用 html 技術來展示。
表現：指的是這些內容在頁面上的展現形式。比如說 佈局、顏色、大小等等。一把按使用 CSS 技術實現。
行爲：指的是頁面中元素與輸入設備交互的響應。一般使用 JavaScript 技術實現。
1.4 HTML 簡介
Hyper Text Markup Language（超文本標記語言）簡寫：HTML
HTML 通過標籤來標記要顯示的網頁中的各個部分。網頁本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器，如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）
1.5 創建 HTML 文件
- 創建一個 web 工程（靜態的 web 工程）
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
- 在工程下創建 html 頁面
![在這裏插入圖片描述]()
選擇瀏覽器執行頁面
![在這裏插入圖片描述]()
第一個 html 實例：
![在這裏插入圖片描述]()
注：Java 文件是需要先編譯，再由 Java 虛擬機跑起來。但 HTML 文件不需要編譯，直接由瀏覽器進行解析執行。
1.6 HTML 文件的書寫規範
html的代碼註釋：<!-- 這是 html 的註釋，可以在頁面中右鍵查看源代碼中看到 -->
注：在 markdown 編輯器中 HTML 的註釋內容會不可見！
1.7 HTML 標籤介紹
- 標籤的格式：
<標籤名>封裝的數據</標籤名> - 標籤名大小寫不敏感。
- 標籤擁有自己的屬性。
- 基本屬性：bgcolor=“red”（可以修改簡單的樣式效果）
- 事件屬性：οnclick=“alert(‘你好！’);”（可以直接設置事件響應後的代碼）
- 標籤又分爲，單標籤和雙標籤。
- 單標籤格式：<標籤名/>（br 換行、hr 水平線）
- 雙標籤格式：<標籤名>…封裝的數據…</標籤名>
![在這裏插入圖片描述]()
標籤的語法：
- 標籤不能嵌套
- 標籤必須正確關閉
- 屬性必須有值，屬性值必須加引號
- 註釋不能嵌套
注意：html 代碼不是很嚴謹。有時候標籤不閉合，也不會報錯。
1.8 常用標籤介紹
1.8.1 font 字體標籤
需求1：在網頁上顯示“我是字體標籤”，並改字體爲宋體，顏色爲紅色
1.8.2 特殊字符
需求1：把 <br> 換行標籤 變成文本 轉換字符顯示在頁面上。
常用特殊字符表：
其他特殊字符表：
1.8.3 標題標籤
標題標籤是 h1 到 h6
需求1：演示標題1 到標題6
1.8.4 超鏈接（*重點）
需求1：普通的超鏈接
1.8.5 列表標籤
①無序列表；②有序列表
需求1：使用無序列表把東北 F4 ：趙四、劉能、小瀋陽、宋小寶展示出來
1.8.6 img 標籤
img 標籤可以在 html 頁面上顯示圖片
需求1：使用 img 標籤顯示一張美女的照片，並修改寬高，和邊框屬性
1.8.7 表格標籤（*重點）
需求1：做一個 帶表頭的，三行三列的表格，並顯示邊框
需求2：修改表格的寬度，高度，表格的對齊方式，單元格間距
1.8.8 跨行跨列表格（*次重點）
需求1：新建一個五行五列的表格，第一行，第一列 的單元格要跨兩行，第二行的第一列的單元格要跨兩行，第四行第四列的單元格跨兩行兩列
1.8.9 瞭解 iframe 的框架標籤（內嵌窗口）
iframe 標籤可以在一個 html 頁面上，打開一個小窗口，去加載一個單獨的頁面
1.8.10 表單標籤
什麼是表單？
表單就是 html 頁面中，用來收集洪湖信息的所有元素集合。然後把這些信息發送給服務器。
需求1：創建一個個人信息註冊的表單界面。包含用戶名、密碼、確認密碼。性別、愛好、國籍。自我評價。重置，提交
注：此實現沒有關注 表單的格式 及 提交細節
表單的提交細節：
1.8.11 其他標籤
需求1：div、span、p 標籤的演示
