HTML經常使用標籤及CSS樣式選擇器
HTML經常使用標籤及CSS樣式選擇器
html部分
<!DOCTYPE html>
<html>
<head>
<!--頭標記 寫描述性的信息(css\javaScript)-->
<!--引入外部的樣式文件
rel:relationship的英文縮寫·REL屬性用於定義連接的文件和HTML文檔之間的關係
-->
<link rel="stylesheet" type="text/css" href="css/mycss.css" />
<!--內部樣式：樣式是用來描述頁面的，屬於描述性的信息，應寫在head中的style標籤內-->
<style>
h1{
color: red;
}
</style>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--體標記 寫頁面顯示的信息-->
<!--a超連接或錨（anchor）， href（Hypertext Reference）:能夠指定應用內或者是應用外的任意地址 -->
<a href="http://www.baidu.com">我是超連接，連接地址是百度</a>
<!-- 表單做用: 收集用戶的信息，提交到後臺服務器 -->
<form action="http://www.baidu.com" method="get/post">
<!--提交到服務器的數據格式：name值=value值（如username=admin），服務器經過name值得到value值-->
<!--文本輸入框-->
用戶名稱：<input type="text" name="username" value="admin" />
<!--br換行-->
<br />
<!--密碼-->
用戶密碼：<input type="password" name="password" />
<br />
<!--單選框-->
<!--只用當name屬性值相同的時候，纔有單選的效果-->
用戶性別：男：<input type="radio" name="gender" value="男" />
女：<input type="radio" name="gender" value="女" />
<br />
<!--多選框-->
<!--name值要相同-->
用戶愛好：吃飯 <input type="checkbox" name="hobby" value="eat"/>
睡覺 <input type="checkbox" name="hobby" value="sleep"/>
打豆豆 <input type="checkbox" name="hobby" value="Beat beans "/>
<br />
<!--下拉列表-->
用戶地址：省份<select name="province">
<option value="山東省">山東省</option>
<option value="江蘇省">江蘇省</option>
<option value="北京市">北京市</option>
</select>
<br />
<!--提交按鈕-->
<input type="submit" value="提交"/>
</form>
<!-- h1~h6:標題標籤（header）-->
<h1 align="center"> 員工信息列表 </h1>
<!--表格-->
<!--cellpadding：單元格子的內容與單元格子四邊邊界之間空白距離
cellspacing：table表格中的單元格子之間的空白距離
tr：表格行
td：表格數據單元列
th：表格標題列,自帶居中並加粗的效果
-->
<table align="center" border="1px" cellspacing="0" cellpadding="10px" width="60%">
<tr>
<th>員工ID</th>
<th>員工名字</th>
<th>員工性別</th>
<th>員工描述</th>
</tr>
<tr>
<td>1</td>
<td>張三</td>
<td>男</td>
<td>good man</td>
</tr>
<tr>
<td>2</td>
<td>小紅</td>
<td>女</td>
<td>good woman</td>
</tr>
</table>
<!--div:網頁佈局標籤（divide）
做用：選中某一區域，添加樣式
-->
<div >
這是div
</div>
<div id = "d1">
這是div1
</div>
<div class = "d2">
這是div2
</div>
<div class = "d2">
這是div3
</div>
</body>
</html>
css部分
/*元素選擇器*/
div{
width: 50px;
height: 50px;
border: 1px solid red;
background: #FF0000;
}
/*id選擇器
id不可重複，惟一*/
#d1{
background:aqua
}
/*類選擇器
可重複*/
.d2{
background: yellow;
}
相關文章
- 1. CSS選擇器詳解及經常使用樣式表標記標籤屬性
- 2. HTML經常使用標籤及css經常使用屬性
- 3. HTML經常使用標記、CSS三種選擇器
- 4. Css樣式技巧：經常使用的選擇器和通用選擇器
- 5. LV1 之------DAY1 html與css基礎&常用標籤&選擇器
- 6. WEB前端-CSS-選擇器&經常使用樣式/屬性
- 7. CSS標籤選擇器
- 8. CSS 標籤選擇器
- 9. H5 css標籤選擇器
- 10. html添加css——樣式選擇器
- 更多相關文章...
- • 使用 CSS 顯示 XML - XML 教程
- • Docker 容器使用 - Docker教程
- • 常用的分佈式事務解決方案
- • Composer 安裝與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
