html入門：語法、經常使用標籤、表格、表單、h5新增標籤

時間 2019-11-21

標籤 html 入門語法經常使用標籤表格表單 h5 新增欄目 HTML 简体版

原文原文鏈接

web標準（前端三劍客：html、css、js）php

網頁的結構（後綴名字爲html的文件），負責網頁的內容整理和分類
網頁的樣式（後綴名字爲css文件），負責設置網頁的板式，顏色，文字大小
網頁的行爲（後綴名字爲.js的文件），負責網頁的動態交互

1 認識html

概念：HTML（英文Hyper Text Markup Language的縮寫）中文譯爲「超文本標籤語言」，主要是經過HTML標籤對網頁中的文本、圖片、聲音等內容進行描述。css

說白了HTML就是用尖括號包裹起來的英文單詞，瀏覽器對這個尖括號包裹起來的英文單詞有特殊的解釋html

如：<strong>加粗</strong>  <h1>大標題</h1>  等等

HTML骨架

HTML有固定的基本格式，就跟咱們書信有基本的格式是同樣的前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網頁的標題</title>
</head>
<body>
  這裏寫內容
</body>
</html>

自動生成完整版骨架的快捷方式：! => tab鍵或者 html:5 => tab鍵web

標籤的關係

一、嵌套關係：html標籤嵌套head標籤瀏覽器

<html>
<head></head>
</html>

二、並列關係：head標籤與body標籤並列ide

<head></head>
<body></body>

2 認知標籤

2.1 經常使用標籤

一、標題標籤
<hn>標題內容</hn>   其中n的取值範圍是1-6（1的權重最高，6最小）

二、段落標籤
<p>段落內容</p>

三、水平線標籤
<hr> 單標籤，做用是呈現一個水平線

四、換行標籤
<br> 單標籤，做用是換行

2.2 字體格式化標籤

一、加粗字體
<strong>字體加粗</strong> <b>字體加粗</b>

二、傾斜字體 
<em>字體傾斜</em> <i>字體傾斜</i>

三、字體貫穿線，也就是刪除線
<del>字體貫穿</del> <s>字體貫穿</s> 

四、字體下劃線
<ins>字體下劃線</ins> <u>字體下劃線</u>

可使用不一樣的標籤完成功能，如加粗字體標籤，可使用strong，也可使用b，但建議使用具備語義的標籤，如加粗字體標籤：strong。工具

一個是標籤語義強，起強調做用。一個是沒有語義，沒有強調做用。語義好的網頁更受SEO的喜歡，在搜索引擎裏面的排名會更靠前。oop

SEO優化：
在輸入關鍵字的時候，搜索引擎會羅列不少不少的網頁出來，而用戶基本習慣都是點前面的網頁，不會去點後面的網頁，因此若是網頁在搜索引擎中的排名更加靠前，那麼天然而然會帶來更多的用戶點擊訪問。

2.3 標籤屬性

在使用標籤的時候，一個獨立的標籤比較單一不能完成一些需求，這個時候就能夠藉助於標籤的屬性來完成。多個屬性之間用空格隔開。佈局

<標籤 屬性名1=「屬性值1」 屬性值2=「屬性值2」> 
 
<!-- 如：<hr color="red"/> -->

2.4 圖片標籤

<img src="圖片的地址" alt="圖片的替換文本" title="圖片的標題" />

圖片標籤屬性：
一、src 圖片的地址
二、alt 圖片加載失敗後的替換文本
三、title 鼠標移到圖片上，顯示圖片的標題
四、width="100" height="200" （樣式屬性都會經過CSS實現）

2.5 連接標籤

<a href="連接地址" target="連接打開方式"></a>

<!--<a href="http://www.baidu.com" target="_blank">百度一下</a>-->

連接標籤屬性：
一、href 跳轉的連接地址
二、target 連接打開的方式

一、target的取值

_self 默認值，當前窗口覆蓋打開連接
_blank 新建窗口打開連接

二、href 跳轉地址分類

站外跳轉：http://www.baidu.com
站內跳轉：本地文件路徑
錨點跳轉（頁面內部跳轉）：

<!-- 在須要跳轉的標籤上添加 id="自定義id名"   如：<p id="myid"></p>
    讓a標籤的href屬性等於以前本身自定義的id名 如：<a href="#自定義的id名字" /> -->

<!-- 跳轉到薪水的位置 -->
<a href="#target_salary">個人薪水</a>

<p id="target_salary">10000+</p>

2.6 路徑（地址）

一、絕對地址：從盤符或者http://出發去找目標文件的過程...

<!-- http://開頭-->
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度圖片">

<!--盤符開頭-->
<img src="c:\img\1.png">

二、相對地址：從當前文件出發去找目標文件的過程就稱之爲相對路徑

同級目錄：路徑直接寫目標文件的名稱便可
非同級目錄：上一級目錄（../）下一級目錄（文件名/）

<!-- 同級目錄 -->
<img src="img.png"/>

<!-- 非同級目錄：上一級目錄 -->
<img src="../img.png"/>

<!-- 非同級目錄：下一級目錄 -->
<img src="img/img.png"/>

2.7 列表

2.7.1 列表分類

一、無序列表
列表之間沒有順序，在實際工做中用的比較多。li標籤至關於一個容器，能夠容納因此元素。

<ul>
    <li>無序列表1</li>
    <li>無序列表2</li>
    <li><a href="02_test.html">無序列表3</a></li>
</ul>

二、有序列表
列表之間有順序，在實際工做中用的較少。

<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

三、自定義列表
能夠針對一個列表標題充分解釋，特定狀況下使用。

<dl>
    <dt>列表標題</dt>
    <dd>列表標題的解釋說明</dd>
    <dd>列表標題的解釋說明</dd>
</dl>

2.7.2 列表注意事項

一、<ul></ul>或者<ol></ol>中只能嵌套<li></li>，直接在<ul></ul><ol></ol>標籤中輸入其餘標籤或者文字的作法是不被容許的。

 二、<li>與</li>之間至關於一個容器，能夠容納全部元素。

 三、<dl></dl>中只能嵌套<dt></dt>和<dd></dd>，直接在<dl></dl>標籤中輸入其餘標籤或者文字的作法是不被容許的。

 四、<dd></dd>之間至關於一個容器，能夠容納全部元素。<dt></dt>同樣

2.8 註釋和特殊字符

2.8.1 註釋

瀏覽器不解析的標籤，做用是用來提示開發人員或者便於開發人員理解和閱讀。WebStorm工具註釋快捷鍵command + / （MacBook）

<!-- 註釋 -->

2.8.2 特殊字符

在一些狀況下，咱們須要在頁面上顯示一些特殊的標識的時候，咱們就須要用到字符實體。

&lt;p&gt;&lt;/p&gt;

<!-- 網頁展現以下那內容 -->
<p></p>

3 表格標籤

<table>
    <tr>
        <td>姓名</td>
        <td>性別</td>
        <td>年紀</td>
        <td>成績</td>
    </tr>

    <tr>
        <td>張三</td>
        <td>男</td>
        <td>23</td>
        <td>99</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>男</td>
        <td>30</td>
        <td>88</td>
    </tr>
</table>

一、表格至少有三個基本的標籤構成：table 表明一個表格， tr表明行， td表明單元格
二、tr必須嵌套在table標籤中，td必須嵌套在tr或者th中
三、有幾個單元格就表明有幾列

3.1 表格屬性

borde 表格的邊框（瞭解）
width 表格的寬度（瞭解）
cellspacing 單元格與單元格的間距
cellpadding 單元格與單元格內容的間距
align 表格的對齊方式，值如：left、center、right（瞭解）

3.2 表格的表頭標籤

在合適的位置將td替換成th便可，th標籤相對td來講更有語義性，而且會將內部的文字加粗且居中

<table border="1" cellspacing="0" cellpadding="10">
     <tr>
         <th>姓名</th>
         <th>性別</th>
         <th>年紀</th>
         <th>成績</th>
    </tr>
</table>

3.3 表格的結構

thead標籤表示表頭部分，tbody標籤表示表體部分，caption標籤表示表格的標題。表格的結構不是必定須要的，可是添加上表格的結構會使表格的語義更明確。

<table border="1" cellspacing="0" cellpadding="10">
    <caption>成績管理系統</caption>

    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年紀</th>
            <th>成績</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>23</td>
            <td>89</td>
        </tr>
    </tbody>
</table>

3.4 合併單元格

單元格的合併分爲：跨行和跨列合併
一、跨行合併： rowspan 上下合併將rowspan寫在上面的單元格上
二、跨列合併： colspan 左右合併將colspan寫在左邊的單元格上

<table border="1" width="800" cellspacing="0" cellpadding="8" align="center">

    <caption>成績管理系統</caption>
    <tr>
        <td>姓名</td>
        <td>性別</td>
        <td>年紀</td>
        <td>成績</td>
    </tr>

    <tr>
        <td>張三</td>
        <td>男</td>
        <td>23</td>
        <td rowspan="2">99</td>
    </tr>

    <tr>
        <td>kerwin</td>
        <td rowspan="2">女</td>
        <td>30</td>
    </tr>

    <tr>
        <td>張三</td>
        <td>23</td>
        <td>89</td>
    </tr>

    <tr>
        <th>備註</th>
        <td colspan="3"></td>
    </tr>

</table>

4 表單標籤

做用：收集用戶信息發送給後臺

三大組成部分：

表單域（將內部包含的表單信息都收集起來發送給後臺）
提示文本（提示用戶當前表單的輸入內容）
表單（真正用來收集用戶信息）

4.1 表單的分類

<input type="">

type的取值：

text 單行文本輸入框
password 密碼框
radio 單選框（在多個裏面選擇一個）單選框要生效必須具有name屬性而且同一種類型的單選框的name取值必須同樣
checkbox 複選框（在多個裏面選擇某幾個）
button 普通按鈕
file 用戶上傳控件
submit 提交按鈕，收集表單域裏面的用戶信息提交給後臺

補充：一、radio和checkbox 默認選中項須要使用checked屬性

二、value屬性表明表單裏面包含的值

三、表單若是想被提交，都須要寫上name屬性（目前不涉及數據提交，能夠不寫；單選框radio因爲特殊性，若是不寫就會不能有單選的效果，因此單選框）

四、單行文本輸入框，使用maxlength屬性能夠限制輸入的最大字符數

4.2 其它表單補充

一、textarea 多行文本輸入框

<textarea rows="5" cols="60"></textarea>

rows 默認顯示的行數
cols 默認顯示的列數，超過指定數字，自動換行

二、select 下拉菜單

<select>
    <option value="上海">上海</option>
    <option value="北京" selected>北京</option>
    <option value="安徽">安徽</option>
</select>

select下拉框的默認選中項使用selected屬性

三、label標籤會自動關聯表單，點文字的時也至關於點了表單，體驗更好

<label><input type="radio" name="sex"> 男</label>
<label><input type="radio" name="sex"> 女</label>
<label>用戶名：<input type="text"></label>

4.2 表單域

做用：將內部的表單裏面的value值收集起來發送給後臺

<form action="" method=""></form>

action 提交的後臺地址
method 提交的方法，取值：get post

4.3 容器標籤 div 和 span

<div>
    我是一個div，我通常用來作模塊佈局
</div>

<span>
    我是一個span標籤，我通常用來包文字
</span>

表單案例：

<form action="demo.php" method="get">
    用戶名：<input type="text" name="username" maxlength="10">
    密碼：<input type="password" name="password">
    <br>

    性別：<input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
    <br>

    愛好：<input type="checkbox" value="讀書" name="hobby"> 讀書
    <input type="checkbox" value="打籃球" name="hobby"> 打籃球
    <input type="checkbox" checked="checked" value="旅遊" name="hobby"> 旅遊
    <br>

    圖片上傳：<input type="file">
    <br>

    <select name="city">
        <option value="上海">上海</option>
        <option value="北京" selected>北京</option>
        <option value="安徽">安徽</option>
    </select>
    <br>

    請介紹本身：
    <textarea rows="1" cols="2" name="introduce"></textarea>
    <br>

    <input type="button" value="按鈕">
    <br>
    <input type="submit">
</form>

5 h5新增的標籤及其表單屬性

5.1 h5新增的標籤

header,nav,section,footer,aside,article

這些新增標籤的功能使用div標籤都能實現，且使用方式跟div一摸同樣，但div標籤沒有語義性，搜索引擎不知道這個標籤內部裝的是什麼，因此這樣的話搜索引擎不喜歡這樣的網頁。

header 表示header裏面包裹的東西是網站的頭部區域
nav 表示nav裏面包裹的東西是網站的導航
section 表示裏面包裹的東西是網頁的某一個模塊
footet 表示footer標籤裏面包裹的東西是網頁的頁腳
aside 表示aside標籤裏面包裹的東西是網頁的側邊欄
article 表示article標籤裏面包裹的東西是網頁的文章頁

5.2 h5新增的表單和新屬性

一、h5新增的表單

<!--滑塊-->
<input type="range">

<!--日期控件-->
<input type="date">

<!--喚醒數字鍵盤-->
<input type="number">

二、表單新增屬性

placeholder 佔位文本
autofocus 自動獲取焦點
autocomplete 自動補全
required 自動驗證表單

請輸入用戶名：<input type="text" placeholder="請輸入用戶名">

5.3 多媒體標籤

一、視頻標籤

網頁中插入視頻有兩種方法：

第一種方法：將視頻文件上傳到第三方網站獲取其分享代碼放到本身的頁面中便可，如上傳到優酷視頻網站，沒有兼容性可是有廣告植入。
第二種方法：使用h5新增的video標籤，沒有廣告，可是有兼容性問題，通常運行在手機端。

<video src=""></video>

video標籤經常使用的屬性：

autoplay 自動播放
controls 播放控件
loop 循環播放

video的格式支持 ogg,mp4,webm 不一樣的瀏覽器支持的格式不同，因此出現了一種兼容寫法:前提是準備三種格式的視頻文件。

<video autoplay>
    <source src="視頻1.ogg">
    <source src="視頻1.mp4">
    <source src="視頻1.webm">
    <a href="#">你的瀏覽器不支持video，點擊升級吧</a>
</video>

瀏覽器會從上到下依次去讀，在這個過程當中，只要讀到本身識別的視頻文件就直接播放這個視頻文件，而且不會再日後繼續讀取。實測：目前的主流瀏覽器對mp4的支持都比較好

二、音頻標籤
音頻標籤的使用和視頻標籤的使用基本一致，兼容性處理。

<audio>
    <source src="音頻1.ogg">
    <source src="音頻1.mp3">
    <source src="音頻1.webm">
    <a href="#">你的瀏覽器不支持audio，點擊升級吧</a>
</audio>

audio標籤的經常使用屬性 1.autoplay 自動播放 2.controls 播放控件 3.loop 循環播放

知識補充

字符集的設置

字符集的核心點就是若是設置了以什麼字符集進行讀取，那麼在保存的時候也須要設置成對應的字符集

utf-8 收錄了全世界全部國家的語言文字
gbk 收錄的是漢字

utf-8 > gbk 因此查詢來講的話gbk的查詢和存儲都小於utf-8 可是如今國際主流都是utf-8，因此爲了後期的考慮，都用utf-8

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。