網頁前端基礎知識---不定時更新
阿新 • • 發佈：2021-01-05
HTML基礎
W3C標準包括
- 結構化標準語言（HTML、XML）
- 表現標準語言（CSS）
- 行為標準（DOM、ECMAScript）
註釋
<!--註釋內容-->
常用標籤
<!DOCTPYE>
<!DOCTYPE html> <!--告訴瀏覽器使用什麼規範-->
標題標籤
<h1>一級標籤</h1>
<h2>二級標籤</h2>
段落標籤
<p>
這是一個段落標籤
</p>
換行標籤
換行<br/>
或者這個<br 水平線標籤
<hr>
字型樣式標籤
- 粗體
<strong></strong>
- 斜體
<em></em>
特殊符號
- 空格
- 大於號
>
- 小於號
<
- 版權符號
©
影象標籤
<img src="地址" alt="圖片名字" title="懸停文字" width="x" height="y">
超連結
<a href="地址" target常用值
<a name="top">top</a>
<a href="#top"></a><!--跳到top那裡-->
功能性連線
- 傳送郵件
<a href="mailto:郵箱地址"></a>
- QQ連結
到QQ官網看
列表
- 有序列表
<ol>
< - 無序列表
<ul>
<li></li>
<li></li>
</ul>
- 自定義列表
<dl>
<dt>列表名字</dt>
<dd>列表內容</dd>
<dd></dd>
</dl>
表格
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td colspan="2">跨兩列</td>
</tr>
<tr>
<td rowspan="2">跨兩列</td>
</tr>
</table>
視訊和音訊
- 視訊
<vedio src="" controls atuoplay></vedio><!--自動播放-->
- 音訊
<audio src="" controls></audio>
頁面結構
| 元素名 | 描述 |
|---|---|
| header | 標題頭部區域 |
| footer | 腳部區域 |
| article | 獨立的文章內容 |
| aside | 相關內容或應用 |
| nav | 導航類輔助內容 |
iframe內聯框架
<iframe scr="地址" frameborder="0" width="" height="">
</iframe>
<!--或者用name，讓a標籤設定tagert在iframe中開啟-->
<iframe name = "tgk"></iframe>
<a href="http://www.tgkzxy.cn" target="tgk">點選跳轉</a>
表單
<!--
action：表單提交的位置，可以是網站，可以是請求處理地址
method：post，get，提交方式
get：可以在url看見提交資訊，不安全
post：安全一點點，可以在響應頭看見，也不是特別安全-->
<form action="get">
<p>使用者名稱<input type="text" name="username"></p>
<p>密碼<input type="password" name="pwd"></p>
<p>
<input type="submit" name="" id="">
<input type="reset" name="" id="">
</p>
</form>
<!--文字輸入框：input-->
表單元素
| 屬性 | 說明 |
|---|---|
| type | text、password、checkbox、radio、submit、reset、file |
| name | |
| value | 初始值 |
| size | 文字框長度 |
| maxlength | 最大字元數 |
| checked | typy為radio和checkbox，指定按鈕是否選中 |
- 文字框
<p>使用者名稱<input type="text" name="username"></p>
- 文字域
textarea
<p>
文字域：
<textarea cols="10" rows="3"></textarea>
</p>
- 單選框
name設定同一個組
<p>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</p>
- 多選框
checked預設選中
<p>愛好：
<input type="checkbox" name="hobby">玩
<input type="checkbox" name="hobby">吃
<input type="checkbox" name="hobby">喝
</p>
- 按鈕
value是按鈕字元
type為image可以讓圖片變為按鈕
<p>
<input type="button" name="btn" value="點選這個按鈕">
<input type="image" src="圖片地址">
</p>
- 下拉框
selected 預設選項
<p>下拉框：
<select name="列表名稱">
<option value="中國">中國</option>
<option value="瑞士">瑞士</option>
<option value="美國" selected>美國</option>
</select>
</p>
- 檔案域
<p>檔案域：
<input type="file" name="file">
<input type="button" name="上傳" value="上傳">
</p>
- 滑塊
<p><input type="range" name=""max="100" min="0"></p>
- 搜尋
<p><input type="search" name="" ></p>
提交時自動驗證的表單元素
<p>
<input type="email" name="email">
</p>
- url
- number
表單的應用
- readonly 只讀
- disabled 禁用
- hidden 隱藏
標籤
點選標籤自動鎖定到想要的位置
<p>
<label for="mark">點我試試</label>
<input type="text" id="mark">
</p>
表單的初級驗證
常用方式：
-
**placeholder ** 提示描述
-
required 不能為空
-
pattern 正則表示式
CSS
如何使用
- 內部樣式：寫在HTML的head中
<style>
h1{
color: aquamarine;
}
</style>
- 外部樣式：寫在css檔案中(建議使用這種,內容樣式分離，可以實現複用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>搞顏色</h1>
</body>
</html>
h1{
color: aquamarine;
}
- 行內樣式
<h2 style="color: antiquewhite"></h2>
- 優先順序
行內樣式>內部樣式>外部樣式
選擇器
基本選擇器
-
標籤選擇器 標籤名{}
<style> h1{ color: blueviolet; } </style> -
類選擇器 class .class名{}
<head> <meta charset="UTF-8"> <title>Title</title> <style> .tgk{ color: chocolate; } .zxy{ color: blue; } </style> </head> <body> <h1 class="tgk">搞顏色</h1> <h2 class="tgk">haha</h2> <p class="zxy">哈哈哈</p> </body> -
id 選擇器 #id名{}
<head> <meta charset="UTF-8"> <title>Title</title> <style> #pink{ color: pink; } </style> </head> <body> <h2 id="pink">haha</h2> </body>
**優先順序：**id>class>標籤
層次選擇器
-
後代選擇器 空格
所有後代都有
<style>
li p {
color: brown;
}
</style>
- 子選擇器 小於號
只有兒子有
<style>
li p {
color: brown;
}
</style>
- 相鄰第弟選擇器 加號
元素下面的一個第弟
<style>
#b333+ p {
background-color: pink;
}
</style>
- 通用弟弟選擇器 波浪號
元素下面所有弟弟
<style>
#b333~ p {
background-color: pink;
}
</style>