htyper text markup language 即超文本標(biāo)記語言
超文本: 就是指頁(yè)面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
標(biāo)記語言: 標(biāo)記（標(biāo)簽）構(gòu)成的語言.
網(wǎng)頁(yè)的分類:
網(wǎng)頁(yè)==HTML文檔，由瀏覽器解析，用來展示的
靜態(tài)網(wǎng)頁(yè)：靜態(tài)的資源，如xxx.html
動(dòng)態(tài)網(wǎng)頁(yè)：html代碼是由某種開發(fā)語言根據(jù)用戶請(qǐng)求動(dòng)態(tài)生成的
html文檔樹形結(jié)構(gòu)圖
什么是標(biāo)簽:
是由一對(duì)尖括號(hào)包裹的單詞構(gòu)成 例如: <html> *所有標(biāo)簽中的單詞不可能以數(shù)字開頭.
標(biāo)簽不區(qū)分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標(biāo)簽分為兩部分: 開始標(biāo)簽<a> 和 結(jié)束標(biāo)簽</a>. 兩個(gè)標(biāo)簽之間的部分 我們叫做標(biāo)簽體.
有些標(biāo)簽功能比較簡(jiǎn)單.使用一個(gè)標(biāo)簽即可.這種標(biāo)簽叫做自閉和標(biāo)簽.例如: <br/> <hr/> <input /> <img />
標(biāo)簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>
標(biāo)簽的屬性:
通常是以鍵值對(duì)形式出現(xiàn)的. 例如 name="alex"
屬性只能出現(xiàn)在開始標(biāo)簽 或 自閉和標(biāo)簽中.
屬性名字全部小寫. *屬性值必須使用雙引號(hào)或單引號(hào)包裹 例如 name="alex"
如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
<!DOCTYPE html>標(biāo)簽
在W3C標(biāo)準(zhǔn)出臺(tái)以前，瀏覽器在對(duì)頁(yè)面的渲染上沒有統(tǒng)一規(guī)范，產(chǎn)生了差異(Quirks mode或者稱為Compatibility Mode)；
由于W3C標(biāo)準(zhǔn)的推出，瀏覽器渲染頁(yè)面有了統(tǒng)一的標(biāo)準(zhǔn)(CSScompat或稱為Strict mode也有叫做Standarsmode)，這就是二者最簡(jiǎn)單的區(qū)別。
1 2 3 | window.top.document.compatMode：//BackCompat：混雜模式，瀏覽器使用自己的混雜模式解析渲染頁(yè)面。 //CSS1Compat：標(biāo)準(zhǔn)模式，瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁(yè)面。 |
這個(gè)屬性會(huì)被瀏覽器識(shí)別并使用，但是如果你的頁(yè)面沒有DOCTYPE的聲明，那么compatMode默認(rèn)就是BackCompat
如果你的頁(yè)面添加了<!DOCTYPE html>，那么就等同于開啟了標(biāo)準(zhǔn)模式
1.name 屬性主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content.
content中的內(nèi)容:主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。
1 2 3 | <meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)"><meta name="description"content="哩嗶哩（bilibili）直播是國(guó)內(nèi)首家關(guān)注 ACG 直播的互動(dòng)平臺(tái)。"> |
2.http-equiv 相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息。以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容。
與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值！！
1 2 3 4 | <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> *(注意后面的引號(hào)，分別在秒數(shù)的前面和網(wǎng)址的后面)<meta http-equiv="content-Type" content="text/html; charset=UTF8"> 簡(jiǎn)寫 <meta charset="UTF8"><br><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
body標(biāo)簽：
一: 基本標(biāo)簽
<hn>: n的取值范圍是1~6; 從大到小. 用來表示標(biāo)題. <p>: 段落標(biāo)簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白. <b> <strong>: 加粗標(biāo)簽. <strike>: 為文字加上一條中線. <em>: 文字變成斜體. <sup>和<sub>: 上角標(biāo) 和 下角表. <br>:換行. <hr>:水平線 可以通過border設(shè)置顏色屬性 <div><span>
塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽
1 2 3 | 塊級(jí)標(biāo)簽：<p> <h1> <table> <ol> <ul> <form> <div>內(nèi)聯(lián)標(biāo)簽：<a> <input> <img> <sub> <sup> <textarea> <span> |
block（塊）元素的特點(diǎn)
① 總是在新行上開始；
② 高度，行高以及外邊距和內(nèi)邊距都可控制；
③ 寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。
④ 它可以容納內(nèi)聯(lián)元素和其他塊元素
inline元素的特點(diǎn) !!!
① 和其他元素都在一行上；
② 高，行高及外邊距和內(nèi)邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
⑤ 設(shè)置margin 只有左右margin有效，上下無效。
⑥ 設(shè)置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對(duì)元素周圍的內(nèi)容是沒影響的。
特殊字符：
< > " © ®
二:圖形標(biāo)簽: <img> :
src: 要顯示圖片的路徑. alt: 圖片沒有加載成功時(shí)的提示!. title: 鼠標(biāo)懸浮時(shí)的提示信息. width: 圖片的寬 height: 圖片的高 (寬高兩個(gè)屬性只用一個(gè)會(huì)自動(dòng)等比縮放.)
三 超鏈接標(biāo)簽(錨標(biāo)簽)<a>:
href:要連接的資源路徑 格式如下:
target: _blank : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內(nèi)容.
name: 定義一個(gè)頁(yè)面的書簽( id屬性也適用! ). 用于跳轉(zhuǎn) href : #書簽名稱.
錨標(biāo)簽: <a href="#abc">定位第一章</a> <div id='abc'>我是第一章</abc> <div id='efg'>我是第一章</abc> 或者: <div name='abc'>我是第一章</abc> <div name='efg'>我是第一章</abc>
四 列表標(biāo)簽：
<ul>: 無序列表
<ol>: 有序列表
<li>:列表中的每一項(xiàng).
<dl> 定義列表
<dt> 列表標(biāo)題
<dd> 列表項(xiàng)
<dl> <dt>定義:</dt> <dd>內(nèi)容</dd> </dl>
五 表格標(biāo)簽: <table>:
border: 表格邊框. cellpadding: 內(nèi)邊距 cellspacing: 外邊距. width: 像素 百分比.（最好通過css來設(shè)置長(zhǎng)寬） rowspan: 單元格豎跨多少行! colspan: 單元格橫跨多少列!（即合并單元格）
六 表單標(biāo)簽<form>:
表單用于向服務(wù)器傳輸數(shù)據(jù)。
表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label 元素。
1.表單屬性
HTML表單用于接收不同類型的用戶輸入，用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互。
action: 表單提交到哪. 一般指向服務(wù)器端一個(gè)程序,程序接收到表單提交過來的數(shù)據(jù)（即表單元素值）作相應(yīng)處理。
method: 表單的提交方式 post/get 默認(rèn)取值 就是 get（信封）
get: 1.提交的鍵值對(duì).放在地址欄中url后面. 2.安全性相對(duì)較差. 3.對(duì)提交內(nèi)容的長(zhǎng)度有限制.
post: 1.提交的鍵值對(duì) 不在地址欄. 2.安全性相對(duì)較高. 3.對(duì)提交內(nèi)容的長(zhǎng)度理論上無限制.
get/post是常見的兩種請(qǐng)求方式.
1 | <form action='https://www.baidu.com/' , method='post'> |
2.表單元素
<input>
type: 可選屬性 text 文本輸入框 password 密碼輸入框 radio 單選框 checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) file 提交文件：form表單需要加上屬性enctype="multipart/form-data" name: 表單提交項(xiàng)的鍵. 注意和id 屬性的區(qū)別：name屬性是和服務(wù)器通信時(shí)使用的名稱；而id屬性是瀏覽器端使用的名稱， 該屬性主要是為了方便客戶端編程，而在css和javascript中使用的。 value: 表單提交項(xiàng)的值. 對(duì)于不同的輸入類型，value 屬性的用法也不同： type="button", "reset", "submit" - 定義按鈕上的顯示的文本 type="text", "password", "hidden" - 定義輸入字段的初始值 type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值 checked: radio 和 checkbox 默認(rèn)被選中 readonly: 只讀. text 和 password disabled: 對(duì)所有input標(biāo)簽都有效果.
<select> 下拉選標(biāo)簽屬性：
name: 下拉列表的名稱 size： 選項(xiàng)個(gè)數(shù) multiple： multiple value: 表單提交項(xiàng)的值. selected: selected下拉選默認(rèn)被選中 <option> 下拉選中的每一項(xiàng) 屬性 <optgroup>為每一項(xiàng)加上分組
demo效果:
<textarea> 文本域
name: 表單提交項(xiàng)的鍵. cols: 文本域默認(rèn)有多少列 rows: 文本域默認(rèn)有多少行 <textarea rows="4" cols="20"> 在w3school，你可以找到你所需要的所有的網(wǎng)站建設(shè)教程。 </textarea>
<label>
如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，
當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上
<fieldset>
組合表單中的相關(guān)元素：
聯(lián)系客服
