新手操作HTML
一、
首先得學會使用HTML5-API手冊，因為HTML的屬性有很多很多，如果將這些屬性全部記下來的話得不償失，需要花費大量的時間和經歷，因此我們需要學會使用這個幫主文檔才能全面而深入的了解HTML；
就像你去找對象一樣，首先你需要了解她喜歡吃什么，性格怎樣，身高體重顏值屬性，喜好什么......知己知彼，百戰不殆！！！保存一下很好用的幾個手冊網址
HTML5-API手冊、
W3C規定的官方查詢網址
接下來就是一步一步找回你大一時候學習的HTML的感覺，先聲明，教程的目的就是逐漸增強，是一種最佳的實踐過程，相信會有收獲的
網頁的構造塊
第一步要讓內容對所有用戶都是可訪問的。
<!DOCTYPE html> 是一個聲明，表示該文檔是由 HTML5 進行編寫的。這句代碼很關鍵，寫在開頭第一行（且必須寫在第一行，位于標簽之前），告訴瀏覽器當前使用哪個版本的HTML進行編寫的指令。
為什么要提示一下呢？因為HTML問世的時候太多規則了，下面對比一下HTML5未問世的時候HTML4這些需要聲明的，可以說，沒有HTML5問世之前，這句代碼的聲明真的是又長又臭，現在只需要短短的一句代碼代替，是不是極大方便我們程序員的工作量呢。
再者很多普通知識點其實老師都會教到的，像那些<head><title><body><h1>標簽其實上文檔查詢一下就知道怎么使用了，這里不多說，只是能熟悉一下就可以使用。
網頁文件命名規范：
使用小寫字母的文件名，目錄和文件夾的名稱也應該全部小寫。
用短橫線 (-) 分割單詞。
使用正確的擴展名 (.html) 。
二、
基本的框架搭建好后，當你需要給你網頁的內容加上自己想要的樣式的時候該用那個標簽呢？
通過CSS的形式插入在<head></head>之間即可，這里是直接在HTML插入樣式<style></style>，后面第4點會教大家如何通過外部引入CSS樣式到HTML中，讓HTML的純內容看起來更加簡潔，這里對CSS如何使用陌生的話可能要自己先看看書了，因為的確很簡單。舉個栗子：
<html> <head> <style type="text/css"> h1 {color:red}<!--這里相當于可以給你的文檔上色啊添加背景顏色啊等功能樣式--> p {color:blue} </style> </head><body> <h1>Header 1</h1> <p>A paragraph.</p> </body> </html>補充一點：style樣式也可以直接作用在文本內容中，例如讓超鏈接沒有下劃線，這時候可以通過作用在標簽內部的屬性style實現
舉個栗子：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> </head><body><a href="/example/html/lastpage.html" style="text-decoration:none"> 這是一個鏈接！ </a></body> </html>三、
對了，不要忘記在之間加上<meta charect="UTF-8">設置識別時使用的字符集，否則很容易出現亂碼的情況，說到這里，不得不提一下標簽對于HTML的重要性
<meta> 元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。<meta> 標簽位于文檔的頭部，不包含任何內容，<meta> 標簽的屬性定義了與文檔相關聯的名稱/值對。名稱/值對是什么意思呢？例如你上百度的時候會寫上你想要得到的信息的關鍵詞，那么百度公司就會每天放出很多爬蟲，這些爬蟲的功能就是整合各種網頁的<meta name="keywords" content="疫情,中國,美國">標簽里面包含的關鍵詞給到用戶進行索引，沒有這個的話網頁創建出來的意義可能就不存在了，每人搜索每人看意味著你的服務器交的錢白白浪費掉是吧。
<meta>有幾種重要的屬性：
注意：content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。
<meta>標簽還可以設置網頁的某些屬性：
<head><meta name="author" content="作者名字"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> </head>width=device-width ： 表示寬度是設備屏幕的寬度
initial-scale=1.0: 表示初始的縮放比例
minimum-scale=0.5： 表示最小的縮放比例
maximum-scale=2.0：表示最大的縮放比例
user-scalable=yes： 表示用戶是否可以調整縮放比例
這段死記硬背的代碼是因為iphone 3GS出現的時候，使得網頁在手機瀏覽器里會縮搭配980px像素，用戶想看哪個地方就放大哪個地方，如果你的網頁不面向手機端，可以省略這段代碼
四、
style樣式表的外部CSS引入實現：
1.在文件夾中新建一個xxx.css文件
2.如果你在html中的<style></style>內已經編寫好相關內容了，可以把里面的內容（注意.css文件里面并不用寫<style></style>,只要把標簽內容添加進去）全部復制進xxx.css文件中即可
里面到底編寫些什么呢？如何在HTML里面引入外部的樣式表？
樣式的意思是給你枯燥的文本內容穿上一件美麗的衣服，可以設置背景顏色，字體顏色等等
步驟：
1.規定在內寫入標簽進行引入
2.引入的屬性如何設置呢？
由于我們引入的是外部設置的樣式表，所以用到屬性和值如下：
rel和href的區別就是前者是跟超鏈接的文件類型，后者是跟超鏈接的地址
`<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >` 這個 `href="/html/csstest1.css` 的文件名字改成你新建的那個即可通過查詢幫助文檔可以得知
有時候瀏覽網頁的時候發現這個標簽很有意思，有趣一點還可以鏈接到一個外部圖標給網頁
其實這個圖標就是把一個文檔內的圖標給鏈接上去，只不過CSDN的圖標人家是搭建在他的服務器內的，和我們本地搭建的圖標地址有點不一樣。
實現方法:
<head><link rel="icon" type="image/x-icon" href="../圖標文件存放路徑"> </head>五、
當然，對于鏈接的使用，有一個更強大的標簽，叫做標簽，我們稍微了解一下吧
標簽為頁面上的所有鏈接規定默認地址或默認目標。
通常情況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。
使用 標簽可以改變這一點。瀏覽器隨后將不再使用當前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 、、、 標簽中的 URL。
舉個栗子：
<head> <base href="http://www.w3school.com.cn/i/" /> <base target="_blank" /> </head><body> <img src="eg_smile.gif" /> <a href="http://www.w3school.com.cn">W3School</a> </body>上面這段代碼中，標簽的src屬性是一個相對路徑，因為中通過base標簽設置了鏈接的默認地址，所以img的src實際的地址是“http://www.w3school.com.cn/i/eg_smile.gif”
同樣，<a> 中只是指定了href，并未指定target屬性，所以也會使用base中設置的target屬性的值，target="_blank"是新標簽頁面打開的定義。
在 HTML 中，空元素結尾處的空格和斜杠是可選的。
在 HTML 中，屬性值兩邊的引號是可選的，但習慣上還是會寫上它們。
相對 URL
-同一文件夾下的文件：直接文件名訪問 index.html
-子文件夾下的文件：直接訪問或者通過單句點引用當前文件夾 info/about.html 或 ./info/about.html
-父文件夾下的文件：雙句點引用上級目錄 ../img/pic.jpg
-根目錄下的文件或文件夾：以斜杠開頭 /root/...
總結
- 上一篇： JAVA入门级教学之（对象和引用）
- 下一篇： docker 部署_Nginx K8s