一.互聯網的三大基石:
1.HTML（超文本標記語言）
2.HTTP（超文本傳輸協議）
3.URL（統一資源定位符）
二.入門基本的標籤
<!DOCTYPE html>
<!--HTML中的文檔約束（DTD）>
<html>
<head>
<!--head中會書寫一些瀏覽器中配置標籤-->
<!--告訴瀏覽器解析的編碼格式-->
<meta charset='utf-8'/>
<title>這是我的第一個網頁</title>
</head>
<body>
<!--body中寫呈現給用戶的信息-->
This is my first HTML
</body>
</html>
1.head中的標籤
<!--搜索引擎優化-->
<meta name="author" content="朱自清，張三"/>
<meta name="description" content="盼望着盼望着，春分的腳步近了"/>
<meta name="description" content="東風，盼望"/>
<!--自動刷新網頁（此處的5爲5秒後刷新網頁）-->
<meta http-equiv="refresh" content="5,https://www.baidu.com"/>
<!--禁止網頁緩存--->
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
2.body中常用的標籤
<!--標題標籤 h1——h6 自動的加粗加黑 會自動換行 align: 調整標籤的位置 （默認是left） -->
<h1>[美麗新時代]</h1>
<h1 align="right">[美麗新時代]</h1>
<!--分割線標籤 500px: 像素 color:顏色 align:位置（默認center） size:垂直方向的大小-->
<hr width="500px" color="red" align="right" size="20px"/>
<!--p段落標籤 br:換行  ；:空格 -->
<p> 新華網balabalabalabalabal <br/>
瑪雅balbalbalablablalbal</p>
3.body中常用的小標籤
<!--下劃線標籤-->
<u>北京</u>
<!--斜體標籤-->
<i>北京</i>
<!--加粗加黑標籤-->
<b>北京</b>
<!--刪除線標籤-->
<del>北京</del>
<!--上標標籤-->
2<sup>3</sup>
<!--下標標籤-->
log<sub>7</sub>
<!--字體變小標籤-->
<small>我們是孩子</small>
<!--字體放大-->
<big>北京</big>
<!--字體標籤 face：指定字體的風格-->
<font color="red" size="25px" face="宋體">北京大學
</font>
<!--列表標籤{[1]有序列表，[2]無序列表，[3]自定義列表}-->
作用：
【1】樹形菜單
【2】導航欄的佈局
<!--[1]有序列表-->
<ol type="I">
<li>javaSE</li>
<li>javaEE</li>
<li>javaME</li>
</ol>
<!--[2]無序列表-->
<ul type="square">
<li>javaSE</li>
<li>javaEE</li>
<li>javaME</li>
</ul>
<!--[3]自定義列表-->
<dl>
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
<dd>javaME</dd>
</dl>
<!--跑馬燈標籤 direction:滾動方向 scrollamount:滾動的數獨 -->
<marquee direction="right" scrollamount="40px">北京大學</marquee>
(2)超鏈接標籤的作用（不會自動換行）
【1】實現不同頁面之間的跳轉
href:指定跳轉到目標資源的位置
target：打開網頁的方式
【2】實現錨點功能
<!--跳轉到本地的資源位置 _blank:打開一個空白頁面進行加載-->
<a href="02body中常用小標籤.html" target="_blank">02小標籤測試</a>
<!--跳轉到網絡的位置-->
<a href="http://www.bjsxt.com">北京尚學堂</a>
錨點功能
<a href="#bottom" name="top">返回底部</a>
<a href="#top" name="bottom">返回頂部</a>
(3)圖片標籤
圖片標籤的注意
img (不會自動的換行)
src:引入圖片的位置{相對路徑、絕對路徑、網絡路徑 }
title：圖片的標題
原始 寬和高 (如果只指定一個屬性，則等比例的放大或縮小)
400px 260px
200px 130px
border:圖片的邊框
alt：圖片無法正常顯示的時候顯示的屬性
align: 圖片的位置 ，必須有參照物
<!--相對路徑-->
<img src="img/2.jpg" />
<!--絕對路徑-->
<img src="C:\\Users\\my\\Documents\\HBuilderProjects\\01HTML\\img\\1.jpg" />
<!--網絡路徑-->
<img src="https://www.baidu.com/img/bd_logo1.png" />
三.表格
(1)
table表格的自適應能力 (align=“center”)整個的表格整體居中
width=“300px” height=“300px”
cellpadding：內容和單元格的距離
cellspacing：單元格和單元格的距離
tr：行 :height
td/th：列 width
td:普通的列
th:標題列:自動的居中，加黑效果
colspan:列合併
rowspan：行合併
bgcolor：背景顏色
（快捷鍵：table>tr3>th3 :聲明3行3列的表格 ）
tr:是行 td:是列 下面的是2行3列的表格
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
四.表單標籤:
1.form表單
action：表單提交的位置
method（get/post）：表單提交的方式
Get方式 提交數據:
(1)參數會依附於url地址之後
(2)利用get方式提交數據，數據的長度有限制
(3)利用get方式提交數據，是不安全的
Post方式 提交數據:
(1)請求不會依附於地址，
(2)利用post處理參數不受限制
(3)post提交數據比較安全
<form action="https://www.baidu.com/s" method="get">
<!--普通文本框-->
<input type="text" name="wd"/>
<input type="submit" value="百度一下">
</form>
<form>
<!--普通文本框 value：文本框中值-->
賬號： <input type="text" name="zh" value="123" />
密碼： <input type="password" name="pwd" value="123"/>
<!--單選框 實現單選的效果必須指定同一個name屬性 value:是最後保存在數據庫裏的值 checked：默認的選擇-->
男：<input type="radio" name="sex" value="1" checked="checked"/>
女：<input type="radio" name="sex" value="0"/>
<!--多選框 默認選中單選框或者單選框中的值添加checked屬性-->
抽菸:<input type="checkbox" value="1" checked="checked">
喝酒:<input type="checkbox" />
燙頭:<input type="checkbox" /><br />
<!--多行文本框-->
個人介紹： <textarea rows="15" cols="20" value="">你好</textarea><br />
<!--文件選擇框 上傳文件的-->
<input type="file" name="file" /><br />
<!--隱藏框-->
<input type="hidden" name="sno" value="20180607" />
<!--下拉框 selected：默認的選擇-->
<select name="ch">
<option value="1">中國</option>
<option value="2" selected="selected">美國</option>
<option value="3">日本</option>
<option value="4">新加坡</option>
</select>
<!--提交按鈕-->
<input type="submit" value="提交" />
<!--清除按鈕,清空寫好的內容-->
<input type="reset" value="清除" />
<!--普通的按鈕 沒有提交數據的功能-->
<input type="button" value="提交" />
</form>
五.框架標籤
（1）iframe框架:相當於在網頁中嵌套了另外一種框架
<ul>
<li><a href="http://www.baidu.com" target="ifm">百度</a></li>
<li><a href="http://www.taobao.com" target="ifm">淘寶</a></li>
</ul>
<!--框架 width：寬度 height: 高度 src: 默認路徑-->
<iframe width="1000px" height="550px" name="ifm" src="http://www.baidu.com"></iframe>
（2）frameset ：（去除body屬性）
點擊左側的left.html中的百度，使用target=“rig”，表示在右側名爲rig的部分處打開顯示
使網頁結構固定了，不可以滑動: noresize=“noresize”
<frameset rows="150px,*,100px">
<!--頂部部分-->
<frame src="admin/top.html" noresize="noresize"/>
<!--中間的部分-->
<frameset cols="10%,*">
<!--左側部分-->
<frame src="admin/left.html"/>
<!--右側部分-->
<frame src="admin/right.html" name="rig"/>
</frameset>
<!--底部部分-->
<frame src="admin/bottom.html"/>
</frameset>
<!--<body>
</body>-->
六: div 標籤學習
div本身是沒有任何的含義
div：作用就是把網頁進行模塊化的劃分
<!--頭部模塊-->
<div class="top"></div>
<!--中間提示-->
<div class="tips"></div>
<!--中間的展現-->
<div class="center">
<div class="login"> </div>
</div>
<!--底部模塊-->
<div class="bottom"></div>