Web前端開發之HTML基礎

TML 基礎- 4個實例

本章介紹了 HTML 中較為常用的標簽的實例。

您可能還沒接觸過這些實例，不過不用擔心，閱讀完本章您就能夠掌握它們了！

HTML 標題

HTML 標題（Heading）是通過<h1> - <h6> 標簽來定義的。

h 是英文header標題的縮寫，標題無處不在，它的應用范圍十分廣泛：網站結構、寫作文、PPT 等。h1 是主標題，h2 是副標題，h3、h4、h5、h6 依次遞減字體的大小。

實例

<h1>這是一個標題</h1>

<h2>這是一個標題</h2>

<h3>這是一個標題</h3>

HTML 段落

HTML 段落是通過標簽 <p> 來定義的，P 是英文paragraph段落的縮寫，經常被用來創建一個段落，就和你寫作文一樣，您可以進行實戰實驗。

實例

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

<p>這是另外一個段落。</p>

HTML 鏈接

HTML 鏈接是通過標簽 <a> 來定義的.a標簽，也叫anchor（錨點）元素，既可以用來鏈接到外部地址實現頁面跳轉功能，也可以鏈接到當前頁面的某部分實現內部導航功能。

實例

<a href="#">這是一個鏈接</a>

提示:在 href 屬性中指定鏈接的地址。

(您將在本教程稍后的章節中學習更多有關屬性的知識)。

HTML 圖像

HTML 圖像是通過標簽 <img> 來定義的。使用img元素來為你的網站添加圖片，使用src屬性指向一個圖片的具體地址。

舉例如下：<img src="#">

請注意：img元素是自關閉元素，不需要結束標記。

實例

注意：圖像的名稱和尺寸是以屬性的形式提供的。

本文為 HTML 基礎教程第六章，下一章：HTML元素

【小提示】tips:本文由數據微學院作者原創，轉載請注明來源或聯系作者。更多優秀參考好文請關注【數據微學院】360doc個人圖書館。

TML 編輯器的介紹及推薦

HTML編輯器是用于編寫HTML的工具，使用HTML編輯器時以編輯主題，索引，自定義窗口，選擇添加搜索頁。

HTML 編輯器：

使用Notepad或TextEdit來編寫HTML

下列是三種專門用于編輯HTML的HTML編輯器：

Adobe Dreamweaver；

Microsoft Expression Web；

CoffeeCup HTML編輯器；

不過，我們同時推薦使用文本編輯器來學習HTML，比如Notepad（PC）或TextEdit（Mac）。我們相信，使用一款簡單的文本編輯器是學習HTML的好方法。

我們可以使用Notepad工具來創建HTML文件，具體的步驟參考如下：

步驟1：啟動記事本

打開Notepad的步驟（Windows系統中）：

打開“開始”菜單

選擇“所有程序”

選擇“附件”

選擇“記事本”

步驟2：使用記事本編輯HTML

在記事本中輸入HTML代碼：

<!DOCTYPE html>

<html>

<head>

<title>數據微學院</title>

</head>

<body>

<h1>我的第一個標題</h1>

<p>我的第一個段落。</p>

</body>

</html>

步驟3：保存你的HTML

在Notepad文件菜單中選擇另存為。

您可以以.htm或者.html擴展名保存您的HTML文件，兩者沒有區別，根據您的使用習慣即可。

將該文件保存在您常用的文件夾中，比如html。

步驟4：在瀏覽器中運行這個HTML文件

啟動您的瀏覽器，然后選擇“文件”菜單的“打開文件”命令，或者直接在文件夾中雙擊您的HTML文件。

運行顯示結果類似如下：

【注】本教程將使用HBuilderX來創建html文件進行學習，創建文件請參考本教程第二章：HTML 教程導讀，有關HBuilderX的使用請繼續關注【數據微學院】360doc個人圖書館。

本文為 HTML 基礎教程第五章，下一章：HTML基礎

【小提示】tips:本文由數據微學院作者原創，轉載請注明來源或聯系作者。更多優秀參考好文請關注【數據微學院】個人圖書館。

、接口文檔面對的困境

我工作幾年，接口文檔用過好幾種方式了。從最開始的word文檔，到后來的swagger和confluence編寫接口文檔，再到后來侵入性很小的jApiDoc，最后到現在的smart-doc工具。

對比下他們的優缺點：

方式	好處	缺點
word文檔和confluence	有文檔留存（好像也不算好處）	費時費力、多人編寫不便
swagger	1、不用專門寫文檔 2、通過連接直接訪問 3、在線測試，有點像簡化的postman	注釋太多，寫得想打人
jApiDoc	1、引入jar包，一鍵生成html接口文檔 2、侵入小，添加簡單注釋就行	1、功能單一，只能接口文檔 2、作者好久沒有維護了
smart-doc	1、引入maven插件，一鍵生成HTML接口文檔 2、作者很活躍，社區也很活躍，反應問題很快就有新版本解決 3、能生成常用的html，markdown、postman接口文檔 4、侵入小，添加簡單注釋就行 5、適配單服務、微服務等多種環境	1、需要抽兩個小時看下官方文檔

2、JApiDocs簡介

前面我介紹過一種工具，叫做JApiDocs，這個工具我也使用了一段時間，用起來還是不錯的，能滿足基本要求，文檔鏈接地址

3、前言

被寫接口文檔難受了好久,使用swagger要加各種稀奇古怪的注釋，十分繁瑣，突然看到JApiDocs 的介紹，只需要在接口上加上點注釋，就能夠生成接口文檔。突然來了希望，通過看文檔自己使用之后，把踩過的坑記錄下來

生成的接口文檔頁面展示：

查詢接口

新增接口

?

在線咨詢

上一篇：工作中常用且容易遺忘的 CSS 樣式清單整理(一)
下一篇：JavaScript 鼠標坐標和盒子位置

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商