一起學習HTML&amp;CSS（004）-頭部標記head

顧

在上一篇文章中，小編介紹了HTML文檔的基本結構，如下圖所示：

HTML文檔結構

為了驗證或者是為了更好的掌握文檔的結構，小伙伴們可以在瀏覽器中打開任意一個網頁（如：百度）查看它們的源代碼，具體操作如下：

打開瀏覽器（IE、Chrome、firefox等）；
輸入網址（如：www.baidu.com）；
在頁面空白處單擊鼠標右鍵，在彈出的菜單中選擇<查看源文件>選項打開源文件。

HTML頭部標記head

HTML語言的頭部元素中包括多種信息，例如標題、樣式表定義和腳本等。HTML的頭部元素以<head>為開始標記，以</head>為結束標記。

語法：

說明：

頭部標記head的作用域為整篇文檔，包括的內容通常不會在界面上直接顯示出來。

舉例：

<!DOCTYPE html>
<html>
<head>
這是文檔頭部
</head>
<body>
這是文檔內容
</body>
</html>

者：hetu666

來源：CSDN

概述

HTML(HyperText Markup Language) 不是一門編程語言，而是一種用來告知瀏覽器如何組織頁面的標記語言。

HTML 可復雜、可簡單，一切取決于開發者。它由一系列的元素組成，這些元素可以用來包圍不同部分的內容，使其以某種方式呈現或者工作。一對標簽可以為一段文字或者一張圖片添加超鏈接，將文字設置為斜體，改變字號，等等

一個元素

元素的主要部分有：

1開始標簽（Opening tag）：包含元素的名稱（本例為 p），被左、右角括號所包圍。表示元素從這里開始或者開始起作用 —— 在本例中即段落由此開始。

2結束標簽（Closing tag）：與開始標簽相似，只是其在元素名之前包含了一個斜杠。這表示著元素的結尾 —— 在本例中即段落在此結束。初學者常常會犯忘記包含結束標簽的錯誤，這可能會產生一些奇怪的結果。

3內容（Content）：元素的內容，本例中就是所輸入的文本本身。

4元素（Element）：開始標簽、結束標簽與內容相結合，便是一個完整的元素。

塊級元素

塊級元素在頁面中以塊的形式展現 —— 相對于其前面的內容它會出現在新的一行，其后的內容也會被擠到下一行展現。塊級元素通常用于展示頁面上結構化的內容，例如段落、列表、導航菜單、頁腳等等。一個以block形式展現的塊級元素不會被嵌套進內聯元素中，但可以嵌套在其它塊級元素中。

效果：

屬性

一個屬性必須包含如下內容：

1，在元素和屬性之間有個空格space (如果已經有一個或多個屬性，就與前一個屬性之間有一個空格.)

2屬性后面緊跟著一個“=”符號.

3，有一個屬性值,由一對引號“ ”引起來.

href: 這個屬性聲明超鏈接的web地址，當這個鏈接被點擊瀏覽器會跳轉至href聲明的web地址。例如：href="***/"。
title: 標題title屬性為超鏈接聲明額外的信息，比如你將鏈接至那個頁面。例如：title="***"。當鼠標懸浮時，將出現一個工具提示。
target: 目標target屬性用于指定鏈接如何呈現出來。例如，target="_blank"將在新標簽頁中顯示鏈接。如果你希望在目前標簽頁顯示鏈接，只需忽略這個屬性。

布爾

有時你會看到沒有值的屬性，它是合法的。這些屬性被稱為布爾屬性，他們只能有跟它的屬性名一樣的屬性值。

<!-- 使用disabled屬性來防止終端用戶輸入文本到輸入框中 -->
<input type="text" disabled>
 
<!-- 下面這個輸入框沒有disabled屬性，所以用戶可以向其中輸入 -->
<input type="text">

單引號或者雙引號？

在目前為止，本章內容所有的屬性都是由雙引號來包裹。也許在一些HTML中，你以前也見過單引號。這只是風格的問題，你可以從中選擇一個你喜歡的。以下兩種情況都可以：

<a >示例站點鏈接</a>
 
<a >示例站點鏈接</a>

但你應該注意單引號和雙引號不能在一個屬性值里面混用。下面的語法是錯誤的：

<a >示例站點鏈接</a>

HTML結構

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>我的測試站點</title>
 </head>
 <body>
 <p>這是我的頁面</p>
 </body>
</html>

1，<!DOCTYPE html>: 聲明文檔類型. 很久以前，早期的HTML(大約1991年2月)，文檔類型聲明類似于鏈接，規定了HTML頁面必須遵從的良好規則，能自動檢測錯誤和其他有用的東西。使用如下：

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

然而現在沒有人再這樣寫，需要保證每一個東西都正常工作已成為歷史。你只需要知道<!DOCTYPE html>是最短的有效的文檔聲明。

2，<html></html>: <html>元素。這個元素包裹了整個完整的頁面，是一個根元素。

3，<head></head>: <head>元素. 這個元素是一個容器，它包含了所有你想包含在HTML頁面中但不想在HTML頁面中顯示的內容。這些內容包括你想在搜索結果中出現的關鍵字和頁面描述，CSS樣式，字符集聲明等等。以后的章節能學到更多關于<head>元素的內容。

4.<meta charset="utf-8">: 這個元素設置文檔使用utf-8字符集編碼，utf-8字符集包含了人類大部分的文字。基本上他能識別你放上去的所有文本內容。毫無疑問要使用它，并且它能在以后避免很多其他問題。

5.<title></title>: 設置頁面標題，出現在瀏覽器標簽上，當你標記/收藏頁面時它可用來描述頁面。

6.<body></body>: <body>元素。包含了你訪問頁面時所有顯示在頁面上的內容，文本，圖片，音頻，游戲等等。

空白

代碼中包含的空格是沒有必要的；下面的兩個代碼片段是等價的：

<p>狗 狗 很 呆 萌。</p>
 
<p>狗 狗 很
 呆 萌。</p>

渲染這些代碼的時候，HTML解釋器會將連續出現的空白字符減少為一個單獨的空格符。

那么為什么我們會使用那么多的空白呢? 可讀性 —— 如果你的代碼被很好地進行格式化，那么就很容易理解你的代碼。

特殊字符

注釋

為了將一段HTML中的內容置為注釋，你需要將其用特殊的記號包括起來，比如：

<p>我在注釋外！</p>
 
<!-- <p>我在注釋內！</p> -->

頭部

HTML 頭部是包含在<head> 元素里面的內容。不像 <body>元素的內容會顯示在瀏覽器中，head 里面的內容不會在瀏覽器中顯示，它的作用是包含一些頁面的元數據。

元數據

元數據就是描述數據的數據，而HTML有一個“官方的”方式來為一個文檔添加元數據—— <meta> 。有很多不同種類的 <meta> 可以被包含進你的頁面的<head>元素，比如。

指定字符的編碼

<meta charset="utf-8">

這個元素簡單的指定了文檔的字符編碼 —— 在這個文檔中被允許使用的字符集。 utf-8 是一個通用的字符集，它包含了任何人類語言中的大部分的字符。

添加作者和描述

name 指定了meta 元素的類型；說明該元素包含了什么類型的信息。
content 指定了實際的元數據內容。

CSS和JavaScript

如今，幾乎你使用的所有網站都會使用css讓網頁更加炫酷，使用js讓網頁有交互功能，比如視頻播放器，地圖，游戲以及更多功能。這些應用在網頁中很常見，它們分別使用<link>元素以及 <script> 元素。

<link rel="stylesheet" href="my-css-file.css">

<script src="my-js-file.js"></script>

標題和段落

在HTML中，每個段落是通過<p>元素標簽進行定義的, 比如下面這樣：

<p>我是一個段落，千真萬確。</p>

每個標題（Heading）是通過“標題標簽”進行定義的：

<h1>我是文章的標題</h1>

這里有六個標題元素標簽 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每個元素代表文檔中不同級別的內容; <h1> 表示主標題（the main heading），<h2> 表示二級子標題（subheadings），<h3> 表示三級子標題（sub-subheadings），等等。

列表

<ol>
 <li>先用蛋白一個、鹽半茶匙及淀粉兩大匙攪拌均勻，調成“腌料”，雞胸肉切成約一厘米見方的碎丁并用“腌料”攪拌均勻，腌漬半小時。</li>
 <li>用醬油一大匙、淀粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調拌均勻，調成“綜合調味料”。</li>
 <li>雞丁腌好以后，色拉油下鍋燒熱，先將雞丁倒入鍋內，用大火快炸半分鐘，炸到變色之后，撈出來瀝干油汁備用。</li>
 <li>在鍋里留下約兩大匙油，燒熱后將切好的干辣椒下鍋，用小火炒香后，再放入花椒粒和蔥段一起爆香。隨后雞丁重新下鍋，用大火快炒片刻后，再倒入“綜合調味料”繼續快炒。
 <ul>
 <li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。</li>
 <li>如果你在北方，可加入黃瓜丁、胡蘿卜丁和花生米，翻炒后起鍋。</li>
 </ul>
 </li>
</ol>

標記

<i> 被用來傳達傳統上用斜體表達的意義：外國文字，分類名稱，技術術語，一種思想……

<b> 被用來傳達傳統上用粗體表達的意義：關鍵字，產品名稱，引導句……

<u> 被用來傳達傳統上用下劃線表達的意義：專有名詞，拼寫錯誤……

<strong>強調重要的詞

超鏈接

通過將文本轉換為<a>元素內的鏈接來創建基本鏈接，給它一個href屬性（也稱為目標），它將包含您希望鏈接指向的網址。

<p>I'm creating a link to
<a href="https://www.***.com/">***</a>.
</p>

使用title屬性添加支持信息

<p>I'm creating a link to
<a 
 title="這是百度">百度</a>.
</p>

I'm creating a link to 百度.

塊級鏈接

可以將一些內容轉換為鏈接，甚至是塊級元素。例如你想要將一個圖像轉換為鏈接，你只需把圖像元素放到<a></a>標簽中間。

文檔片段

超鏈接除了可以鏈接到文檔外，也可以鏈接到HTML文檔的特定部分（被稱為文檔片段）。要做到這一點，你必須首先給要鏈接到的元素分配一個id屬性。例如，如果你想鏈接到一個特定的標題，可以這樣做：

<h2 id="Mailing_address">Mailing address</h2>

然后鏈接到那個特定的id，可以在URL的結尾使用一個哈希符號（#）指向它，例如：

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

你甚至可以在同一份文檔下，通過鏈接文檔片段，來鏈接到同一份文檔的另一部分：

<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

表單

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>增加學生</title>
</head>
<body>
 
 <form method="post" action="/community/alpha/student">
 
 <p>
 姓名：<input type="text" name="name">
 
 </p>
 <p>
 年齡：<input type="text" name="age">
 
 </p>
 <p>
 <input type="submit" value="保存">
 </p>
 </form>
</body>
</html>

后臺：

 //post
 @RequestMapping(path = "/student",method = RequestMethod.POST)
 @ResponseBody
 public String saveStudent(String name,int age){
 System.out.println(name);
 System.out.println(age);
 return "success";
 }

大部分用來定義表單小部件的元素都有一些他們自己的屬性。然而，在所有表單元素中都有一組通用屬性，它們可以對這些小部件進行控制。下面是這些通用屬性的列表:

密碼框

通過設置type屬性值為password來設置該類型框：

<input type="password" id="pwd" name="pwd">

搜索框

通過設置 type屬性值為 search 來設置該類型框：

<input type="search" id="search" name="search">

電話號碼欄：

通過 type屬性的 tel 值設置該類型框：

<input type="tel" id="tel" name="tel">

URL 欄

通過type屬性的url 值設置該類型框：

<input type="url" id="url" name="url">

多行文本框

多行文本框專指使用<textarea>元素，而不是使用<input>元素。

<textarea cols="30" rows="10"></textarea>

按鈕

在HTML表單中，有三種按鈕：

Submit

將表單數據發送到服務器。對于<button>元素, 省略 type 屬性 (或是一個無效的 type 值) 的結果就是一個提交按鈕.

Reset

將所有表單小部件重新設置為它們的默認值。

Anonymous

沒有自動生效的按鈕，但是可以使用JavaScript代碼進行定制。

每次向服務器發送數據時，都需要考慮安全性。到目前為止，HTML表單是最常見的攻擊路徑(可能發生攻擊的地方)。這些問題從來都不是來自HTML表單本身，它們來自于服務器如何處理數據。

根據你所做的事情，你會遇到一些非常有名的安全問題：

XSS 和 CSRF

跨站腳本(XSS)和跨站點請求偽造(CSRF)是常見的攻擊類型，它們發生在當您將用戶發送的數據顯示給這個用戶或另一個用戶時。

XSS允許攻擊者將客戶端腳本注入到其他用戶查看的Web頁面中。攻擊者可以使用跨站點腳本攻擊的漏洞來繞過諸如同源策略之類的訪問控制。這些攻擊的影響可能從一個小麻煩到一個重大的安全風險。

CSRF攻擊類似于XSS攻擊，因為它們以相同的方式開始攻擊——向Web頁面中注入客戶端腳本——但它們的目標是不同的。CSRF攻擊者試圖將權限升級到特權用戶(比如站點管理員)的級別，以執行他們不應該執行的操作(例如，將數據發送給一個不受信任的用戶)。

XSS攻擊利用用戶對web站點的信任，而CSRF攻擊則利用網站對其用戶的信任。

為了防止這些攻擊，您應該始終檢查用戶發送給服務器的數據(如果需要顯示)，盡量不要顯示用戶提供的HTML內容。相反，您應該對用戶提供的數據進行處理，這樣您就不會逐字地顯示它。當今市場上幾乎所有的框架都實現了一個最小的過濾器，它可以從任何用戶發送的數據中刪除HTML<script>、<iframe> 和<object>元素。這有助于降低風險，但并不一定會消除風險。

SQL注入

SQL 注入是一種試圖在目標web站點使用的數據庫上執行操作的攻擊類型。這通常包括發送一個SQL請求，希望服務器能夠執行它（通常發生在應用服務器試圖存儲由用戶發送的數據時）。這實際上是攻擊網站的主要途徑之一。

其后果可能是可怕的，從數據丟失到通過使用特權升級控制整個網站基礎設施的攻擊。這是一個非常嚴重的威脅，您永遠不應該存儲用戶發送的數據，而不執行一些清理工作(例如，在php/mysql基礎設施上使用mysql_real_escape_string()

HTTP數據頭注入和電子郵件注入

這種類型的攻擊出現在當您的應用程序基于表單上用戶的數據輸入構建HTTP頭部或電子郵件時。這些不會直接損害您的服務器或影響您的用戶，但它們會引發一個更深入的問題，例如會話劫持或網絡釣魚攻擊。

這些攻擊大多是無聲的，并且可以將您的服務器變成僵尸。

偏執:永遠不要相信你的用戶

那么，你如何應對這些威脅呢?這是一個遠遠超出本指南的主題，不過有一些規則需要牢記。最重要的原則是:永遠不要相信你的用戶，包括你自己；即使是一個值得信賴的用戶也可能被劫持。

所有到達服務器的數據都必須經過檢查和消毒。總是這樣。沒有例外。

遠離有潛在危險的字符轉義。應該如何謹慎使用的特定字符取決于所使用的數據的上下文和所使用的服務器平臺，但是所有的服務器端語言都有相應的功能。

限制輸入的數據量，只允許有必要的數據。

沙箱上傳文件(將它們存儲在不同的服務器上，只允許通過不同的子域訪問文件，或者通過完全不同的域名訪問文件更好)。

最后，我自己是一名從事了多年開發的JAVA老程序員，辭職目前在做自己的java私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的java學習干貨，可以送給每一位喜歡java的小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：交流，即可免費獲取。

上流行的解決方案是將assetsPublicPath: '/'改成'./'，下面說一下這個解決方案的弊端：

通常頁面空白的問題出現大多數是由于Spring Boot端配置了server.servlet.context-path，上下文改變了css, js等文件的訪問路徑，文件無法加載導致index.html顯示空白。'/'改成'./'是將絕對路徑變為相對路徑，可以動態適應Spring Boot端上下文的改變，這是為什么這個解決方案起作用的原因。

Vue項目部署在Spring Boot出現的另一個常見問題是當刷新瀏覽器的時候出現white label, 也就是404錯誤，解決的方案基本是把error page配置成為Vue的index.html。

這兩個解決方案有沖突的地方，當router出現子路徑的時候刷新瀏覽器，error page會指向Vue的index.html頁面，此時頁面中訪問css,js文件的路徑是相對路徑，也就是上下文路徑+router子路徑，這將導致css,js再次無法正常加載，這就是相對路徑的弊端。

由于router會出現子路徑，因此必須保證assetsPublicPath為絕對路徑，下面講一下保持絕對路徑的解決方案：

1 假設Spring Boot端配置server.servlet.context-path： api, 對應Vue的/config/index.js中assetsPublicPath: '/'改成 '/api/'

2 router/index.js中配置base: '/api/', 這是保證瀏覽器刷新時上下文參數和router跳轉路徑一致。

3 對于Ajax請求需要配置baseURL, 如果使用Axios, 可以采用如下方法在main.js中配置

// http request 攔截器
Axios.interceptors.request.use(
config => {
if (localStorage.getItem('id_token')) {
config.headers.Authorization = localStorage.getItem('id_token')
}
config.baseURL = '/api'
return config
},
err => {
return Promise.reject(err)
})

4 另外需要注意的一點，按照Spring Boot默認配置，在Vue端/config/index.js中assetsSubDirectory: 'static'要改變為其它字符，比如：'content', 'vue', 'api'等等。

5 試過將assetsSubDirectory配置為空，它和另一個css圖片加載的方案有沖突，圖片加載解決方案是在/build/util.js中加一行配置

// Extract CSS when that option is specified

// (which is the case during production build)

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader',

publicPath: '../../'

})

結尾附上Spring Boot端將error page指向Vue的index.html代碼：

import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.boot.web.server.ConfigurableWebServerFactory;
 import org.springframework.boot.web.server.ErrorPage;
 import org.springframework.boot.web.server.WebServerFactoryCustomizer;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.http.HttpStatus;
 @Configuration
 public class ServletConfig {
 private static final Logger logger = LoggerFactory.getLogger(ServletConfig.class);
 @Bean
 public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer() {
 logger.info("come to 404 error page");
 return factory -> {
 ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
 factory.addErrorPages(error404Page);
 };
 }
 }

對前端全棧工程師感興趣的同學關注我的頭條號，并在后臺私信發送關鍵字：“前端”即可獲取免費的前端全棧工程師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！！

在線咨詢

上一篇：「胖達分享」網頁中的圖片和html文檔的路徑
下一篇：PHP筆記(二) HTML表單

您的項目需求

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

整合營銷服務商

一起學習HTML&amp;amp;CSS（004）-頭部標記head

顧