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部分重要標簽