04HTML和CSS
阿新 • • 發佈：2020-08-07
HTML
框架
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
文字
- 註釋
<!-- 註釋 --> - 換行
<br> - 標題
<h1></h1> - 段落
<p></p> - 分割線
<hr>，屬性：color width size align - 加粗
<b></b> - 斜體
<i></i> - 字型
<font></font>，屬性：color size face - 居中
<center></center>
注意，HTML5不建議使用標籤屬性，建議使用css設定。屬性值單雙引號都可以。
屬性color的表示：
- 英文：red green blue
rgb(0, 0, 255)- 十六進位制
#0000FF
圖片
標籤：<img src="./image/test.jpg">
屬性：
- align width height
- alt="xxx", 圖片載入失敗，提示資訊
列表
標籤：
- 有序
<ol> <li></li> </ol> - 無序
<ul> <li></li> </ul>
列表屬性：
- 有序type：1 A a I i
- 無序type: disc square circle
超連結
標籤：<a href="http://www.baidu.com">百度</a>
屬性：
- target開啟位置：_self當前標籤開啟 _blank空白標籤開啟
表格
<table border="1" cellspacing="0"> <caption>資訊表</caption> <tr> <th>ID</th> <th>姓名</th> <th>年齡</th> </tr> <tr> <td>1</td> <td>張三</td> <td>28</td> </tr> </table>
表格屬性：width border cellpadding cellspacing bgcolor align
HTML5新增（沒有格式）：
<thead>表格頭<tbody>表格體<tfoot>表格尾
行屬性：bgcolor align
單元格屬性：colspan合併列 rowspan合併行
表單
method有get和post
get顯示密碼，引數長度受限，封裝在請求行中。
post不會顯示，引數長度不限制，會封裝在請求體內。
標籤：
- input：通過type屬性改變樣式
- select: 下拉列表
- textarea: 文字域
<label for="name"></label>標籤中的for屬性需要後面的有一個id屬性，說明標籤對應的選項。
<form action="#" method="get">
<label for="username">暱稱：</label>
<input type="text" name="username" placeholder="請輸入使用者名稱" id="username"> <br>
<label for="password">密碼：</label>
<input type="password" name="password" id="password"> <br>
性別：<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女 <br>
愛好：<input type="checkbox" name="hobby" value="read"> 讀書
<input type="checkbox" name="hobby" value="java" checked> Java <br>
圖片：<input type="file" name="file"> <br>
生日：<input type="date" name="birth"> <br>
<!--下拉列表-->
地區：
<select name="city">
<option selected> --請選擇--</option>
<option value="1">北京</option>
<option value="2">南京</option>
</select> <br>
備註：<br>
<textarea cols="20" rows="3"> </textarea> <br>
<!--隱藏域--> <input type="hidden" name="id" value="aaa">
<!--一般提交按鈕--> <input type="submit" value="提交"> <br>
<!--圖片提交按鈕--> <input type="image" src="image/icon_1.jpg"> <br>
</form>
塊
標籤：
<dev></dev>佔一行，塊級別<span></span>行內標籤
語義化標籤
html5中為了提高程式的可讀性，提供了一些標籤，但是這些標籤都沒有格式。
頁首<header></header>
頁尾<footer></footer>
CSS
CSS使用方式
Cascading style sheets層疊樣式表
使用方式：
- 內聯樣式：定義在標籤內
<div style="color:red;"></div> - 內部樣式：定義在head內，在
<style> div{...} </style>定義 - 外部樣式：用
<link rel="stylesheet" href="css/a.css">引用
CSS定義
語法：
- css定義格式：
選擇器{屬性名:屬性值;...} - 選擇器：基本選擇器，擴充套件選擇器
- 屬性：有許多，下一章講
基本選擇器：
- 元素選擇器：等級最低
- 類選擇器：等級中間，設定具有同樣屬性的內容，可以共用。
- id選擇器：等級最高，設定特定標籤的內容，單獨使用。
<!DOCTYPE html>
<head>
<title>Test</title>
<style>
#div1{color: red;}
div{color: green;}
.cls1{color: blue;}
</style>
</head>
<body>
<div id="div1">Hello</div>
<div>Word</div>
<div class="cls1">haha</div>
</body>
</html>
擴充套件選擇器：
- 選擇所有元素：
*{}； - 並集選擇器：
選擇器1,選擇器2{}； - 子選擇器：
選擇器1 選擇器2{}； - 父選擇器：
選擇器1>選擇器2{}； - 屬性選擇器：
元素名稱[屬性名="屬性值"]{}； - 偽類選擇器：
元素:狀態{}， 比如a:link{color:red;}；
CSS屬性
文字
font-size: 20px;color: red;text-align: left;line-height: 15px;
背景: background: url("image/logo.jpg") no-repeat center;
邊框: border: 1px solid green;
尺寸: width: 200px; height: 100px;
盒子模型
- 外邊距
margin: 50px 50px; - 內邊距
padding: 50px 50px;預設情況下，內邊距會影響盒子大小 - float：
float:left;