什麼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
>
示例：div 測試：span
元素選擇:
元素的名稱以#號開頭 id在整個頁面中必須是唯一的 否則只找第乙個id
#id的名稱
以 . 開頭
.類的名稱
外部樣式: 通過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:
CSS基礎學習 簡單的CSS語句
用處語法 注意設定字型大小 font size 新增的內容和買衣服大小一樣，xl大於l，大於s，也可以使用數值設定字型大小，選擇需要的單位 字型是否加粗 font weight 新增內容為bold加粗，bolder 比加粗稍微粗一點 lighter 比加粗細一點 或者加粗數值，為有幾個選項可供選擇 ...
css（簡簡單單學習）
cascading style sheet 層疊樣式表 css 表現 美化網頁 lang en charset utf 8 titletitle rel stylesheet href css style.css head 標題h1 body html h1 內部樣式 標籤內 行內樣式 style ...
學習記錄 CSS 動畫簡單使用
之前我基本都沒用過動畫，一般都用canvas做一些畫圖之類的。在前幾次的vilin開發中，有過幾個動畫效果的需求，於是我學習了一下css的動畫，這裡簡單記錄一下。css動畫的特點就是簡單，通過 css3建立的動畫可以取代動畫 flash以及 js等。動畫顧名思義可以動的圖畫，而這個 動 指的就是我們...