Html/CSS 初步介紹html和css部分重要標簽
&初步介紹html和css部分重要標簽&
註:開頭書寫:<!DOCTYPE html>表明對應標準html代碼
html標簽(僅有一個),內部可以寫屬性
- 自閉合標簽 例:<meta />
- 主動閉合標簽 大多都需主動閉合
head標簽:
- -<meta > 編碼,跳轉/刷新(提及但不推薦在此書寫),關鍵字,描述,IE兼容(主要避免IE6的亂碼問題,現今無需考慮)
- -title 標簽
- -Link 搞圖標
- -style 界面樣式(高寬 居中等)
- -script
body標簽:
- -圖標, -空格 >-大於號 <-小於號(具體搜索html特殊圖標)
- -<p>段落內容</p> 段落書寫 兩個段落間有間距
- -h系列標簽 用作控制字大小(加大加粗)
<h1>段落</h1> h1-h6 從大到小 - -<br/> 換行
- -<span>內容</span> 白板輸出 自占多少占多少(行內標簽)
- -<div>內容</div> 白板輸出 自占一行(塊級標簽)
註:
- 所有標簽分為:
塊級標簽:自占一行 例:H系列,p標簽,div
行內標簽:自占多少占多少 例:span標簽 - 標簽之間可以嵌套
- 標簽存在意義-方便後期css,js操作
- 所有標簽分為:
body大標簽中常見小標簽及其系列:
-
input系列
- <input type=‘text‘/> name屬性 value=‘默認值‘
- <input type=‘password‘/> name屬性
- <input type=‘submit‘ value=‘提交按鈕‘/>
- <input type=‘button‘/> 按鈕
- <input type=‘radio‘ name=‘‘ value=‘‘/> 實現單選框需要name與value(name必須相同達成互斥)
- <input type=‘checkbox‘ name=‘‘ value=‘‘/>實現多選框需要name與value(name可相同to批量處理數據 value不同)
- <input type=‘file‘/> 依賴form表單的一個屬性 enctype="multipart/form-data"
- <input type=‘reset‘/> 重置
- <textarea name="">默認值</textarea> 同text但多行
-
select標簽
統一name 內部option-value 提交到後臺
3.a標簽
-跳轉
-錨 (定位頁面顯示位置) href=‘#+標簽id‘ 標簽id不能重復
4.img標簽
<img src="1.jpg" title="pictur"style="height:200px;width:200px;" alt="ok">
1. src-文件地址
2. title-鼠標放於圖片顯示
3. style-圖片像素大小設定
4. alt-圖片不顯示時的默認值
5.下拉列表(不常用 帶過)
ul
li
ol
li
dl
dt
dd
6.表格table (border="1"邊框)
- thead
- tr
- th
- tbody
- tr
- td
- 讓列合並 td colspan=“number”
- 讓行合並 tr rowspan="number"
7.label
##點擊用戶名後方text輸入則需讓id對應
<label for="usename">用戶名</label>
<input id="usename" type="text"/>
8.fieldset
邊框插文字
legend
CSS重點
1)在標簽上設置style
2)寫在head裏面,style標簽中寫樣式
-id選擇器 (不推薦少使用)
#i1{
background-color 背景色
height 高度
}
<標簽 id="i1"></標簽>
-class選擇器
.名稱{
style
}
<標簽 class=‘名稱‘></標簽>
-標簽選擇器
div{
style
}
所有div都用此style
-層級選擇器(空格隔開))
div .c1 .c2{
style
}
僅在div下.c1下的.c2才使用
-組合選擇器(逗號)
div,.c1,.c2{
style
}
-屬性選擇器
對選擇後的標簽再通過屬性進行刪選
.c1[id="1"]{
style
}
=======註意:若有重復則調用最近的style==========
3).css樣式可寫在單獨文件中(此處卸載Xxx.css)用以下方法調用
<link rel="stylesheet" href="Xxx.css"/>
4)邊框
-寬度 樣式 顏色
border:4px dotted red;
-選擇邊框作用邊
border-left
-其他
height,
width
text-align:center水平方向居中
line-height 根據標簽高度居中
color 字體顏色
font-size 字體大小
font-weight 字體加粗
5)float 重點
使標簽浮起來,塊級標簽將不占一行可並列
當外界標簽容不下內部時 可讓外部增大到正好容納
<div style="clear:both;"></div>
6)display
display:none; 標簽消失
display:inline; 標簽設為行內
display:block; 標簽設為塊狀
display:inline-block;
具有inline,默認占自己本身長度
具有block,可以設置高度、寬度、padding、margin
****
行內標簽:無法設置高度、寬度、padding、margin
塊級標簽:高度、寬度、padding、margin
7) padding margin(0,auto)
邊距
margin: 外邊距 增加後 標簽上邊與父框上邊框增加距離
padding: 內邊距 增加後 標簽上邊與下邊框增加距離
Html/CSS 初步介紹html和css部分重要標簽