作者：浪子花夢 , 個人簡介：一個有趣的程序員 ~
從今天開始，我將開始學習前端、ASP.NET 的一些知識，莫把假期浪費，大家一起衝！衝！衝！
此文只針對向我一樣初學的小白，將詳細講解一些基礎且重要的HTML5 的知識
希望大家能夠喜歡 ^ _ ^
.
因爲文章內容實在過於基礎，所以爲了不耽誤各位學習，此文將偏代碼實現爲主 ~

此文 11399 個字，希望您看完有收穫 ~

文章目錄

初探 HTML5 及一些標籤的使用
屬性概念及使用
文本大小粗細介紹
三種樣式使用
< a > name屬性實現文檔內跳轉
表格的使用
列表的使用
HTML 核心元素之塊級元素 div、 span
div 進行界面佈局
table 進行界面佈局
常用的一些表單的介紹
內聯框架 iframe

1）初探 HTML5 及一些標籤的使用

HTML5 標準框架如下所示（快捷鍵：！）：

我們在 body 標籤的內部輸入如下的代碼，初步使用一些基礎的標籤:

<body>
    langzihuameng 					--- 1
    
    <h1>langzihuameng</h1>   		--- 2
    
    <p>langzihuameng</p>			--- 3
    
    <a href="https://me.csdn.net/weixin_42100963">langzihuameng</a>		--- 4
    
    <img src="11.jpg" width="200" height="200">							---5
</body>

對應解釋如下所示：

body中的內容（直接顯示）
標題顯示（最大級別）
段落顯示（自動換行）
鏈接引用一個地址（點擊會跳轉到另一個地方，使用圖片鏈接原理一樣，只是將文字換爲圖片而已）
引用一個圖片

效果如下所示：

當我們點擊其中紫色帶下劃線的字符時，會跳轉到另一個界面（我的博客首頁）:

2）屬性概念及使用

我們常常會覺得我們自己非常的帥，這個帥就是我們對自己長相的一個定義，也稱屬性，在 HTML5 中，我們可以爲一個標籤進行設置屬性，比如：這個元素的寬、高、顏色等等 . . .

<body bgcolor="#0ff">				 --- 1

    <h1 align="right">huameng</h1>	 --- 2

    <br/>       

	--- 3
    <a href="https://me.csdn.net/weixin_42100963" target="_blank">huameng</a>

</body>

其中屬性對應的解釋爲：

將 body的主體顏色設置爲天藍色（#0ff）
將標題文字設置爲右對齊
鏈接一個地址，並且在新的網頁中打開

< br > 表示換行

效果如下圖所示：

3）文本大小粗細介紹

<body bgcolor="#0ff">
    <p>Welcome come huameng</p>			--- 1
    <b>Welcome come huameng</b>			--- 2
    <br/>
    
    <big>Welcome come huameng</big>		--- 3
    <br/>
     
    <i>Welcome come huameng</i>			--- 5
    <br/>
    
    <small>Welcome come huameng</small>	--- 6
    <br/>
    
    <strong>Welcome come huameng</strong>	--- 7
    <br/>
    
    <ins>Welcome come huameng</ins>		--- 8
    <br/>
    
    <del>Welcome come huameng</del>		--- 9
    <br/>
    
    Welcome<sub>Welcome come huameng</sub>	--- 10
    <br/>
    
    Welcome<sup>Welcome come huameng</sup>	--- 11
</body>

對應解釋：

段落樣式顯示（自帶換行)
粗體
大號字
斜體字
小號字
加粗（與 2相似）
插入
刪除
下標
上標

效果如下所示：

4）三種樣式使用

在實際的應用中，我們會爲元素添加各種各樣的樣式，使界面變得好看起來，再使用樣式的過程中，我們有三種調用樣式的方式，分別是：

外部樣式表
內部樣式表
內聯樣式表

外部樣式表
當我們使用外部樣式表時，需要一個 .css 文件，例如下面的這個 css文件：
其中，我們設置 h1標籤的背景爲紫色、字符爲天藍色 . . .

在 head標籤內寫下如下的代碼：

rel 表示的是一個樣式表，type 表示文件類型、href引用 css文件

我們在 body標籤中寫下如下的代碼：
```
<body>
    <h1>標題h1</h1>
</body>
```
效果如下所示：

內部樣式表
我們直接在 head標籤中寫下如下的代碼：

<style type="text/css">
        p{
            color:lightcoral;
            margin-left: 20px;
        }
</style>

在body標籤中寫下如下的代碼：

<body>
    <p>Welcome come on huameng</p>
</body>

效果如下所示：

內聯樣式表
在body標籤裏直接寫出如下的代碼：

<body>
    <a style="color:mediumspringgreen;" href="https://me.csdn.net/weixin_42100963">浪子花夢</a>
</body>

效果如下所示：

5）< a > name屬性實現文檔內跳轉

在很多的網頁上有這麼一個效果，當我們將網頁滑到最下面時，然後點擊一個東西會自動回到網頁的頂部 . . .

我們將通過 a標籤的 name 屬性來實現這個效果，代碼如下所示：

<body> 
    <!-- 文檔內跳轉 name屬性 -->
    <a name="huameng">Hello World! </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/><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/>
    
    <a href="#huameng">跳轉文檔內的Hello</a>
</body>

爲了突出效果，代碼中我們用了大量的 br標籤，也就是換行，代碼效果如下：

6）表格的使用

表格也是網頁中不可缺少的一部分，一些數據的表示，界面的一些佈局等等 . . .

表格快速生成視頻樣例如下：

我們寫出如下的代碼，來試試表格的一些用處：

<body>
   <!-- 單元格邊距、間距(cellspacing="10") -->
    <table border="1" cellpadding="10" style="border-collapse: collapse;" background="11.jpg">
     
        <!-- 表格的標題 -->
        <caption>浪子花夢</caption> 
     
        <tr bgcolor="#0ff">
            <th>浪子</th>
            <th>浪子</th>
            <th>浪子</th>
        </tr>
        <tr>
            <td>花夢</td>
            <td>花夢</td>
            <td>花夢</td>
        </tr>
        <tr>
            <td>花夢</td>
            <td>花夢</td>
            <td>花夢</td>
        </tr>
        <tr>
            <td>
                <!-- 表格內的標籤 -->
                <ul>
                    <li>帥氣</li>
                    <li>氣質</li>
                    <li>迷人</li>
                </ul>
            </td>
            <td>浪子</td>
            <td>花夢</td>
        </tr>
    </table>
</body>

其中，我表格的標題設置，也有列表的使用，大家可以自行設置 . . .

其中注意的是這一行代碼：style=“border-collapse: collapse;”，如果我們不加這行代碼的話，將會發生單元格之間存在着一些 “小 bug”，有着空隙存在 . . .

效果如下所示：

7）列表的使用

在生活中有着許多的列表使用，比如一個菜單上面的菜，蔬菜肯定是不能和肉類放在一起的，如果非要放在一起，好像也沒什麼問題 . . .

列舉標籤如下所示：

使用例子如下所示：

<body>
    <ul>
        <li type="square">帥氣</li>
        <!-- 嵌套列表 -->
            <ul>
                <li>浪子</li>
                <li>花夢</li>
            </ul>
        <li type="circle">氣質</li>
        <li type="disc">可愛</li>
    </ul>
    <dr/><dr/><dr/><dr/><dr/>
    
    <ol start="10">
        <li type="A">帥氣</li>
            <ul>
                <li>浪子</li>
                <li>花夢</li>
            </ul>
        <li type="a">氣質</li>
        <li type="l">可愛</li>
        <li type="i">可愛</li>
    </ol>
    <dr/><dr/><dr/><dr/><dr/>
    
    <!-- 自定義列表 -->
    <dl>
        <dt>氣質</dt>
            <dd>huameng is a shuaige</dd>
        <dt>氣質</dt>
        <dt>氣質</dt>
    </dl>
</body>

效果如下所示：

8）HTML 核心元素之塊級元素 div、 span

塊級元素是界面佈局中非常重要的一個內容，他們是一種可以承載其它元素的容器，我將在後面講解佈局的使用 . . .

首先，我們看看幾種元素的區別，有塊元素，也有內聯元素

<body>
    <!-- 塊元素 -->
    <!-- 換行 -->
    <p>Hello</p>
    <h1>Hello</h1>
    
    <!-- 內聯元素 -->
    <!-- 不換行 -->
    <b>Hello</b>
    <a>Hello</a>
    <dr/>
    
    <!-- 塊元素 容器 訪問css樣式 -->
    <div id="divid">
        <p>Hello, World!</p>
        <a>Hello, World!</a>
    </div>
    
    <!-- 文本容器 span  與 div的區別 被限制了作用域(文本)-->
    <div>
        <p>
            <span>這是一個測試效果</span>
            span 是這麼一個樣子，你看到了嗎？
        </p>
    </div>
</body>

效果如下所示：

div 有着許多的用處，比如說我們方便的用於使用 css樣式，我們看到上面的效果，是使用了一個 css樣式，他們css源碼如下所示：

需要注意的是，id訪問前面需要 + # . ..

9）div 進行界面佈局

我們需要將界面分爲四個區域，上、左、右、下，使用 div 可以很好的做到這一點，代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huameng</title>
    <!-- 佈局樣式設置 -->
    <style type="text/css">
        /* 渲染全部界面 */
        body{
            margin:0px;
        }
        #container{
            width: 100%;
            height: 800px;
            background-color: darkgray;
        }
        #heading{
            width: 100%;
            height: 10%;
            background-color: aqua;
        }
        #content_menu{
            width: 30%;
            height: 80%;
            background-color: aquamarine;
            /* 浮動原理  平行對齊 */
            float: left;        
        }
        #content_body{
            width: 70%;
            height: 80%;
            background-color: blueviolet;
            float: left;
        }
        #footing{
            width: 100%;
            height: 10%;
            background-color: burlywood;
            /* 取消浮動 */
            clear:both;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="heading">頭部</div>
        <div id="content_menu">內容菜單</div>
        <div id="content_body">內容主體</div>
        <div id="footing">底部</div>
    </div>
</body>
</html>

代碼比較長，但是不難，我們只需要注意一句代碼：float: left; 左浮動效果，我將在 css文章裏進行講解這個原理 . . .

效果如下所示：

10）table 進行界面佈局

表格所知道的正如表格也可以使用，這一點特別像 WPF中的 Grid佈局方式，代碼如下所示：
其中，我們用到了垮列單元格 . . .

<!-- 設置主體邊界爲0 -->
<body bgcolor="#0ff" marginheight="0px" marginwidth="0px">
    <table width="100%" height="950px" style="border-collapse: collapse; background-color: coral;">
        <tr>
            <td colspan="3" width="100%" height="100" style="background-color: darkcyan;">頭部</td>
        </tr>
        <tr>
            <td width="20%" height="80" style="background-color:greenyellow;">
                <ul>
                    <li>ios</li>
                    <li>android</li>
                    <li>html5</li>
                </ul>
            </td>
            <td width="60%"" height="80%" style ="background-color:lightseagreen;">內容主體</td>
            <td width="20%" height="80%" style ="background-color:hotpink;">右菜單</td>
        </tr>
        <tr>
            <td width="100%" height="10%" colspan="3" style="background-color: lightpink;">底部</td>
        </tr>
    </table>
</body>

其中，我們需要注意的是這一行代碼：marginheight="0px" marginwidth="0px"； 如果我們不加這一行代碼，那麼界面四周將會暴露出來，變的非常的醜，有興趣的小夥伴可以看一看 . . .

效果如下所示：

11）常用的一些表單的介紹

常用表單：

我們常常在網站上做一些操作，而我們與後臺數據之間的聯繫的橋樑就是表單，下面我將列舉一些表單的例子，代碼如下所示：

<body>
    <form>
        <input type="password">
        <br/>
        <input type="color">
        <br/>
        <input type="datetime">
        <br/>
        <input type="range">
        <br/>
        <input type="url">
        <br/>
        <br/>
        <input type="button" value="按鈕" style="margin-right: 10px;">
        <input type="submit">
        <br/>
        <br/>
        <!-- 指定相同name 實現組合效果 -->
        <input type="radio" name="hm">
        <input type="radio" name="hm">
        <br/>
        <br/>
        <!-- 下拉列表 -->
        <select>
            <option>浪子</option>
            <option>花夢</option>
            <option>我愛你</option>
        </select>
        <br/>
        <br/>
        <!-- 文本域 -->
        <textarea cols="30" rows="30">請輸入您的相關信息</textarea>
    </form>
</body>

效果如下所示：

大家可以自行測試 . . .

12）內聯框架 iframe

使用 frame可以訪問多個文檔中的文件，形成某種意義上真正的框架，使用方式如下所示：

a.html 的效果如下所示：

執行的效果如下所示：

潦草之筆，望您喜歡 ^ _ ^

前端小白快速入門之（一）HTML5 詳解

文章目錄

1）初探 HTML5 及一些標籤的使用

2）屬性概念及使用

3）文本大小粗細介紹

4）三種樣式使用

5）< a > name屬性實現文檔內跳轉

6）表格的使用

7）列表的使用

8）HTML 核心元素之塊級元素 div、 span

9）div 進行界面佈局

10）table 進行界面佈局

11）常用的一些表單的介紹

12）內聯框架 iframe

自學編程兩個月，現在我月入 4 萬元

「實戰應用」如何用圖表控件LightningChart創建2D氣泡圖

百度安全多篇議題入選Blackhat Asia以硬技術發現“芯”問題

Google Chrome驅動程序 124.0.6367.62（正式版本）去哪下載？

前端小白快速入門之（一）HTML5 詳解

第十一屆藍橋杯 “走方塊“ 問題求解（BFS、遞歸）

樹的神奇用法之 “並查集“，一個簡單例子快速掌握！

數據結構堆(包含堆排序)有這麼簡單嗎？其實是真的簡單！

動態規劃動態匹配思想詳解 —— 最大公共子串問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

前端小白快速入門 之（一）HTML5 詳解

文章目錄

1）初探 HTML5 及 一些標籤的使用

2）屬性概念 及 使用

3）文本大小粗細介紹

4）三種樣式使用

5）< a > name屬性實現文檔內跳轉

6）表格的使用

7）列表的使用

8）HTML 核心元素之塊級元素 div、 span

9）div 進行界面佈局

10）table 進行界面佈局

11）常用的一些表單的介紹

12）內聯框架 iframe

前端小白快速入門之（一）HTML5 詳解

1）初探 HTML5 及一些標籤的使用

2）屬性概念及使用