1. html入門(mén)
<!-- 聲明文檔的類(lèi)型 標(biāo)記該文檔為HTML5的文件 -->
<!DOCTYPE html>
<!-- 頁(yè)面的根節(jié)點(diǎn) -->
<!-- html中的標(biāo)簽都是閉合標(biāo)簽 閉合標(biāo)簽包含 雙閉合和單閉合
雙閉合：<html></html>
單閉合：<meta />
-->
<html>
<head>
<!-- 聲明頭部的元信息 對(duì)我們文檔 規(guī)定編碼格式 -->
<meta charset="utf-8" />
<!-- 包含頭部的信息 是一個(gè)容器 包含 style title meta script link等 -->
</head>
<body>
<!-- 包含瀏覽器顯示的內(nèi)容標(biāo)簽 div p a img input等等 -->
這是我們的文檔結(jié)構(gòu)
</body>
</html>
2. head標(biāo)簽相關(guān)內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 文檔的標(biāo)題氯窍、編碼方式及URL等信息,這些信息大部分是用于提供索引,辯認(rèn)或其他方面的應(yīng)用（移動(dòng)端） -->
<!-- 文檔的標(biāo)題 -->
<title>drfung</title>
<!-- 常用兩個(gè)屬性
http-equiv:它用來(lái)向?yàn)g覽器傳達(dá)一些有用的信息奴璃，幫助瀏覽器正確地顯示網(wǎng)頁(yè)內(nèi)容，與之對(duì)應(yīng)的屬性值為content雁刷，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值沮峡。
-->
<!--指定文檔的內(nèi)容類(lèi)型和編碼類(lèi)型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- 5秒之后 重定向 到指定的網(wǎng)站 -->
<!-- <meta http-equiv="refresh" content="5;URL=https://www.baidu.com"/> -->
<!--告訴IE瀏覽器以最高級(jí)模式渲染當(dāng)前網(wǎng)頁(yè)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- 為了我們的SEO優(yōu)化 工作的時(shí)候下面這兩句 要寫(xiě)-->
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)">
<meta name="description" content="drfung">
<!-- 定義我們的網(wǎng)站圖標(biāo) -->
<link rel="icon" href="./fav.ico">
<!-- 引入外部樣式表 -->
<link rel="stylesheet" type="text/css" href="./index.css">
<!-- 定義內(nèi)部樣式表 -->
<style type="text/css">
</style>
<!-- 定義內(nèi)容腳本文件 -->
<script type="text/javascript">
</script>
<script src="./index.js"></script>
</head>
<body>
</body>
</html>
3. 常用標(biāo)簽
- 常用標(biāo)簽一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用標(biāo)簽一</title>
</head>
<body>
<div class="p1">
<p style="height: 2000px" id="p1">頂部</p>
</div>
<div>
<!--body相關(guān)標(biāo)簽-->
<!--heading: 標(biāo)題h1~h6,沒(méi)有h7-->
<!--塊級(jí)元素: 1.獨(dú)占一行; 2 可以設(shè)置寬高-->
<h1>世界杯時(shí)間</h1><h2>世界杯時(shí)間</h2>
<h3>世界杯時(shí)間</h3>
<h4>世界杯時(shí)間</h4>
<h5>世界杯時(shí)間</h5>
<h6>世界杯時(shí)間</h6>
<h7>世界杯時(shí)間</h7>
</div>
<div class="p1">
<p><strong>大英帝星</strong>凱恩<br>2018年<span>人工智能</span></p>
<hr>
<p>拉瑪西亞學(xué)院立志幫助有志向的年輕人通過(guò)努力學(xué)習(xí) ,<s>金融分析</s>,人工智能等互聯(lián)網(wǎng)最前沿技術(shù)</p>
</div>
<div class="anchor">
<!--a標(biāo)簽屬于行內(nèi)標(biāo)簽: 在同一行內(nèi)顯示 設(shè)置寬高 不起作用-->
<!--_self: 默認(rèn)值,在當(dāng)前標(biāo)簽打開(kāi)資源-->
<!--_blank: 在新的標(biāo)簽打開(kāi)資源-->
<a target="_blank" title="docker">Docker Hub</a>
<a href="./a.zip">本地文件</a>
<a href="mailto:recoba01@163.com" style="width:300px;height: 40px;">聯(lián)系我們</a>
<!--返回頁(yè)面頂部?jī)?nèi)容-->
<a href="#">跳轉(zhuǎn)到頂部</a>
<!--跳轉(zhuǎn)到指定id-->
<a href="#p1">跳轉(zhuǎn)到頂部段落標(biāo)簽</a>
<!--javascript:是在執(zhí)行a標(biāo)簽動(dòng)作時(shí),執(zhí)行一段javascript代碼;而javascript:;表示什么都不做;-->
<a href="javascript:alert();">alert</a>
<a href="javascript:;">nothing</a>
</div>
<div class="lists">
<!--無(wú)序列表-->
<ul type="none">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<!--有序列表-->
<ol style="list-style: none">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</div>
<div class="image">
<!--可以設(shè)置行高 可以在一行內(nèi)顯示 叫行內(nèi)塊標(biāo)簽-->
<img src="./homesmall.png" alt="python pics" style="width: 200px;height: 200px;">
<img src="./homesmall2.png" alt="linux pic" style="width: 200px;height: 200px;">
</div>
<div>
<!--小練習(xí): 顯示兩張圖片,獨(dú)占一行,鼠標(biāo)移上去為小手狀態(tài)-->
<p><a ><img src="./homesmall.png" alt="python pics"></a></p>
<p><a ><img src="./homesmall2.png" alt="linux pics"></a></p>
</div>
</body>
</html>
- 常用標(biāo)簽- table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格-->
<table border="1" cellpadding="0">
<thead>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">上午</td>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>英語(yǔ)</td>
<td>生物</td>
<td>化學(xué)</td>
</tr>
<tr>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>英語(yǔ)</td>
<td>生物</td>
<td>化學(xué)</td>
</tr>
<tr>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>英語(yǔ)</td>
<td>生物</td>
<td>化學(xué)</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>英語(yǔ)</td>
<td>生物</td>
<td>化學(xué)</td>
</tr>
<tr>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>英語(yǔ)</td>
<td>生物</td>
<td>化學(xué)</td>
</tr>
<tr>
<td colspan="6">課程表</td>
</tr>
</tbody>
</table>
</body>
</html>
- 常用標(biāo)簽-表單提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單控件</title>
</head>
<body>
<!--form表單是一個(gè)塊級(jí)標(biāo)簽-->
<form action="https://www.baidu.com">
<!--label標(biāo)簽是行內(nèi)標(biāo)簽 input是行內(nèi)元素-->
<p>
<label for="user">用戶(hù)名:</label>
<input type="text" name="username" id="user" placeholder="請(qǐng)輸入用戶(hù)名:">
</p>
<p>
<label for="password">密碼:</label>
<input type="text" name="password" id="password" placeholder="請(qǐng)輸入密碼:">
</p>
<!--單選框 checked會(huì)被默認(rèn)選中 產(chǎn)生互斥效果name要相同-->
<p>
用戶(hù)性別：
<input type="radio" name="sex" value="男" checked="">男
<input type="radio" name="sex" value="女">女
</p>
<!--復(fù)選框-->
<p>
用戶(hù)愛(ài)好:
<input type="checkbox" name="fav" value="eat" checked="check">eat
<input type="checkbox" name="fav" value="drink">drink
<input type="checkbox" name="fav" value="play">play
<input type="checkbox" name="fav" value="happy">happy
</p>
<!--上傳文件-->
<p>
<input type="file" name="textFile">
</p>
<!--文本域-->
<p>
自我介紹:
<textarea name="txt" id="" cols="30" rows="10" placeholder="welcome young men!"></textarea>
</p>
<!--下拉列表-->
<select name="sel" size="2" multiple="">
<option value="sz" selected>深圳</option>
<option value="bj">北京</option>
<option value="sh">沙河</option>
</select>
<p>
<!--顯示普通的按鈕-->
<input type="button" name="btn" value="提交" disabled="disabled">
<!--重置按鈕-->
<input type="reset" name="">
<!--提交form表單使用 type=submit按鈕-->
<input type="submit" name="btn" value="submit">
</p>
</form>
<button type="button">按鈕</button>
</body>
</html>
4. 標(biāo)簽分類(lèi)
- 塊級(jí)元素: div p h1~h6 ol ul table from li
- 獨(dú)占一行
- 可以設(shè)置寬高,如果設(shè)置了寬度和高度,就是當(dāng)前的寬高,如果寬度和高度都沒(méi)有設(shè)置,寬度就是父盒子的寬度,高度根據(jù)內(nèi)容填充
- 行內(nèi)元素: 在一行內(nèi)顯示,不能設(shè)置寬度和高度,寬度和高度根據(jù)內(nèi)容填充.
- 行內(nèi)塊:
- 在一行內(nèi)顯示
- 可設(shè)置高
標(biāo)簽嵌套規(guī)則:
塊元素可以包含內(nèi)聯(lián)元素或某些塊元素,但內(nèi)聯(lián)元素卻不能包含塊元素, 只能包含其它的內(nèi)聯(lián)元素
有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)嵌元素钧唐，不能再包含塊級(jí)元素征候，這幾個(gè)特殊的標(biāo)簽是h1~h6 p
