HTML5基礎(chǔ)入門

.標(biāo)簽

1.1meta標(biāo)簽

meta主要用于設(shè)置網(wǎng)頁(yè)中的一些元數(shù)據(jù)，元數(shù)據(jù)不是給用戶看 charset 指定網(wǎng)頁(yè)的字符集 name 指定的數(shù)據(jù)的名稱 content 指定的數(shù)據(jù)的內(nèi)容

keywords 表示網(wǎng)站的關(guān)鍵字，可以同時(shí)指定多個(gè)關(guān)鍵字，關(guān)鍵字間使用,隔開(kāi)

<meta name="Keywords" content="網(wǎng)上購(gòu)物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲(chǔ)卡,京東"/>

description 用于指定網(wǎng)站的描述

<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購(gòu)物商城,銷售家電、數(shù)碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書(shū)、食品等數(shù)萬(wàn)個(gè)品牌優(yōu)質(zhì)商品.便捷、誠(chéng)信的服務(wù)，為您提供愉悅的網(wǎng)上購(gòu)物體驗(yàn)!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

將頁(yè)面重定向到另一個(gè)網(wǎng)站

1.2title標(biāo)簽

title標(biāo)簽的內(nèi)容會(huì)作為搜索結(jié)果的超鏈接上的文字顯示

<title>Document</title>

1.3標(biāo)題

h1 ~ h6 一共有六級(jí)標(biāo)題
從h1~h6重要性遞減，h1最重要，h6最不重要
h1在網(wǎng)頁(yè)中的重要性僅次于title標(biāo)簽，一般情況下一個(gè)頁(yè)面中只會(huì)有一個(gè)h1
標(biāo)題元素是塊元素
<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h4>四級(jí)標(biāo)題</h4>
<h5>五級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>
hgroup標(biāo)簽用來(lái)為標(biāo)題分組，可以將一組相關(guān)的標(biāo)題同時(shí)放入到hgroup
<hgroup>
<h1>回鄉(xiāng)偶書(shū)二首</h1>
<h2>其一</h2>
</hgroup>
其他標(biāo)簽

p標(biāo)簽表示頁(yè)面中的一個(gè)段落
<p>在p標(biāo)簽中的內(nèi)容就表示一個(gè)段落</p>
em標(biāo)簽用于表示語(yǔ)音語(yǔ)調(diào)的一個(gè)加重
<p>今天天氣<em>真</em>不錯(cuò)！</p>
strong表示強(qiáng)調(diào)，重要內(nèi)容！
<p>你今天必須要<strong>完成作業(yè)</strong>！</p>
blockquote 表示一個(gè)長(zhǎng)引用
<blockquote>
這句話我是從來(lái)沒(méi)有說(shuō)過(guò)的！
</blockquote>
q表示一個(gè)短引用
子曰<q>學(xué)而時(shí)習(xí)之，樂(lè)呵樂(lè)呵！</q>
br標(biāo)簽表示頁(yè)面中的換行
<br>

1.4布局標(biāo)簽

header 表示網(wǎng)頁(yè)的頭部 main 表示網(wǎng)頁(yè)的主體部分(一個(gè)頁(yè)面中只會(huì)有一個(gè)main) footer 表示網(wǎng)頁(yè)的底部 nav 表示網(wǎng)頁(yè)中的導(dǎo)航 aside 和主體相關(guān)的其他內(nèi)容（側(cè)邊欄） article 表示一個(gè)獨(dú)立的文章 section 表示一個(gè)獨(dú)立的區(qū)塊，上邊的標(biāo)簽都不能表示時(shí)使用section

div 沒(méi)有語(yǔ)義，就用來(lái)表示一個(gè)區(qū)塊，目前來(lái)講div還是我們主要的布局元素

span 行內(nèi)元素，沒(méi)有任何的語(yǔ)義，一般用于在網(wǎng)頁(yè)中選中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分類

1.1.1.1有序列表

使用ol標(biāo)簽來(lái)創(chuàng)建無(wú)序列表，使用li表示列表項(xiàng)

<ul>
       <li>結(jié)構(gòu)</li>
       <li>表現(xiàn)</li>
       <li>行為</li>
   </ul>

1.1.1.2 無(wú)序列表

使用ul標(biāo)簽來(lái)創(chuàng)建無(wú)序列表，使用li表示列表項(xiàng)

<ol>
       <li>結(jié)構(gòu)</li>
       <li>表現(xiàn)</li>
       <li>行為</li>
   </ol>

1.1.1.3定義列表

使用dl標(biāo)簽來(lái)創(chuàng)建一個(gè)定義列表，使用dt來(lái)表示定義的內(nèi)容，使用dd來(lái)對(duì)內(nèi)容進(jìn)行解釋說(shuō)明

<dl>
       <dt>結(jié)構(gòu)</dt>
       <dd>結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)，結(jié)構(gòu)用來(lái)規(guī)定網(wǎng)頁(yè)中哪里是標(biāo)題，哪里是段落</dd>
       <dd>結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)，結(jié)構(gòu)用來(lái)規(guī)定網(wǎng)頁(yè)中哪里是標(biāo)題，哪里是段落</dd>
       <dd>結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)，結(jié)構(gòu)用來(lái)規(guī)定網(wǎng)頁(yè)中哪里是標(biāo)題，哪里是段落</dd>
   </dl>

1.1.1.4列表之間可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超鏈接

1.6.1 作用

超鏈接可以讓我們從一個(gè)頁(yè)面跳轉(zhuǎn)到其他頁(yè)面，或者是當(dāng)前頁(yè)面的其他的位置

1.6.2 定義

使用 a 標(biāo)簽來(lái)定義超鏈接

<a href="https://www.baidu.com">超鏈接</a>

1.6.3 屬性

1.6.3.1屬性1：href

指定跳轉(zhuǎn)的目標(biāo)路徑

值可以是一個(gè)外部網(wǎng)站的地址

也可以寫一個(gè)內(nèi)部頁(yè)面的地址

超鏈接是也是一個(gè)行內(nèi)元素，在a標(biāo)簽中可以嵌套除它自身外的任何元素

1.6.3.2 屬性2：target

用來(lái)指定超鏈接打開(kāi)的位置

_self 默認(rèn)值在當(dāng)前頁(yè)面中打開(kāi)超鏈接

_blank 在一個(gè)新的要么中打開(kāi)超鏈接

<a href="07.列表.html" target="_blank">超鏈接</a>

1.6.4其他

將#作為超鏈接的路徑的展位符使用

javascript：; 來(lái)作為href的屬性，此時(shí)點(diǎn)擊這個(gè)超鏈接什么也不會(huì)發(fā)生

將超鏈接的href屬性設(shè)置為#，這樣點(diǎn)擊超鏈接以后頁(yè)面不會(huì)發(fā)生跳轉(zhuǎn)，而是轉(zhuǎn)到當(dāng)前頁(yè)面的頂部的位置

跳轉(zhuǎn)到頁(yè)面的指定位置，只需將href屬性設(shè)置 #目標(biāo)元素的id屬性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三個(gè)自然段</a>
   <br><br>
<p>
  內(nèi)容多一點(diǎn)
</p>
<a href="#">這是一個(gè)新的超鏈接</a>
   <br><br>
<a href="javascript：;">這是一個(gè)新的超鏈接</a>
   <br><br>
<a id="bottom" href="#">回到頂部</a>

1.7圖片標(biāo)簽

img標(biāo)簽來(lái)引入外部圖片，img標(biāo)簽是一個(gè)自結(jié)束標(biāo)簽

屬性：src 屬性指定的是外部圖片的路徑（路徑規(guī)則和超鏈接是一樣的）

alt 圖片的描述，這個(gè)描述默認(rèn)情況下不會(huì)顯示，有些瀏覽器會(huì)圖片無(wú)法加載時(shí)顯示

<img src="./img/1.gif" alt="松鼠">

1.8內(nèi)聯(lián)框架

用于向當(dāng)前頁(yè)面中引入一個(gè)其他頁(yè)面

src 指定要引入的網(wǎng)頁(yè)的路徑
frameborder 指定內(nèi)聯(lián)框架的邊框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音視頻標(biāo)簽

1.8.1音頻

audio 標(biāo)簽用來(lái)向頁(yè)面中引入一個(gè)外部的音頻文件的

1.8.1.1 屬性

controls 是否允許用戶控制播放
autoplay 音頻文件是否自動(dòng)播放

如果設(shè)置了autoplay 則音樂(lè)在打開(kāi)頁(yè)面時(shí)會(huì)自動(dòng)播放

loop 音樂(lè)是否循環(huán)播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通過(guò)src來(lái)指定外部文件的路徑以外，還可以通過(guò)source來(lái)指定文件的路徑

<audio controls>
       <!-- 對(duì)不起，您的瀏覽器不支持播放音頻！請(qǐng)升級(jí)瀏覽器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2視頻

與 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

在table中使用tr表示表格中的一行，有幾個(gè)tr就有幾行
在tr中使用td表示一個(gè)單元格，有幾個(gè)td就有幾個(gè)單元格
rowspan 縱向的合并單元格
colspan 橫向的合并單元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

長(zhǎng)表格

可以將一個(gè)表格分成三個(gè)部分：

頭部 thead
主體 tbody
底部 tfoot

th 表示頭部的單元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合計(jì)</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合計(jì)</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格樣式

border-spacing: 指定邊框之間的距離

border-spacing: 0px;

border-collapse: collapse; 設(shè)置邊框的合并

border-collapse: collapse;

如果表格中沒(méi)有使用tbody而是直接使用tr，那么瀏覽器會(huì)自動(dòng)創(chuàng)建一個(gè)tbody，并且將tr全都放到tbody中tr不是table的子元素

3.表單（form）

使用form標(biāo)簽來(lái)創(chuàng)建一個(gè)表單
action 表單要提交的服務(wù)器的地址
數(shù)據(jù)要提交到服務(wù)器中，必須要為元素指定一個(gè)name屬性值

<input type="text" name="username">

單選按鈕

像這種選擇框，必須要指定一個(gè)value屬性，value屬性最終會(huì)作為用戶的填寫的值傳遞給服務(wù)器
checked 可以將單選按鈕設(shè)置為默認(rèn)選中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多選框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

下拉列表

<select name="haha">
          <option value="i">選項(xiàng)一</option>
          <option selected value="ii">選項(xiàng)二</option>
          <option value="iii">選項(xiàng)三</option>
      </select>

提交按鈕

<input type="submit" value="注冊(cè)">

屬性

autocomplete="off" 關(guān)閉自動(dòng)補(bǔ)全
readonly 將表單項(xiàng)設(shè)置為只讀，數(shù)據(jù)會(huì)提交
disabled 將表單項(xiàng)設(shè)置為禁用，數(shù)據(jù)不會(huì)提交
autofocus 設(shè)置表單項(xiàng)自動(dòng)獲取焦點(diǎn)

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按鈕 -->
      <input type="reset">
      <!-- 普通的按鈕 -->
      <input type="button" value="按鈕">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按鈕</button>
  </form>

4.注釋

<!--
我是注釋中的注釋 注釋不能嵌套
-->

5.屬性

屬性，在標(biāo)簽中（開(kāi)始標(biāo)簽或自結(jié)束標(biāo)簽）還可以設(shè)置屬性
屬性是一個(gè)名值對(duì)（x=y）
屬性用來(lái)設(shè)置標(biāo)簽中的內(nèi)容如何顯示
屬性和標(biāo)簽名或其他屬性應(yīng)該使用空格隔開(kāi)
屬性不能瞎寫，應(yīng)該根據(jù)文檔中的規(guī)定來(lái)編寫，有些屬性有屬性值，有些沒(méi)有。如果有屬性值，屬性值應(yīng)該使用引號(hào)引起來(lái)

6.文檔聲明

<!doctype html>

嘍大家好，我是作者“未來(lái)”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個(gè)階段，堅(jiān)持學(xué)習(xí)3個(gè)月蛻變?yōu)閃eb前端高手哦！

志同道合的小伙伴跟我一起學(xué)習(xí)交流哦！

因?yàn)樵诘木庉嬛小?”和“>”中的內(nèi)容都會(huì)被識(shí)別為代碼，顯示不出來(lái)內(nèi)容，所以，在文本中會(huì)省略“<”和“>”，圖片中的“<”和“>”不會(huì)省略。

第一階段 01 HTML5

07表格

1 表格table（會(huì)使用）

在HTML網(wǎng)頁(yè)中，要想創(chuàng)建表格，就需要使用表格相關(guān)的標(biāo)簽。創(chuàng)建表格的基本語(yǔ)法格式如下：

2 表格的注意事項(xiàng)

1 tr和 /tr中只能嵌套td和/td標(biāo)簽

2 td和/td標(biāo)簽，他就像一個(gè)容器，可以容納所有的元素

3 表格屬性

使用方法：

4 表頭標(biāo)簽

只需用表頭標(biāo)記th和/th替代相應(yīng)的單元格標(biāo)記td和/td即可。

顯示效果為加粗和居中。

5 表格結(jié)構(gòu)（了解）

在使用表格進(jìn)行布局時(shí)，可以將表格劃分為頭部、主體和頁(yè)腳（頁(yè)腳因?yàn)橛屑嫒菪詥?wèn)題，我們不在贅述），具體如下所示：

1 thead和/ thead：用于定義表格的頭部。

2 必須位于table和/ table標(biāo)簽中，一般包含網(wǎng)頁(yè)的logo和導(dǎo)航等頭部信息

3 tbody和/ tbody：用于定義表格的主體。

4 位于標(biāo)簽中，一般包含網(wǎng)頁(yè)中除頭部和底部之外的其他內(nèi)容。
6 瀏覽器審查HTML標(biāo)簽元素
瀏覽器頁(yè)面按F12打開(kāi)
左邊顯示為HTML，右邊顯示為CSS（后面會(huì)學(xué)到）
7 表格標(biāo)題標(biāo)簽
表格的標(biāo)題：caption
caption元素定義表格標(biāo)題。
caption標(biāo)簽必須緊隨table標(biāo)簽之后。只能對(duì)每個(gè)表格定義一個(gè)標(biāo)題。通常這個(gè)標(biāo)題會(huì)被居中于表格之上。
8 合并單元格
跨行合并：rowspan
跨列合并：colspan
“2”表示合并兩個(gè)單元格，數(shù)值是多少就合并多少個(gè)單元格。
看不懂的小伙伴不要?dú)怵H，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學(xué)習(xí)，每篇文章看三遍，一個(gè)月后，回過(guò)頭來(lái)看之前的文章就會(huì)感覺(jué)簡(jiǎn)單極了。
本章已結(jié)束，下篇文章將分享《08 表單和表單控件》小伙伴們不要錯(cuò)過(guò)喲！上述內(nèi)容是作者本人的學(xué)習(xí)筆記，需要原視頻學(xué)習(xí)資料可以在公眾號(hào)回復(fù)關(guān)鍵詞“前端資料”
之謙明星主題網(wǎng)頁(yè)設(shè)計(jì)模板由6個(gè)頁(yè)面組成，包括薛之謙簡(jiǎn)介，演藝經(jīng)歷，個(gè)人生活，代表作品，視頻，留言。

網(wǎng)頁(yè)設(shè)計(jì)效果圖：

在線咨詢

上一篇：CSS 實(shí)現(xiàn)弧形卡片的 3 種方式
下一篇：HTML5 Video(視頻)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商