JAVA Web day01--- Android小白的第一天學習筆記，day01---android
HTML 1、HTML的概述 1.1、HTML簡介
l HTML(Hyper Text Markup Language)：超文字標記語言 (HTML)。
>標記就是標籤
>HTML不是一種程式設計語言，而是一種標記語言
l 作用：
就是用來寫網頁的
1.2、HTML的書寫規範
a).HTML的建立
可以使用文字編輯器來建立，副檔名html或htm
因為windows之前不支援3個以上的拓展名，後來才逐漸完善，所以html和htm本質是一樣的
可以被IE（瀏覽器）解析瀏覽的。
b).HTML的結構
<html>
<head>
<title></title>
</head>
<body></body>
</html>
c).Html標籤的規範
*Html是由一對角括弧包裹著的關鍵字組成的。例如：<title>
*HTML通常是成對出現的，是由一個開始標籤和一個結束標籤組成的。例如：<title></title>
特殊情況：
HTML的空標籤。例如：<br/>
*HTML標籤通常是有屬性的。屬性格式：屬性名稱=”屬性值” 可以用雙引號、單引號或者不加引號。建議使用引號的。 例如：<font color="blue" size='22' face=隸書>真晴朗</font>
*HTML是可以嵌套使用的。（只允許包裹嵌套，不允許交叉嵌套）
*HTML是大小寫不敏感的。推薦使用小寫 2、HTML的基本標籤（連結標籤、表格標籤） 2.1、檔案標籤
l <html>標籤
聲明了該文檔是一個HTML文檔。
包裹了整個HTML 檔案
l <head>標籤
網頁的說明資訊。
它裡面的內容是不會顯示。
l <title>標籤
它是網頁的標題
l <body>標籤
負責顯示頁面的
它裡面的內容是會顯示的
*屬性：
>text 設定body標籤中本文的顏色
>background 設定body背景圖片
>bgcolor 設定body的背景顏色 2.2、排版標籤
l <br/>標籤
*就是一個換行
l
*是一個空格
l HTML注釋
*格式：<!--注釋內容 -->
l <p>標籤
*就是一個段落標籤。段前段後各加一行
*屬性：
>align 設定段落的對齊
l <hr/>標籤
*就是一條水平線
*屬性：
>color 設定水平線的顏色
>size 設定水平線的粗細
>width 設定水平線的長度
擴充：
1、HTML長度設定（瞭解）
像素：width =”6”或者width =”6px”
百分比：width =”80%”.它會隨著瀏覽器改變而改變 2.3、塊標籤
l <div>
在文檔中設定一個塊地區
區塊層級元素（自動換行）
l <span>
在行內設定一個塊地區
內嵌元素（不自動換行）
HTML絕大多數都屬於區塊層級元素或者內嵌元素 2.4、字型標籤
l <font>標籤
*設定字型的大小、顏色、字型類型
*屬性：
>color 設定字型顏色
>size 設定字型大小 取值範圍 1~7
>face 設定字型類型。
l 標題標籤
*h1~h6
*h1最大，h6最小
l 斜體、粗體標籤
<i></i>
<b></b> 2.5、列表標籤
l 有序列表(ol標籤)
*屬性
>type 設定有序列表的項目序號。 A,I,1
>start 設定有序列表的項目序號起始值。
l 無序列表(ul標籤)（常用）
*屬性：
>type 設定無序列表的項目標號。
l 清單項目條目（li標籤） 2.6、圖片標籤
l <img />
*屬性：
>src 設定圖片引入路徑的（常用）
>alt設定替代圖片的文字（常用）
>width 設定圖片的寬度
>height 設定圖片的高度
>border 設定圖片的相框寬度
>align 設定圖片的對齊（不建議使用） 2.7、連結標籤（重點）
l <a>
*如果要實現跳轉連結，那麼必須有內容。例如：<a>內容</a>
*屬性：
>href 設定連結路徑（常用）
訪問內網：相對路徑或者絕對路徑
訪問外網：需要加上http協議。 例如：http://www.baidu.com
>name 設定錨點（常用）
配合herf使用
設定錨點，a標籤可以沒有內容
>target 定位資源開啟位置。
一般可以配合架構使用。
例如：<a href=”xx.html” target=”top”>開啟</a>
<frame name=”top”/>
那麼就是在名字為top的架構中開啟。 2.8、表格標籤（重點）
l 表格標籤
*table,用來定義一個表格
l 列標籤
*tr，用來定義一個表格內的行
l 儲存格標籤
*td，用來定義一個儲存格。
*th，用來定義一個表頭儲存格。預設置中加粗
*td及th屬性：
>colspan 列合并
>rowspan 行合并
l 表格標題標籤
*caption，用來定義一個表格標題
*必須緊跟在table標籤之後
l 分組標籤
*對錶格中的行進行分組
*thead 定義表格的頁首。僅有一個
*tbody 定義表格的主體。一個或多個
*tfoot 定義表格的頁尾。僅有一個
*如果在分組標籤外定義了行，那麼行預設屬於TBODY
*分組標籤如果使用必須三個一起使用，否則無效果。
分行下載：
可以控製表格分行下載，從而提高下載速度。
在需要分行下載處加上<tbody>和</tbody>。
3、HTML的表單標籤（重點）
作用：表單用來提交使用者輸入的資料 3.1、表單標籤
*<form>,就定義了一個表單
*常用屬性：
>action 規定當提交表單時，向何處發送表單資料。（預設向本頁提交）
向外網提交：需要加http協議，
例如：http://www.baidu.com
向內網提交：相對路徑和絕對路徑
>method 規定如何發送表單資料
HTML中分為兩種：
post 和 get
預設是get
面試題：
表單提交 post和get的區別？
1、get方式提交會把參數顯示在地址欄
post方式提交不會把參數顯示在地址欄上。（請求體中）
2、get方式敏感資訊不安全
post方式敏感資訊安全
3、get方式提交，官方限制提交大小僅1KB（但多數瀏覽器可以提交2KB）
post方式提交，提交大資料
get方式發送表單資料：
地址欄上：?參數名1=參數值1&參數名2=參數值2
Post方式發送表單資料：
請求體中 3.2、輸入標籤
*input，定義了一個輸入表單項，用來接收使用者輸入的資訊。
*屬性：
>type 指定輸入標籤的類型
文字框 text。輸入的文本資訊直接顯示在框中。
密碼框 password。輸入的文本以原點或者星號的形式顯示。非明文
單選框 radio 如：性別選擇。
複選框 checkbox 如：興趣選擇。
提交按鈕 submit 用於提交表單中的內容。
重設按鈕 reset 將表單中填寫的內容設定為初始值
附件框 file 後期擴充內容，會自動產生一個文字框，和一個瀏覽按鈕。例如：照片
隱藏欄位 hidden 在頁面上不顯示，但在提交的時候隨其他內容一起提交。例如：使用者編號
按鈕 button 可以為其自訂事件。
圖片提交按鈕 image 是一個圖片形式的提交按鈕。用來美化提交按鈕的。提交表單資料時，會將滑鼠點擊圖片的座標一起封裝。較少使用
>name 用來指定輸入項的名稱。即參數名稱
>value 用來指定輸入項的值。即參數值
>checked 用來設定單選框或者多選框的預設勾選。值為checked為預設選中
>src 當type=”image”時，該屬性用來引入圖片 3.3、選擇框標籤
*select，定義了一個選擇框
*屬性：
>name 用來指定選擇項的名稱。即參數名稱
> multiple 用來設定選擇框為多選形式
*option，定義了一個選擇框條目
*屬性：
>value 用來指定選擇項的值。即參數值
如果未設定value屬性，那麼預設提交的是<option>標籤的內容體
>selected 用來設定選擇框的預設選中。值為selected為預設選中 3.4、文本域標籤
*textarea，定義一個文本域輸入框
*屬性：
>name 用來指定文本域的名稱，即參數名
>cols 定義文本域顯示幾列
>rows 定義文本域顯示幾行
和<input type=“text”/>區別：
1、文本域可以換行，而文字框不可以
2、文本域的值是寫在內容體中的，文字框的值是在value中
作業 ： 用table和form組合在一起寫一個註冊表單。（用form嵌套table）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>使用者註冊</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body> <form action=""> <table> <tr> <td>使用者名稱</td> <td><input type="text" name="username"></td> </tr> <tr> <td>密碼</td> <td><input type="password" name="password"></td> </tr> <tr> <td>性別</td> <td><input type="radio" name="sex" value="man" checked="checked">男 <input type="radio" name="sex" value="woman">女</td> </tr> <tr> <td>愛好</td> <td><input type="checkbox" name="hobby" value="lol">英雄聯盟 <input type="checkbox" name="hobby" value="lushi">爐石傳說 <input type="checkbox" name="hobby" value="dota2">dota2</td> <tr> <td>所在城市</td> <td><select name="city"> <option value="beijing" selected="selected">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">廣州</option> <option value="shenhzhen">深圳</option> </select></td> </tr> </tr> <tr> <td>照片</td> <td><input type="file" name="photo"></td> </tr> <tr> <td>簡介</td> <td><textarea rows="10" cols="20"></textarea></td> </tr> <tr> <td><input type="submit" value="提交"></td> <td><input type="reset" value="重設"></td> </tr> </table> </form></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
