在學習html？這一篇文章就夠了

家好，我是四川新華電腦學院小張，

這篇文章講解Html的相關知識，如果想從零開始學習php編程的小伙伴，請從淼哥的第一篇文章看！

上次文章講解的是DTD，也就是我們常說的DOCTYPE。

我們繼續講解。

<!DOCTYPE html>-------------------------DOCTYPE 聲明了文檔類型

<html> ------------------------------------文檔類型html開始標記

<head> -----------------------------------頭部標記

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

</head> ----------------------------------頭部結束標記

<body> ---------------------------------文件主體

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

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

</body> ----------------------------------文件主體結束

</html> ----------------------------------文檔類型html結束標記

這個是我們上次講解的html架構。

接著我們繼續講解。

html標簽

?寫法<html></html>

HTML標簽是HTML文檔的根標簽，在HTML中標簽是一層嵌套一層的，而<HTML>標簽是根標簽（最外面一層的標簽），所有其他的標簽都寫在這個標簽中。

根標簽我們可以理解為最外層的標簽。（看上面的結構）

文檔頭信息

HTML又包含head標簽和body標簽，其中head標簽中設置文檔頭信息，body標簽中設置文檔的內容。

<head> 標簽用于定義文檔的頭部，它是所有頭部元素的容器。

<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。

下面這些標簽可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

那么怎么理解元信息呢？比如對于網頁本身的一些描述，該網頁的標題？該網頁的描述，該網頁用的什么字符編碼！等等，這些信息描述著網頁，用戶又看不到這些信息。

比如某個人的性別，姓名，當你看到這個人，可以看到外貌，身高，穿衣服的顏色。但是你并不知道這個人的姓名，有的也不知道性別。尤其像某些中性一點的長相。是吧。元信息不會渲染，但是屬于該網頁的信息。

base標簽

（該標簽應該學習了a img link form這幾個標簽之后在學習，看不懂沒關系，可以先了解）

base標簽，是嵌套在head標簽中的一個標簽。這個標簽是一個可選標簽，也就是可以有，也可以沒有！

<base> 標簽為頁面上的所有鏈接規定默認地址或默認目標。

通常情況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。比如：我有個<a href='aa.html'>標簽,那么瀏覽器會從當前文檔的url，比如當前文檔的url是www.xxxx.com/aa/bb/cc.html，瀏覽器會把www.xxxx.com/aa/bb/路徑拿出來，和aa.html組成新的url，那么這個超鏈接就會變成www.xxxx.com/aa/bb/aa.html。

使用 <base> 標簽可以改變這一點。

如果我們將base設置成為其他的url。<base />那么，還是<a href='aa.html'>標簽，就會把http://www.myweb.com/i/這個路徑拿出來和aa.html組成新的url地址。那么這個url超鏈接就會變成http://www.myweb.com/i/a.html這個鏈接了。

瀏覽器隨后將不再使用當前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標簽中的 URL。

base標簽的用法

<base /> ------必選屬性。（你有這個標簽，就必須擁有這個屬性）

<base target="_blank" /> ------------------可選屬性。target意思是目標，打開超鏈接的方式，

當然也可以將兩個屬性寫到一個base標簽中。

默認target的屬性是_self，也就是點擊超鏈接，在當前頁面的框架中打開。（為什么不是當前頁面呢？因為頁面有可能嵌套在框架里）

link標簽

用法： <head> <link rel="stylesheet" type="text/css" href="test.css"></head>

meta標簽

meta標簽的作用有：搜索引擎優化（SEO），定義頁面使用語言，自動刷新并指向新的頁面，實現網頁轉換時的動態效果，控制頁面緩沖，網頁定級評價，控制網頁顯示的窗口等！

由于meta信息相對比較復雜我們將在以后HTML高級課程中講解

最常用meta標簽是：

設置頁面編碼寫法。（頁面編碼注意，要設置的編碼和文檔的編碼統一，否則會出亂碼）

具體編碼以后的文章講解。

script標簽

script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件。

必需的 type 屬性規定腳本的 MIME 類型。

JavaScript 的常見應用是圖像操作、表單驗證以及動態內容更新。

用法<script type="text/javascript">document.write("Hello World!") ></script> 以后學javascript將會用到，這里只做了解。

style標簽

在 style 中，您可以規定在瀏覽器中如何呈現 HTML 文檔。

type 屬性是必需的，定義 style 元素的內容。唯一可能的值是 "text/css"。

用法<head> <style type="text/css"> h1 {color:red} p {color:blue} </style> </head>

該標簽將會在學習CSS時用到，這里只做了解

title標簽

<title> 元素可定義文檔的標題。

瀏覽器會以特殊的方式來使用標題，并且通常把它放置在瀏覽器窗口的標題欄或狀態欄上。

同樣，當把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時，標題將成為該文檔鏈接的默認名稱。

用法<title>網頁標題</title>

<title> 標簽是 <head> 標簽中唯一要求包含的東西。（必須有title標簽）

head 標簽總結

<head>標簽唯一要求包含的標簽是<title>其他那幾種可以包含也可以不包含，但是一般我們會包含<meta charset=“utf-8”>告訴瀏覽器我們的文件編碼是什么。

常用的標簽有：

meta標簽，會在Html高級部分繼續講解。

<body>頁面主體信息

body 元素包含html的所有顯示web內容（比如文本、超鏈接、圖像、表格和列表等等。）

Body中可以使用塊級標簽和內聯標簽來顯示文檔結構

塊級標簽：h1~h6,p,div,table,ul,dl,from標簽等

內聯標簽：a,img,span,I,strong,select標簽等

什么塊級標簽（元素）呢？塊級標簽和內聯標簽區別是什么？

塊級元素(block)特性:總是獨占一行

內聯元素(inline)特性:和相鄰的內聯元素在同一行。

標簽和元素是一個意思！

<body>中包含的標簽？

標題標簽

通過<h1>~<h6>六個標簽定義不同大寫的標簽。

文本格式化標簽

早期編寫html代碼的時候，那個時候css用的很少，所以有一些標簽來文本格式化。現在基本都用CSS來格式化文本的大小顏色粗體等等。

而更多時候使用這些標簽來進行占位，利用CSS來渲染這些標簽。常用的是span。

html中的注釋

注釋用來說明、注解、注釋代碼。給人看的不會被執行。

格式為：<!– 注釋內容-->

瀏覽器頁面不會被顯示，而頁面源代碼中可以看到注釋的內容。因為項目越大，或者你的頁面越大，當時可能你能看懂。時間長了肯定看不明白。如果有注釋的話，可以馬上理解當時為什么要這么做。

水平線

在HTML代碼中加入一條水平線利用<hr />來操作。

段落標簽-<p>

瀏覽器會自動地在段落的前后添加空行，一般用在大段的文章。

換行標簽<br/>

<br/>標簽可以實現換一個新行 ,正常來說，你在編寫html頁面的時候，無論怎么換行，在頁面用瀏覽器打開的時候，是不會換行的，如果加入了<br/>標簽，瀏覽器就會認為這里該換行顯示了。

鏈接<a>標簽

HTML 使用超級鏈接與網絡上的另一個文檔相連。

幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

我們通過使用 <a> 標簽在 HTML 中創建鏈接。

有兩種使用 <a> 標簽的方式：

1、通過使用 href 屬性 - 創建指向另一個文檔的鏈接

2、通過使用 name 屬性 - 創建文檔內的書簽

一般錨點鏈接主要用于網頁太長了，想瀏覽的那個位置需要滾輪滾動好幾下才能到達那個位置，而使用錨點（書簽）直接可以準確的跳轉到你想去的位置。

文檔中對錨進行命名（創建一個書簽）

同一個文檔中創建指向該錨的鏈接用關鍵字#+錨名字

<a >有用的提示</a>

也可以鏈接到其他網絡上的頁面錨的鏈接

圖像<img>

可以使用img標簽在頁面上顯示一張圖片。

格式：

備注：一般只設置寬即可，瀏覽器會根據圖片大小進行縮放。如果強行設置寬、高，有的時候圖片會失真。

列表標簽

列表標簽分為有序標簽和無序標簽

當然、有序列表前面也可以更改序號，需要在CSS中學習改變序號的方法。

二級列表<dl>標簽

表格標簽-table

Table標簽用來制作表格，表格由若干個行<tr>組成，每一行又由若干個單元格<td>組成。

Table標簽中使用tr標簽定義行，td標簽定義一行中的一個列。如：定義一個一行四列。

表格的表頭使用 <th> 標簽進行定義。

大多數瀏覽器會把表頭顯示為粗體居中的文本：

<table>標簽的cellpadding 屬性規定單元邊沿與其內容之間的空白。

<table>標簽的cellspacing 屬性規定單元格之間的空間。

橫向合并單元格-colspan

表格-table-豎向-rowspan

內聯框架

可以使用iframe在頁面中在嵌入另外一個頁面。

分區標簽-div
Div是塊級標簽，主要是用來作為標簽容器，和規劃頁面結構（頁面布局）的
用法：
<div style="margin:auto;border:1px solid #f00;width: 300px;height: 600px"></div>

在很早以前，小編剛入行的時候，那個時候CSS不流行，頁面布局全部都用表格來做。那酸爽實在無法用言語來表達。而現在都是用CSS來進行頁面布局。這個div標簽頁是以后布局常用的標簽。

Span標簽

Span標簽是內聯標簽，沒有特殊功能。主要是用來做為文本的容器，span標簽主要是配合CSS來處理文字。

比如，我只想讓幾個文字編程紅顏色的，這個時候就可以用span標簽配合CSS來做了。

框架集-frameset

我們可以使用frameset標簽把一個頁面窗口分隔成多個窗口，然后使用frame標簽為每一個窗口制定一個頁面

使用rows/cols的值規定每行或每列占據屏幕的面積,中間用逗號分隔。

frameset不能放在body中，如果放在body中不能顯示框架！

在最新的html5中已經刪除了這個標簽了

實體

在 HTML 中，某些字符是預留的。

在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認為它們是標簽。

比如我們想在網頁使用空格，直接按空格鍵是肯定不好使的，所以使用使用實體  !

音頻

使用embed標簽可以在網頁中嵌入Flash，Mid，MP3等嵌入式內容

現在html5出了很多新的標簽，以后會專門有講解html5的文章。

今天我們一起了解了html相關的很多標簽。其實都很簡單。只要自己動手做一做，就可以做出來了。如果想要做出精美的頁面，還是需要配合css來實現的哦。

明天我們繼續講解html的一些其他相關知識。手寫不宜！請給小編點個贊！十分感謝。

文將詳細介紹如何在.NET桌面程序中使用自定義的XML配置文件來保存和讀取設置。除了XML之外，我們還將探討其他常見的配置文件格式，如JSON、INI和YAML，以及它們的優缺點和相關的NuGet類庫。最后，我們將重點介紹我們為何選擇XML作為配置文件格式，并展示一個實用的示例。

1. 背景

在.NET桌面程序中，通常使用setting文件來保存程序的配置信息。使用setting文件的方法很簡單，只需在項目中添加一個setting文件，然后通過Properties.Settings.Default來獲取和保存設置即可。

我的開源項目 HackerScreenSaver^[1] 之前就是使用這種方式，但是當我在升級 Windows11 的內核版本后，發現當程序在被系統以屏保程序啟動后，無法加載配置了。

如此這般就需要使用其他方式來存儲配置文件了。畢竟，setting文件并非唯一可用于保存設置的方式。我們可以選擇存儲到注冊表，或者自己寫配置文件并保存。

2. 常見的配置文件格式

對于一些簡單的配置我們甚至可以直接寫一個二進制文件，當然一般情況下我們還是選擇常見格式的配置文件，比如：JSON、INI 和 YAML。

1.JSON(JavaScript Object Notation) 格式?優點：易于閱讀和編寫，支持復雜的數據結構，廣泛應用于Web API和前端開發。?缺點：根據 JSON 規范，其是不支持注釋的（單獨 Json 文件在某些編輯器可以正確解析注釋，在 .NET Core 中通過 JSON 配置提供程序讀取配置時，也可以在配置文件中添加注釋）。?相關類庫：Newtonsoft.Json（建議使用自帶的 System.Text.Json），可參考相關遷移教程^[2]。2.INI（Initialization File）?優點：簡潔，易于閱讀和編輯，適用于存儲簡單的鍵值對。?缺點：不支持復雜的數據結構和類型。?相關類庫：ini-parser3.YAML（Yet Another Markup Language）?優點：簡潔，易于閱讀和編輯，支持復雜的數據結構，支持注釋。?缺點：縮進敏感，可能導致錯誤。?相關類庫：YamlDotNet

3. HackerScreenSaver 的配置選擇

HackerScreenSaver 為了設計的小巧，根據合適原則和簡單原則，我最終選擇了不需要引入其他第三方的 XML 格式配置文件。

XML（eXtensible Markup Language）具有以下優點：

?可擴展性強，支持復雜的數據結構。?支持注釋，便于理解和維護。?作為標準的數據交換格式，易于與其他系統集成。

以下是我們設計的一個簡單的配置類 SimpleSetting，用于保存設置：

public class SimpleSetting{ // 類的屬性和構造函數省略...
 /// <summary> /// 從文件中讀取設置 /// </summary> /// <param name="path">配置文件路徑</param> public SimpleSetting(string path) { System.Xml.Serialization.XmlSerializer xs = new System.Xml.Serialization.XmlSerializer(typeof(SimpleSetting)); using (System.IO.FileStream fs = new System.IO.FileStream(path, System.IO.FileMode.Open)) { SimpleSetting ss = (SimpleSetting)xs.Deserialize(fs); isLocal = ss.isLocal; uInfo = ss.uInfo; Opacity = ss.Opacity; autoExit = ss.autoExit; } }
 /// <summary> /// 保存設置到文件 /// </summary> /// <param name="path">配置文件路徑</param> public void Save(string path) { System.Xml.Serialization.XmlSerializer xs = new System.Xml.Serialization.XmlSerializer(typeof(SimpleSetting)); using (System.IO.FileStream fs = new System.IO.FileStream(path, System.IO.FileMode.Create)) { xs.Serialize(fs, this); } }}

SimpleSetting 類中包含了從XML文件中讀取設置和將設置保存到XML文件的方法。為了使用該類，我們只需要在程序中創建一個 SimpleSetting 對象，然后調用其 Save 和 Load 方法即可。這樣，我們就可以在.NET桌面程序中使用自定義的XML配置文件來保存設置了。

4. 最后

本文詳細介紹了如何在.NET桌面程序中使用自定義的 XML 配置文件以及為何選擇 XML 作為配置文件格式。同時，我們還探討了其他常見的配置文件格式，如 JSON、INI 和 YAML，以及它們的優缺點和相關的 NuGet 類庫。希望這篇文章能幫助你找到適合你項目需求的配置文件解決方案！

References

[1] HackerScreenSaver: https://github.com/sangyuxiaowu/HackerScreenSaver?wt.mc_id=DT-MVP-5005195
[2] 相關遷移教程: https://learn.microsoft.com/zh-cn/dotnet/standard/serialization/system-text-json/migrate-from-newtonsoft?wt.mc_id=DT-MVP-5005195

何提升Web頁面的性能，很多開發人員從多個方面來下手如JavaScript、圖像優化、服務器配置，文件壓縮或是調整CSS。

很顯然HTML 已經達到了一個瓶頸，盡管它是開發Web 界面必備的核心語言。HTML頁面的負載也是越來越重。大多數頁面平均需要40K的空間,像一些大型網站會包含數以千計的HTML 元素，頁面Size會更大。

如何有效的降低HTML 代碼的復雜度和頁面元素的數量，本文主要解決了這個問題，從多個方面介紹了如何編寫簡練，清晰的HTML 代碼，能夠使得頁面加載更為迅速，且能在多種設備中運行良好。

在設計和開發過程中需要遵循以下原則：

結構分離：使用HTML 增加結構，而不是樣式內容；
保持整潔：為工作流添加代碼驗證工具；使用工具或樣式向導維護代碼結構和格式
學習新語言：獲取元素結構和語義標記。
確保可訪問：使用ARIA 屬性和Fallback 屬性等
測試：使網站在多種設備中能夠良好運行，可使用emulators和性能工具。

HTML,CSS 和JavaScript三者的關系

HTML 是用于調整頁面結構和內容的標記語言。HTML 不能用于修飾樣式內容，也不能在頭標簽中輸入文本內容，使代碼變得冗長和復雜，相反使用CSS 來修飾布局元素和外觀比較合適。HTML元素默認的外觀是由瀏覽器默認的樣式表定義的，如在Chrome中h1標簽元素會渲染成32px的Times 粗體。

三條通用設計規則：

使用HTML 來構造頁面結構，CSS修飾頁面呈現，JavaScript實現頁面功能。CSS ZenGarden 很好地展示了行為分離。
如果能用CSS或JavaScript實現就少用HTML代碼。
將CSS和JavaScript文件與HTML 分開存放。這可有助于緩存和調試。

文檔結構方面也可以做優化，如下：

使用HTML5 文檔類型，以下是空文件：

<!DOCTYPE html>
<html>
<head>
 <title>Recipes: pesto</title>
</head>
<body>
 <h1>Pesto</h1>
 <p>Pesto is good!</p>
</body>
</html>

在文檔起始位置引用CSS文件，如下：

<head>
 <title>My pesto recipe</title>
 <link rel="stylesheet" href="/css/global.css">
 <link rel="stylesheet" href="css/local.css">
</head>

使用這兩種方法，瀏覽器會在解析HTML代碼之前將CSS信息準備好。因此有助于提升頁面加載性能。

在頁面底部body結束標簽之前輸入JavaScript代碼，這樣有助于提升頁面加載的速度，因為瀏覽器在解析JavaScript代碼之前將頁面加載完成，使用JavaScript會對頁面元素產生積極的影響。

<body>
 ...
 <script src="/js/global.js">
 <script src="js/local.js">
</body>

使用Defer和async屬性，腳本元素具有async 屬性無法保證會按順序執行。

可在JavaScript代碼中添加Handlers。千萬別加到HTML內聯代碼中，比如下面的代碼則容易導致錯誤且不易于維護：

index.html:

<head>
 ...
 <script src="js/local.js">
</head>
<body onload="init()">
 ...
 <button onclick="handleFoo()">Foo</button>
 ...
</body>

下面的寫法比較好：

index.html:

<head>
 ...
</head>
<body>
 ...
 <button id="foo">Foo</button>
 ...
 <script src="js/local.js">
</body>

js/local.js:

init();
var fooButton =
 document.querySelector('#foo');
fooButton.onclick = handleFoo();

驗證

優化網頁的一種方法就是瀏覽器可處理非法的HTML 代碼。合法的HTML代碼很容易調試，且占內存少，耗費資源少，易于解析和渲染運行起來更快。非法的HTML代碼讓實現響應式設計變得異常艱難。

當使用模板時，合法的HTML代碼顯得異常重要，經常會發生模板單獨運行良好，當與其他模塊集成時就報各種各樣的錯誤，因此一定要保證HTML代碼的質量，可采取以下措施：

在工作流中添加驗證功能：使用驗證插件如HTMLHint或SublineLinter幫助你檢測代碼錯誤。
使用HTML5文檔類型
確保HTML的層次結構易于維護，要避免元素嵌套處于左開狀態。
保證添加各元素的結束標簽。
刪除不必要的代碼；沒有必要為自關閉的元素添加結束標簽；Boolean 屬性不需要賦值，如果存在則為True;

代碼格式

格式一致性使得HTML代碼易于閱讀，理解，優化，調試。

語義標記

語義指意義相關的事物，HTML 可從頁面內容中看出語義：元素和屬性的命名一定程度上表達了內容的角色和功能。HTML5 引入了新的語義元素，如<header>，<footer>及<nav>。

選擇合適的元素來編寫代碼可保證代碼的易讀性：

使用<h1>(<h2>,<h3>…)表示標題，<ul>或<ol>實現列表
注意使用<article> 標簽之前應添加<h1>標簽；
選擇合適的HTML5語義元素如<header>，<footer>,<nav>,<aside>;
使用<p>描述Body 文本，HTML5 語義元素可以形成內容，反之不成立。
使用<em>和<strong>標簽替代<i>和<b>標簽。
使用<label>元素，輸入類型，占位符及其他屬性來強制驗證。
將文本和元素混合，并作為另一元素的子元素，會導致布局錯誤，

例如：

<div>Name: <input type="text" id="name"></div>

換種寫法會更好：

 1: <div>
 2: <label for="name">Name:</label><input type="text" id="name">
 3: </div>

布局

要提高HTML代碼的性能，要遵循HTML 代碼以實現功能和為目標，而不是樣式。

使用<p>元素修飾文本，而不是布局；默認<p>是自動提供邊緣，而且其他樣式也是瀏覽器默認提供的。
避免使用<br>分行，可以使用block元素或CSS顯示屬性來代替。
避免使用<hr>來添加水平線，可使用CSS的border-bottom 來代替。
不到關鍵時刻不要使用div標簽。
盡量少用Tables來布局。
可以多使用Flex Box
使用CSS 來調整邊距等。

CSS

雖然本文講解的是如何優化HTML，下面介紹了一些使用css的基本技能：

避免內聯css
最多使用ID類一次
當涉及多個元素時，可使用Class來實現。

以上就是本文介紹的優化HTML代碼的技巧，一個高質量高性能的網站，往往取決于對細節的處理，因此我們在日常開發中，能夠考慮到用戶體驗，后期維護等方面，則會產生更高效的開發。

在線咨詢

上一篇：免費領取：PDF轉word,Excel,ppt,html等工具安裝教程（附安裝包）
下一篇：把HTML轉成PDF的4個方案及實現方法

您的項目需求

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