BODY內的標簽(1)
body標簽
- 圖標 (空格) >(>) <(<)
- P 標簽用做段落
- br 換行標簽
=======小總結=======
所有標簽分為
塊級標簽:div(白板)H系列(加大加精),p標簽(段落和段落之間有間距)
行內標簽:span標簽(白板)
標簽之間可以嵌套
標簽存在的意義,定位操作,js/css操作
ps:chorme審查元素的使用
- 定位
- 查看樣式
- input系列
input type="text" - name屬性 - value="默認值"
input type="password" - name屬性 - value="默認值"
input type="submit" - value="提交" 提交按鈕 表單
input type="button" - value="登陸" 按鈕
input type="radio" -單選框 value,name 屬性(name相同則互斥) checked="checked"-默認值
input type="checkbox" -復選框 value,name (批量獲取數據) checked="checked"-默認值
input type="file" - 依賴form表單的一個屬性 enctype="multipart/form-data"
input type="reset" - 重置
<textarea>默認值</textarea> - name屬性 多行文本輸入
select - name,option內的value 提交數據,size默認顯示數量,multiple多選
optgroup 分組顯示 lable分組名稱無法選中
- a 標簽
- 跳轉
- 錨 href="#某個id" id唯一不能重復
- 列表
- ul
- li
- ot
- li
- dl
- dt
- dd
- img
- src 圖片地址
- title 提示
- alt
- 表格
- table
- thead
- tr
- th
- tbody
- tr
- td
colspan="" 列合並
rowspan="" 行合並
- label
用與獲取光標
<label for="username">用戶名：</label>
<input id="username" type="text" name="user" />
- fieldset
- legend
- css
- 在標簽內設置style屬性
height:50px;
background-color: #09ff9c;
- 編寫css樣式
1. 標簽的style屬性中寫
2. 寫在head裏面,style標簽中寫樣式
- id選擇區
#i1{
height:50px;
background-color: #09ff9c;
}
- class 選擇器
.名稱{
}
<標簽 class="名稱"></標簽>
- 標簽選擇器
div{
...........
}
所有dvi標簽都設置成此樣式
- 註釋
/* */
- 邊框
- border
style="border: 1px solid red; 1像素,實體邊框線,邊框顏色
border-top,border-left,borter-right,border-bottom 四邊
- height
- width 可以設置成像素,也可以設置成百分比
- text-aglin 水平方向的對齊
- line-height 垂直方向的對齊
- 字體
- font-size 字體大小 單位像素
- font-weight 字體加粗 bold bolder
- float
讓標簽浪起來,塊級標簽也查可以堆疊
body標簽裏面的 style:margin:0 auto; div可以占滿兩邊
子標簽float後,把父標簽的邊框檔住,可以加個clear:both;讓你標簽的邊框顯示出來
<div style="clear:both;"></div>
- display
- display:none--讓標簽消失
- display:inline 塊級標簽轉換成行內標簽
- display:block 行內標簽轉換成塊級標簽
- display:inlin-block
- 行內標簽無法設置高度,寬度,padding,margin
- 塊級標簽可以設置高度,寬度,padding,margin
- inlin-block 讓行內標簽可以設置 高度,寬度,padding,margin
- padding margin
- 邊距
- margin 外邊距
- margin:0 auto 子標簽居中
- padding 內邊距
BODY內的標簽(1)