【干貨】新中地GIS開發(fā)夏令營文檔（2）HTML快速上手
第二章: HTML快速上手
1.HTML 是什么
HTML(Hyper Text Markup Language): 超文本標記語言 ●超文本: a超越文本: 不僅僅只有文本, 還有多媒體文件, 如: image 圖片, audio 音頻, video 視頻 b超鏈接: 可以從一個頁面跳到另一個頁面 ●標記語言: 帶有固定的格式, 只是用來標記某種含義,?不是編程語言
舉例
所以, HTML 在設計的時候或多或少會參考報紙的一些理念.
2.HTML文檔的結構
HTML 有自己固定的基本格式
示例
圖解
3.HTML文檔的組成
HTML 文檔由一系列的?元素?elements?組成, 在元素中包含?屬性（Attribute）
1) 元素
示例
2) 屬性
元素中可以包含屬性(鍵值對)
示例
4.元素的分類
HTML 的元素分為兩類
雙標簽元素
單標簽元素
1) 雙標簽元素
在 HTML 中, 絕大部分元素(99%)都是雙標簽元素, 即有開始, 有結束, 在標簽內(nèi)部可以包含內(nèi)容
比如: <body>我是主體</body>
2) 單標簽元素
極少部分(常見就幾個)元素不包含任何內(nèi)容, 叫做空元素, 也叫單標簽元素
比如: <img /> <br />
5 元素的關系
針對雙標簽元素, 主要存在兩種關系
嵌套關系(父子關系)
并列關系(兄弟關系)
嵌套關系
2.并列關系
6 常用的HTML元素
HTML文檔由元素組成, 認識 HTML 其實就是學習 HTML 中的元素.
常見的 HTML 元素, 大致分為
文本相關元素
超文本相關元素
布局相關元素
表單元素
表格元素
1) 文本相關元素
標題元素 h
這里有六個標題元素 —— h1~h6
每個元素代表文檔中不同級別的內(nèi)容;
h1 表示主標題（the main heading）
h2 表示二級子標題（subheadings）
h3 表示三級子標題（sub-subheadings）
其基本語法格式如下：
段落元素 p
語法
練習
有這樣一段文本, 請按照語義添加合適的元素, 使用網(wǎng)頁的結構更清晰
2) 超文本相關元素
超文本主要包括兩層含義:
超越普通文本, 如多媒體: 圖片(img 元素), 音頻(audio 元素), 視頻(video 元素)
超鏈接, a 元素
超鏈接元素 a
正是因為超鏈接元素的存在, 將世界上所有的網(wǎng)頁聯(lián)系在一起, 使互聯(lián)網(wǎng)成為一個互相聯(lián)系的網(wǎng)絡
作用
超鏈接可以使我們的文檔跳轉到任何其他的文檔（或其他資源 resource）
語法
基本結構
http://blog.brojie.cn/web/html/index.html
http://127.0.0.1:5500/01_體驗html.html
示例
圖片元素 img
圖片元素允許我們將圖片放到網(wǎng)頁中, 這樣我們的網(wǎng)頁就變得漂亮起來
語法
示例
3) 列表元素
列表元素按使用頻率可以細分為
無序列表(ul: unordered list)
有序列表(ol: ordered list)
描述列表(dl: description list)
無序列表 ul
表示列表項之間是沒有先后順序的
示例
emmet: ul>li*3>lorem1
有序列表 ol
表示列表項之間是存在先后順序的
示例
emmet: ol>li{第$項}*3
4) 表單
基本介紹
生活中的表單
在生活中, 比如我們?nèi)ャy行申請信用卡, 我們需要填寫一張申請表
4) 表單
基本介紹
生活中的表單
在生活中, 比如我們?nèi)ャy行申請信用卡, 我們需要填寫一張申請表
在我們申請email的時候, 我們需要填寫用戶名, 密碼這些信息
像這些申請單在程序里就是以表單的形式的存在的
表單的作用
目的是為了收集用戶的信息, 傳遞給服務器, 在服務器中存儲
語法
常用屬性：
input元素
語法
<input type="屬性值" value="你好">
input 輸入的意思
input是單標簽元素
type屬性設置不同的屬性值用來指定不同的控件類型
除了type屬性還有別的屬性
textarea元素
語法
select元素
語法
5) 表格
基本介紹
為了更方便人們的閱讀, 對于一些數(shù)據(jù)以表格的形式展現(xiàn)效果會更好, 比如
還有: 成績表, 工資表, 人員名單表, 商品清單表等等...
在程序中, 我們使用table來表示
語法
table用于定義一個表格標簽。
tr(table row) 用于定義表格中的行，必須嵌套在 table中
th(table head)用于定義表格中的表頭, 必須嵌套在tr中
td(table data) 用于定義表格中的單元格，必須嵌套在tr中
table的常用屬性
示例
