Web全棧----CSS
1、URL(略)
2、圖像(略)
3、超鏈接
1、什麽是超鏈接
用戶可以通過點擊的操作來完成頁面的跳轉的行為
2、語法
標記：<a>內容</a>
屬性：
1、href
表示的要鏈接到的文件的地址
2、target
指定打開新網頁的方式
取值：
1、_self
默認值，在自身標簽頁中打開新網頁
2、_blank
在新標簽頁中打開新網頁
2、表格
1、表格的語法
1、標記
表格：<table></table>
表行：<tr></tr> --- Table Row
單元格(列)：<td></td> --- Table Data
ex：創建一個 4(行)*4(列) 的表格 2、屬性 1、table屬性 1、border 指定表格邊框的寬度，以px為單位(可以省略px) 2、width 指定表格的寬度，以px為單位 3、height 指定表格的高度，以px為單位 4、align 指定表格在其父元素中的水平對齊方式 取值：left / center / right 5、cellpadding 單元格內邊距，內容與單元格邊框之間的距離 6、cellspacing 單元格外邊距，單元格與單元格之間的距離 2、tr 屬性 1、align 控制當前行的內容的水平對齊方式 取值：left / center / right 2、valign 控制當前行的內容的垂直對齊方式 取值：top / middle / bottom 3、bgcolor 指定當前行的背景顏色 取值：表示顏色的英文單詞 3、td 屬性 1、width 2、height 3、align 4、valign 5、bgcolor 6、colspan : 跨列 / 合並列 7、rowspan : 跨行 / 合並行 2、不規則的表格 1、單元格的跨列 從指定的單元格位置處開始，橫向向右合並幾個單元格(包含自己)，被合並的單元格要刪除出去 語法：colspan="n" 2、單元格的跨行 從指定的單元格位置處開始，縱向向下合並幾個單元格(包含自己)，被合並的單元格要刪除出去 語法：rowspan="n" 3、行分組 1、什麽是行分組 允許將表格中的若幹行劃分到一組中，方便統一管理 2、語法 1、表頭行分組 允許將表格最上方的若幹行劃分到一組中 <thead></thead> 2、表尾行分組 允許將表格最下方的若幹行劃分到一組中 <tfoot></tfoot> 3、表主體行分組 除了最上方和最下方以外的其他行進行分組的話，可以使用表主體行分組 <tbody></tbody> 註意：如果不顯示的為行指定分組的話，那麽所有行都被默認分到 tbody 行分組中
3、表單
1、表單的作用
用於接收用戶的數據並提交給服務器
表單兩個要素：
1、form元素 - 表單，收集用戶的信息
2、表單控件
提供能夠與用戶進行數據交互的可視化組件
2、form 元素
1、作用
收集用戶信息並提交給服務器
form元素在網頁中是不可見的，但功能不能忽略
2、語法
1、標記
<form></form>
2、屬性
1、action
指定要提交給服務器處理程序的地址
默認提交給本頁
2、method
提交方式/提交方法
1、get （默認值）
表示向服務器要數據時使用
特點：
1、會將提交的數據顯示在地址欄上
2、安全性較低
2、post
要將數據提交給服務器進行處理時使用
特點：
1、隱式提交，看不到提交的數據
3、表單控件
1、作用 & 註意
作用：提供了能夠與用戶交互的可視化組件
註意：只有放在表單中的表單控件才允許被提交
2、表單控件詳解(難點)
1、文本框 與 密碼框
文本框：<input type="text">
密碼框：<input type="password">
屬性：
1、name ：定義控件的名稱
提交給服務器使用，如果沒有name的話則無法提交
2、value ：值
3、maxlength : 限制輸入的最大字符數
4、readonly ：只讀
該屬性不用設置值
5、placeholder：占位符
用戶在未輸入任何數據時所顯示的內容
1、提交按鈕:<input type="submit">
將表單的數據提交給服務器
2、重置按鈕:<input type="reset">
將表單的內容恢復到初始化的狀態
3、普通按鈕:<input type="button">
允許通過JS自定義功能
屬性：
value ：指定按鈕上的文本
4、<button>內容</button>
屬性：type
取值：
submit / reset / button
3、單選按鈕 和 復選框
單選按鈕：<input type="radio">
復選框：<input type="checkbox">
屬性：
1、name
除了定義名稱之外，還能起到分組的作用
一組中的單選按鈕 或 復選框，name屬性值必須一致
2、value
值，盡量提前聲明好
3、checked
設置預選中，該屬性無值
4、隱藏域 和 文件選擇框
1、隱藏域
作用：想提交給服務器但不想給用戶看的數據可以放在隱藏域中
語法：
<input type=‘hidden‘>
屬性：
name：控件名稱
value：控件的值
2、文件選擇框
作用：上傳文件時使用
語法：
<input type="file">
屬性：
name：控件的名稱
5、多行文本域
標記：
<textarea></textarea>
屬性：
1、name ：控件名稱
2、cols ：指定文本域默認顯示的列數(一行中能夠顯示多少個英文字符，中文減半)
3、rows ：指定文本域默認顯示的行數
6、下拉選擇框
語法：
<select name="">
<option value="值1">顯示1</option>
<option value="值2">顯示2</option>
</select>================================================
CSS
1、CSS介紹
CSS:Cascading Style Sheets - 樣式表
HTML：搭建網頁結構
CSS：修飾和美化網頁
2、CSS的使用方式(重點)
1、內聯方式
將CSS的內容定義在單獨的HTML標簽中
語法：
<ANY style="樣式聲明">
樣式聲明：
1、樣式聲明是由樣式屬性和樣式值來組成
2、屬性 和 值之間使用 : 連接
<ANY style="屬性:值">
3、在一個style中允許有多個樣式聲明，多個樣式聲明之間使用 ; 隔開
<ANY style="屬性1:值1;屬性2:值2;">
常用的屬性和值：
1、文字大小
屬性：font-size
取值：以 px 為單位的數字
ex:設置某元素的文字大小為18px
<ANY style="font-size:18px;">
2、文本顏色
屬性：color
取值：表示顏色的英文單詞
ex:設置某元素的文字大小為18px，文本顏色為紅色
<ANY style="font-size:18px;color:red;">
3、背景顏色
屬性：background-color
取值：表示顏色的英文單詞
<ANY style="background-color:yellow;">
ex：
1、創建一個網頁 07-style.html
2、創建一個 div 標記，內容隨意
3、使用內聯方式設置樣式如下：
1、文字大小為 24px
2、文本顏色為 紅色(red)
3、背景顏色為 ×××(yellow)
2、內部樣式表
1、作用
讓定義好的樣式能夠使用在當前頁面中的多個元素上
2、語法
<head>
<style>
樣式規則1
樣式規則2
....
樣式規則n
</style>
</head>
樣式規則語法：
由選擇器 和 樣式聲明組成
選擇器：規範了頁面中哪些元素能夠使用聲明好的樣式
選擇器{
屬性1:值1;
屬性2:值2;
}
ex:
作用：設置頁面中所有的div的樣式
div{
font-size:18px;
color:red;
background-color:yellow;
}
作用：設置頁面中所有的h1的樣式
h1{
... ...
}
p{
... ...
}
span{
.... ....
}
3、外部樣式表
1、作用
將聲明好的樣式應用在多個網頁中
將樣式規則聲明在獨立的css文件中(***.css)
在使用的網頁中對css文件進行引入即可
2、使用步驟
1、創建 .css 文件，並編寫樣式規則
2、引入 .css 文件
<head>
<link rel="stylesheet" href="css文件的url">
</head>file:///D:/%E8%B5%B5%E6%97%AD/01_WEB%20BASIC/Day02/04-form.html
Web全棧----CSS