HTML
目錄
一、初識HTML
1. 什么是HTML
超文本標記語言
3. 優勢
所有瀏覽器都支持，提供統一標准
4. W3C標准
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 標簽欄 -->
<title>第一個網站</title>
</head>
<!--網頁主體-->
<body>
我的第一個html
</body>
</html>
二、網頁基本信息
<!--我們要使用的規范-->
<!DOCTYPE html>
<html lang="en">
<!--head代表網頁頭部-->
<head>
<!-- 描述字符集編碼 -->
<!-- meta用來描述網站的一些信息 -->
<meta charset="UTF-8">
<meta name="keywords" content="xiaowei9s">
<!-- 標簽欄 -->
<title>第一個網站</title>
</head>
<!--網頁主體-->
<body>
我的第一個html
</body>
</html>
三、網頁基本標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網頁基本標簽</title>
</head>
<body>
<!--標題標簽-->
<h1>一級標簽</h1>
<h2>二級標簽</h2>
<h3>三級標簽</h3>
<h4>四級標簽</h4>
<h5>五級標簽</h5>
<h6>六級標簽</h6>
<!--段落標簽-->
<p>第一段 第一句</p>
<p>第二段 第三句</p>
<p>第三段 第四句</p>
<p>第五段 第六句</p>
<!--換行標簽-->
第一段 第一句 <br>
第二段 第三句 <br>
第三段 第四句 <br>
第五段 第六句 <br>
<!--粗體、斜體-->
粗體：<strong>粗體</strong>
斜體：<em>斜體</em>
<!--特殊符號-->
空 格
空 格
<!--不熟悉的版權符號直接百度或者&加字母自動提示-->
</body>
</html>
四、圖像標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片標簽</title>
</head>
<body>
<!--
src:圖片路徑
相對地址（推薦使用） 絕對地址
../ :返回相對於自己上一級的目錄
-->
<img src="../resources/image/a.png" alt="圖像標簽">
</body>
</html>
五、超鏈接標簽及應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈接標簽</title>
</head>
<!--a標簽
href：鏈接url，跳轉到的地方
target :
_self:在當前頁打開
_blank:在新得頁面打開
錨鏈接：需要一個錨和一個鏈接
-->
<body>
<!--錨-->
<p name="top">頂部</p>
<a href="第一個html.html" target="_blank">a</a>
<a href="https://www.baidu.com">a</a>
<a href="https://www.baidu.com">
<img src="../resources/image/a.png" alt="">
</a>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<!--定位到錨在的地方-->
<a href="#top">回到頂部</a>
<!--功能性鏈接-->
<a href="mailto:244097861@qq.com">點擊聯系</a>
<!--qq鏈接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="啊是大" title="啊是大"/>
</a>
</body>
</html>
六、塊元素和行內元素
1. 塊元素
無論內容多少，改元素獨占一行
p、 h1~h6、div...
2. 行內元素
內容撐開寬度左右都是行內元素的可以排在一行
em、strong、a
七、列表標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>第一個</li>
<li>第二個</li>
<li>第三個</li>
</ol>
<!--無序列表-->
<ul>
<li>第*個</li>
<li>第*個</li>
<li>第*個</li>
</ul>
<!--自定義列表
dl：容器
dt：標題
dd：列表內容
-->
<dl>
<dt>學科</dt>
<dd>語文</dd>
<dd>數學</dd>
<dd>英語</dd>
<dd>理綜</dd>
<dt>層次</dt>
<dd>普通</dd>
<dd>良好</dd>
<dd>優秀</dd>
<dd>天才</dd>
</dl>
</body>
</html>
八、表格標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td
border 邊框
跨行 rowspan=""
跨列 colspan=""
-->
<table border="1px">
<tr>
<td colspan="2">單元格</td>
<td>單元格</td>
<td rowspan="2">單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>
</body>
</html>
九、媒體元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素</title>
</head>
<body>
<!--音頻和視頻
controls 控制條
autoplay 自動播放
-->
<video src="../resources/video/1.mp4" controls autoplay></video>
<audio src="../resources/music/1.mp3" controls autoplay></audio>
</body>
</html>
十、頁面結構分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面結構分析</title>
</head>
<body>
<header><h2>網頁頭部</h2></header>
<section><h2>網頁主體/h2></section>
<footer><h2>網頁腳部</h2></footer>
</body>
</html>
十一、iframe內聯框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe內聯框架</title>
</head>
<body>
<!--
iframe
scr：頁面地址
name：頁面標識
width：寬
height：高
-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
</body>
</html>
十二、初始表單post提交和get提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交</title>
</head>
<body>
<!--form
action:表單處理提交的地址，可以是網站，也可以是一個請求處理的地址
method：
get：在url中提交的信息，不安全，高效
post：安全，可以傳輸大文件
-->
<form method="get" action="第一個html.html">
<!-- 文本輸入框-->
<p>名字 <input type="text" name="username" value="請輸入名字" maxlength="8" size="30"></p>
<!-- 密碼框-->
<p>密碼 <input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
十三、文本框和單選框
十四、按鈕和多選框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按鈕和多選</title>
</head>
<body>
<form action="第一個html.html">
<!--多選框 input type="checkbox"-->
<input type="checkbox" name="hobby" value="1">第一個選項
<input type="checkbox" name="hobby" value="2">第二個選項
<input type="checkbox" name="hobby" value="3">第三個選項
<input type="checkbox" name="hobby" value="4">第四個選項
<!--按鈕
普通按鈕 type="button"
提交按鈕 type="submit"
重置按鈕 type="reset" 重置表單內的內容
圖片按鈕 type="image"
-->
<p><input type="button" value="這是一個普通按鈕"></p>
<p><input type="submit" ></p>
<p><input type="reset" ></p>
<p><input type="image" src="../resources/image/a.png"></p>
</form>
</body>
</html>
十五、下拉框文本域和文件域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉框、文本域、文件域</title>
</head>
<body>
<form action="Demo02.html">
<!-- 下拉框-->
<p>
<select name="food">
<option value="1">蘋果</option>
<option value="2" selected>肉</option>
<option value="3">米</option>
<option value="4">巧克力</option>
</select>
</p>
<!-- 文本域
cols 列數
rows 行數
maxlength 最大字符數量
-->
<p>
<textarea name="content" cols="50" rows="10" maxlength="30">文本內容</textarea>
</p>
<!-- 文件域-->
<p>
<input type="file" name="file">
<input type="button" value="上傳">
</p>
</form>
</body>
</html>
十六、搜索框滑塊和簡單驗證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索滑塊和簡單驗證</title>
</head>
<body>
<form action="Demo02">
<!-- 郵件驗證-->
<p>郵件：<input type="email" name="email" ></p>
<!-- url驗證-->
<p>url：<input type="url" name="url" ></p>
<!-- 數字-->
<p>數字：<input type="number" name="number" max="100" min="0" step="10"></p>
<!-- 滑塊-->
<p><input type="range" name="voice" value="15" step="5"></p>
<!-- 搜索框-->
<p><input type="search" name="search"></p>
<p><input type="submit"></p>
</form>
</body>
</html>
十七、表單的應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單應用</title>
</head>
<body>
<!-- readonly：只讀
hidden：隱藏
disable：禁用
不需要確定布爾值，只需要在標簽內聲明即可使用
-->
<!--增強鼠標可用性-->
<p>
<!-- for鎖定的是id，而不是name-->
<label name="lbe1" for="mark">點試試</label>
<input name="mark" id="mark" type="text">
</p>
</body>
</html>
十八、表單初級驗證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單初級應用</title>
</head>
<body>
<form action="Demo02.html">
<!-- 為什么要表單驗證
減輕服務器負擔
安全
placeholder：提示框
require：不能為空
pattern：正則表達式，需要用就直接查
-->
<p><input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" placeholder="請輸入郵箱" required></p>
<p><input type="submit"></p>
</form>
</body>
</html>
知識來源：kuangstudy.com