1俱两、基本概念
HTML
超文本標(biāo)記語言
H Hyper
T text （超鏈接 圖片 視頻 音頻等）
M markup（標(biāo)記，標(biāo)簽 <不是編程語言>）
L language
HTML是一個樹狀結(jié)構(gòu)宪彩，標(biāo)簽間是有父子尿孔，兄弟關(guān)系的
html結(jié)構(gòu)
------head
顯示網(wǎng)頁信息聲明 title/meta/link/script
title是必填項
-----------title
------body
------------所有可顯示內(nèi)容
所有要在頁面主體區(qū)域顯示的內(nèi)容必須寫在body內(nèi)
文檔聲明頭：告訴瀏覽器你要用的H5標(biāo)準(zhǔn)來解釋當(dāng)前的HTML文檔
<!DOCTYPE html>
元素分類
塊級元素：默認(rèn)情況下活合，沾滿爸爸整行白指，可以設(shè)置寬高 如：div p ul li
內(nèi)聯(lián)/行內(nèi)元素：元素并列在同一行，不能夠設(shè)置寬高告嘲，也就是說他們的內(nèi)容多少決定了標(biāo)簽的大小 如：a span b i
img（行內(nèi)塊級元素/置換元素 可以設(shè)置寬高）
HTML可以將元素分類方式分為行內(nèi)元素赋焕、塊狀元素和行內(nèi)塊狀元素三種隆判。首先需要說明的是僧界，這三者是可以互相轉(zhuǎn)換的捎泻，使用display屬性能夠?qū)⑷呷我廪D(zhuǎn)換：
(1)display:inline;轉(zhuǎn)換為行內(nèi)元素
(2)display:block;轉(zhuǎn)換為塊狀元素
(3)display:inline-block;轉(zhuǎn)換為行內(nèi)塊狀元素
實體字符（都是以&開頭笆豁；結(jié)尾的）
| 特殊字符 | 字符實體 |
|---|---|
| 大于號(>) | > |
| 小于號(<) | < |
| 引號" | " |
| ? | ® |
| ? | © |
| & | & |
| 一個英文的空格 | |
| 一個漢字的空格 |   |
結(jié)構(gòu)層(HTML)闯狱、表現(xiàn)層(CSS)抛计、行為層(JavaScript)
樣式：模樣的形式（對齊方式，顏色瘦陈，寬高大谐渴拧）
錨點：頁內(nèi)跳轉(zhuǎn)，在地址欄上會拼接上#targetId
“#”回到頁面頂部
2支鸡、重要標(biāo)簽&屬性
<div>塊級元素
實際意義（應(yīng)用場景）：它可以作為一個容器
<p>段落標(biāo)簽語言
<img> 圖片標(biāo)簽:
- src屬性：指定顯示圖片的路徑
- alt屬性：圖片備注
- 全局屬性title：鼠標(biāo)移上去的提示
<a>
- href：指定超鏈接的目標(biāo)網(wǎng)址（如果是線上地址，必須以HTTP開頭的完整路徑）
- target:指定了目標(biāo)鏈接的打開方式
a標(biāo)簽綁定手機號碼,發(fā)短信瀑构，發(fā)郵件，下載
<a href="#targetId">錨點測試</a>
<a href="tel:13539748339">點擊請聯(lián)系我</a>
<a href="sns:13539748339">點擊請聯(lián)系我</a>
<a href="mailto:13539748339@qq.com">點擊請聯(lián)系我</a>
<table>
- border 邊框
- cellspacing 單元格與單元格之間的間隙
- cellspadding 內(nèi)邊距 內(nèi)容與邊框之間的距離
- tr 表示table的一行
- th/td 一個單元格
- rowspan 跨行
- colspan 跨列
<ul> <li>無序列表 <ol>有序列表
- start 開始下標(biāo)
- type 指定序列號類型
- reverse 倒序
<dl><dt><dd>列表標(biāo)簽 標(biāo)題 列表 (開頭有縮進)
一些常用的行內(nèi)元素
- span標(biāo)簽 行內(nèi)元素刨摩，包裹文字
- sup 上標(biāo)
- sub 下標(biāo)
- b 粗體
- i 斜體
-mark 定義帶記號文本 文本被加顏色背景
input屬性
- placeholder 空內(nèi)容時占位提示內(nèi)容
- value 可以指定input的默認(rèn)值
- autofocus 自動獲取鼠標(biāo)焦點
- autocomplete 自動提示之前提交的內(nèi)容
- required 必填項,否則無法提交
- readonly 只讀
- disabled 禁用
- accept 文件接收類型
- multiple 上傳文件多選
- name屬性：指定向后臺傳值的字段（后臺通過這個字段來獲取用戶的輸入）
type:number 并不是說,你只能輸入數(shù)字,而是HTML會將內(nèi)容盡量轉(zhuǎn)為數(shù)字,
它在移動端時是非常有意義的,例如電話號碼輸入框(彈出數(shù)字鍵盤)
audio屬性
- controls 顯示出控制板
- autoplay 現(xiàn)在已經(jīng)被谷歌瀏覽器禁用了,設(shè)置了也不會自動播放(可以設(shè)置捕獲用戶行為來進行播放)
- loop 循環(huán)播放
利用source解決音頻兼容問題
<audio>
<source type="audio/mpeg" src="media/生日歌 - 英文童謠 英文.mp3"/>
<source type="audio/ogg" src="media/生日歌 - 英文童謠 英文.ogg"/>
</audio>
<audio src="">
你的瀏覽器不支持audio標(biāo)簽,請升級瀏覽器!
</audio>
<!--如果不支持audio標(biāo)簽,就表示為自定義標(biāo)簽顯示文字-->
video屬性
- width/heigth 設(shè)置視頻寬高
- controls 顯示操作臺
- Preload 預(yù)加載
- muted 靜音
- poster 設(shè)置海報地址
- autoplay 自動播放(目前大部分瀏覽器不再支持)
Mp4 WebM Ogg
MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器
WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器
Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器
3检碗、重要知識點
路徑問題
絕對路徑：表示路徑的完整描述信息 D:\study\classfile\2018.12.24helloworld\img
相對路徑：根據(jù)相對位置得到路徑信息
/ 進入文件夾
./ 表示當(dāng)前文件夾
../ 表示上一層文件夾
form標(biāo)簽
- method屬性：指定通訊方式（常用get/post/put/delete）
form表單提交的方式get和post的區(qū)別
1.傳值方式不同,get會把傳遞的值以URL查詢字符串的形式顯示在地址欄里,而post是把要傳遞的值放在了請求體里面,相比來說post會更安全一點,千萬不要把帶有密碼的內(nèi)容以get的方式傳值.get傳值多個值用&連接 用?查詢字符串
2.傳輸數(shù)據(jù)量的大小,因為get的內(nèi)容是放在地址欄的,但是地址欄能傳輸數(shù)據(jù)大小是有限制的,所以get方式傳輸數(shù)據(jù)的大小是有限制的,大約3000字符.post方式理論上說是沒有大小限制的.
3.一般情況下需要從服務(wù)器獲取數(shù)據(jù)是用get方式,一般向服務(wù)器發(fā)送數(shù)據(jù)時,用post的方式,
4.當(dāng)需要向后臺傳遞文件信息是必須post請求,同時在form標(biāo)簽修改enctype屬性為multipart/form-data
其他參考資料:https://www.cnblogs.com/logsharing/p/8448446.html#!comments
https://blog.csdn.net/qq_28483283/article/details/80207674
src與href的區(qū)別
使用src的標(biāo)簽：img JavaScript iframe
href 超文本引用
當(dāng)前元素與外鏈資源建立一種聯(lián)系
src source資源引入
當(dāng)前元素正確顯示必須的資源
如果src地址寫錯，會影響頁面顯示出錯码邻，而href不會影響
meta使用
<!--設(shè)置頁面編碼-->
<meta charset="UTF-8">
<!--設(shè)置頁面描述-->
<meta name="Description" content="這里描述網(wǎng)站的內(nèi)容"/>
<!--設(shè)置頁面關(guān)鍵字-->
<meta name="Keywords" content="CSS,HTML,JavaScript,前端"/>
<!--設(shè)置頁面是否緩存和方式-->
<meta http-equiv="Pragma" content="no-cache" />
<!--聲明作者信息-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--指定渲染引擎的類型和版本,使兼容性更好-->
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<!--移動端關(guān)閉電話號碼識別-->
<meta name="format-detection" content="telephone=no" />
<!--移動端關(guān)閉郵箱地址識別-->
<meta name="format-detection" content="email=no" />
<!--合二為一的寫法-->
<meta name="format-detection" content="telephone=no,email=no" />
<!--解決防盜鏈的問題,可以播放別的網(wǎng)站的多媒體鏈接-->
<meta name="referrer" content="never"/>
<!--設(shè)置標(biāo)簽圖標(biāo)-->
<link rel="shortcut icon" type="text/css" href=""/>
