1、HTML

時間 2019-11-24

標籤 html 欄目 HTML 简体版

原文原文鏈接

html概述和基本結構

html概述

HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。javascript

html基本結構

一個html的基本結構以下：css

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

第一行是文檔聲明，第二行「<html>」標籤和最後一行「</html>」定義html文檔的總體，「<html>」標籤中的‘lang=「en」’定義網頁的語言爲英文，定義成中文是'lang="zh-CN"',不定義也沒什麼影響，它通常做爲分析統計用。「<head>」標籤和「<body>」標籤是它的第一層子元素，「<head>」標籤裏面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，「<body>」內編寫網頁上顯示的內容。html

HTML文檔類型

目前經常使用的兩種文檔類型是xhtml 1.0和html5前端

xhtml 1.0

xhtml 1.0 是html5以前的一個經常使用的版本，目前許多網站仍然使用此版本。
此版本文檔用sublime text建立方法： html:xt + tab
文檔示例：html5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title> xhtml 1.0 文檔類型 </title>
</head>
<body>

</body>
</html>

html5

pc端可使用xhtml 1.0，也可使用html5，html5是向下兼容的
此版本文檔用sublime text建立方法： html:5 + tab 或者 ! + tab
文檔示例：java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> html5文檔類型 </title>
</head>
<body>

</body>
</html>

兩種文檔的區別

一、文檔聲明和編碼聲明web

二、html5新增了標籤元素以及元素屬性瀏覽器

html文檔規範

xhtml制定了文檔的編寫規範，html5可部分遵照，也可所有遵照，看開發要求。框架

一、全部的標籤必須小寫編輯器

二、全部的屬性必須用雙引號括起來

三、全部標籤必須閉合

四、img必需要加alt屬性(對圖片的描述)

html註釋：

html文檔代碼中能夠插入註釋，註釋是對代碼的說明和解釋，註釋的內容不會顯示在頁面上，html代碼中插入註釋的方法是：

<!-- 這是一段註釋  -->

html標籤特色：

html的標籤大部分是成對出現的,少許是單個出現的，特定標籤之間能夠相互嵌套，嵌套就是指一個標籤裏面能夠包含一個或多個其餘的標籤，包含的標籤和父標籤能夠是同類型的，也能夠是不一樣類型的：

<!-- 成對出現的標籤  -->
<body>......</body>
<p>......</p>
<div>......</div>
<b>......</b>

<!-- 單個出現的標籤  -->
<br />
<img src="..." />
<input type="..." />

<!-- 標籤之間的嵌套  -->
<p>
    <span>...</span>
    <a href="...">...</a>
</p>
<div>
      <h3>...</h3>
      <div>
              <span>...</span>
              <p>...</p>
      </div>
</div>

html標題

經過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標籤能夠在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關係，好比說： <h1>用做主標題（最重要的），其後是 <h2>（次重要的），再其次是 <h3>，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，因此網頁上使用標題是很重要的。

html段落、換行與字符實體

html段落

<p>標籤訂義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超
    文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的
    標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm。
    </p>

    <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方
    式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網
    頁能夠從一個網頁連接跳轉到另一個網頁。</p>
</body>
</html>

html換行

代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，若是真想換行，能夠在代碼的段落中插入<br />來強制換行，代碼以下：

<p>
一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用<br />
文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件<br />
渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。
</p>

html字符實體

代碼中成段的文字，若是文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，若是想顯示多個空格，可使用空格的字符實體,代碼以下：

<!--  在段落前想縮進兩個文字的空格，使用空格的字符實體：&nbsp;   -->
<p>
&nbsp;&nbsp;一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用<br />
文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件<br />
渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。</p>

在網頁上顯示「<」和「>」會誤認爲是標籤，想在網頁上顯示「<」和「>」可使用它們的字符實體，好比：

<!-- 「<」 和 「>」 的字符實體爲 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

html塊、含樣式的標籤

html塊

一、div標籤塊元素，表示一塊內容，沒有具體的語義。
二、span標籤行內元素，表示一行中的一小段內容，沒有具體的語義。

含樣式和語義的標籤

一、em標籤行內元素，表示語氣中的強調詞
二、i標籤行內元素，本來沒有語義，w3c強加了語義，表示專業詞彙
三、b標籤行內元素，本來沒有語義，w3c強加了語義，表示文檔中的關鍵字或者產品名
四、strong標籤行內元素，表示很是重要的內容

語義化的標籤

語義化的標籤，就是在佈局的時候多使用語義化的標籤，搜索引擎在爬網的時候能認識這些標籤，理解文檔的結構，方便網站的收錄。好比：h1標籤是表示標題，p標籤是表示段落，ul、li標籤是表示列表，a標籤表示連接，dl、dt、dd表示定義列表等，語義化的標籤很少。

html圖像、絕對路徑和相對路徑

html圖像

<img>標籤能夠在網頁上插入一張圖片，它是獨立使用的標籤，經過「src」屬性定義圖片的地址，經過「alt」屬性定義圖片加載失敗時顯示的文字，以及對搜索引擎和盲人讀屏軟件的支持。

<img src="images/pic.jpg" alt="產品圖片" />

絕對路徑和相對路徑

像網頁上插入圖片這種外部文件，須要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分爲絕對地址和相對地址。

絕對地址：相對於磁盤的位置去定位文件的地址
相對地址：相對於引用文件自己去定位被引用的文件地址

絕對地址在總體文件遷移時會由於磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：

「 ./ 」表示當前文件所在目錄下，好比：「./pic.jpg」表示當前目錄下的pic.jpg的圖片，這個使用時能夠省略。
「 ../ 」表示當前文件所在目錄下的上一級目錄，好比：「../images/pic.jpg」表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。

html連接

<a>標籤能夠在網頁上定義一個連接地址，經過href屬性定義跳轉的地址，經過title屬性定義鼠標懸停時彈出的提示文字框。

<a href="#"></a> <!--  # 表示連接到頁面頂部   -->
<a href="http://www.itcast.cn/" title="跳轉的傳智播客網站">傳智播客</a>
<a href="2.html">測試頁面2</a>

定義頁面內滾動跳轉

頁面內定義了「id」或者「name」的元素，能夠經過a標籤連接到它的頁面滾動位置，前提是頁面要足夠高，有滾動條，且元素不能在頁面頂部，不然頁面不會滾動。

<a href="#mao1">標題一</a>
......
......
<h3 id="mao1">跳轉到的標題</h3>

html列表

有序列表

在網頁上定義一個有編號的內容列表能夠用<ol>、<li>配合使用來實現，代碼以下：

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在網頁上生成的列表，每條項目上會按一、二、3編號，有序列表在實際開發中較少使用。

無序列表

在網頁上定義一個無編號的內容列表能夠用<ul>、<li>配合使用來實現，代碼以下：

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

在網頁上生成的列表，每條項目上會有一個小圖標，這個小圖標在不一樣瀏覽器上顯示效果不一樣，因此通常會用樣式去掉默認的小圖標，若是須要圖標，能夠用樣式自定義圖標，從而達到在不一樣瀏覽器上顯示的效果相同,實際開發中通常用這種列表。

定義列表

定義列表一般用於術語的定義。<dl>標籤表示列表的總體。<dt>標籤訂義術語的題目。<dd>標籤是術語的解釋。一個<dl>中能夠有多個題目和解釋，代碼以下：

<h3>前端三大塊</h3>
<dl>
    <dt>html</dt>
    <dd>負責頁面的結構</dd>

    <dt>css</dt>
    <dd>負責頁面的表現</dd>

    <dt>javascript</dt>
    <dd>負責頁面的行爲</dd>

</dl>

html表格

table經常使用標籤

一、table標籤：聲明一個表格

二、tr標籤：定義表格中的一行

三、td和th標籤：定義一行中的一個單元格，td表明普通單元格，th表示表頭單元格

table經常使用屬性：

一、border 定義表格的邊框

二、cellpadding 定義單元格內內容與邊框的距離

三、cellspacing 定義單元格與單元格之間的距離

四、align 設置單元格中內容的水平對齊方式,設置值有：left | center | right

五、valign 設置單元格中內容的垂直對齊方式 top | middle | bottom

六、colspan 設置單元格水平合併

七、rowspan 設置單元格垂直合併

傳統佈局：

傳統的佈局方式就是使用table來作總體頁面的佈局，佈局的技巧概括爲以下幾點：

一、定義表格寬高，將border、cellpadding、cellspacing所有設置爲0

二、單元格里面嵌套表格

三、單元格中的元素和嵌套的表格用align和valign設置對齊方式

四、經過屬性或者css樣式設置單元格中元素的樣式

傳統佈局目前應用：

一、快速製做用於演示的html頁面

二、商業推廣EDM製做(廣告郵件)

表格經常使用樣式屬性

border-collapse:collapse 設置邊框合併，製做一像素寬的邊線的表格

html表單

表單用於蒐集不一樣類型的用戶輸入，表單由不一樣類型的標籤組成，實現一個特定功能的表單區域（好比：註冊），首先應該用<form>標籤來定義表單區域總體，在此標籤中再使用不一樣的表單控件來實現不一樣類型的信息輸入，具體實現及註釋可參照如下僞代碼：

<!-- form定義一個表單區域,action屬性定義表單數據提交的地址，
method屬性定義提交的方式。   -->
<form action="http://www..." method="get">

<!-- label標籤訂義表單控件的文字標註，input類型爲text定義了
一個單行文本輸入框  -->
<p>
<label>姓名：</label><input type="text" name="username" />
</p>

<!-- input類型爲password定義了一個密碼輸入框  -->
<p>
<label>密碼：</label><input type="password" name="password" />
</p>

<!-- input類型爲radio定義了單選框  -->
<p>
<label>性別：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>

<!-- input類型爲checkbox定義了單選框  -->
<p>
<label>愛好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>

<!-- input類型爲file定義上傳照片或文件等資源  -->
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>

<!-- textarea定義多行文本輸入  -->
<p>
<label>我的描述：</label>
<textarea name="about"></textarea>
</p>

<!-- select定義下拉列表選擇  -->
<p>
<label>籍貫：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">廣州</option>
    <option value="3">深圳</option>
</select>
</p>

<!-- input類型爲submit定義提交按鈕  
     還能夠用圖片控件代替submit按鈕提交，通常會致使提交兩次，不建議使用。如：
     <input type="image" src="xxx.gif">
-->
<p>
<input type="submit" name="" value="提交">

<!-- input類型爲reset定義重置按鈕  -->
<input type="reset" name="" value="重置">
</p>

</form>

html內嵌框架

<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

內嵌框架與a標籤配合使用

a標籤的target屬性能夠將連接到的頁面直接顯示在當前頁面的iframe中，代碼以下：

<a href="01.html" target="myframe">頁面一</a>
<a href="02.html" target="myframe">頁面二</a>
<a href="03.html" target="myframe">頁面三</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>

HTML5新結構標籤

h5新增的主要語義化標籤以下：

一、header 頁面頭部、頁眉
二、nav 頁面導航
三、article 一篇文章
四、section 文章中的章節
五、aside 側邊欄
六、footer 頁面底部、頁腳

頁面使用標籤佈局示意圖：

PC端兼容h5的新標籤的方法，在頁面中引入如下js文件:

<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

HTML5 新增表單控件

新增類型：網址郵箱日期時間星期數量範圍電話顏色搜索

<label>網址:</label><input type="url" name="" required><br><br> 
<label>郵箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>時間:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>數量:</label><input type="number" name=""> <br><br>
<label>範圍:</label><input type="range" name=""><br><br> 
<label>電話:</label><input type="tel" name=""><br><br> 
<label>顏色:</label><input type="color" name=""><br><br> 
<label>搜索:</label><input type="search" name=""><br><br>

新增經常使用表單控件屬性：
一、placeholder 設置文本框默認提示文字
二、autofocus 自動得到焦點
三、autocomplete 聯想關鍵詞

HTML5 音頻和視頻

html5增長了audio和video標籤，提供了在頁面上插入音頻和視頻的標準方法。

audio標籤
支持格式：ogg、wav、mp3

對應屬性：
一、autoplay 自動播放
二、controls 顯示播放器
三、loop 循環播放
四、preload 預加載
五、muted 靜音

舉例：

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

<!-- 或者用以下方式：  -->

<audio  autoplay controls loop preload>
    <source src="source/audio.mp3" type="">
    <source src="source/audio02.wav" type="">
</audio>