1.html:超文本標記語言。它是一種標識性的語言，非編程語言，不能使用邏輯運算。通過標簽將網絡上的文本格式進行統一，使用分散網絡資源鏈接為一個邏輯整體，屬于標記語言。
? 超文本：就是指頁面內可以包含圖片，鏈接，甚至音樂，視頻等非文字元素；一般使用超鏈接進行關聯，是一種組織信息的方法
? 標記：標簽，用<>包裹的具有一定含義的內容
2.瀏覽器的內核
? ? Trident內核：代表產品IE，又被稱為IE內核，是微軟開發的一種排版引擎。使用Trident渲染引擎的瀏覽器有：IE，遨游，世界之窗瀏覽器，騰訊TT等等
? ? Gecko內核：代表產品Mozilla FirefoxGecko是一套開源的，C++編寫的排版引擎。使用它最著名的瀏覽器有Firefox,Netscape 6至9.
? ? webkit內核：代表產品有Safari,主要用于Mas OS系統，使用它的瀏覽器有Safari和谷歌瀏覽器Chrome.
? presto內核：代表產品OperaPresto是由Opera Software開發的瀏覽器排版引擎，它是世界公認最快的渲染速度引擎
? ? Blink內核：由Google和Opera Software開發的瀏覽器排版引擎，2013年4月發布，現在Chrome和Opera內核是Blink3.前端的開發工具：DCloud HBuilder/Subilme test 3/VScode/webstorm
4.HTML文檔結構：meta:元，主要用來對應的設置
? ?stylesheet是樣式表的意 ? body里面用于大量的標簽 ！：表示聲明的意思
? ?<!DOCTYPE html>這一行代碼的意思是：下面的文檔標簽將以html5的規范去解析
? ?用link生成網站的圖標
? ?link:favicon
5.標簽：
<div>：用來布局的，沒有具體含義，可以解釋層
<hx>:標題的意思，從一級到六級，一級標題最大，六級最小，會自動加粗，有默認字號
<p>:表示段落，相當于一個回車
<br>是一個單標簽，放在一段文字的結尾用于換行
<hr>是一個分割線，一般用于裝飾作用，單標簽
<hr width="80%” ?align="center" color="red" height=“2px”/>(align是對齊的意思，center表示居中的意思,px表示像素的意思）
<a>表示超鏈接，實現鏈接跳轉 ?<a href=“網址” title="提示語"（或者打開自己的網站，若不跳轉target="_blank,如果跳轉target="_self"）>名稱</a>
跳轉的話可以值網址也可以是文件文檔
img：用來加載外部圖片、圖像 src:用來設定加載的圖片或圖像的路徑 alt:當圖片加載不成功時，將顯示其內容
基本格式為：<img src"圖片地址" title="移動鼠標時顯示的內容“ alt=" ">
span:作用與div一樣，都是用來布局的，不同是div會獨占一行，而span不會,用于行內布局
ul/ol:列表，前者是無序列表，后者是有序的，他們的列表內容都用的是li標簽
ul>li{li$}*3快速生成3個ul和li嵌套
復制的快捷鍵是ctrl+D
快捷鍵br*5
一定要寫注釋，經典的VS注釋
標簽屬性：1.通常由屬性名=屬性值組成。<p title="段落“ class="content"id="content">這是一個測試段落</p>
? ? ? ? ? ? ? ? 2.其附加信息的作用
? ? ? ? ? ? ? ? 3.不是所用的標簽都有屬性，比如br
文本格式化標簽：就是通過標簽來美化文本外觀
b和strong:都有加粗的作用，但strong除了加粗還有強調作用，注：強調主要用于SEO時，便于提取關鍵字，且都是行級標簽（不會自動換行）
i和em:使文字傾斜，em具有強調作用，如果只是簡單的傾斜效果，用i標簽就可以，比如添加圖標簽等（行級標簽）
<i>文字傾斜</i> ? <em>文字傾斜且強調</em>
pre:預格式化文本：保留換行和空格及寬度,文字的字號會小一號（塊狀標簽（在瀏覽器中會獨占一行））
<pre> </pre>
small和big:分別讓文字縮小一號或放大一號（行級標簽（不會獨占一行，且不會識別寬高）），p標簽是正常的文字大小。big在HTML5中淘汰了，但并沒有刪除，在開發中盡量不要使用 ?注：瀏覽器支持的最小字號為12px字，如果要顯示比12px還小文字效果，需要做處理
sub和sup:設置文本為下標和上標 ，用來調整文本正常顯示的基線，且文字會自動小一號
?<p>X1+X2=Y</p>
?<p>下標：X<sub>1</sub>+X<sub>2</sub>=Y</p>
?<p>上標：X<sup>2</sup>+Y<sup>2</sup>=Z</p>
HTML中的實意轉換：
? ? ? ?<p> aa bb</p>,起到增加空格的作用
? ? ? ?<p>1×2=2</p> ?<:小于號（<） ?>:大于號（>） &:與號（&）  :空格 ?©:版權 ? ×:乘號（x） ÷:除號（/）
塊級元素（相當于執行了display:block操作）：1.獨占一行 2.寬度和高度是可控的，如果每沒有設置其高度，將默認鋪滿整行 3.其內可以包含塊級和行級元素
行級元素（相當執行了display:inline;操作）： 1.不會獨占一行，與相鄰的行政元素占同一行，直到行占滿。會自動掉到下一行 2.寬度和高度是不可控的 3.其內只有包含行級元素 ? （同是塊級標簽是可以改變行寬和行高，但行級標簽不受影響）
行級的格式：<p style="width:300px;height:50px;background:gray;">p</p>
塊級標簽轉行級標簽
<p style="width:300px;height:50px;background:gray;display:inline;”>塊級標簽轉行級標簽</p>
行級標簽轉塊級標簽
<span style="width:300px;height:50px;background:gray;display:block;">行級標簽轉為塊級標簽</span>
W3C:專門負責統一web相關的各項標準，由結構表現和形式組成
1.行級元素不能放在塊級元素中
2.塊級元素不能放在<p>里面
3.塊級元素和塊級元素并列，內嵌元素和內嵌元素并列
<q> </q>用于加雙引號 ?table[border=1]>caption{學生信息表}+tr>th*3(用于生成一個寬為1的表格
項目開發時，項目中文件或目錄名不能出現漢字和空格之類的其他符號，文件和目錄名一般以字母或下劃線開頭—，其后可以出現數字和文件名
? ?目錄名：taobaopro images/img/pic video music file web/sites....
? 文件名：index.html(首頁） product.html(產品頁） order.html(訂單頁）new_details.html(新聞詳細頁）
標簽由標簽名、標簽屬性和文本內容三部分組成（注意單標簽沒有文本內容）
標簽屬性是對便簽的一種描述方式
標簽屬性分為通用屬性、自有屬性和自定義屬性
通用屬性：所有便簽都具有的屬性
? ? ?通用屬性有：
? ? ? ? ? ? id:用來給標簽取一個唯一的名稱 ?<p id ="p1">段落1</p> ?<p id="p2">段落2</p>
? ? ? ? ? ? class:用來給標簽取一個類名 ?<div class="test">div</div> ?<p class="test”>p</p>（一組標簽）
? ? ? ? ? ? style:用來設置該標簽的行內樣式 ?<p style="color:red;width:200px;border:lpx solid #00f;">這是一個測試</p>
? ? ? ? ? ? title:當鼠標移到該標簽，所顯示的提示內容 <p title="您好”>HOW are you?</p>(鼠標移上去的顯示的是在title中的?
?自定義屬性：通常用來傳值或用于圖片懶加載等方面
? ? 格式：date-* ? <img date-src="圖片名” alt="提示文本”/> ?<p date-id="goodsid">....</p>
------------------------------------------------------------------------------------------------------------------------------------------------------------
表格 table主要用于呈現格式化數據。表格是由行和列組成的
<table>
? ?<tr>行
? ? ? ? ?<td></td>列
? ? ? ? ?<td></td>
? ? ? ....
? ?</tr>
?</table> ? table>tr*2>td{內容}*3 ?align是居中的意思 ?<table border="1" width="400" cellspacing ="0" cellpadding="10" align="center">
border：表格邊框，默認單位是像素 ?width:表格寬度，默認單位是像素 align:表格對齊方式（left（默認）/center/right）cellpaddng:單元格文本與邊框的距離 cellspacing:單元格邊框間距
------------------------------------------------------------------------------------------------------------------------------------------------------------
HTML 表單中有兩種類型的單元格：表頭單元格 - 包含表頭信息（由 th 元素創建）標準單元格 - 包含數據（由 td 元素創建）。th 元素內部的文本通常會呈現為居中的粗體文本，而 td 元素內的文本通常是左對齊的普通文本 ?th:title head
跨行/跨列屬性主要用來繪制復雜表格 ? rowspan:跨行 ?colspan:跨列
? ? Emmet語法：table【border=1 width=500 align=center】>tr*3>tha{內容區$$}*3 ?$$代表的是01 02.....
對于表格的合并可以用rowspan="2" ?居中：align="center" ? 上下的靠邊：valign="top"/bottom/middle(垂直對齊）
完整表格：caption（標題），thead(表頭）tbody(表體）（屬于同戶級的）
繪制一個學生信息表：table[border=1 width=600 align=center]>(caption{學生信息表}+（thead>tr>th*4）+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=1])
-------------------------------------------------------------------------------------------------------------
form表單標簽是所有標簽最核心標簽之一。他是用來實現前后端交互的一個重要標簽
常用屬性：
? ? ? ? ? ? ?name:表單名稱
? ? ? ? ? ? ?action:表單數據提交的地方（通常是一個后臺文件名（.jsp/.php/.asp/.aspx/.py等），或網址。如果是#，表示提交到當前文件下?
? ? ? ? ? ? ?method:前端提交數據到后端的方法，主要有：get和post，默認的是get(區別在于get會將你提交的內容暴露在地址欄中，而post 不會出現這種情況
? ? ? ? <form name="stuInfo" action="test.php" method="get">
? ? ? ? ? ? <input type="test" name="userName" placeholder="請輸入您的姓名“>
? ? ? ? ? ? <input type="submit">
? ? ? ? </form>
表單元素分為：
? ? ? input類 ?textarea類 ? select類 ? button類
1.input：主要用來輸入，選擇或發出指令(根據type進行分類）
? ? <input type="test"/>:定義供文本輸入的單行輸入字段
? ? <input type="password"/>:定義密碼字段
? ? <input type="sudmit"/>:定義提交表單數據至表單處理程序的按鈕
? ? <input type="image"/>:定義圖片提交按鈕
? ? <input type="radio"/>:定義單選按鈕{check{boolean}:屬性為選中狀態，true為選中，false為未選中
? ? <input type="checkbox"/>:定義復選框
? ? {check{boolean}:屬性為選中狀態，true為選中，false為未選中
? ? <input type="button"/>:定義普通按鈕
? ? <input type="reset"/>:定義重置按鈕
? ? <input ?type="file"/>:定義文件框
test:單行文本輸入框 type="test"可以不寫，默認值
? ? ? ?屬性：placeholder(提示）/name(命名）/minlength和maxlength(最少輸入的字符個數）/disabled（失效）/readonly（只讀）用于激活但是不能輸入 ?想控制輸入的字符個數可以用minlength和maxlength
格式如下：<input type="test" name="test" placeholder="請輸入一個數字” vale="100" minlength="3" maxlength="6">
vale(默認值）/pattern(正則匹配）
2.密碼框
password
屬性和test一樣 ?radio:單選鈕，通常是兩項以上。常用屬性有：name(必須要有）/value/checked(選中）/disabled（失效）/readonly（只讀）
checkbox:復選框，可以用來選擇0項，1項或多項（常用屬性和radio一樣）
file:文件上傳按鈕 ?
button:通常用它去調用腳本代碼（常用屬性有：value(按鈕的標題）/disabled(失效））
imag:圖片按鈕，用法和button一樣。有一個特殊的屬性；src(用來加載提示圖片，用它替換了value)
submit:提交按鈕，用來將表單數據提交到后臺
? 常用屬性：value(按鈕的標題）/disabled(失效）
reset:重置按鈕，將表單所有組件輸入的內容全部清空，還原為初始狀態（input類）
常用屬性有：value(按鈕的標題）/disabled(
textarea類
? ?文本域（也可以叫多行文本框），主要用于大批量的內容
常用屬性：name/id/cols（列數）/rows（行數）/placeholder/minlength/maxlength/required(必須輸入）
select類
下拉列表框，默認用于單項選擇，用option呈現每個選項
multiple屬性：表示可以多選，這時的下拉列表框編程人能夠
size:最多顯示的行數
button類
普通按鈕：具有提交功能，可以單獨使用，不寫在form元素中，如果寫在form中，有提交功能
<botton id="btnok">確認</button>(這里的button主要用來調用js代碼）
<form action="test.aspx">
? ? <input type="test" name="info">
? ?<button>提交</button>(這里的button的功能與input中的submut按鈕的功能一樣
</form>
表單的通用屬性：
? ? ? ? ? ? ? ? ? ? ? name屬性：規定輸入字段名稱
? ? ? ? ? ? ? ? ? ? ? value屬性：規定輸入字段的初始值
? ? ? ? ? ? ? ? ? ? ? readonly屬性：規定輸入字段為只讀
? ? ? ? ? ? ? ? ? ? ? disabled屬性：規定輸入字段是禁用的
iframe:框架集，是用來將多個網頁文件合成一個文件
常見屬性：
name:框架名
src：引入外部html文件
scrolling：滾動條（yes/no/auto）
width:寬度（%/px）
height：高度(%/px)
fameborder：是否有邊框（1/0）
marginheiht:框架頂部和底端的距離（%/px)
marginwidth:框架離左右的距離（%/px）
科普：banner基于網站的角度來講，它主要的是頁面中的橫幅廣告，banner廣告主要存在于網站的首頁導航頂端，也可以是內容咨詢頁的頂端，亦或是網站頁面底部。
注意：在實際開發中，盡量減少iframe,因為它破壞了前進和后退功能，且不利于SEO（搜索引擎優化）
//當用戶在瀏覽器輸入網址后，瀏覽器與服務器建立了一個連接，瀏覽器給 Web 服務器發送了一個 HTTP 請求，服務器接收并解析請求后，返回響應。HTTP 響應中包含狀態代碼和返回資源的內容（響應正文）。
200 ：成功。
400 ：客戶端請求有語法錯誤，服務器端不能理解。
401 ：該請求可能未經過授權。
403 ：服務器端收到該請求，但是拒絕為它提供服務，可能是沒有權限等等。
404 ：該資源沒找到。
500 ：服務器端發生了一個不可預知的錯誤。
503 ：服務器端當前還不能處理客戶端的這個請求，可能過段時間之后才能恢復正常。
p和div兩個塊級元素的區分：
語義：
<div>：這是一個通用的容器元素，沒有特定的語義含義。它通常用于布局和樣式化，或者作為其他具有特定語義的元素（如<article>、<section>等）的容器。
<p>：這是一個段落元素，表示一個文本段落。瀏覽器通常會在每個<p>元素前后添加一些空白（margin)
使用場景：
<div>：由于其通用性，<div>通常用于構建頁面的布局和結構。它常常與CSS一起使用，以定義元素的樣式和位置。
<p>：通常用于定義文檔中的段落，以區分不同段落的內容。雖然也可以用<div>來代替<p>，但為了保持HTML的語義化和可訪問性，最好使用<p>來表示段落。
媽的<p>是有默認的上下邊距的一般采用margin=0進行消除，效果是非常明顯的
可嵌套的內容:
<div>：可以包含任何其他HTML元素。
<p>：通常只包含文本或其他塊級元素（如<ul>、<ol>、<li>等）。如果需要在段落中包含其他塊級元素，這些元素通常需要放在<div>或<span>等其他容器內。
<div>和<span>之間的區別
<div>可以包含其他塊級元素和行內元素，甚至可以嵌套另一個<div>。
<span>只能包含其他行內元素或文字內容。
常見的塊級元素:div,p,h1-h6,ul,ol,li,table,form
常見的行內元素:span,a,img,strong,em,input,label等
塊級元素就是填充整行，行內元素就是對整行中的特定部分
塊級元素可以調整寬高內外邊距等屬性
行級元素的高寬是由內容決定的
對于它們之間的轉換：
<a>標簽在默認的情況下是行內元素，但如果給a標簽設置display:block;屬性，它就會變成塊級元素
------------------------------------------------------------------------------------------------------------------------------------------------------------
css:層疊樣式表，用來美化網頁的，做到結構（HTML）和（CSS）分離
css語法有三部分組成：選擇器，屬性，屬性值
h1{
?color；red;//其中h1是選擇器，color為屬性 red為值
}
CSS 語法結構為：選擇器{屬性：值;屬性：值;...}
選擇器：通常是你需要設置樣式的 HTML 元素。
屬性：是你需要設置的樣式屬性，比如寬高，顏色，大小等。
屬性值：你需要設置的樣式屬性的具體值，比如寬高具體是多少 px，顏色具體是什么顏色。
顏色值：
在網頁中的顏色設置是非常重要，有字體顏色，背景顏色，邊框顏色等，設置顏色的方法也有很多：
1.英文命名顏色
p{
?color：pink;
}
2.RGB顏色（由 Red、Green、Blue 三種顏色的比例來配色，簡稱 RGB。）
?p{
? ?color:rgb(30%,20%,40%);
}
3.十六進制顏色
現在較為普遍的顏色使用法，其原理其實也是 RGB 設置，但是其每一項的值由 0~255 變成了十六進制 00-ff。
p{
? color:#00eeff;
}
長度值
px 像素（Pixel）。相對長度單位，像素 px 是相對于顯示器屏幕分辨率而言的。
特點：
IE 無法調整那些使用 px 作為單位的字體大小。
國外的大部分網站能夠調整的原因在于其使用了 em 或 rem 作為字體單位。
2.em
就是本元素給定字體的 font-size 值，如果元素的 font-size 為 14px，那么 1em=14px。如果 font-size 為 18px，那么 1em=18px。
p{
?font-size:14px;
?line-height:2em;
}/*在這里的line-height行高被設置成了14*2=28px*/
3.百分比
p{weigtht加粗
? ?font-size:14px;（字體大小）
? ?line-height:120%;(行高）
}/*行高為：14*1.2=16.8*/
CSS 樣式類型分為三種：內聯式、內嵌式、外鏈式。
內聯式（行內式）
通過標簽的style 屬性來設置元素的樣式，語法格式為：
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; ..."> 內容 </標簽名>
eg:<p style="color:blue;">哈嘍，要保持微笑哦。</p>
缺點：只能操作某一個標簽，沒有實現樣式和結構相分離。
內嵌式（內部樣式表）
css引用方式：行間樣式，內部樣式，外部樣式，導入外部樣式。
行間樣式：直接在標簽上書寫樣式
內部樣式：在文件的內部書寫樣式。
<style> 樣式內容</style>
外部樣式：1.先創建一個css文件；2.再用link標簽引入這個文件
導入外部樣式：1.先創建一個css文件2.在style標簽中用import導入這個樣式文件
外部樣式：1.先創建一個CSS文件2.再用link引入這個文件
導入外部樣式文件：1.先創建一個CSS文件；2.在style標簽中用import導入這個樣式文件。（主要用）
CSS的選擇器：
<style>*{red}</style>(但是此種方法的耗時較長）
標簽選擇器：用來匹配對應的標簽
類選擇器：用來選擇class命名的標簽(是用class進行定義的)
派出選擇器：根據上下文來確定選擇的標簽
對選擇器進行分組
讓多個選擇器(元素)具有相同的樣式，一般用于設置公共樣式
選擇器的繼承 子元素可以繼承父元素
樣式權重
！important(10000)>內聯（1000)>id選擇器（100）>類，偽選擇器（10)>標簽原則器（1）（可以用權重來提升外鏈式的優先級）
css字體
1.font-size:字號
屬性值
eg.p{font-size:20px;} ?p{font-size:100%;}
2.font-family；字體
eg:p{font-family:Courier,"Courier New",monospace;} 逗號并列用于字體樣式的備選
3.font-style:文字樣式
normal//italic:斜體//oblique:傾斜的字體
eg: p{ font-style:normal;}
? ? p{ font-style:italic;}
? ? p{ font-style:oblique;}
4.font-weight:文字加粗
?屬性值：
normal:默認值，正常字體
bold:粗體 bolder:比bold粗
lighter:比normal細。
{100-900}：定義由粗到細的字符。400等同于normal,而700等同于bold.
p{font-weight:normal;}
p{font-weight:bold;}
p{font-weight:600;}
5.line-height:行高(設置文本文字的行高。即字體最低端與字體內部頂端之間的距離
屬性值：normal:默認值，默認行高 ?{number+px}:指定行高為長度像素 ?{number}:指定行高為字體大小的倍數
p{line-height:normal;}
p{line-height:24px;}
p{line-height:1.5;}
6.color:文字的顏色
name:顏色名稱指定color
rgb:指定顏色為RGB值
{顏色16進制:指定顏色為16進制}
p{color:red;}
p{color:rgb(100,14,200);}
p{color:#345678;}
7.text-decoration:文字修飾
屬性：normal:默認值，無修飾值。 underline:下劃線。 line-through:貫穿線、overline:上劃線
p{ text-decoration:underline;}
p{test-decoration:line-through;}
p{ test-decoration:overline;}
8.text-align:文本對齊方式
left:默認值，左對齊
center:居中對齊
right:右對齊。
p{ text-align:left;}
p{test-align:center;}
p{ text-align:right;}
9.test-transform:字母大小寫
none:默認值（無轉換發生）
capitalize:將每個單詞的第一個字母轉換成大寫
uppercase:轉換成大寫
lowercase:轉換成小寫
p{text-transform:capitalize;}
p{text-transform:uppercase;}
p{test-tranform:lowercase;}
10.text-index:文本縮進
{number+px}:首行縮進number像素
{number+em}:首行縮進number字符//一個文字距離
p{text-indent:24px;}
p{text-indent:2em;}//兩個文字距離
CSS背景（background-color）
1.background-color:設置對象的背景顏色
屬性：
transparent:默認值（背景色透明）
{color}:指定顏色
eg:div{background-color:#666666;}
? ?div{background-color:red;}
2.background-image(設置對象的背景圖像）
? ?屬性值：
? none:默認值（無背景圖）
? ? url({url}):使用絕對或相對url地址背景圖像
eg:div{background-image:none;}
? ?div{background-image:url('../image/pic.png')}
3.background-repea(設置對象的背景圖像鋪排方式）
（repeat/no-repeat/repeat-x/repeat-y）
4.background-position:設置對象的背景圖像位置
屬性值：{x-number|top|center|bottom} {y-number|left|center|right}：控制背景圖片在元素的位置：x軸，y軸。其鋪排方式為no-repeat.
5.backgroud-attachment:設置對象的背景圖像滾動位置
屬性：
scroll:默認值。背景圖像會隨著頁面其余部分的滾動而滾動
fixed:當頁面的其余部分滾動時，背景圖像不會移動
eg: body{
? ? ?background-image:url('.../image/pic.png');
? ? ?background-repeat:no-repeat;
? ? ?background-attachment:fixed;
}
?
當時寫的時候, 是邊看視頻邊記的, 感覺寫的挺詳細的, 但是有點亂....
感謝大家的點贊和關注，你們的支持是我創作的動力！
?
學習)
![第2章，[標簽 Win32] ：Windows 的字符串函數](http://pic.xiahunao.cn/第2章，[標簽 Win32] ：Windows 的字符串函數)
