HTML基本架構
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
holleworld!!!
</body>
</html>
HTML基本標籤
<h1>一級標題</h1>……<h6>六級標題</h6>
<p>段落標籤</p>
<br>換行標籤
<hr>水平線
超連接標籤：<a href="需要連接的地址"></a>
圖片連接：<img src="地址" alt="圖片顯示不出來顯示的文字" width="寬度" height="高度">
表格標籤：<table>
表格行標籤:<tr>
表格列標籤<td>
跨行標籤:rowpan
跨列標籤:colspan
其他標籤:
塊標籤:<div>
跑馬燈效果<marquee>
提示語效果<span>
HTML表單標籤
<form> action提交的地址 method提交的數據
表單元素定義以inout爲主
type="reset":重置按鈕
type="button":普通按鈕
type="submit":提交數據按鈕
type="file":上傳文件
type="checkbox"：複選框
type="radio":單選框
type="password":密碼框
type="text":文本框
下拉列表:
下拉列表：<select> <option value="屬性">屬性</option></select>
多行文本域：<textarea rows="值" cols="值"></textarea>
表單域：<fieldset><legend>指定表單域的標題
HTML框架:<frameset>frameset不能與body標籤同時存在於同一個頁面(現階段很少用此框架,一般用盒子(div))
HTML特殊符號:
大於：>、小於：<、&：與字符、"：引號、®：己註冊、©：版權、&trade：商標、 ：空格
css
css是什麼：
層疊樣式表，css是對html進行樣式修飾語言 Cascading Style Sheet
層疊：就是層層覆蓋疊加，如果不同的css樣式對同一html標籤進行修飾，樣式有衝突的部分應用優先級高的，不衝突的部分共同作用
樣式表：就是css屬性樣式的集合
css作用：
1、修飾html的 使其html樣式更加好看
2、提高樣式代碼的複用性
3、html的內容與樣式相分離 便於後期維護
css引入方式
方式一：內嵌樣式是把css的代碼嵌入到html標籤中
語法：使用style屬性將樣式嵌入到html標籤中，屬性的寫法：屬性：屬性值，多個屬性之間使用分號“;”隔開（不建議使用）
內嵌樣式：<div style="color:red;font-size: 100px;">向陽花</div>
方式二：內部樣式是在head標籤中使用style引入css
語法：1、使用style標籤進行css的引入 <style type="text/css">屬性：type：告知瀏覽器使用css解析器去解析
2、屬性的寫法：屬性：屬性值
3、多個屬性之間使用分號;隔開
<style type="text/css">
div{color:red;font-size: 100px;}
</style>
方式三：將css樣式抽取成一個單獨的文件，誰用誰就去調用
語法：創建css文件 將css屬性寫在css文件中
在head中使用link標籤進行引入
屬性的寫法：屬性：屬性值
多個屬性之間使用分號;隔開
<link rel="stylesheet" type="text/css" href="css文件路徑"/>
方式四：導入式（不建議過多使用）
<style type="text/css">@import url("css地址");</style>
link與@import方式的區別：
1、link所有瀏覽器都支持 import部分低版本IE不支持
2、import方式是等待html加載完畢之後在加載
3、import方式不支持js的動態修改
css選擇器
基本選擇器
標籤選擇器：語法：html標籤名{css屬性}
類選擇器：語法：.class的值{css屬性}
id選擇器：語法：id的值（是位置標識）{css屬性}
優先級：id選擇器>class選擇器>標籤選擇器
其他選擇器
僞類選擇器：
完成狀態 a:visited{css屬性}
觸發狀態 a:active{css屬性}
懸浮狀態 a:hover{css屬性}
靜止狀態 a:link{css屬性}
層級選擇器/後代選擇器：語法：父級選擇器 子級選擇器 {}
交集選擇器：語法：標籤類選擇器/id選擇器
由兩個選擇器直接連接構成，選中二者各自元素範圍的交集，第一個必須是標籤選擇器，第二個必須是類選擇器或者ID選擇器，選擇器之間不能有空格，必須連續書寫；
並集選擇器：語法： h1,p,div,.demo{css屬性}
多個選擇器通過逗號連接而成，利用並集選擇器同時聲明風格相同樣式
屬性選擇器（不常用）：格式爲：htm標籤[屬性=‘屬性值']{css屬性:css屬性值;} 或者html標籤[屬性]{css屬性:css屬性值;}，
css屬性
文字屬性：
color 設置字體顏色
font-size 設置文字大小
font-family 設置文字字體
font-style 設置文字風格 italic 斜體 oblipue 傾斜
font-weight 設置粗細 bold 粗
line-height 行高
font-variant 變體 small-caps小 大字母
text-decoration underline;}(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)
文本屬性
color 顏色
text-indent 段落縮進
text-decoration none 關閉應用到這個元素上的所有裝飾
underline: 添加下劃線
overline:在文本的頂端畫一個上劃線
line-through:在文本中間畫一個貫穿線
blink:讓文本閃爍
text-align 文本對齊方式
word-spacing 字符間距
letter-spacing 單詞或字母間距
line-height 單位px;
背景屬性
background 設置背景屬性
background-color 設置背景色
background-image:url(圖片路徑)設置背景圖片
background-repeat 平鋪方式 重複;
repeat-y:只在垂直方向都平鋪
repeat-x:只在水平方向都平鋪
repeat:在水平垂直方向都平鋪
no-repeat:任何方向都不平鋪
background-position 設置背景初始出現的位置 top 上 bottom 下 left左對齊 right右對齊 center居中對齊
background-attachment: fixed;(固定) scroll;(滾動) 跟隨頁面滾動
列表屬性
list-style-type:decimal; g改變列表的標籤類型
list-style-image:url(路徑)用圖像表示
list-style-position:inside:確定標誌出現在列表項內容之外還是內容內部 outside內 、inside;(外)
尺寸屬性
顯示屬性
顯示屬性display :none:不顯示、block:塊級顯示、inline:行級顯示
浮動屬性
float 浮動 left：左浮動、 right：有浮動、 none：無浮動
clear 清楚浮動 left：清除左浮動、right：清除右浮動、both：清除浮動none：不清除
inherit 規定應該從父元素繼承
定位屬性
相對定位 position: relative; top(相對於上邊界) right(相對於右邊界) bottom(相對於下邊界) left(相對於左邊界)
相對於原來的位置 對其他元素沒有影響
絕對定位 position: absolute; top(相對於上邊界) right(相對於右邊界) bottom(相對於下邊界) left(相對於左邊界)
相對於瀏覽器邊框或者父元素位置
固定位置 position: fixed;
盒子模型
屬性
外邊距
margin：top上、right右、bottom下、left左
margin-top：外上邊距
margin-right：外右邊距
margin-bottom：外下邊距
margin-left：外左邊距
內邊距
padding top right bottom left
padding-top 上外邊距
padding-bottom: 右外邊距
padding-left: 下外邊距
padding-right: 左外邊距
邊框
邊框
border-color 邊框顏色
border-width 邊框寬度
border-style 樣式、solid:實線、double:空心線、dashed:圓點組成的邊框、dotted:虛線組成的邊框
css寬展屬性
border-radius: px 創建圓角
box-shadow px px px color 添加陰影
background-size: px px 設置背景圖像尺寸
background-image:爲指定元素指定多個背景圖像
text-shadow 5px 5px 5px color;添加文本顏色
display屬性常用可能值
display:取值有三個：block,inline,none
block:將元素顯示爲塊級元素，該元素前後會帶有換行符
inline:默認，元素會顯示爲內聯元素，該元素前後沒有換行符
none:該元素不會被顯示
overflow屬性值
visible：默認值，內容不會被修剪，呈現在盒子之外
hidden：內容會被修剪，並且其餘內容是不可見的
scroll：內容會被修剪，但是流浪器會顯示滾動條以便查看其餘內容
auto：如果內容被修剪，則流浪器會顯示滾動條以便查看其餘的內容