Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> JAVA Web day01--- Android小白的第一天學習筆記,day01---android

JAVA Web day01--- Android小白的第一天學習筆記,day01---android

編輯:關於android開發

JAVA Web day01--- Android小白的第一天學習筆記,day01---android


HTML

1、HTML的概述

1.1、HTML簡介

l HTML(Hyper Text Markup Language):超文本標記語言。

>標記就是標簽

>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>

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved