什麼html : 超文字標記語言
p標籤: 段落標籤
br標籤: 簡單換行
h1-h6: 標題標籤
hr標籤: 水平分割線, 華麗的分割線
font標籤: color屬性改變顏色 , size
b標籤: 加粗
i標籤: 斜體
strong標籤: 帶語義的加粗
em標籤: 斜體標籤,帶語義
img標籤: 標籤 顯示
src: 指定路徑(相對路徑)
width: 寬度
height: 高度
alt: 載入失敗時的提示
相對路徑:
./ 代表當前路徑
…/ 代表的是上一級路徑
…/…/ 代表的是上上一級路徑
ul標籤: 無序列表
ol標籤: 有序列表
li標籤: 列表項
a標籤: 超連結標籤:
target: 開啟方式
href: 指定要跳轉的鏈結位址
table標籤: table > tr > td
tr標籤: 行
td標籤: 列
**註冊案例:
form 標籤: 表單標籤,主要是用來向伺服器提交資料
method: 提交方式 get post
action : 提交的路徑
input 標籤:
type:
password: 密碼框
text : 文字
submit: 提交
button: 普通的按鈕
reset: 重置按鈕
radio: 單選按鈕 設定name屬性讓它們是一組
checkbox: 複選按鈕
email:郵件
date:日期
tel:**
frameset : 框架標籤
rows:
cols:
frame:
**布局的缺陷:
1. 巢狀層級太多, 一旦出現巢狀順序錯亂, 整個頁面達不到預期效果
2. 採用**布局,頁面不夠靈活, 動其中某一塊,整個**布局的結構全都要變
技術分析
html的塊標籤:
div標籤: 預設佔一行,自動換行
span標籤: 內容顯示在同一行
css主要用作用:
用來美化我們的html頁面的
html 決定網頁的骨架 ,css 化妝
將頁面的html和美化進行分離
css的簡單語法:
在乙個style標籤中,去編寫css內容,最好將style標籤寫在這個head標籤中
>
選擇器style
>
css選擇器: 幫助我們找到我們要修飾的標籤或者元素
示例:div 測試:span
元素選擇:
元素的名稱
id選擇器:
以#號開頭 id在整個頁面中必須是唯一的 否則只找第乙個id
#id的名稱
類選擇器:
以 . 開頭
.類的名稱
css的引入方式:
外部樣式: 通過link標籤引入乙個外部的css檔案
內部樣式: 直接在style標籤內編寫css**
行內樣式: 直接在標籤中新增乙個style屬性, 編寫css樣式
這個單詞很多人翻譯為 文件流 , 字面翻譯 普通流 或者標準流都可以。
前面我們說過,網頁布局的核心,就是用css來擺放盒子位置。如何把盒子擺放到合適的位置?
css的定位機制有3種:普通流(標準流)、浮動和定位。
html語言當中另外乙個相當重要的概念----------標準流!或者普通流。普通流實際上就是乙個網頁內標籤元素正常從上到下,從左到右排列順序的意思,比如塊級元素會獨佔一行,行內元素會按順序依次前後排列;按照這種大前提的布局排列之下絕對不會出現例外的情況叫做普通流布局。
浮動最早是用來控制,以便達到其他元素(特別是文字)實現「環繞」的效果。
後來,我們發現浮動有個很有意思的事情:就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題,用浮動的特性來布局了。(css3已經我們真正意義上的網頁布局,具體css3我們會詳細解釋)
元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制,移動到其父元素中指定位置的過程。
在css中,通過float屬性來定義浮動,其基本語法格式如下:
選擇器
屬性值
描述left
元素向左浮動
right
元素向右浮動
none
元素不浮動(預設值)
css浮動 : 浮動的元素會脫離正常的文件流,在正常的文件流中不佔空間
float屬性:
left
right
clear屬性: 清除浮動
both : 兩邊都不允許浮動
left: 左邊不允許浮動
right : 右邊不允許浮動
流式布局
步驟分析:
創乙個最外層div
第一部份: logo部分: 巢狀三個div
第二部分: 導航欄部分 : 放置5個超連結
第三部分: 輪播圖
第四部分:
第五部分: 直接放一張
第六部分: 抄第四部分的
第七部分: 放置一張
第八部分: 放一堆超連結
擴充套件:美化頁面
將頁面美化和html**進行分離,提高**的服用型
css浮動:
css中的其它選擇器
css的盒子模型: 萬物皆盒子
css絕對定位:
position: absolute
top: 控制距離頂部的位置
left: 控制距離左邊的位置
css: 層疊樣式表.
css作用: 美化頁面,提高**的復用性
選擇器:
需要掌握的:
元素選擇器: 標籤的名稱
類選擇器: 以 . 開頭
id選擇器: 以#開頭, #id的名稱 id必須是唯一的
優先順序: 按照選擇精確度: 行內樣式 > id選擇器 > 類選擇器 > 元素選擇器
就近原則
擴充套件選擇器:
選擇器分組: 選擇器1,選擇器2 以逗號隔開
後代選擇器: 爺爺 孫子 中間以空格隔開
子元素選擇器: 爸爸 > 兒子
屬性選擇器: 選擇器[屬性的名稱=』』]
偽類選擇器: 超連結標籤上使用
浮動: float屬性 left right
清除浮動: clear: both left right
絕對定位:
position: absolute
top:
left:
學習第三天
額,又是美好的一天!祝賀比利時奪得季軍!下面,還是先看資訊學 今天繼續看倍增。這道題是和倍增沾邊的題,額,其實就是兩邊floyd。但是思路還是可以借鑑的。這道的思路是,使用兩個陣列,乙個是f k u v 這個陣列表示節點u到節點v之間是否距離為2 k,如果是,則為1,否則為0.代表u和v之間是否1s...
學習第三天
等價類是建立在這種思想之上 即我們不可能進行窮舉測試,那麼我們就 必須對輸入進行分類,而這種分類是建立在我們知道計算機程式設計原理和 計算機處理單元的工作原理基礎之上的,程式是通過資料結構和演算法來實現 的,計算機是按照演算法來執行程式的,這種執行是穩定的,不會因為我們的 輸入而導致計算機處理不穩定...
學習第三天
ctrl c 複製 ctrl v 貼上 ctrl a 全選 ctrl x 剪下 ctrl z 撤銷 ctrl s 儲存 alt f4 關閉視窗 shift delete 永久刪除 windows r 執行 windows e 我的電腦 ctrl shift esc 任務管理器 開始 系統 命令提示符...