wordpress動漫博客模板東莞seo靠譜
寫在前邊
##關(guān)于插件
①簡體中文
②open-in-browser：自動在瀏覽器生成html頁面；
③Auto Rename Tag：自動匹配標(biāo)簽；
④Live server：實現(xiàn)頁面的實時刷新；
##關(guān)于快捷鍵：
Ctrl + '/'? 用來注釋一個代碼段；
注釋性質(zhì)的語言可以用 <!-- 和 --> 框住；
##HTML文件結(jié)構(gòu)：
html頁面的固定結(jié)構(gòu)在VS code中輸入！+ TAB或者! + 回車 就可以得到。
①<!DOCTYPE html>表示文檔類型，瀏覽器將按照html5來解析網(wǎng)頁文件。?
②<html lang="en"> </html>表示HTML的文檔起止位置，瀏覽器與搜索引擎解析將按照lang屬性
聲明的語言來解析。
③meta標(biāo)簽的charset屬性用于聲明網(wǎng)頁字符集的編碼方式。? <meta charset="UTF-8">
##HTML語法
標(biāo)記是HTML文檔中一些有特定意義的符號，這些符號指明內(nèi)容的含義或結(jié)構(gòu)；
元素：HTML中標(biāo)記和標(biāo)記之間的內(nèi)容組合；
元素有行內(nèi)元素、塊狀元素、行內(nèi)塊元素三種；【利用CSS中的display屬性可以相互轉(zhuǎn)換】
行內(nèi)元素：不可設(shè)置行高、上下內(nèi)外邊距；
塊級元素：獨占一行，可以設(shè)置寬高、內(nèi)外邊距；
行內(nèi)塊元素：可以設(shè)置寬高、內(nèi)外邊距；可以與其他行內(nèi)元素、內(nèi)聯(lián)元素共處一行；
常見標(biāo)記
結(jié)構(gòu)標(biāo)記：html、head、body、section、article、aside、hgroup、header、footer、nav;
【section元素表示頁面的一個內(nèi)容區(qū)塊，比如章節(jié)、頁眉頁腳、或頁面其他部分】
【article元素表示頁面一塊和上下文不相關(guān)的獨立文章，例如本博客文章】
【aside元素表示article元素的內(nèi)容以外的】
【header元素表示頁面中的一個內(nèi)容區(qū)域或整個頁面的標(biāo)題】
【hgroup元素表示整個頁面或頁面中一個內(nèi)容區(qū)塊的標(biāo)題進行組合】
【footer元素表示整個頁面或頁面中一個內(nèi)容區(qū)塊的腳注】
【nav元素表示頁面中導(dǎo)航鏈接的部分】
頭部標(biāo)記：title、meta、link、stytle
文本標(biāo)記：strong、em
段落及標(biāo)題標(biāo)記：p、h1-h6、br
列表標(biāo)記：ul、ol、li、dl、dt、dd
超鏈接標(biāo)記：a、map、area
圖像及媒體元素標(biāo)記：img、embed、object
表格標(biāo)記：table、tr、td、thead、tbody、tfoot
表單標(biāo)記：form、input、textarea、select、option、label
容器標(biāo)記：div、span
video：定義視頻
autio：定義音頻
文本格式標(biāo)記
常用的字符實體：
空格-- ? ? ? ? 全角空格-- ? ? ? ? <小于號--<? ? ? ? >大于號--gt? ? ? ? “引號--quot
&符號--&
<pre>：預(yù)格式標(biāo)記?
列表標(biāo)記
無序列表<ul>? ?其列表項<li>? ? 列表項可以是圖片or文字；
有序列表<ol>? ?其列表項<li>
自定義列表<dl>? 列表項<dt>? 列表項的描述<dd>
超鏈接標(biāo)記【行內(nèi)元素】
<a>標(biāo)簽定義超鏈接；
href 屬性： 規(guī)定鏈接的目的地；
<a href="跳轉(zhuǎn)的目標(biāo)位置">文字或者圖片</a>
跳轉(zhuǎn)的目的地有：
①外部網(wǎng)站，即，<a href="http://www/w3school.com.cn/">學(xué)習(xí)網(wǎng)站</a>
②本網(wǎng)站的另外一個頁面，同一📂下有front.html和rear.html網(wǎng)頁，在front.html點擊文字"前端與后端"，跳轉(zhuǎn)到rear.html，即，
<a href="rear.html">前端與后端</a>
③跳轉(zhuǎn)特定位置，即
<article id="top">...</article>
<p><a href="#top">返回頂部</a></p>
④虛擬超鏈接，即，
<a href="#">學(xué)習(xí)網(wǎng)站</a>
學(xué)習(xí)網(wǎng)站字樣下會有下劃線，但是點擊無跳轉(zhuǎn)；
超鏈接屬性target
_self：當(dāng)前瀏覽上下文。（默認(rèn)）_blank：通常是一個新選項卡，但用戶可以將瀏覽器配置為打開新窗口。_parent：當(dāng)前瀏覽上下文的父瀏覽上下文。如果沒有父級，則行為為_self_top：最頂層的瀏覽上下文（作為當(dāng)前上下文的祖先的“最高”上下文）。如果沒有上級，則行為為_self
超鏈接屬性title
title屬性是全局屬性，鼠標(biāo)移在超鏈接上的時候顯示的一段文字提示。
圖像?
<img src="圖片位置+文件名+擴展名" alt="替換文字"/>
?//替換文字是圖片無法顯示的時候顯示的文字
title屬性是全局屬性，鼠標(biāo)移在圖像上顯示的一段文字提示；
align屬性是對齊屬性；
width、height是寬和高屬性；
表格
表格table由標(biāo)題caption、表頭thead、表體tbody、表尾tfoot構(gòu)成；
表格按照行 tr 存儲；?表格單元格分為表頭單元格 th 和數(shù)據(jù)單元格 td;? ?
默認(rèn)表頭單元格加粗顯示；
border屬性
表格默認(rèn)無邊框，若顯示邊框，可用border;
colspan屬性和rowspan屬性?
colspan合并列，橫向合并；
rowspan合并行，縱向合并；
表單
<form name="表單名稱" method="get|post" action="后續(xù)處理頁面">
? ? ? ? 表單元素
</form>
?method屬性：發(fā)送表單數(shù)據(jù)的方法，取值get用于安全性要求較低，傳輸數(shù)據(jù)較少的情況；
取值post用于安全要求較高，傳輸數(shù)據(jù)較多的情況；
action屬性：向何處發(fā)送表單，處理表單數(shù)據(jù)的后端頁面；
表單元素
文本框&密碼框
<input type="text|password" name="名稱" value="內(nèi)容" placeholder="輸入提示"/>
//type屬性：取值是“text”時為文本框，取值是“password”是密碼框；
//value屬性：文本框中的文本；
//placeholder屬性：用于顯示在文本框中的輸入提示；
提交按鈕&重置按鈕
<input type="submit|reset" name= "名稱" value="內(nèi)部文本"/>
//sunmit-提交按鈕；reset-重置按鈕；
value屬性：按鈕中的文字；
單選框&?復(fù)選框
<input type="radio|checkbox" name="名稱" value="值" checked="checked"/>
//radio-單選框 checkbox-復(fù)選框
//name：一組單選框的name屬性需要取值相同；
//value：按鈕內(nèi)的文字；
//checked：當(dāng)設(shè)置為“chec
ked”時，該選項默認(rèn)為選中狀態(tài)；
標(biāo)簽
標(biāo)簽 label 通常包裹 input 元素，當(dāng)用戶在 label 元素內(nèi)單擊文本，被包裹的表單 元素會被觸發(fā)單擊事件。設(shè)置 label 的 for 屬性為對應(yīng)單選框的 id 屬性，不僅可以單擊單選框標(biāo)識選擇該選項，還可以單擊文字“男/女”來選擇單選框；
<form>
性別:
<label for="boy">男<input type="radio" id="boy" name="gender" checked="checked"/>
</label>
<label for="girl">女<input type="radio" id="girl" name="gender"/>
</label>
</form>
下拉列表?
select標(biāo)簽用于生成下拉列表，option標(biāo)簽用于生成列表項；
<form> <select><option>北京</option><option selected="selected">上海</option></select>
</form>?按鈕?
可以用button標(biāo)簽生成一個按鈕，其內(nèi)容可以是文本或圖像，而 input 元素創(chuàng)建的按鈕內(nèi)容只能是文本。
<button><img src="baidu.png"></button>
文本域
<textarea cols="50" rows="10">文本域中的內(nèi)容</textarea>