HTML知識點概括
前端三件套分別是HTML3,CSS5,JavaScript
稍微介紹一下W3C標準:
- 結構化標準語言(HTML)
- 表現標準語言(CSS)
- 行為標準(DOM,JavaScript)
HTML是超文本標記語言,負責網頁最基本資訊的構造
HTML的優勢:
- 市場需求量
- 跨平臺使用
- 瀏覽器支持
我們使用的工具依舊選擇老朋友:
- IDEA
因為內容過多,大部分內容可能都在代碼中詳細介紹,請仔細閱讀代碼
HTML基本框架
下面我們稍微介紹以下HTML的基本框架:
<!--告訴瀏覽器我們使用的標準規范-->
<!DOCTYPE html>
<html lang="en">
<!--表示網頁頭部開始-->
<head>
<!-- meta 描述性標簽,用來描述網頁的一些資訊:例如作用等 -->
<meta charset="UTF-8">
<meta charset="keywords" content="第一天學習HTML">
<meta charset="description" content="我們在這里學習HTML">
<!-- title 標題,表示我們打開網頁后的標題 -->
<title>我的第一個網頁</title>
</head>
<!--body 表示網頁內容開始-->
<body>
<!--內容-->
Hello,World!
</body>
</html>
其中<></>這種成對出現的標簽,我們稱為開放標簽和閉合標簽
其中<>這種單個出現的標簽,我們稱為單個標簽
塊元素和行內元素
我們簡單介紹一下塊元素和行內元素:
- 塊元素:
- 無論內容多少,該元素獨占一行
- 例如:p,h1,h2
- 行內元素:
- 內容撐開寬度,當左右都是行內元素時,可以排在一行
- 例如:a,strong,em
頁面結構分析
下面給出頁面結構分析:
| 元素名 | 描述 |
|---|---|
| header | 標記頭部區域的內容 |
| footer | 標記腳部區域的內容 |
| section | Web頁面中一塊獨立區域 |
| article | 獨立的文章內容 |
| aside | 相關內容或應用 |
| nav | 導航類輔導內容 |
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面結構分析</title>
</head>
<body>
<!--表示頭部-->
<head>
</head>
<!--表示獨立板塊-->
<section>
</section>
<!--表示腳部-->
<footer>
</footer>
</body>
</html>
網頁基本標簽
網頁基本資訊:
| 代碼 | 說明 |
|---|---|
| <!-- --> | 注釋;用來注解內容,不被編譯器讀取 |
| <h1></h1> | 大標題;分為h1~h6 |
| <P></p> | 分段符號; |
| <br> | 換行符號; |
| <hr> | 水平線符號; |
| <strong></strong> | 加粗符號; |
| <em></em> | 斜體符號; |
| &~~~~; | 特殊符號格式; |
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網頁基本標簽</title>
</head>
<body>
<!--我們從這里依次介紹各種標簽-->
<!--標題標簽:成對標簽;h開頭,h1~h6依次為n級標題-->
<h1>一級標簽</h1>
<h2>二級標簽</h2>
<h3>三級標簽</h3>
<h4>四級標簽</h4>
<h5>五級標簽</h5>
<h6>六級標簽</h6>
<!--然后我們介紹段落標簽:成對標簽;p-->
<!--用段落標簽后,段與段自動換行且有明顯距離-->
<p>1</p>
<p>2</p>
<p>3</p>
<!--如果不是用段標簽,即使在HTML代碼中分段,網頁中也不顯示分段-->
1
2
3
<!--接下來我們介紹換行標簽:單個標簽;br-->
<!--換行標簽使內容換行,但其本質還是在一段中,且間隔較小-->
<p>-----------------</p>
1 <br>
2 <br>
3 <br>
<!--接下來介紹水平線標簽:單個標簽;hr-->
<!--水平線標簽隨著頁面的大小改變大小,隨時充斥整個頁面-->
<hr>
<!--然后我們稍微介紹兩個字體樣式標簽,因為我們的字體樣式主要在css中寫出,這里僅簡單介紹即可-->
<!--粗體;成對標簽;strong-->
<!--斜體:成對標簽;em-->
<h1>字體樣式標簽</h1>
<p>粗體:<strong>我是粗體</strong></p>
<p>斜體:<em>我是斜體</em></p>
<!--最后我們介紹一些特殊符號:空格,大于,小于-->
<!--我們先說一下格式:&~~~;-->
<p>空格: 空格</p>
<p>大于:></p>
<p>小于:<</p>
</body>
</html>
網頁基本標簽-圖片標簽
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片標簽</title>
</head>
<body>
<!--
我們先給出影像格式:<img src="" alt="" title="" height="">
img:影像標簽
src:表示影像地址,可以寫絕對地址,也可以寫相對地址(推薦)
相對地址中回傳上一級的標志是:../
alt:表示影像名稱,當影像不顯示時,直接打出影像名稱
title:當滑鼠移動上去時出現的名稱
width:寬度
height:高度
-->
<img src="https://www.cnblogs.com/Resources/picture/1.jpeg" alt="紗霧老師" title="點擊查看" height="300">
</body>
</html>
網頁基本標簽-鏈接標簽
鏈接類標簽分為三種:
- 1.超鏈接:
- 2.錨鏈接:
- 3.功能性鏈接:
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈接標簽</title>
</head>
<body>
<!--
我們先給出鏈接標簽的整個格式:<a href="" target="">鏈接文本/影像</a>
href:鏈接路徑,后面可以跟本機所創建的網頁或者互聯網上可查找網頁;且可以附帶其錨鏈接
target:在哪個視窗打開;目前我們僅需要了解兩種視窗:_blank新視窗,_self本視窗(默認)
1.超鏈接:
直接使用上方鏈接格式即可
2.錨鏈接:
需要提前用id設定錨點,然后在后續需要跳轉位置采用<a>中的#id來跳轉
3.功能性鏈接:
用于與其他設備鏈接,例如:mailto是指郵箱
-->
<!--設定錨點-->
<a id="Top">Top</a>
<!--1.超鏈接-->
<p>
<a href="E:\編程內容\HTML\code\第一部分\1.我的第一個網頁.html" target="_self">點擊進入我的第一個網頁</a>
<a href="https://www.baidu.com/" target="_blank">點擊進入百度</a>
</p>
<!--2.錨鏈接-->
<a href="https://www.cnblogs.com/qiuluoyuweiliang/p/#Top">點擊回傳頂部</a>
<!--3.功能性鏈接-->
<a href="mailto:[email protected]">點擊與郵箱互動</a>
</body>
</html>
網頁基本標簽-串列標簽
串列的定義:
- 串列就是資訊資源的一種展示形式
串列的分類:
- 有序串列
- ol是有序串列的框架標簽
- li是有序串列的內容標簽
- 無序串列
- ul是無序串列的框架標簽
- li是無序串列的內容標簽
- 自定義串列
- dl是自定義串列的框架標簽
- dt是自定義串列的內容標題
- dd是自定義串列的內容標簽
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>串列標簽</title>
</head>
<body>
<!--串列標簽分為三種:有序串列,無序串列,自定義串列-->
<!--1.有序串列:
<ol></ol>
<li></li>
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>Web</li>
</ol>
<hr>
<!--2.無序串列:
<ul></ul>
<li></li>
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>Web</li>
</ul>
<hr>
<!--3.自定義串列:
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
-->
<dl>
<dt>我是小標題</dt>
<dd>我是串列1</dd>
<dd>我是串列2</dd>
</dl>
</body>
</html>
網頁基本標簽-表格標簽
使用表格的好處:
- 簡單通用
- 結構穩定
表格的組成以及HTML中的格式:
- 表格標簽:
- 單元格:由行列組成
- 行:
- 列:
- 跨行:rowspan=""
- 跨列:colspan=""
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格標簽</title>
</head>
<body>
<!--表格格式:
<table></table>是基本表格框架, 其他內容需要在框架里面寫(這里提前涉及到:border表示邊框,這里設定邊框寬度border="1px"表示邊框為1像素)
<tr></tr>:行
<td></td>:列,需要寫在行中
colspan="n":表示跨列,跨n列
rowspan=“n”:表示跨行,跨n行
-->
<table border="1px">
<tr>
<td colspan="4">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
網頁基本標簽-視頻和音頻
視頻元素:
<video src="" ></video>
音頻元素:
<audio src="" ></audio>
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體標簽</title>
</head>
<body>
<!--媒體標簽:我們這里僅介紹:視頻和音頻
視頻格式:<video src="" ></video>
音頻格式:<audio src="" ></audio>
controls:表示控制面板,我們需要在媒體標簽中加入,才可以顯示控制面板
autoplay:表示自動播放,默認情況下需要手動播放
-->
<!--視頻-->
<video src="E:\編程內容\HTML\Resources\video\1.mp4" controls autoplay></video>
<!--音頻-->
<audio src="E:\編程內容\HTML\Resources\audio\1.mp3" controls autoplay></audio>
</body>
</html>
網頁基本標簽-表單
表單作用:
- 用于收集用戶資訊
表單組成:
- 表單域
- 表單控制元件
- 提示資訊
表單域
表單域是一個包含表單元素的區域
表單域格式:
<form action="" method="" name=""></form>
常用屬性:
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指出接收并處理表單資料的服務器程式的url地址 |
| method | get/post | 用于設定表單資料的提交方式 |
| name | 名稱 | 用于指定表單的名稱,用來區分同一頁面的多個表單 |
表單掛件
最常用的表單掛件:<input type="屬性值”>
我們先介紹input內置元素:
| 元素 | 說明 |
|---|---|
| type="" | 表示input型別 |
| value="" | 表示input的值(內置文本) |
| name="" | 表示input的姓名(用于同一類) |
| checked="" | 表示被選中 |
| maxlength="" | 表示最大長度 |
我們再來介紹以下input的屬性包括哪些:
| 屬性值 | 說明 |
|---|---|
| button | 定義可點擊按鈕(配合js使用) |
| checkbox | 定義復選框 |
| file | 定義輸入欄位和瀏覽按鈕,負責上傳檔案 |
| hidden | 定義隱藏的輸入欄位 |
| image | 定義影像形式的提交按鈕 |
| password | 定義密碼欄位,輸入內容不可見 |
| radio | 定義單選按鈕 |
| reset | 定義重置按鈕,點擊后重置表單內所有內容 |
| submit | 定義提交按鈕,點擊后將資料發送至后臺 |
| text | 定義單行輸入的欄位,默認20位元組 |
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單標簽</title>
</head>
<body>
<!--
表單標簽form
含有三種屬性:
action=“url地址”:用于指定接收并處理表單資料的服務器程式的url地址
method=“post/get”:提交方法
name=“”:表單名稱,以便于區分
-->
<form action="#" method="post" name="表單域名稱">
<!--1.<input>
格式:<input type="">
type:屬性值
name:表單元素名稱
value:表單元素默認內容
checked:默認被選中
maxlength:內容最大值
-->
<!-- text文本,用于正常書寫-->
姓名:<input type="text" value="https://www.cnblogs.com/qiuluoyuweiliang/p/請輸入姓名">
<br>
<!-- password隱藏文本,用于書寫密碼-->
密碼:<input type="password" >
<br>
<!-- radio單選框,用于多選一,需要配合name使用-->
性別: 男 <input type="radio" name="sex"> 女 <input type="radio" name="sex">
<br>
<!-- checkbox多選框,用于多選,也需要配合name使用-->
愛好: 吃飯 <input type="checkbox" name="like"> 睡覺 <input type="checkbox" name="like"> 打豆豆 <input type="checkbox" name="like">
<br>
<!-- button普通按鈕,后期搭配js使用;可以使用value定義顯示內容-->
<input type="button" value="https://www.cnblogs.com/qiuluoyuweiliang/p/點擊發送二維碼">
<br>
<!-- file上傳檔案-->
<input type="file" >
<br>
<!-- reset重置按鈕,點擊后表單內所有內容重置;可以使用value定義顯示內容-->
<input type="reset" value="https://www.cnblogs.com/qiuluoyuweiliang/p/重新填寫">
<!-- submit點擊提交,點擊后把內容上傳給action中;可以使用value定義顯示內容-->
<input type="submit" value="https://www.cnblogs.com/qiuluoyuweiliang/p/免費注冊">
</form>
</body>
</html>
label標記
label標記可以連接其他元素(常用于與button,checkbox,radio等點擊性標簽使用)
label格式:
<!--for對應其id值-->
<label for="~~~">內容</label>
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>label標簽</title>
</head>
<body>
<!--當點擊相同for和id的label屬性時,會相當于點擊id屬性-->
<label for="button">點擊我為后面button畫勾</label>
<input type="checkbox" id="button">
</body>
</html>
select下拉表單
select可以單獨形成下拉表單
select格式:
<!-- 可以在里面加上selected=“selected”表示默認選擇-->
<select>
<option selected="selected"></option>
<option></option>
<option></option>
</select>
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select標簽</title>
</head>
<body>
<!--
select作為一個框架
option作為折疊選項
可在option選項中加入selected=“selected”將其設為默認選項
-->
請選擇性別:
<select>
<option selected="selected">請選擇</option>
<option>男</option>
<option>女</option>
</select>
</body>
</html>
textare文本域
textare負責創建一大片文本域,用于大規模的書寫
textare格式:
<!--x,y分別表示 一行字數 和 行數--->
<textarea cols="x" rows="y">
這里面寫入文本域默認顯示
</textarea>
代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textare</title>
</head>
<body>
<!--textare
cols:表示可輸入的一行內容(不推薦使用,一般在css設定)
rows:表示存在多少列(不推薦使用,一般在css設定)
文本默認文字可以直接在里面書寫
-->
<form>
<textarea cols="50" rows="5">
這里面寫入文本域默認顯示
</textarea>
</form>
</body>
</html>
HTML綜合練習
下面給出案例圖,請依照案例圖寫出相關代碼:

代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>綜合案例</title>
</head>
<body>
<!--第一步我們獲得大標題-->
<h4>青春不常在,抓緊談戀愛</h4>
<!--我們下面的內容排列整齊,這里需要采用表格實作-->
<!--表格分為n行2列-->
<table >
<!-- 第一行:姓名 單選框 帶有label的字-->
<tr>
<td>姓名:</td>
<td>
<input type="radio" name="sex" id="man"> <label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
</td>
</tr>
<!-- 第二行:生日 下拉串列-->
<tr>
<td>生日:</td>
<td>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option selected="selected">請選擇年份</option>
</select>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option selected="selected">請選擇月份</option>
</select>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option selected="selected">請選擇日期</option>
</select>
</td>
</tr>
<!-- 第三行 所在地區 text帶value-->
<tr>
<td>所在地區:</td>
<td><input type="text" value="https://www.cnblogs.com/qiuluoyuweiliang/p/填寫地區"></td>
</tr>
<!-- 第四行:婚姻狀況 單選框-->
<tr>
<td>婚姻狀況</td>
<td><input type="radio" name="family"> 未婚 <input type="radio" name="family"> 已婚 <input type="radio" name="family"> 離婚 </td>
</tr>
<!-- 第五行:學歷 text-->
<tr>
<td>學歷:</td>
<td><input type="text"></td>
</tr>
<!-- 第六行:喜歡的型別 多選框-->
<tr>
<td>喜歡的型別:</td>
<td><input type="checkbox" name="love"> 可愛的 <input type="checkbox" name="love"> 妖嬈的 <input type="checkbox" name="love"> 放蕩的 <input type="checkbox" name="love"> 都喜歡 </td>
</tr>
<!-- 第七行:自我介紹 textare框-->
<tr>
<td>自我介紹:</td>
<td><textare>自我介紹</textare></td>
</tr>
<!-- 免費注冊的submit標簽-->
<tr>
<td></td>
<td><input type="submit" value="https://www.cnblogs.com/qiuluoyuweiliang/p/免費注冊"></td>
</tr>
<!-- 同意注冊條款-->
<tr>
<td></td>
<td><input type="checkbox">我同意注冊條款并遵守</td>
</tr>
<!-- 我是會員,跳轉頁面立即登錄-->
<tr>
<td></td>
<td><a href="https://www.cnblogs.com/qiuluoyuweiliang/p/#">我是會員,立即登錄</a></td>
</tr>
<!-- 承諾條款:采用標題和無序串列完成-->
<tr>
<td></td>
<td>
<h2>我承諾</h2>
<ul>
<li>年滿18,單身</li>
<li>抱著嚴肅的態度</li>
<li>真誠尋找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
結束語
好的,關于HTML的介紹就到這里了,恭喜你邁進了前端的第一步!
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/498856.html
標籤:Html/Css
