一、HTML的概述(瞭解)
1、HTML簡介
l HTML(Hyper Text Markup Language):超文本標記語言。
文本:記事本里記錄的內容。 展示信息的。
超文本:超越了文本的範疇。
>標記就是標籤
>HTML不是一種編程語言,而是一種標記語言
l 作用:
*就是用來寫網頁的
2、HTML的書寫規範
a).HTML的創建
可以使用文本編輯器來創建,擴展名html或htm
可以被IE(瀏覽器)解析瀏覽的。
b).HTML的結構
<html>
<head>
<title></title>
</head>
<body></body>
</html>
c).Html標籤的規範
*Html是由一對尖括號包裹着的關鍵字組成的。例如:<title>
*HTML標籤都是預定義的
*HTML通常是成對出現的,是由一個開始標籤和一個結束標籤組成的。例如:<title></title>
特殊情況:
HTML的空標籤。例如:<br/>
*沒有內容體的標籤
*內容體:開始標籤和結束標籤中間的東西
*HTML標籤通常是有屬性的。屬性格式:屬性名=”屬性值” 可以用雙引號、單引號或者不加引號。建議使用引號的。 例如:<font color="blue" size='22' face=隸書>真晴朗</font>
*HTML是可以嵌套使用的。(只允許包裹嵌套,不允許交叉嵌套)
*HTML是大小寫不敏感的。推薦使用小寫
*HTML自動忽略代碼中 換行和空格
二、HTML的基本標籤(鏈接標籤、表格標籤)
1、文件標籤(瞭解)
l <html>標籤
聲明瞭該文檔是一個HTML文檔。
包裹了整個HTML 文件
相當於JAVA中類的大括號
l <head>標籤
網頁的說明信息。
它裏面的內容是不會顯示。
l <title>標籤
它是網頁的標題
l <body>標籤
負責顯示頁面的
它裏面的內容是會顯示的
*屬性:
>text 設置body標籤中正文的顏色
>background 設置body背景圖片
>bgcolor 設置body的背景顏色
擴展:
1、HTML的顏色設置(美工知識,瞭解)(HTML三原色。 紅綠藍)
l 顏色關鍵字 例如:red,blue,pink
l 顏色代碼。 例如:#000000。 每一位都是16進制。紅色、綠色、藍色 每一位都是16進制位 0~9 a~f
l 三原色。 例如:rgb(0,0,0) 每一位取值0~255
2、絕對路徑和相對路徑(重要)
絕對路徑:文件在硬盤上的具體位置。
相對路徑:文件相對於引入者的位置。
相對路徑中 /或者\\都是可以的
2、排版標籤(瞭解)
l <br/>標籤
*就是一個換行
l
*是一個空格
l HTML註釋
*格式:<!--註釋內容 -->
l <p>標籤
*就是一個段落標籤。段前段後各加一行
*屬性:
>align 設置段落的對齊方式
l <hr/>標籤
*就是一條水平線
*屬性:
>color 設置水平線的顏色
>size 設置水平線的粗細
>width 設置水平線的長度
擴展:
1、HTML長度設置(美工知識,瞭解)
像素:width =”6”或者width =”6px” 像素設置的長度是固定的
百分比:width =”80%”.它會隨着瀏覽器改變而改變 百分比設置的長度會隨着瀏覽器的改變而改變
3、塊標籤(熟練)
l <div>
在文檔中設定一個塊區域
塊級元素(自動換行)
l <span>
在行內設定一個塊區域
內聯元素(不自動換行)
HTML絕大多數都屬於塊級元素或者內聯元素
4、字體標籤(簡單瞭解)
l <font>標籤
*設置字體的大小、顏色、字體類型
*屬性:
>color 設置字體顏色
>size 設置字體大小 取值範圍 1~7
>face 設置字體類型。
l 標題標籤
*h1~h6
*h1最大,h6最小
l 斜體、粗體標籤
<i></i>
<b></b>
l 滾動字幕
(marquee標籤)
*只兼容IE,所以不建議使用
5、列表標籤(熟練)
l 有序列表(ol標籤)
*屬性
>type 設置有序列表的項目序號。 A,I,1
>start 設置有序列表的項目序號起始值。
l 無序列表(ul標籤)(常用)
*屬性:
>type 設置無序列表的項目標號。
l 列表項條目(li標籤)
6、圖片標籤(熟練)
l <img />
*屬性:
>src 設置圖片引入路徑的(常用)
>alt設置替代圖片的文字(常用)
>width 設置圖片的寬度
>height 設置圖片的高度
>border 設置圖片的相框寬度
>align 設置圖片的對齊方式(不建議使用)
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的框架中打開。
8、表格標籤(重點)
年度財報
部門 |
第一季度 |
第二季度 |
平均 |
A |
100 |
100 |
100 |
B |
100 |
100 |
|
總共 |
400 |
|
l 表格標籤
*table,用來定義一個表格
l 行標籤
*tr,用來定義一個表格內的行
l 單元格標籤
*td,用來定義一個單元格。
*th,用來定義一個表頭單元格。默認居中加粗
*td及th屬性:
>colspan 列合併
>rowspan 行合併
l 表格標題標籤
*caption,用來定義一個表格標題
*必須緊跟在table標籤之後
l 分組標籤(瞭解)
*對錶格中的行進行分組
*thead 定義表格的頁眉。僅有一個
*tbody 定義表格的主體。一個或多個
*tfoot 定義表格的頁腳。僅有一個
*如果在分組標籤外定義了行,那麼行默認屬於TBODY
*分組標籤如果使用必須三個一起使用,否則無效果。
分行下載:
可以控制表格分行下載,從而提高下載速度。
在需要分行下載處加上<tbody>和</tbody>。
公司年度報告
第一季度 |
第二季度 |
平均 |
100 |
100 |
100 |
100 |
100 |
|
400 |
|
三、HTML的表單標籤(重點)
作用:表單用來提交用戶輸入的數據。是整個WEB程序的入口
1、表單標籤
*<form>,就定義了一個表單
*常用屬性:
>action 規定當提交表單時,向何處發送表單數據
向外網提交:http://www.baidu.com
>method 規定如何發送表單數據
post 和 get
默認是get
面試題:
表單提交 post和get的區別?
1、get方式提交會把參數顯示在地址欄
post方式提交不會把參數顯示在地址欄上
2、get方式敏感信息不安全
post方式敏感信息安全
3、get方式提交,官方限制提交大小僅1KB(但多數瀏覽器可以提交2KB)
post方式提交,提交大數據
2、輸入標籤
*input,定義了一個輸入表單項,用來接收用戶輸入的信息。
*屬性:
>type 指定輸入標籤的類型
文本框 text。輸入的文本信息直接顯示在框中。
密碼框 password。輸入的文本以原點或者星號的形式顯示。非明文
單選框 radio 如:性別選擇。
複選框 checkbox 如:興趣選擇。
提交按鈕 submit 用於提交表單中的內容。
重置按鈕 reset 將表單中填寫的內容設置爲初始值
附件框 file 後期擴展內容,會自動生成一個文本框,和一個瀏覽按鈕。例如:照片
隱藏字段 hidden 在頁面上不顯示,但在提交的時候隨其他內容一起提交。例如:用戶編號
按鈕 button 可以爲其自定義事件。
圖片提交按鈕 image 是一個圖片形式的提交按鈕。用來美化提交按鈕的。提交表單數據時,會將鼠標點擊圖片的座標一起封裝。較少使用
>name 用來指定輸入項的名稱。即參數名稱
>value 用來指定輸入項的值。即參數值
>checked 用來設置單選框或者多選框的默認勾選。值爲checked爲默認選中
3、選擇框標籤
*select,定義了一個選擇框
*屬性:
>name 用來指定選擇項的名稱。即參數名稱
> multiple 用來設置選擇框爲多選形式
*option,定義了一個選擇框條目
*屬性:
>value 用來指定選擇項的值。即參數值
>selected 用來設置選擇框的默認選中。值爲selected爲默認選中
4、文本域標籤
*textarea,定義一個文本域輸入框
*屬性:
>name 用來指定文本域的名稱,即參數名
>cols 定義文本域顯示幾列
>rows 定義文本域顯示幾行
和<input type=“text”/>區別:
1、文本域可以換行,而文本框不可以
2、文本域的值是寫在內容體中的,文本框的值是在value中
第一個問題,就是代碼中的align已經廢棄了,利用css寫吧
第二個問題,就是缺少c:test的結束標籤
第三個問題,jdk編譯版本的問