【精選】HTML5最全知識點(diǎn)集合

HTML5簡介與基礎(chǔ)骨架

HTML5介紹

HTML5是用來描述網(wǎng)頁的一種語言，被稱為超文本標(biāo)記語言。用HTML5編寫的文件，后綴以.html結(jié)尾

HTML是一種標(biāo)記語言，標(biāo)記語言是一套標(biāo)記標(biāo)簽。標(biāo)簽是由尖括號包圍的關(guān)鍵字，例如：<html>

標(biāo)簽有兩種表現(xiàn)形式：

雙標(biāo)簽，例如：<html></html>
單標(biāo)簽，例如：<img>

HTML5的DOCTYPE聲明

DOCTYPE是document type (文檔類型) 的縮寫。<!DOCTYPE html >是H5的聲明位于文檔的最前面，處于標(biāo)簽之前。他是網(wǎng)頁必備的組成部分，避免瀏覽器的怪異模式。

<!DOCTYPE html>

HTML5基本骨架

html標(biāo)簽

定義 HTML 文檔，這個元素我們?yōu)g覽器看到后就明白這是個HTML文檔了，所以你的其它元素要包裹在它里面，標(biāo)簽限定了文檔的開始點(diǎn)和結(jié)束點(diǎn)。

<!DOCTYPE html>
<html>
</html>

head標(biāo)簽

head標(biāo)簽用于定義文檔的頭部。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。

<!DOCTYPE html>
<html>
  	<head>
  	</head>
</html>

body標(biāo)簽

body 元素定義文檔的主體。

body 元素包含文檔的所有內(nèi)容（比如文本、超鏈接、圖像、表格和列表等等。）

它會直接在頁面中顯示出來，也就是用戶可以直觀看到的內(nèi)容

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      我會顯示在瀏覽器中
   </body>
</html>

title標(biāo)簽

可定義文檔的標(biāo)題。
它顯示在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上。
<title> 標(biāo)簽是 <head> 標(biāo)簽中唯一必須要求包含的東西，就是說寫head一定要寫title
<title>的增加有利于SEO優(yōu)化

SEO是搜索引擎優(yōu)化的英文縮寫。通過對網(wǎng)站內(nèi)容調(diào)整，滿足搜索引擎的排名需求

<!DOCTYPE html>
<html>
  <head>
    <title>第一個頁面</title>
  </head>
  <body>
     我會顯示在瀏覽器中
  </body>
</html>

meta標(biāo)簽

meta標(biāo)簽用來描述一個HTML網(wǎng)頁文檔的屬性，關(guān)鍵詞等，例如：charset="utf-8"是說當(dāng)前使用的是utf-8編碼格式，在開發(fā)中我們經(jīng)常會看到utf-8，或是gbk，這些都是編碼格式，通常使用utf-8。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>itbaizhan</title>
  </head>
  <body>
  </body>
</html>

標(biāo)簽之標(biāo)題

標(biāo)題介紹與應(yīng)用

標(biāo)題（Heading）是通過 <h1> - <h6>標(biāo)簽進(jìn)行定義的。

<h1>定義最大的標(biāo)題 <h6>定義最小的標(biāo)題

<h1>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h4>四級標(biāo)題</h4>
<h5>五級標(biāo)題</h5>
<h6>六級標(biāo)題</h6>

生成h1~h6快捷鍵：h$*6

VSCode插件快速打開瀏覽器

快速打開瀏覽器

擴(kuò)展 -> 搜索open in browser -> 點(diǎn)擊安裝

正確使用標(biāo)題

請確保將 HTML 標(biāo)題標(biāo)簽只用于標(biāo)題。

不要僅僅是為了生成粗體或大號的文本而使用標(biāo)題。

正確使用標(biāo)題有益于SEO

應(yīng)該將< h1> 用作主標(biāo)題（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此類推

標(biāo)題標(biāo)簽位置擺放

在標(biāo)簽中添加屬性：align="left | center | right" 默認(rèn)居左

標(biāo)簽之段落、換行、水平線

標(biāo)簽之段落< p >

段落是通過<p>標(biāo)簽定義的

<p>這是一個段落 </p> 
<p>這是另一個段落</p>

換行< br />

如果您希望在不產(chǎn)生一個新段落的情況下進(jìn)行換行（新行），請使用 <br>

<br /> 元素是一個空的 HTML 元素。

<p>這個<br>段落<br>演示了分行的效果</p>

水平線< hr />

<hr/>標(biāo)簽在 HTML 頁面中創(chuàng)建水平線

<hr color="" width="" size="" align=""/>

屬性：

color：設(shè)置水平線的顏色
width：設(shè)置水平線的寬度
size：設(shè)置水平線的高度
align：設(shè)置水平線的對齊方式（默認(rèn)居中），可取值left|right

標(biāo)簽之圖片

網(wǎng)站中最多的元素

網(wǎng)站中最多的元素毋庸置疑，一定是圖片

標(biāo)簽定義 HTML 頁面中的圖像

<img src="" alt="" title="" width="" height="">

注意事項(xiàng)

<img>是單標(biāo)簽，不需要進(jìn)行閉合操作

屬性：

src：路徑（圖片地址與名字）
alt：規(guī)定圖像的替代文本
width：規(guī)定圖像的寬度
height：規(guī)定圖像的高度
title：鼠標(biāo)懸停在圖片上給予提示

圖片路徑詳解

絕對路徑

絕對路徑是電腦的盤符存儲與訪問的具體地址

E:\itbaizhanCode\1.jpg
<img src="E:\html\1.jpg">

相對路徑

兩者相對關(guān)系，兩者在同?路徑下可以直接訪問

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>數(shù)據(jù)結(jié)構(gòu)</title>
</head>

<body>
    <img src="C:\Users\HX\Desktop\JAVA\計算機(jī)底層知識資料.jpg" alt="">

    <img src="數(shù)據(jù)結(jié)構(gòu).png" alt="" width="4500px">

    <img src="hello/大學(xué)規(guī)劃.png" alt="">

</body>

</html>

子級關(guān)系: /
父級關(guān)系: ../
同級關(guān)系: ./（可以省略）

網(wǎng)絡(luò)路徑

具體的?絡(luò)地址: http://iwenwiki.com/api/newworld/images/n1.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="http://iwenwiki.com/api/newworld/images/n1.png" alt="">
</body>

</html>

標(biāo)簽之超文本鏈接

超鏈接描述

HTML使用標(biāo)簽 <a>來設(shè)置超文本鏈接

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔

<a href="url">鏈接文本</a>

超鏈接屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="file:///D:/HTML5/07_%E6%A0%87%E7%AD%BE%E4%B9%8B%E5%9B%BE%E7%89%87/index.html">
        總結(jié)</a>
</body>
</html>

在標(biāo)簽<a>中使用了href屬性來描述鏈接的地址

默認(rèn)情況下，鏈接將以，以下形式出現(xiàn)在瀏覽器中：

一個未訪問過的鏈接顯示為藍(lán)色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點(diǎn)擊鏈接時，鏈接顯示為紅色并帶有下劃線。

特別提示

后期我們會通過CSS樣式修改掉這些效果

超鏈接表現(xiàn)

當(dāng)您把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈?/p>

標(biāo)簽之文本

常用文本標(biāo)簽

標(biāo)簽	描述
`<em>`	定義著重文字
`<b>`	定義粗體文本
`<i>`	定義斜體字
`<strong>`	定義加重語氣
`<del>`	定義刪除字
`<span>`	元素沒有特定的含義

特別提示

常用文本標(biāo)簽和段落是不同的，段落代表一段文本，而文本標(biāo)簽一般表示文本詞匯

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <b>b 加粗</b>
 <em>em 著重</em>
 <i>i 斜體</i>
 <strong>strong 語氣加重</strong>
 <span>span 無意義,方便css</span>
 <del>del 刪除</del>
</body>
</html>

列表標(biāo)簽之有序列表

有序列表

有序列表是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。有序列表始于<ol> 標(biāo)簽。每個列表項(xiàng)始于 <li>標(biāo)簽。

<ol>
  <li>蘋果</li>
  <li>橘子</li>
</ol>

type屬性

<ol>的屬性type 擁有的選項(xiàng)

1 表示列表項(xiàng)目用數(shù)字標(biāo)號（1,2,3…）
a 表示列表項(xiàng)目用小寫字母標(biāo)號（a,b,c…）
A 表示列表項(xiàng)目用大寫字母標(biāo)號（A,B,C…）
i 表示列表項(xiàng)目用小寫羅馬數(shù)字標(biāo)號（i,ii,iii…）
I 表示列表項(xiàng)目用大寫羅馬數(shù)字標(biāo)號（I,II,III…）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>火龍果</li>
    </ol>

    <ol type="A">
        <li>蘋果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>火龍果</li>
    </ol>
    
    <ol type="a">
        <li>蘋果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>火龍果</li>
    </ol>

    <ol type="i">
        <li>蘋果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>火龍果</li>
    </ol>

    <ol type="I">
        <li>蘋果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>火龍果</li>
    </ol>
    
</body>
</html>

有序列表嵌套

列表是可以進(jìn)行嵌套的

<ol>
  <li>百度</li>
  <li>大廠
    <ol>
      <li>阿里</li>
      <li>京東</li>
    </ol>
  </li>
  <li>程序員</li>
</ol>

列表標(biāo)簽之無序列表

無序列表實(shí)現(xiàn)

無序列表是一個項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記

無序列表始于 <ul> 標(biāo)簽。每個列表項(xiàng)始于<li> 標(biāo)簽。

<ul>
  <li>阿里</li>
  <li>微軟</li>
</ul>

type屬性

<ul>的屬性type 擁有的選項(xiàng)

disc 默認(rèn)實(shí)心圓
circle 空心圓
square 小方塊
none 不顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul type="disc">
        <li>蘋果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>紅龍果</li>
        <li>榴蓮</li>
    </ul>

    <ul type="circle">
        <li>蘋果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>紅龍果</li>
        <li>榴蓮</li>
    </ul>

    <ul type="square">
        <li>蘋果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>紅龍果</li>
        <li>榴蓮</li>
    </ul>

    <ul type="none">
        <li>蘋果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>紅龍果</li>
        <li>榴蓮</li>
    </ul>

</body>
</html>

無序列表嵌套

列表是可以進(jìn)行嵌套的

<ul>
  <li>百度</li>
  <li>
    <ul>
      <li>阿里</li>
      <li>京東</li>
    </ul>
  </li>
  <li>騰訊</li>
</ul>

常見應(yīng)用場景

無序的列表效果
導(dǎo)航效果

導(dǎo)航效果

<ul>
  <li>Xiaomi手機(jī)</li>
  <li>Redmi 紅米</li>
  <li>電視</li>
  <li>筆記本</li>
</ul>

快捷鍵

快速生成ul+li的布局：ul>li*3（數(shù)字根據(jù)自己的需要的li數(shù)量修改）

標(biāo)簽之表格

表格展示效果

表格在數(shù)據(jù)展示方面非常簡單，并且表現(xiàn)優(yōu)秀

表格組成與特點(diǎn)

行、列、單元格

單元格特點(diǎn)：同行等高、同列等寬。

表格標(biāo)簽

表格：<table>

行：<tr>

單元格(列)：<td>

<table>
  <tr>
    <td>百度</td>
    <td>騰訊</td>
  </tr>
  <tr>
    <td>阿里</td>
    <td>京東</td>
  </tr>
</table>

快捷鍵

快速生成表格結(jié)構(gòu)：table> tr*2 > td *2{單元格}

表格屬性

border：設(shè)置表格的邊框
width：設(shè)置表格的寬度
height：設(shè)置表格的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="2" width="300" height="200">
        <tr>
            <td>HTML</td>
            <td>HTML</td>
            <td>HTML</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>HTML</td>
            <td>HTML</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>HTML</td>
            <td>HTML</td>
        </tr>
    </table>
</body>
</html>

表格單元格合并

單元格合并屬性

水平合并：colspan
垂直合并：rowspan

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>水平合并：合并單元格6,7,8 :colspan</p>
    <p>垂直合并：合并單元格15,20,25 : rowspan </p>
    <p>合并單元格16,17,21,22</p>
    <p>水平合并：保留左邊，刪除右邊</p>
    <p>垂直合并：保留上邊，刪除下邊</p>

    <table border="1" height="300" width="800">
        <tr>
            <td>單元格1</td>
            <td>單元格2</td>
            <td>單元格3</td>
            <td>單元格4</td>
            <td>單元格5</td>
        </tr>
        <tr>
            <td colspan="3">單元格6</td>
            <td>單元格9</td>
            <td>單元格10</td>
        </tr>
        <tr>
            <td>單元格11</td>
            <td>單元格12</td>
            <td>單元格13</td>
            <td>單元格14</td>
            <td rowspan="3">單元格15</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">單元格16</td>
            <td>單元格18</td>
            <td>單元格19</td>
        </tr>
        <tr>
            <td>單元格23</td>
            <td>單元格24</td>
        </tr>
    </table>

</body>

</html>

Form表單

表單在 Web 網(wǎng)頁中用來給用戶填寫信息，從而能采用戶信息，使網(wǎng)頁具有交互的功能。

所有的用戶輸入內(nèi)容的地方都用表單來寫，如登錄注冊、搜索框

表單是由容器和控件組成的,一個表單一般應(yīng)該包含用戶填寫信息的輸入框,按鈕等，這些輸入框,按鈕叫做控件,表單就是容器,它能夠容納各種各樣的控件

<form action="url" method="get|post" name="myform"></form>

屬性說明

action服務(wù)器地址

name表單名稱

method中Get和Post的區(qū)別

數(shù)據(jù)提交方式，get把提交的數(shù)據(jù)url可以看到，post看不到
get一般用于提交少量數(shù)據(jù)，post用來提交大量數(shù)據(jù)

表單元素

一個完整的表單包含三個基本組成部分：表單標(biāo)簽、表單域、表單按鈕

表單標(biāo)簽
表單域
表單按鈕

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        <input type="text">
        <input type="submit">
    </form>
</body>

</html>

表單元素

文本框

文本域通過<input type="text"> 標(biāo)簽來設(shè)定，當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本域

<form>
   First name: <input type="text" name="firstname">
  <br>
   Last name: <input type="text" name="lastname">
</form>

密碼框

密碼字段通過標(biāo)簽<input type="password"> 來定義

<form>
   Password: <input type="password" name="pwd">
</form>

溫馨提示

密碼字段字符不會明文顯示，而是以星號或圓點(diǎn)替代

提交按鈕

當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理

<form name="input" action="url" method="get">
   Username: <input type="text" name="user">
  <input type="submit" value="Submit">
</form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        用戶名：<input type="text">
        密碼：<input type="password">
        <input type="submit" value="登錄">
    </form>
</body>
</html>

塊元素與行內(nèi)元素（內(nèi)聯(lián)元素）

HTML5出現(xiàn)之前，經(jīng)常把元素按照塊級元素和內(nèi)聯(lián)元素來區(qū)分。在HTML5中，元素不再按照這種?式來區(qū)分，而是按照內(nèi)容模型來區(qū)分，分為元數(shù)據(jù)型(metadata content)、區(qū)塊型(sectioning content)、標(biāo)題型(heading content)、文檔流型(flow content)、語句型(phrasing content)、內(nèi)嵌型(embedded content)、交互型 (interactive content)。元素不屬于任何?個類別，被稱為穿透的，元素可能屬于不止?個類別，稱為混合的

詳細(xì)參考地址：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories

雖然到了HTML5的版本，元素分類更細(xì)致了，但是這對初學(xué)者并不友好,所以我們?nèi)匀话凑諌K元素和內(nèi)聯(lián)元素做區(qū)分，這對我們的布局起到了至關(guān)重要的作用

內(nèi)聯(lián)元素和塊級元素的區(qū)別

塊級元素	內(nèi)聯(lián)元素
塊元素會在頁面中獨(dú)占一行（自上向下垂直排列）	行內(nèi)元素不會獨(dú)占頁面中的一行，只占自身的大小
可以設(shè)置width，height屬性	行內(nèi)元素設(shè)置width，height屬性無效
?般塊級元素可以包含行內(nèi)元素和其他塊級元素	?般內(nèi)聯(lián)元素包含內(nèi)聯(lián)元素不包含塊級元素

常見塊級元素

div、form、h1~h6、hr、p、table、ul、等

常見內(nèi)聯(lián)元素(行內(nèi)元素)

a、b、em、i、span、strong等

行內(nèi)塊級元素（特點(diǎn)：不換行、能夠識別寬高）

button、img、input等

HTML5新增標(biāo)簽

HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定

在HTML5出現(xiàn)之前，我們一般采用DIV+CSS布局我們的頁面。但是這樣的布局方式不僅使我們的文檔結(jié)構(gòu)不夠清晰，而且不利于搜索引擎爬蟲對我們頁面的爬取。為了解決上述缺點(diǎn)，HTML5新增了很多新的語義化標(biāo)簽

擴(kuò)展知識

div容器元素，也是頁面中見到的最多的元素

div實(shí)現(xiàn)

H5新標(biāo)簽實(shí)現(xiàn)

H5新標(biāo)簽

<header></header> 頭部
<nav></nav> 導(dǎo)航
<section></section>定義文檔中的節(jié),比如章節(jié)、頁眉、頁腳
<aside></aside> 側(cè)邊欄
<footer></footer> 腳部
<article></article> 代表一個獨(dú)立的、完整的相關(guān)內(nèi)容塊,例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等

posted @ 2023-11-18 11:04 Gjq- 閱讀(177) 評論(0) 收藏舉報來源

刷新頁面返回頂部

【精選】HTML5最全知識點(diǎn)集合

HTML5簡介與基礎(chǔ)骨架

HTML5介紹

HTML5的DOCTYPE聲明

HTML5基本骨架

html標(biāo)簽

head標(biāo)簽

body標(biāo)簽

title標(biāo)簽

meta標(biāo)簽

標(biāo)簽之標(biāo)題

標(biāo)題介紹與應(yīng)用

VSCode插件快速打開瀏覽器

標(biāo)簽之段落< p >

換行< br />

水平線< hr />

標(biāo)簽之圖片

網(wǎng)站中最多的元素

圖片路徑詳解

絕對路徑

相對路徑

網(wǎng)絡(luò)路徑

標(biāo)簽之超文本鏈接

超鏈接描述

超鏈接屬性

超鏈接表現(xiàn)

標(biāo)簽之文本

常用文本標(biāo)簽

列表標(biāo)簽之有序列表

有序列表

type屬性

有序列表嵌套

列表標(biāo)簽之無序列表

無序列表實(shí)現(xiàn)

type屬性

無序列表嵌套

常見應(yīng)用場景

導(dǎo)航效果

標(biāo)簽之表格

表格展示效果

表格屬性

表格單元格合并

單元格合并屬性

Form表單

表單元素

表單元素

文本框

密碼框

提交按鈕

塊元素與行內(nèi)元素（內(nèi)聯(lián)元素）

HTML5新增標(biāo)簽

擴(kuò)展知識

公告