前端HTML基礎與css
一. HTML簡介：(使用http協議)
1. 靜態網頁：
HTML制作完成，網頁的內容如果沒有人去重新更新或制作的話，內容是永遠一成不變的。
2. 動態網頁：
在不同的時間看到的網頁內容是不同的，用戶看到的網頁的內容其實是服務器端的程序運行出來的結果。
如：論壇。以後重點，開發動態網頁。語言：JSP(Java Server Page)
二. 文本標記
h1~h6: 標題
hr: 水平線
font: 設置字體
strong: 加粗
br: 換行
p: 分段
sup/sub: 上標/下標
pre: 原樣輸出
ol li: 有序列表(三種編號方式：數字，字母，羅馬)
ul li: 無序列表
dl dt dd: 項目列表(dl 容器, dd 標題, dd 描述)
span: 行內標簽，將部分文字在邏輯上分成不同部分
div: 塊標簽，一個塊占用一行，換行的功能
三. 超鏈接標記
1. 作用: 點擊網頁上的文字，可以跳轉到其它的網頁上去。
2. 語法:
<a href=”URL”>文字</a>
常用的屬性:
href: 要跳轉的頁面
target取值: 打開頁面的方式(_self 在當前窗口打開, _blank 在新的窗口打開)
3. 錨標記: <a name="名字">
跳轉到錨: <a href="#名字">
四. img: 顯示圖片
1. 語法:
<img src="指定圖片的地址">
常用屬性：
src: 地址
width： 寬度
height： 高
alt： 圖片替代的文本
title： 鼠標移上去的時候顯示的信息提示
五: 表格的結構:
1. 表格標簽:
table 容器
tr 行
th 列標題
td 單元格
bgcolor 設置背景色
caption 表格的標題
2. 常用的表格屬性：
width: 寬度 border : 邊框寬度 align： 對齊 rowspan： 跨行 colspan： 跨列 cellspacing: 單元格之間的間距 cellspadding: 單元格邊框與內容的間隔3. thead、tfoot和tbody元素
作用：在邏輯上將表格劃分成幾個不同的部分
thead：表格的頭部
tbody： 表格的主體，無論有沒有寫這個標簽，瀏覽器在解析表格的時候，都會自動加上tbody標簽。
tfoot： 表格的腳部
六. 表單標簽: <form>
<form> 作用: 提交數據給服務器
常用的屬性: action 提交給服務器地址 method = get /post get: 提交的數據在地址欄上顯示出現 post: 不顯示
1. 文本框 <input type="text"/> 2. 密碼框 <input type="password"/> 3. 單選框 <input type="radio" checked="checked"/> 4. 復選框 <input type="checkbox" checked="checked"/> 5. 下拉列表 <select> <option> 6. 隱藏表單域 <input type="hidden"/> 7. 文件域 <input type="file"/> 8. 多行文本域： <textarea></textarea> 9. 提交按鈕 <input type="submit"/> 10. 重置按鈕： <input type="reset"/> 11. 普通按鈕： <input type="button"/> 12. 圖片按鈕： <input type="image" src=""/>type屬性
----------------------------------css----------------------------------
一. css的代碼的位置
1. 行內樣式：以標簽的一個style屬性的方式存在於HTML網頁中，只對指定的標簽起作用。
<h2 style="color: green">我是標題2</h2>
2. 內部樣式：在網頁中添加<style>標簽，與HTML在同一個文件中。
1 <style type="text/css"> 2 h2 { 3 color: darkblue; 4 font-size: 20px; 5 } 6 </style>
3. 外部樣式：
1). 引入方式一：
1 <link type="text/css" href="css/01.css" rel="stylesheet"/> 2 href: 要導入的CSS的文件名 3 type: 指定樣式的類型，取值：text/css 4 rel: 樣式與HTML文件之間的關系：stylesheet 樣式表 5 CSS: Cascading Style Sheet 層疊樣式表
2) . 引入方式二(了解，使用少)： 存在一些瀏覽器兼容的問題，而且文件的數量有一定的限制。
1 @import url(‘css/01.css‘);
3) 樣式起作用的原則：
就近的原則，哪個樣式離它近，哪個就起作用。同名的樣式會覆蓋，不同的樣式還是會起作用。
二. 選擇器:
1. 選擇器的作用：
對網頁中的元素(標簽)進行樣式的設置之前，首先找到這些元素，選定對哪些元素進行樣式的設置。2. 語法格式：
每一行一個樣式的名和值選擇器 {
樣式名：樣式值;
}
選擇器的分類：
1. 基本選擇器: 優先級(優先級： ID選擇器 > 類選擇器 > 標簽選擇器)
1) ID選擇器 #id
2) 標簽選擇器 標簽名
3) 類選擇器 .類名
2. 復合選擇器
由基本選擇器組合而成
1) 層級選擇器: 空格按層級的關系，選擇父標簽下所有的子孫標簽
2) 並集選擇器: ,選擇器1+選擇器2 兩個選擇器所有選中的元素，使用指定的樣式。
3) 交集選擇器(只能是ID或類): 標簽#ID{}或 標簽.類{}兩個選擇器共同的部分
4) 通用選擇器: *對網頁中所有的元素使用指定的樣式，優先級最低。
5) 偽類選擇器:一個網頁的元素在不同操作狀態下，呈現不同的樣式。
● <a>鏈接</a>
a:link 沒有訪問的時候，正常的狀態
a:active 正在點擊的時候
a:hover 鼠標移動到上面的時候
a:visited 已經被點擊過的鏈接
● <input>: 得到焦點：當一個元素得到了可以操作時狀態，如：文本框有光標在閃
1 例：得到焦點，讓文本框的背景色變成黃色 2 input:focus { 3 background-color: yellow; 4 }6) 屬性選擇器
a. 有某個屬性
p[name]
b. 屬性等於某個值
p[name="first"]
三. 樣式:
1. 背景樣式:background-color： 背景色 background-image： 圖片 background-repeat： 平鋪 1) x,y 2) x 3) y 4) no-repeat background-position：開始平鋪的位置2. 文本樣式:font-family：字體 font-size： 大小 font-style： 斜體 font-weight： 加粗
3. 文本樣式:
line-height：行高 letter-spacing： 字符間隔 word-spacing： 單詞間距 text-decoration： 下劃線 text-indent： 縮進
4. 盒子模型:
盒子模型由哪些屬性組成： 內容，邊框，內間距，外間距，高，寬 border-style： 邊框線型 border-color： 邊框顏色 border-width： 邊框寬度 margin： 外 padding： 內簡寫
演示：把線型，粗細，顏色聲明在一個屬性中
border: solid green 2px;四邊 上下 左右 上 左右 下 上 右 下 左
前端HTML基礎與css