HTML真零基礎教程

時間  2019-12-19
標籤 html 零基礎 教程 欄目 HTML 简体版
原文   原文鏈接

這是爲徹底沒有接觸過的童鞋寫的，屬於真正的傻瓜式教程，固然因爲本人也不是什麼大佬，可能有些知識的理解與本身想的不同，若是有大佬看到，還請幫我指出。如下主要是HTML5的基礎標籤的使用。javascript

開發前的準備

預備知識

HTML全稱Hypertext Marked Language，便是超標記文本語言，不是編程語言。php

HTML文件就是網頁文件，網頁文件自己是一種文本文件，經過在文本文件中添加標記符，能夠告訴瀏覽器如何顯示其中的內容。css

瀏覽器按順序閱讀網頁文件，而後根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，也就是不會報錯，並且不會中止執行過程，開發者只能經過顯示效果來分析出錯緣由和出錯部位。html

對於不一樣的瀏覽器，對同一標記符可能會有不徹底相同的解釋，於是可能會有不一樣的顯示效果。前端

HTML5 是現在的最新版，以前還有什麼HTML4，HTML3這些，不過現在已通過時，如今用的基本是HTMML5。在這更新的過程當中，HTML5新增了一些新的內容，也廢棄了HTML4的一些內容，由於是第五次修改，因此叫HTML5。java

開發環境

HTML的開發環境很簡單，一個文本編輯器和一個瀏覽器便可。web

正所謂工欲善其事，必先利其器，雖然HTML用記事本也是能夠寫，但太慢了，並且直接打開記事本寫完代碼再改後綴名爲.html是行不通的，正常的作法是先新建記事本，再改後綴名，而後再用記事本打開這個文件，以後就能夠編寫代碼。面試

在這裏推薦hbuilder，vs code，sublime text。編程

根據不一樣的場景能夠選擇不一樣的編輯器，sublime text 的優勢是輕便，安裝相應的插件就能夠開發相應的語言，但安裝插件比較麻煩，因此若是隻是小型項目，推薦使用它，若是是大型項目，請使用vs code。canvas

vs code 雖然啓動速度相對於 sublime text 慢，但它安裝插件容易，並且有內置的終端，大型項目不少時候都須要使用命令行。

hbuilder若是是開發混合APP的話，可使用它

瀏覽器這裏推薦用谷歌瀏覽器。

2 HTML基礎知識

HTML的基本結構

<!DOCTYPE html>
<html>
<head>
    <title>網頁標題</title>
    <meta charset="utf-8">
</head>
<body>
    
</body>
</html>

這個是HTML的大體結構，在sublime_text裏，只要新建好html文件後，輸入html，而後按tab鍵，便可獲得一個大體的結構，最後再本身添加上這段代碼便可，<meta charset="utf-8">

接下來，以上面的代碼爲例，介紹每行代碼表明的意義。

<!DOCTYPE html>這個是否是標籤，我也不清楚，網上資料有些說是，有些說不是，雖然我我的認爲不是，不過這不重要，由於無論是否是標籤，它都必須寫上、

讓瀏覽器知道這個頁面用HTML5這個版本進行編寫，固然也能夠寫成這樣<!doctype html>

因此第一行代碼就是讓瀏覽器知道這是用HTML5進行編碼

至於HTML4，有三種聲明，並且都有些差別，不過這都不重要，只要知道這些是HTML4就行，如今沒人用HMTL4了，除了很是古老的網頁。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

接下來是第二行，是一個標籤<html>，不過它應該和第十行的代碼</html>一塊兒看，它在瀏覽器上看不到效果的，它告訴瀏覽器這是一個文檔，它限定了文檔的起始點和終點。

<head>是頭部，至關於人頭腦，裏面儲存的數據大多不會被做爲內容顯示出來，好比元信息，引入樣式表之類的。

<title>這個是標題，一個HTML文檔，有且只有一個，它就是瀏覽器標籤上的文字

<meta charset="utf-8">

這個是字符集告訴瀏覽器用utf-8這個字符集去解析，若是不用，中文會出現亂碼，不過像谷歌不會，要用ie瀏覽器。

可是值得注意的是瀏覽器會首先嚐試從服務的HTTP響應頭部(特別是Content-type頭部)來肯定字符集，響應頭部中聲明的字符集，一般優先於文檔中指定的字符集。

若是響應頭部沒有字符集，文檔也沒有字符集，瀏覽器本身會爲你選擇一個字符集，但可能不是你想要的。

<body>這個是身體，主要就是HTML的主體內容了，全部要顯示的都是放在這裏的。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    全部內容都寫在body裏
    hello world
    <p>vs code</p>
</body>
</html>

註釋

編程語言有註釋，標記語言也有本身的註釋，註釋的內容不會被解析。

<!-- 這個是註釋 -->
<!-- 
在這個裏面的都是HTML的註釋
-->

標籤的結構

標籤有雙標籤和單標籤。

像body，html這些都是雙標籤，像meta這就是單標籤，也叫自閉合標籤，不過單標籤仍是較少，之後不是特別說明，就都是雙標籤。

雙標籤和單標籤都本身的書寫規則

<title>標題</title>
<!-- <title> 是起始標籤
     </titlt>    是閉合標籤
    中間的就是標籤的內容
-->

<meta />或<meta>
這種是單標籤

雖然就算雙標籤只寫一個瀏覽器也能正確解析，可是不規範。

標籤的屬性和值

每一個標籤都擁有本身的屬性，每一個屬性也有本身所擁有的值

屬性和值的寫法是這樣的屬性="值"

<meta charset="utf-8" />
charset  這個即是屬性
utf-8   這個是值

塊級元素、行內元素、行內塊元素

塊級元素就是獨佔一行的，且有本身的寬高

<p>
    第一行
</p>
<p>
    第二行
</p>

行內元素會排同在同一行，且沒有寬高，寬高由元素的內容決定

<span>在同一行></span><span>在同一行></span>

行內塊元素，排在同一行，且有本身的寬高

<button>
    按鈕
</button>
<button width="200" height="200">
    按鈕
</button>

標籤的大小寫

HTML對大小寫不敏感，大寫小寫都行，但這裏推薦使用小寫。

3 標籤的基本使用

這裏主要寫常常用到的，由於標籤是在是太多了，只要知道怎麼看，其餘標籤去網站了解就行

標籤請參考https://www.runoob.com/tags/ref-byfunc.html

h1~h6

h1,h2,h3,h4,h5,h6這六個分別是一級標題，二級標題，如此類推，直到六級標題

注意：在一個網頁中一級標題只能有一個，雖然能夠有多個，但不規範。

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

p標籤

p標籤表明文章的段落

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

br標籤

<br >單標籤，表明換行

<p>
    這裏是用\n發現換行不了
</p>
<p>
    這裏用br<br>發現換行了
</p>
<p>
    你就算這樣也換行不了
    換行不了
    會排成一行，只能用br
</p>

hr標籤

hr 單標籤，水平分割線，和麪試官那些hr沒有半毛錢關係

<p>
    段落
</p>
<hr>
<p>
    段落
</p>

實體字符

編程語言有轉義字符，標記語言有實體字符，一些沒法顯示的符號都是用實體字符來代替，好比<、>還有空格

<p>
    我這裏寫了                  不少的空格，可真正顯示出來的只有一個空格，怎麼搞，就要用實體符號
</p>
<!-- &nbsp; 是 空格的實體符號 -->
<p>
    寫多少個&nbsp;就有多少個空格，&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分號不要省，瀏覽器不會把實體字符顯示出來的，至關於編程語言裏的轉義字符。
</p>

如下是經常使用的實體字符，另外還有什麼數學符號的實體字符，希臘字母的實體字符，想要知道自行查看

https://www.runoob.com/tags/html-symbols.html

經常使用字符以及HTML實體 描述以及說明
&nbsp; 空格咱們使用最多的空格，也就是按下space鍵產生的空格
&ensp; 空格佔據的寬度正好是1/2箇中文寬度
&emsp; 空格佔據的寬度正好是1箇中文寬度
&thinsp; 空格佔據的寬度比較小
&times; 叉叉×
&laquo; «
&raquo; »
&lt; 小於號<
&gt; 大於號>
&amp; 和號&
&#39;IE支持或&apos;IE不支持 ''單引號
&quot; ""雙引號
&copy; 版權©
&reg; 註冊商標®

div標籤

div是容器，沒有任何特殊的效果，不像什麼a標籤，img同樣有特殊的做用

也不是語義化標籤，但仍是很經常使用的

div就像ps裏面的組同樣，不少個有些關係的圖層，會把它塞到組裏面，這個組也就是div了。

<div>
    <p>
        段落
    </p>
    
    <a href="#">連接</a>
    <p>
        上面的href="#" 跳轉的就是當前頁面
    </p>
</div>

span標籤

span 是行內元素

<p>
    <span>待</span>
    <span>到</span>
    <span>陰</span>
    <span>陽</span>
    <span>逆</span>
    <span>轉</span>
    <span>時</span>
    <br />
    <span>以</span>
    <span>我</span>
    <span>魔</span>
    <span>血</span>
    <span>染</span>
    <span>靑</span>
    <span>天</span>
</p>

塊級元素能夠包裹行內元素，但行內元素不能包裹塊級元素，如下代碼是錯誤的

<span>
    <p>
        仙路盡頭誰爲峯，一見無始道成空
    </p>
</span>

經常使用文本標籤

i 斜體 i 斜體 如今是個語義化標籤了，通常用來表示分類設計，一個技術術語，一種思想，一個習慣短語或者某種其餘的文本。

b 粗體 b 粗體  用來在字面上和常規的內容形式區分開來，而沒有傳達任何額外的重要性，好比用於關鍵字，產品名稱或其餘內容。

del 定義被刪除的文本 del 定義被刪除的文本

s 定義有刪除線的文本 s 定義有刪除線的文本

ins 插入文本 ins 插入文本

u 下劃線 u 下劃線

雖然從表現看 u和ins，del和s的效果同樣，但表明的意義不一樣

sub 定義下標文本

log2 代碼以下

<b>log<sub>2</sub></b>

sup 定義上標文本

22 代碼以下

<b>2<sup>2</sup></b>

kbd 鍵盤文本 ctrl 不過這個標籤已經廢棄

code 計算機代碼文本 String srt = "hello world"

abbr 定義縮寫

The WHO was founded in 1948.

<p>The <abbr  title="World Health Organization">WHO</abbr> was founded in 1948.</p>
這個title屬性是當鼠標放上去時就會出現它的內容

bdo 定義文字的書寫方向

該段落文字從左到右顯示。

該段落文字從右到左顯示。

<p>該段落文字從左到右顯示。</p>  
<p><bdo dir="rtl">該段落文字從右到左顯示。</bdo></p>

dir 是 bdo的 屬性，它有兩個值ltr，rtl 默認是ltr從左到右顯示

pre 格式化文本，在這個標籤裏面回車符換行就真的換行了，按多少個空格就是多少個空格

 #include <stdio.h>
 //在HTML裏尖括號要用實體符號才能顯示
// #include 
 
 
 
 
  
  
  
  

void main(){
    print('hello world!我還沒徹底忘記C語言');
    return 0;
}


 
 
 
 
<pre>
 #include &lt;stdio.h&gt;
 //在HTML裏尖括號要用實體符號才能顯示
// #include <stdio.h>

void main(){
    print('hello world!我還沒徹底忘記C語言');
    return 0;
}
</pre>

mark 自帶背景色 hello world

<mark>hello world</mark>

em和strong

em表示內容的強調點

strong表示內容的重要性

連接

img標籤

img 這是個單標籤。用於引入圖片

<img src="圖片的地址" alt="儘可能寫，這個是當圖片沒法加載出來時，替代圖片的文字，一般是描述這張圖片的一些信息，特別是服務於視障人士，看不到圖片，屏幕閱讀器會根據這個屬性將信息讀出來"/>
  • 圖片地址
    • 圖片地址能夠是網絡地址，也能夠是相對地址或絕對地址
    • 網絡地址，也就是把src連接到網絡上的一張圖片,好比http://img30.360buyimg.com/pop/s590x470_jfs/t1/103818/1/3435/68180/5ddfce2aE65a56f1a/5cee70f6872aa9d9.jpg.webp，這個是我在寫這個的時候在京東輪播圖上的某張圖片的地址，將這個地址給src="http://img30.360buyimg.com/pop/s590x470_jfs/t1/103818/1/3435/68180/5ddfce2aE65a56f1a/5cee70f6872aa9d9.jpg.webp"那麼網頁就會出現這張圖片，前提是你看的時候，京東還有這張圖片
    • 相對地址
      • 假設你有以個文件夾A，在文件夾A裏面有index.html和1.png圖片，那麼相對地址的引用就是 src="./1.png" 這個./是表明這個文件的根目錄，也就是文件夾A
      • 若是是文件夾A裏面有文件夾B和C，B裏面有1.png，C有index.html，那麼相對地址的引用是這樣的src="../B/1.png" 這個../是表明上一級目錄，index.html文件所在的目錄的上一級目錄，就是A,而後再來找下面的B，再找B中的圖片 ../../就是上一級的上一級目錄
    • 絕對地址就是，直接從盤符開始，如C://xxx/xxx/1.png
  • src應用圖片的格式
    • png-8，png-24，jpeg也就是jpg，gif，svg，webp，base64
    • webp是一種更牛逼的圖片格式，在同等質量下，要比jpg小40%
    • base64嚴格來講不是圖片，它是圖片通過轉碼，變成一堆字符

a標籤

a 超連接，連接網頁用的，能夠連接網址，也能夠是本身項目的網頁文件

<a href="https://www.baidu.com/">百度</a>

這是連接百度的網址

一樣的a標籤頁能夠用相對地址或絕對地址，連接本身的html文件

<a href="./login.html">註冊</a>

通常狀況下a標籤跳轉不會打開新的標籤頁跳轉的，能夠經過添加屬性，使其打開新的標籤頁跳轉

<a href="https://www.baidu.com/" target="_blank">百度</a>

a標籤還有一個download，它是讓人下載東西的，不過這個屬性，如今只有谷歌和火狐支持，其餘瀏覽器都不能用，固然，a標籤還有其餘的屬性，不過沒怎麼用，就不說了。

<a href="下載地址" download>

圖片連接，a標籤是特例，雖然是行內元素，但能夠包裹塊級元素，不僅是圖片，也能夠包裹標題h1-h6。

<a href="某某地址"><img src="圖片地址" /></a>

還有另外個可能會用到的功能，錨點，這個是頁面內的超連接，在頁面上點擊某個的文本，會直接跳轉到該頁面關於這個文本設置的錨點，具體代碼以下

首先是設置錨點
<a href="#content">錨點A</a>
<a href="#content1">錨點B</a>

br換行，主要讓瀏覽器出現滾動條，讓內容到底部，有個表現的效果
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

這裏的id屬性的值要和你錨點定義的值同樣，這樣纔會滾動到這個地方，網上說id換成name屬性也同樣，但我試了下沒用
<div id="content">
    文本A
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="content1">
    文本B
</div>

link標籤

link 這個是單標籤，定義文檔與外部資源的關係，一般是連接CSS樣式表的

<link rel="stylesheet" type="text/css" href="theme.css">
href 就是css文件的地址，href="theme.css"和href="./theme.css"沒什麼區別

link寫在head裏

<!DOCTYPE html>
<html>
<head>
    <title>網頁標題</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
    
</body>
</html>

如何在瀏覽器標籤卡里弄上本身的logo

代碼以下

<link rel="shortcut icon" href="//static.runoob.com/images/favicon.ico"  type="image/x-icon" >

把href的地址換成本身的logo的地址，後綴名要ico的，大小差很少是36px或72px

表格標籤

table 定義一個表格

th 表頭單元格

tr 單元行

td單元格

caption 表格的標題

thead表格的頭部

tbod 表格的主體內容

tfoot 表格的腳註

雖然表格的頭部，主體內容，腳註不寫也沒什麼影響，但最好仍是寫

<table>
    <caption>表格的標題</caption>
    <thead>
        <tr>
            <th>表頭單元格</th>
            <th>表頭單元格</th>
            <th>表頭單元格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>單元格</td>
            <td>單元格</td>
            <td>單元格</td>
        </tr>
        <tr>
            <td>單元格</td>
            <td>單元格</td>
            <td>單元格</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">單元格</td>
        </tr>
    </tfoot>
</table>

以上的表格沒有邊框，要想有邊框，只要給table加個border屬性便可

<table border="1px">
    <caption>表格的標題</caption>
    <tr>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td>單元格</td>
        <td>單元格</td>
        <td>單元格</td>
    </tr>
    <tr>
        <td>單元格</td>
        <td>單元格</td>
        <td>單元格</td>
    </tr>
</table>

這時由於每一個單元格和整個表格都有邊框，看起來就是兩層邊框，因此能夠合併邊框

給table加上以下樣式

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table border="1px" >
        <caption>表格的標題</caption>
        <tr>
            <th>表頭單元格</th>
            <th>表頭單元格</th>
            <th>表頭單元格</th>
        </tr>
        <tr>
            <td>單元格</td>
            <td>單元格</td>
            <td>單元格</td>
        </tr>
        <tr>
            <td>單元格</td>
            <td>單元格</td>
            <td>單元格</td>
        </tr>
    </table>
    <!-- <script type="text/javascript" src="./index.js"></script> -->
</body>
</html>

合併單元格

td的屬性colspan

colspan = "3"表明該單元格橫跨了三個單元格，包括自己三個，也就是將三個單元格合併

<table border="1px" >
        <caption>表格的標題</caption>
        <tr>
            <th>表頭單元格</th>
            <th>表頭單元格</th>
            <th>表頭單元格</th>
        </tr>
        <tr>
            <td>單元格</td>
            <td>單元格</td>
            <td>單元格</td>
        </tr>
        <tr>
            <td colspan="3">合併單元格</td>
        </tr>
    </table>

有跨列的單元格，天然有跨行的單元格

rowspan ="3"

<table border="1px" >
    <caption>表格的標題</caption>
    <tr>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <!-- 由於單元格跨了兩行，本身一行，下面一行，因此下面的單元行的一個單元格被佔用了 -->
        <td rowspan="2">單元格</td>
        <td>單元格</td>
        <td>單元格</td>
    </tr>
    <tr>
        <td>單元格</td>
        <td>單元格</td>
    </tr>
</table>

表單

from 表單

input 輸入框，這是個單標籤

textarea 多行輸入框，也叫輸入域

button 按鈕

select 下拉列表

option 下拉列表的選項

optgroup 下拉列表選項的組

label 標註，主要和單選按鈕或複選框一塊兒使用

表單的元素差很少就是這些，不過看上去好像沒有單選按鈕這些，這不是忘寫了，它屬於input

表單與表格不一樣，像input，button，select等雖然被一塊兒歸類於表單元素，但它們不須要放在from裏面，能夠單獨出現，可是表格的tr，td必定要放在table裏面

表單的主要用途，實際上是註冊，登陸那塊，填寫相關信息，提交後表單就會傳給後臺，後臺在一頓神操做，最後將處理結果返回給前端處理。

<form action="demo_form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>
  • action
    • 這個是提交表單時像何處提交數據，在這裏它的值是一個後臺文件，就是項目裏有這個php文件，將表單交給這個文件處理，php經過name這個屬性獲取input輸入的值
  • method
    • 這個是表單提交的方式，提交方式主要有兩種，get和post
    • 它們的區別是，get對數據沒有保密，而post對提交的數據會保密
    • 相似以下網址是get方式提交的
    • http:www.xxxxxxx.com?fname="xxx"&lname="sss"
    • 像這網址?後面的就是表單提交的參數，若是是重要的消息好比用戶名密碼這些，用get提交的話，也會顯示在網址後面，這很明顯是不行的，因此就要用post方式提交，就不會有這一大串的字符了。

input的類型

input 這個是個很重要的標籤，雖然大部分都叫它輸入框，但它的做用不只僅只是輸入框，能夠是單選框，復 選框，日期選擇器等等，這些取決於它type屬性的值

<input type="text" />這是文本輸入框
<br /> 
<input type="password" />這是密碼輸入框
<br />
<input type="radio" />這是單選按鈕
<br />
<input type="checkbox" />這是複選框，也就是多選按鈕
<br />
<input type="button" />這是按鈕，不過與button這個標籤差很少
<br />
<input type="submit" />這是提交按鈕，點擊後會默認將表單提交，不過若是沒有後臺提交了也沒啥用
<br />
<input type="reset" />這個是重置按鈕，就是將表單的輸入框的內容所有清空從新填寫
<br />
<input type="range" />這個是調節數字的拉槓，就是電腦上調音量的那個控件，不過原生的比較醜，能夠本身                      之後實現這些功能
<br />
<input type="date" /> 這個是日期選擇器
<br />
<input type="time" /> 這個是時間選擇器
<br />
type的值不少，不過主要的都在這，其餘想了解的，能夠去這裏看
https://www.runoob.com/tags/att-input-type.html
<br />

並且原生的有些確實美觀不怎樣，有設計基礎，等js學精了，其實能夠本身弄一個屬於本身的UI庫

input的value屬性和placeholder屬性

<input type="button" value="按鈕"/> value是input的是值，在按鈕上就是按鈕的文本，在text上就是輸                                    入框的文本
<br />
不過按鈕的話大可能是直接使用這個button這個標籤
<br />
<button>按鈕</button>
<br />
placeholder 屬性  這個是輸入框的提示文本
<br />
<input type="text" placeholder="請輸入用戶名"/>
<input type="passwork" placeholder="請輸入密碼"/>

單選框的用法

<p>
    這樣寫的話，其實和多選沒啥區別，兩個均可以選中
</p>
男 <input type="radio" /> 女 <input type="radio" />
<p>
    加個name屬性就好了，屬性的值要同樣的
</p>
男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/>

<p>
    屬性值不必定是要sex，主要是有見名之意，儘可能取英文的，流下沒學好英語的淚水，不過所以本身在計算機的詞彙量也增多了
</p>
<input type="radio" name="sex1"/> 女 <input type="radio" name="sex1"/> 人妖 <input type="radio" name="sex1"/>

<p>
    等到js時候再來講下表單的操控和取值的問題
</p>

label的用法

label標籤，這主要是和單選框和多選框進行綁定

男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/>
<p>
    像這樣寫的話，要點擊單選按鈕才能夠選中，用戶體驗不太好
</p>
換成這樣
<label for="man">男</label>
<input type="radio" name="sex" id="man" value="男"><br>
<label for="wumen">女</label>
<input type="radio" name="sex" id="wumen" value="wumen"><br>

這種的話，點擊label的文本，單選按鈕也會被選中
label的for屬性的值要和input的id屬性的值同樣，才能生效
固然也能夠和多選框綁定，用法是同樣的

select的用法

只有一個select標籤是不夠的，它要和option一塊兒用

<select>
    <option value="A">下拉選項1</option>
    <option value="B">下拉選項2</option>
    <option value="C">下拉選項3</option>
    <option value="D">下拉選項4</option>
    <option value="E">下拉選項5</option>
    <option value="這個是送往服務器的值">這裏的是瀏覽器顯示的文本，也就是用戶看到的文本</option>
</select>
<p>
    上面的下拉列表默認顯示的是第一個選項，若是要默認選擇其餘選項，要用selected屬性
</p>
<select>
    <option value="A">下拉選項1</option>
    <option value="B">下拉選項2</option>
    <option value="C">下拉選項3</option>
    <option value="D" selected >下拉選項4</option>
    <option value="E">下拉選項5</option>
</select>
<p>
    這樣默認顯示的就是下拉選項4了
</p>

optgroup的用法

將同類型的option歸類爲一組

<select>
    <optgroup label="動物">
        <option value="cat">貓</option>
        <option value="dog">狗</option>
    </optgroup>
    <optgroup label="顏色">
        <option value="blue">藍色</option>
        <option value="yellow">黃色</option>
    </optgroup>
</select>
<p>
   這裏的label是屬性，和那標籤的label沒有任何關係，它表明的這個組的文本
</p>

textarea的用法

<textarea rows="10" cols="30" placeholder="請填寫詳細內容">
    rows是行，cols是列，綜合起來就是這個輸入域的寬高了
</textarea>

表單控件的經常使用屬性

  • required 這個能夠用在input和textarea，表示必填項，不過這個屬性IE和safari不支持，考慮兼容性問題，能夠用js判斷表單的到底有沒有徹底填寫，safari是蘋果的瀏覽器
<textarea rows="10" cols="30" placeholder="請填寫詳細內容" required>
    rows是行，cols是列，綜合起來就是這個輸入域的寬高了
</textarea>
在這裏補充一下，有些屬性爲何直接寫屬性名就能夠，不用值呢？由於這個屬性是布爾值

<textarea rows="10" cols="30" placeholder="請填寫詳細內容" required="required">
    rows是行，cols是列，綜合起來就是這個輸入域的寬高了
</textarea>
  • readonly 只讀屬性，不能編輯內容，但能夠複製內容，適用input和textarea
<textarea rows="10" cols="30" placeholder="請填寫詳細內容" readonly>
    rows是行，cols是列，綜合起來就是這個輸入域的寬高了
</textarea>
  • disabled 禁用，不能編輯也不能複製，基本表單的控件都有這個屬性，按鈕和下拉列表禁用就沒法點擊了
<textarea rows="10" cols="30" placeholder="請填寫詳細內容" disabled>
    rows是行，cols是列，綜合起來就是這個輸入域的寬高了
</textarea>

列表

列表分爲有序列表，無序列表，自定義列表

有序列表

<ol>
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ol>

上面的列表的項目符號默認是數字符號，以下所示

  1. 列表項
  2. 列表項
  3. 列表項

原本li標籤有個type屬性，這個就是用來決定列表項的項目符號的，不過因爲已經被廢棄了，但其實仍是能用，只不過推薦用CSS樣式表來修飾這些項目符號

這裏簡單說下標籤li的type的值

<ol>
    <li type="1">阿拉伯數字</li>
    <li type="A">英文字母</li>
    <li type="a">英文字母</li>
    <li type="I">羅馬數字</li>
    <li type="i">羅馬數字</li>
</ol>

上面的寫法是爲了方便寫屬性的值，真正的寫法是這樣的
<ol>
    <li type="A">列表項</li>
    <li type="A">列表項</li>
    <li type="A">列表項</li>
    <li type="A">列表項</li>
    <li type="A">列表項</li>
</ol>

這樣會以A,B,C,D這樣的

無序列表

<ul>
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ul>

無序列表的項目符號默認爲黑色的小圓點

一樣也能夠用type來改變

<ul>
    <li type="disc">列表項</li>
    <li type="square">列表項</li>
    <li type="circle">列表項</li>
</ul>

自定義列表

dl 定義一個自定義列表

dt 項目名稱

dd 項目描述

<dl>
    <dt>石昊</dt>
        <dd>
         完美世界的男主，專斷萬古的荒天帝，然而身邊的人都死關了，一個悲劇的男主，現在在上蒼之上尋找復活他人的辦法。
        </dd>
    <dt>蕭炎</dt>
        <dd>
            無盡火域，萬火焚蒼穹的蕭鬥帝，老實說我並不太喜歡這我的物，可能做者塑造的很差，記得一開始看的時候，主角是做爲上班族穿越，後來好像這部分被改掉了，但先入爲主的觀念，一個成年人，雖然當時身體也才四，五歲，但心理但是成年人，居然去猥瑣一個幼女，幼女的護衛還沒發現，這簡直就是敗筆，不只如此，性格也不太喜歡，並且本身的許的諾言沒有實現，說好的復活他祖宗，到大結局都沒復活。。。好吧，角色無罪，一切都是做者的鍋，但人物形象沒有設計好，這是個事實，並且整本書的劇情，陷入了循環，捱打，變強，裝逼打臉，每一個大劇情基本是這樣，有種審美疲勞的感受。
        </dd>
</dl>

結構化標籤

header 網頁的頭部，一般包括網站標誌，主導航，全站連接及其搜索框

nav 標記導航，僅對文檔中重要的連接羣使用

main 頁面的主要內容，一個頁面只能使用一次，若是是web應用，則包圍其主要功能

acticle 定義外部的內容，其中的內容獨立於文檔的其他部分

section 定義文檔中的節，好比章節，頁眉或文檔中的其餘部分

aside 定義其所處內容以外的內容，如側欄，文章的一組連接，廣告，友情連接，相關產品列表等

footer 頁腳，當父級是body時，纔是整個頁面的頁腳

之前的佈局都是div+css的佈局，如今能用語義化標籤就用語義化標籤，佈局也是從語義化標籤考慮，雖然div和p均可以顯示段落，但p標籤是語義化標籤，因此選擇p標籤，若是內容找不到合適的標籤，那就用div包裹吧。

媒體標籤

媒體標籤主要是音頻和視頻的標籤

音頻

<!-- autoplay 音頻文件加載完成後自動播放音頻 control 控制器 這兩個能夠不使用，但src是必定要用的-->
<audio src="音頻地址" autoplay control></audio>

視頻

<!-- autoplay 視頻文件加載完成後自動播放音頻 control 控制器 這兩個能夠不使用，但src是必定要用的-->
<video src="視頻的地址" autoplay control></video>

其餘操做須要用到javaScript就很少說了

畫布

這個就是讓瀏覽器擁有繪畫的能力，由於要用到javaScript，因此也很少說了，不過這個是能夠代替flash的一個方案，也是遊戲開發的基礎，根據API的不一樣，能夠繪製2d和3d的圖像

<canvas>
    您的遊覽器不支持畫布
</canvas>

框架

在網頁中插入網頁
<iframe src="網頁地址">
    
</iframe>

語義化標籤

爲何要是使用語義化標籤

  • 結構更好，更利於SEO優化
  • 維護性高
  • 有利於特殊終端的閱讀

語義化標籤一覽

雖然可能不全，但大部分都在這裏

標籤 意義
title 瀏覽器的標籤卡標題
h1~h6 分級標題
ol 有序列表
ul 無序列表
header 網頁的頭部，一般包括網站標誌，主導航，全站連接及其搜索框
nav 標記導航，僅對文檔中重要的連接羣使用
main 頁面的主要內容，一個頁面只能使用一次，若是是web應用，則包圍其主要功能
acticle 定義外部的內容，其中的內容獨立於文檔的其他部分
section 定義文檔中的節，好比章節，頁眉或文檔中的其餘部分
aside 定義其所處內容以外的內容，如側欄，文章的一組連接，廣告，友情連接，相關產品列表等
footer 頁腳，當父級是body時，纔是整個頁面的頁腳
small 小號字體，指定細則，輸入免責聲明，註釋，著名，版權
strong 強調文本的重要性
em 強調文本的內容
mark 使用黃色突出顯示文本
p 段落
cite 表示所包含的文本對某個參考文獻的引用，好比書籍或者雜誌的標題
blockquoto 快引用
q 短的引用
time 定義時間
abbr 簡寫
dfn 定義術語元素，定義必須緊挨着，能夠在描述列表dl元素中使用
address 做者，相關人士或組織的聯繫信息
del 移除的內容
ins 添加的內容
code 標記代碼
meter 定義已知範圍或分數值內的標量測量
progress 定義進度條

兩個可能會用到的屬性

data-*屬性

data-*，*表明任何字符，如data-music，data-id，它能夠儲存數據，如把每首歌的id做爲值給保存到data-id屬性裏。

contenteditable

讓頁面可編輯

<div contenteditable>ssss</div>
        <ul contenteditable>
            <li>sss</li>
            <li>sss</li>
            <li>sss</li>
        </ul>
        <p contenteditable>sss</p>

以上標籤的用法基本就到這裏，雖然還有像拼音這些的標籤，但不怎麼用吧，就沒寫了，其他的想了解就到w3c或者菜鳥教程那查看吧。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程