前端基礎(1)、HTML

阿新 • • 發佈：2021-02-08

技術標籤：html css java html5 python

1、前言

1.1軟體架構

javaEE是C/S架構
JavaWeb是B/S架構

1.2、頁面三個組成部分

內容：我們看到的資料。用HTML來展示
表現：內容的展示形式。用CSS實現
行為：頁面中的元素和輸入裝置互動的響應。用JavaScript實現

2、HTML簡介

HTML：Hyper Text Markup Language(超文字標記語言)
HTML通過標籤來標記網頁上的文字內容，不同的標籤可以讓瀏覽器解析到不同的顯示效果。可以說，學習HTML就是學習他的各種標籤。

3、建立HTML檔案(MacOS)

在一個Java EE工程中，HTML頁面是寫在web目錄下的。

4、HTML書寫框架

<html>
<head>
    <meta charset="UTF-8">
    <title>頁面的標題</title>
</head>
<body>
	頁面的內容
</body>
</html>

5、HTML標籤簡介

5.1、格式

<標籤名>內容<標籤名/>

5.2、特點

大小寫不敏感
標籤有自己的屬性
- 基本屬性：color=“red”
- 事件屬性：οnclick=“alter(你好)”
標籤分為
- 單標籤
- 雙標籤

5.3、常用標籤

1、font

color
face

size

<font color="red" face="宋體" size="1到7">hello</font>

2、特殊字元的替換

特殊字元	實體	記憶方法
空格		nb space
小於號	<	less than
大於號	&gl;	great than

3、標題標籤

h1到h6
- align：left左對齊、center居中、right右對齊

4、超連結★★★★★

a(anchor錨點)
- href(Hyperlick REFerence)：連線到的地址
- taget：_self：在當前頁面開啟、_blank：新頁面開啟

5、列表標籤

無序列表
- 記憶：
  - ul：unordered list
  - li：list item

<ul>
    <li>單元格的內容1</li>
    <li>單元格的內容2</li>
    <li>單元格的內容3</li>
</ul>

有序列表
- 記憶
  - ol：ordered list

<ol>
    <li>單元格的內容1</li>
    <li>單元格的內容2</li>
    <li>單元格的內容3</li>
</ol>

6、影象標籤

<img/>
- src：圖片路徑
- width：寬度(單位是畫素)
- height：高度(單位是畫素)
- border：邊框(單位是畫素)
- alt：找不到圖片時顯示的文字
路徑
- java中的路徑
  - 絕對路徑：碟符:/目錄/檔名
  - 相對路徑：從工程名開始算
- html中的路徑
  - 絕對路徑：http://ip:port/工程名/資源路徑
  - 相對路徑：
  符號意思
  . 當前檔案所在目錄(目錄就是檔案)
  .. 當前檔案所在的上一級目錄
  直接用檔名表示當前檔案所在目錄的檔案
  相當於 ./檔名，即./可以省略

符號	意思
.	當前檔案所在目錄(目錄就是檔案)
..	當前檔案所在的上一級目錄
直接用檔名	表示當前檔案所在目錄的檔案相當於 ./檔名，即./可以省略

7、表格標籤★★★★★

<table align="center" border="1" width="300" height="300" cellspacing="0">
	<tr>
		<th>1.1</th>
		<th>1.2</th>
		<th>1.3</th>
	</tr>
	<tr>
		<td>2.1</td>
		<td>2.2</td>
		<td>2.3</td>
	</tr>
</table>

table：
- align：left、center、right
- width和height
- border
- cellspacing：單元格之間的距離
tr(table row)
td(table data)
th(table header)

8、跨行跨列表格★★★

在td標籤操作
- rowspan：跨行
- colspan：跨列

9、內嵌視窗---iframe

ifarme 標籤可以在頁面上開闢一個小區域顯示一個單獨的頁面
ifarme 和 a 標籤組合使用的步驟:
1. 在 iframe 標籤中使用 name 屬性定義一個名稱
2. 在 a 標籤的 target 屬性上設定 iframe 的 name 的屬性值

10、表單標籤form★★★★★

表單就是 html 頁面中,用來收集使用者資訊的所有元素集合.然後把這些資訊傳送給伺服器
input標籤中的各種type=“”

type=	含義	其他屬性
text	文字輸入框	value設定預設顯示
password	密碼輸入框	value
radio	單選框	name設定到同一組保證單選 checked=“checked”預設選中
checkbox	複選框	checked=“checked”預設選中
file	檔案上傳域
reset	重置按鈕	value設定按鈕名字
submit	提交	value設定按鈕名字
button	按鈕	value設定按鈕名字
hidden	隱藏域	資訊不需使用者參與直接提交給伺服器
textarea	多行文字輸入框	起始標籤和結束標籤中的內容是預設值 row和cols設定大小

下拉框不再input中

<select>
    <option>中國</option>
    <option selected="selected">美國</option>  預設選中
    <option>日本</option>
</select>

11、表單格式化

為表單起名
其他項放到表格中，在表格中調整樣式

12、表單提交

form 標籤是表單標籤
- action 屬性設定提交的伺服器地址
- method 屬性設定提交的方式 GET(預設值)或 POST
表單提交的時候，資料沒有傳送給伺服器的三種情況：
- 表單項沒有 name 屬性值
- 單選、複選(下拉列表中的 option 標籤)都需要新增 value 屬性，以便傳送給伺服器
- 表單項不在提交的 form 標籤中
【面試題√】√√√√

GET 請求的特點是：
1. 瀏覽器位址列中的地址是：action 屬性[+?+請求引數]，請求引數的格式是：name=value&name=value
2. 不安全
3. 它有資料長度的限制
POST 請求的特點是：
1. 瀏覽器位址列中只有 action 屬性值
2. 相對於 GET 請求要安全
3. 理論上沒有資料長度的限制
總結和說明：
1. ？是分隔符
2. 記憶：形式、安全、長度