Html邊學邊記——初級入門
阿新 • • 發佈：2021-09-29
1 html的基本結構
頁身和頁頭(! + tab快捷鍵)
頁頭:header標籤
頁身:body標籤
<!-- win: ctrl + / -->
<!-- mac: command + / -->
<!-- ! + tab -->
<!-- 文件宣告: html檔案 html5版本 -->
<!DOCTYPE html>
<!-- 告訴瀏覽器 html程式碼從這裡開始 lang="en"宣告英文-->
<html lang="en">
<!-- 頁頭 屬性的設定 引入css js 相關的資源-->
<head>
<meta charset="UTF-8">
<!-- 移動端自適應 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 網頁標題 -->
<title>老王</title>
</head>
<!-- 頁身 -->
<body>
123
</body>
<!-- 告訴瀏覽器 html程式碼從這裡結束 -->
</html>
2 html常見標籤
雙標籤:
div: 容器標籤
h1~6: 字型標籤
p: 段落標籤
單標籤:
br: 換行標籤
hr:橫線
a:連結標籤
img:圖片標籤
<!-- 1 雙標籤 -->
<!-- 字型標籤 大小是從大到小的 -->
<h1>itcast</h1>
<h2>itcast</h2>
<h3>itcast</h3>
<h4>itcast</h4>
<h5>itcast</h5>
<h6>itcast</h6>
<!-- 段落標籤 -->
<p>111</p>
<p>111</p>
<!-- 2 單標籤 -->
<!-- 換行標籤 -->
itcast
<br>
itcast
<!-- 橫線標籤 -->
<hr>
<!-- 3 帶有屬性的標籤 -->
<!-- 圖片標籤 -->
<img src="./images/002.jpg" alt="百度">
<!-- 連結標籤 寫連結的時候必須寫上http -->
<br>
<a href="./images/百度一下，你就知道.htm">baidu</a>
<!-- <a href="./images/百度一下，你就知道.htm">百度</a> -->
<!-- 所有的雙標籤都可以巢狀 -->
<a href="./images/百度一下，你就知道.htm">
<img src="./images/google.png" alt="123">
</a>
注意：標籤不區分大小寫，但是推薦使用小寫。
3 表格標籤
table:表格標籤
th:表格頭部
td:表格資料
tr:表格的行
<!--
table : 表格標籤
(屬性)
border="1px" style="border-collapse:collapse"
tr : 表格行標籤
th : 表格頭標籤
td : 表格資料標籤
-->
<table border="1px" style="border-collapse: collapse;">
<!-- 第一行 -->
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<!-- 第二行 -->
<tr>
<td>老王</td>
<td>18</td>
<td>男</td>
</tr>
<!-- 第三行 -->
<tr>
<td>老李</td>
<td>20</td>
<td>男</td>
</tr>
</table> 4 列表標籤
ol:有序列表標籤
ul:無序列表標籤
li:列表標籤
<!--
有序列表標籤(ol標籤)
無序列表標籤(ul標籤)
列表(li標籤)
-->
<form action="">
</form>
<!-- 有序列表標籤(ol標籤) -->
<ol>
<li>python</li>
<li>java</li>
<li>c++</li>
</ol>
<!-- 無序列表標籤(ul標籤) -->
<ul>
<li>python</li>
<li>java</li>
<li>c++</li>
</ul>
5 表單標籤
form:表單標籤
屬性:
action屬性 設定表單資料提交地址
method屬性 設定表單提交的方式，一般有“GET”方式和“POST”方式, 不區分大小寫
<!--
form : 表單標籤
label: 標記標籤(通常和input標籤一起使用)
input: 輸入標籤
(type屬性)
text - 文字輸入框
password - 密碼輸入框
radio - 單選框
checkbox - 複選框
file - 上傳檔案
submit - 提交按鈕
reset - 重置按鈕
(value屬性)
設定value值,用於網路間傳輸
(name屬性)
設定key值,用於網路間傳輸
textarea: 多行文字框
select: 下拉框
option: 選項框
-->
<form action="">
<p> <label>姓名:</label> <input type="text"> </p>
<p> <label>密碼:</label> <input type="password"> </p>
<p> <label>性別:</label> <input type="radio"> 男 <input type="radio"> 女 </p>
<p> <label>愛好:</label> <input type="checkbox"> 唱歌 <input type="checkbox"> 跑步 <input type="checkbox"> 游泳 </p>
<p> <label>照片:</label> <input type="file"> </p>
<p> <label>個人描述:</label> <textarea></textarea> </p>
<p> <label>籍貫:</label> <select> <option value="">北京</option> <option value="">上海</option> <option value="">深圳</option> <option value="">廣州</option> </select> </p>
<p> <input type="submit" value="提交"> <input type="reset" value="重置"> </p>
</form>
6 css
匯入方式(html的頭部中匯入)
1 外鏈式(最常用的)
<link rel="stylesheet" href="./css/main.css">
2 內嵌式
<!-- 2 內嵌式 -->
<style>
/* 在style裡寫css程式碼 */
/* 作用於整個頁面的所有的div標籤的 */
/* div{
background: chartreuse;
} */
</style>
3 行內式(基本不用)
<div style="height: 50px; width: 50px; aqua;">itcast</div>
7 選擇器
1 標籤選擇器
標籤{
屬性:值
}
根據標籤來選擇標籤，以標籤開頭，此種選擇器影響範圍大，一般用來做一些通用設定
2 類選擇器
需要給標籤新增一個 class 屬性,一個標籤可以使用多個類,一個類選擇器
可以作用於多個標籤
.類名 {
屬性: 值;
}
3 層級選擇器
選擇器1和選擇器2可以是任意的一種選擇器
選擇器1 選擇器2 {
屬性=值;
}
4 id 選擇器
在一個頁面中,id 是唯一的,id 選擇器只能作用域一個標籤,不推薦使用
#id值 {
屬性:值;
}
5 組選擇器
將多個選擇器放在一塊進行設定
選擇器1, 選擇器2, 選擇器3, ... {
}
6 偽類選擇器
主要用在使用者和網站的互動上, 比如說: 滑鼠懸停,改變背景色
選擇器:動作{
屬性:值;
}