HTML和CSS
1、B/S軟件的結構
javaSE C/S Client/Server
B/S Browser/Server
javaEE項目
客戶端：瀏覽器
服務器端：web服務器
2、前端開發流程
3、網頁的組成部分
內容（結構）：我們在頁面中可以看到的數據，一般內容使用html技術來展示
表現：內容在頁面上的展示形式。比如：佈局、顏色、大小等等。一般使用css技術實現
行爲：頁面中元素與輸入設備交互的相應，一般用js 技術實現
4、HTML簡介
Hyper Text Markup Language（超文本標記語言） 簡寫：HTML
通過標籤來標記要展示的頁面中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如文字處理、畫面安排、圖片顯示等）
5、創建HTML文件
1、創建一個web工程（靜態）
file=>new=>project=>static web->static web=>project name工程名 project location工程路徑->finish
2、創建一個html頁面
工程名=>new->html file=>選擇瀏覽器執行頁面
<!DOCTYPE html>
<html lang="en"> //<!--表示整個HTML頁面的開始-->
<head> //<!--頭信息-->
<meta charset="UTF-8">
<title>標題</title> //<!--標題-->
</head>
<body> // <!--頁面的主題內容-->
hello
</body>
</html> //<!--整個HTML頁面結束-->
注：Java文件需要先編譯再由Java虛擬機跑起來，單HTML文件不需要編譯，直接由瀏覽器進行解析執行
6、HTML標籤介紹
1、標籤的格式
<標籤名>封裝的數據</標籤名>
2、標籤名大小寫不敏感
3、標籤擁有自己的屬性
i、基本屬性：becolor="red" 可以修改簡單的樣式效果
ii、事件屬性：onclick="alert("你好");" 可以直接設置事件響應後的代碼
4、標籤分爲單標籤和雙標籤
i、單標籤：<標籤名/> br換行 hr水平線
ii、雙標籤：<標籤名>封裝的數據</標籤名>
標籤不能交叉嵌套，標籤必須正常關閉
7、常用標籤
7.1、font字體標籤
<font color="red" face="宋體" size="7">我是字體標籤</font>
font標籤是字體標籤，可以用來修改文本的字體、顏色、大小（尺寸）
color屬性修改顏色
face屬性修改字體
size屬性修改文本大小
7.2、特殊字符
把換行標籤變成文本轉換成字符顯示在頁面上
我是<br<標籤<br/>
7.3、標題標籤
h1-h6 從大到小
align 屬性是對齊屬性
left 左對齊（默認）
center 居中
right 右對齊
7.4、超鏈接
<a href="http://localhost:8080" target="_self">百度_self</a>
a標籤是超鏈接
href屬性設置連接的地址
target屬性設置哪個目標進行跳轉
_self 表示當前頁面（默認）
_blank 表示打開新頁面進行跳轉
7.5、列表屬性
ul 是無序列表
type屬性可以改變列表項前面的符號
li是列表項
7.6、img標籤
img標籤是圖片標籤，用來顯示圖片
src屬性可以設置圖片路徑
width屬性設置圖片寬度
height屬性設置圖片高度
border屬性設置圖片邊框大小
alt屬性設置當指定路徑找不到圖片時，用來代替顯示的文本內容
JavaSE路徑：
相對路徑：從工程名開始算
絕對路徑：盤符：/目錄/文件名
WEB中路徑：
相對路徑：
. 表示當前文件所在目錄
.. 表示當前文件在的上一級目錄
文件名 表示當前文件所在目錄的文件，相當於./文件名
7.7、表格標籤
table 標籤是表格標籤
border 設置表格標籤
width設置表格寬度
height設置表格高度
align設置表格相對於頁面的對齊方式
cellspacing 設置單元格間距
tr行標籤
th表頭標籤
td單元格標籤
align設置單元格文本對齊方式
b 加粗標籤
colspan屬性設置跨列
rowspan屬性設置跨行
<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>
<th>2.1</th>
<th>2.2</th>
<th>2.3</th>
</tr>
</table>
7.8、iframe框架
iframe標籤可以在頁面上開闢一個小區域顯示一個單獨的頁面
iframe和a標籤結合使用：
1、在iframe標籤中使用name屬性定義一個名稱
2、在a標籤的target屬性上設置iframe的name的屬性值
7.9、表單屬性
form標籤就是表單
input type=text 文本輸入框 value設置默認顯示的內容
input type=password 密碼輸入框 value設置默認顯示的內容
input type=checkbox 複選框 checked=“checked” 表示默認選中
input type=radio 單選框 name屬性可以對其進行分組 checked=“checked”表示默認選中
input type=reset 重置按鈕 value屬性修改按鈕上的文本
input type=submit 提交按鈕 value屬性修改按鈕上的文本
input type=file 文件上傳域
input type=hidden 隱藏域 當我們要發送某些不需要用戶參與的信息使用，提交的時候同時發送給服務器
select標籤是下拉列表框
option 是下拉列表框中的選項 selected=“selected”設置默認選中
text area 多行文本輸入框（起始標籤和結束標籤中的內容是默認值）
rows屬性設置可以顯示幾行的高度
cols屬性設置每行可以顯示幾個字符的寬度
form標籤是表單標籤
action屬性設置提交的服務器地址
method屬性設置提交的方式GET（默認)或POST
表單提交的時候，數據沒有發送給服務器的三種情況：
1、表單項沒有name屬性值
2、單選、複選（下拉列表中的option標籤）都需要添加value屬性、以便發送給服務器
3、表單項不在提交的form標籤中
GET請求的特點：
1、瀏覽器地址欄中的地址是：action屬性【+？+請求參數】
請求參數的格式：name=value&name=value
2、不安全
3、有數據長度的限制
POST請求特點：
1、瀏覽器地址欄中只有action屬性值
2、相對於GET請求安全
3、理論上沒有數據長度限制
7.10、其他
div標籤 默認獨佔一行
span標籤 長度是封裝數據的長度
p段落標籤 默認會在段落的上方或者下方各空出一行（如有已有就不再空）
8、CSS
選擇器：瀏覽器根據選擇器決定受css樣式影響的HTML標籤
屬性：要改變的樣式名，每個屬性都有一個值。屬性和值被冒號分開，花括號包圍
多個聲明：用分號分開
一、在標籤的style屬性上設置“key:value value;”修改標籤樣式
二、在head標籤中使用style標籤定義樣式
<style type="text/css">
div{
border:1px solid red;
}
</style>
三、把css樣式單獨css文件，再通過link標籤引入即可
<link rel="stylesheet" type="text/css" href="./styles.css"/>
標籤名選擇器
標籤名{屬性：值；}
id選擇器
#id屬性值{屬性：值；}
class選擇器
.class屬性值{屬性：值；}
組合選擇器
選擇器1，選擇器2，選擇器n{屬性：值；}
常用樣式
color：red顏色
width：19px；寬度
height:20px；高度
background-color:#0F2D4C;背景顏色
font-size:20px;字體大小
border：1px solid yellow；黃色1像素實線邊框
div居中：margin-left：auto；
margin-right：auto；
文本居中：text-align：center；
text-decoration：none；超鏈接去下劃線
table{
border：1px solid black;設置邊框
border-collapse:collapse;將邊框合併
}
ul{list-style:none;}列表去掉修飾