HTML從零開始（1）

TML文件的基本結(jié)構(gòu)

1.基本結(jié)構(gòu)

HTML的基本結(jié)構(gòu)分兩部分

<html>
  
<head>
  <title>頭部</title>
</head>

<body>
  主體
</body>

</html>

HTML包括頭部Head和主體Body兩個(gè)部分（注意標(biāo)簽都是以"<>"開始，"</>"結(jié)束，要求成對(duì)出現(xiàn)）

2.網(wǎng)頁摘要信息

網(wǎng)頁的摘要信息一般放在HTML文檔的頭部（Head）區(qū)域，主要通過以下2個(gè)標(biāo)簽進(jìn)行描述

2.1.<title>標(biāo)簽

<title></title>

打開網(wǎng)頁后，將在瀏覽器標(biāo)簽頁顯示網(wǎng)頁標(biāo)題。

2.2.<meta>標(biāo)簽

文檔內(nèi)容類型和字符編碼信息

<meta http-equiv="content-type"content="text/html";charset="gb2312">

名稱：content-type（文檔類型）

值："text/html";charset="gb2312"（文本類別的html類型，字符編碼為簡(jiǎn)體中文。）

charset表示字符編碼常用有如下4種：

GB2312：簡(jiǎn)體中文，一般用于包含中文和英文的頁面。

ISO-885901:純英文，一般用于只包含英文的頁面。

BIG5:繁體，一般用于帶有繁體字的頁面。

UTF-8:國(guó)際通用的字符編碼，同樣適用于中文和英文的頁面。和“GB2312”編碼相比，“UTF-8”的國(guó)際通用性更好，但字符的壓縮比較低對(duì)網(wǎng)頁性能有一定影響。

家好，我是 Java陳序員。

瀏覽器是我們上網(wǎng)沖浪的必備工具，每次打開瀏覽器默認(rèn)都是先看到起始頁。

有的瀏覽器起始頁十分簡(jiǎn)潔美觀，而有的則是充滿了各種網(wǎng)址導(dǎo)航和廣告。

今天，給大家介紹一個(gè)瀏覽器起始頁配置插件，支持自定義配置。

關(guān)注微信公眾號(hào)：【Java陳序員】，獲取開源項(xiàng)目分享、AI副業(yè)分享、超200本經(jīng)典計(jì)算機(jī)電子書籍等。

項(xiàng)目介紹

Howdz Dashboard —— 一個(gè)基于 Vue3、Typescript、Vite 的完全自定義配置的瀏覽器起始頁，支持 Chrome 插件和 Edge 插件。

功能特色：

提供基于文檔流的響應(yīng)布局或 Fixed 模式固定任意位置的兩種布局模式
響應(yīng)式設(shè)計(jì)，編輯模式下拖拽組件更改其大小和位置
組件可自由添加或刪除，并且組件的樣式和功能都是可配置的
數(shù)據(jù)可使用密鑰或 JSON 文件導(dǎo)出以實(shí)現(xiàn)數(shù)據(jù)同步功能
預(yù)設(shè)多種主題，初始進(jìn)入可任意選擇
支持本地壁紙、隨機(jī)壁紙，隨機(jī)壁紙支持收藏個(gè)人壁紙庫
可配置動(dòng)態(tài)壁紙背景，選用官方提供或自行添加網(wǎng)絡(luò)視頻路徑即可
可配置多標(biāo)簽頁模式，允許添加切換多個(gè)隔離的頁面
可配置組件交互行為，設(shè)置點(diǎn)擊組件彈出另一個(gè)組件等交互操作
預(yù)覽模式, 支持用于分享用的數(shù)據(jù)隔離模式
支持語言切換，當(dāng)前支持簡(jiǎn)體中文與英文

項(xiàng)目地址：

https://github.com/leon-kfd/Dashboard

在線體驗(yàn)地址：

https://www.howdz.xyz/

功能體驗(yàn)

預(yù)設(shè)多種主題，初始進(jìn)入可任意選擇。

可動(dòng)態(tài)設(shè)置壁紙，支持純色壁紙、本地圖片壁紙、網(wǎng)絡(luò)圖片壁紙、隨機(jī)圖片壁紙，隨機(jī)圖片壁紙支持收藏個(gè)人壁紙庫。

Tips:左下角的圖標(biāo)按鈕可以更新壁紙和收藏壁紙。

壁紙還支持多種動(dòng)畫特效。

可以從物料組件庫自行添加自己需要的組件，添加的組件提供很多樣式和功能的配置進(jìn)行修改，并通過拖拽更改組件位置和大小。

提供大量組件用于定制化你的起始頁，可適配響應(yīng)式設(shè)計(jì)。

物料組件

Howdz Dashboard 提供大量組件用于定制化起始頁，這里挑選幾個(gè)比較有趣的組件。

Empty - 占位： 占位區(qū)塊組件，支持一些簡(jiǎn)單配置與自定義文本。

Day - 自定義日期： 基于 Dayjs 的 formatter 格式化占位符語法實(shí)現(xiàn)自定義各種日期格式。

Verse - 隨機(jī)古詩： 隨機(jī)古詩組件，API 來源于 https://www.jinrishici.com/, 可配置定時(shí)刷新。

Search - 搜索欄： 支持添加自定義搜索引擎、按 Tab 鍵快速切換搜索引擎、支持關(guān)鍵詞聯(lián)想。

Collection - 鍵盤收藏夾： 鍵盤收藏夾，設(shè)置網(wǎng)站后按相應(yīng)按鍵自動(dòng)跳轉(zhuǎn)，網(wǎng)站 Icon 自動(dòng)獲取。

Iframe - 外部網(wǎng)站： 設(shè)置嵌入 Iframe，最新版瀏覽器只支持同協(xié)議(當(dāng)前網(wǎng)站為 https)的 Iframe.

TodoList - 備忘清單： 可同時(shí)設(shè)置不同日期，點(diǎn)擊上方日期展開日期選擇器。

Weather - 天氣： 天氣組件，支持通過 IP 自動(dòng)獲取城市也可手動(dòng)輸入，后續(xù)考慮添加讀取 GPS。

CountDown - 倒計(jì)時(shí)： 支持天、小時(shí)、分鐘三種單位的設(shè)置倒計(jì)時(shí)事件。

WeiboList - 微博熱搜： 顯示最新微博熱搜列表，支持配置自動(dòng)刷新。

此外，還有掘金熱門、Github 趨勢(shì)、知乎熱榜。

Editor - Markdown編輯器： 基于 Milkdown 實(shí)現(xiàn)，支持按需加載各種插件包括:

Tooltip: 在選擇文本后會(huì)在其上方出現(xiàn)工具欄可快速切換格式
Slash: 斜線命令，輸入“/”后會(huì)彈出快速選擇工具欄
Clipboard: 為編輯器添加復(fù)制粘貼 Markdown 格式功能
History: 增加歷史記錄功能，使用 Ctrl+Z 和 Ctrl+Y
Prism: 為代碼塊增加高亮功能。

MovieLine - 電影經(jīng)典臺(tái)詞： 隨機(jī)一句電影經(jīng)典臺(tái)詞，并展示其電影海報(bào)作為背景，支持動(dòng)態(tài)設(shè)置各種顯示。

Bookmark - 書簽： 書簽管理器，當(dāng)前文件夾只支持一級(jí)目錄。

添加時(shí)輸入網(wǎng)址可自動(dòng)獲取網(wǎng)站 ICON 與標(biāo)題
圖標(biāo)樣式、大小、背景色都可自定義，圖標(biāo)可緩存為 Base64
支持從 Chrome 內(nèi)核的瀏覽器導(dǎo)出的書簽 HTML 文件導(dǎo)入

最后

推薦的開源項(xiàng)目已經(jīng)收錄到 GitHub 項(xiàng)目，歡迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者訪問網(wǎng)站，進(jìn)行在線瀏覽：

https://chencoding.top:8090/#/

大家的點(diǎn)贊、收藏和評(píng)論都是對(duì)作者的支持，如文章對(duì)你有幫助還請(qǐng)點(diǎn)贊轉(zhuǎn)發(fā)支持下，謝謝！

今主流的技術(shù)中，可以分為前端和后端兩個(gè)門類。

前端：簡(jiǎn)單的理解就是和用戶打交道

后端：主要用于組織數(shù)據(jù)

而前端就Web開發(fā)方向來說，分為三門語言， HTML、CSS、JavaScript

語言	作用
HTML	描述頁面的結(jié)構(gòu)，類似于動(dòng)物的骨架
CSS	渲染技術(shù)，使得頁面更好看，也可以一定程度的讓頁面動(dòng)起來
JavaScript	實(shí)現(xiàn)和后端的交互，數(shù)據(jù)驗(yàn)證、收發(fā)等功能

HTML的結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

上面面的一段代碼既表示一段HTML的結(jié)構(gòu)，它表示生成了一個(gè)空白的HTML網(wǎng)頁

組成HTML的元素稱為標(biāo)簽，標(biāo)簽的結(jié)構(gòu)分為兩種

有開始標(biāo)簽和結(jié)束標(biāo)簽的如 <html> </html>
有單標(biāo)簽的，例如 <img/> ，單標(biāo)簽中的 / 即表示標(biāo)簽的閉合， / 符號(hào)不寫也是可以的

下面這段HTML代碼包含的標(biāo)簽解釋如下

<!DOCTYPE html> 聲明類型，意思為超文本語言類型。

<!DOCTYPE html> 是一種HTML5的規(guī)范寫法，在HTML發(fā)展過程中還有以下的幾種聲明方式

<!DOCTYPE html> html5規(guī)范， html的第一行必須為此值

<!--html4 嚴(yán)格版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "<http://www.w3.org/TR/html4/strict.dtd>">

<!--html4 過渡版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "<http://www.w3.org/TR/html4/loose.dtd>">
<!--html4 框架版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
            "<http://www.w3.org/TR/html4/frameset.dtd>">

關(guān)于html4的聲明類型，可以參考:
<https://www.w3.org/TR/html4/sgml/dtd.html>

html 最外層的一個(gè)跟節(jié)點(diǎn)，里面的所有元素都是它的子元素

<!--lang屬性表示使用英文，如果是中文，可以改成zh, 非嚴(yán)格屬性也可以不寫-->
<html lang="en">

</html>

head 頭標(biāo)記，整個(gè)網(wǎng)頁的全局屬性都會(huì)寫在這個(gè)里面
body 網(wǎng)頁的主體部分，用戶可以直觀感受到的顯示內(nèi)容的部分
meta 標(biāo)簽，標(biāo)記原數(shù)據(jù)，可以規(guī)定網(wǎng)頁的字符、縮放比例等信息


<!--規(guī)定字符集使用UTF-8, UTF-8 涵蓋全球所有的國(guó)際和民族的文字和大量圖像, UTF-8 規(guī)定一個(gè)字符占3個(gè)字節(jié)-->
<meta charset="UTF-8">

title 標(biāo)題標(biāo)簽,標(biāo)題的內(nèi)容會(huì)在瀏覽器的tab頁中顯示

在線咨詢

上一篇：上海網(wǎng)站SEO之HTML代碼標(biāo)簽優(yōu)化的技巧-回聲網(wǎng)絡(luò)
下一篇：hyperscirpt-rxjs之表單輸入

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商