HTML5(笔记)
什么是HTML
Hyper Text Markup Language(超文本標記語言)
超文本包括：文字，圖片，音頻，視頻，動畫等
w3c標準
WOrld Wide Web Consortium(萬維網聯盟)
成立于1994年，Web技術領域最權威和具影響力的國際中立性技術標準機構
https://www.w3.org
https://www.chinaw3c.org
W3C標準包括
改默認瀏覽器
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-m39SxtN2-1608813934210)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201224164932645.png)]
SEO
漢譯為搜索引擎優化。是一種方式：利用搜索引擎的規則提高網站在有關搜索引擎內的自然排名。
<!--告訴瀏覽器，我們要是用什么規范 --> <!DOCTYPE html> <html lang="en"> <!--head 網頁頭部--> <head><!-- meta描述性標簽，用來描述我們網站的一些信息--><!-- meta一般用來做SEO--><meta charset="UTF-8"><meta name="keywords" content="跟狂神學Java"><meta name="description" content="可以學習java"><!-- title網頁標題--><title>我的第一個網頁</title> </head> <body> Hello，World！ </body> </html>網頁基本標簽
-
標題標簽 標題
-
段落標簽
一段話
-
換行標簽 一句話
和段落標簽的區別是其比較緊湊 -
水平線標簽
-
字體樣式標簽 粗體 粗體 斜體
-
注釋和特殊符號
<!--特殊符號--> 空 格： 大于號> 小于號< ©版權符號
Tab鍵
自動補全
圖像標簽
常見的圖像格式
JPG
GIF
PNG
BMP
<img src="../resources/image/1.jpg" alt="我的圖片" title="懸停文字" width="1366" height="768"> <!--img學習 src:圖片地址相對地址（推薦使用），絕對地址../返回上一級目錄 --><!--alt 圖片加載失敗會顯示的內容“”。-->鏈接標簽
超鏈接
? 頁面間鏈接
? 從一個頁面鏈接到另一個頁面
<!-- a標簽 href：必填，表示要跳轉到那個頁面 target：表示窗口在那里打開 _blank 在新標簽中打開 _self 在自己的網頁中打開 -->錨鏈接
<!--使用name作為標記--> <a name="top">頂部</a> 1.需要一個錨標記 2.跳轉到標記--> <a href="#top">回到頂部</a> <a name="down">底部</a>功能性鏈接
<!--功能性連接 郵件連接：mailto QQ鏈接--> <a href="mailto:1395950933@qq.com">點擊聯系我</a>QQ推廣的實現
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-juQ88lrQ-1608813934212)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201224183331980.png)]
uin=2764954910行內元素和塊元素
塊元素：無論內容有多少，元素自己獨占一行
例如：
行內元素：內容撐開寬度，左右都是行內元素的可以排在一行
例如：
列表標簽
列表就是信息資源的一種展示形式。它可以使信息結構化和條理化，并以列表的樣式顯示出來，以便瀏覽者能更快捷地獲得相應的信息。
列表的分類：
-
無序列表
-
有序列表
-
定義列表
表格標簽
表格標簽就是html通過表格標簽在網頁中顯示一個類似Excel表格的內容，表格的基本結構有以下幾個部分：
- 單元格
- 行
- 列
- 跨行 1-1
- 跨列 2-1
音頻和視頻
<!--音頻和視頻 src：資源路徑 controls：控制條 autoplay：自動播放--> <video src="../resources/video/2.mp4" controls autoplay></video> <audio src="../resources/audio/3.mp3" controls autoplay></audio>頁面結構分析
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-yGn0al4s-1608813934214)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201224191404959.png)]
iframe內聯架構
<!--iframe內聯框架 src：地址 w-h：寬，高--> <iframe src="" name="change" frameborder="0" width="1000" height="800">點擊跳轉學習java</iframe> <a href="https://www.baidu.com" target="change" >點擊跳轉</a>//內聯框架的嵌入表單
<!--表單form action:表單提交的位置，可以是網站，也可以是一個請求處理地址 method:post，get 提交方式get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效post：比較安全，傳輸大文件--> <form action="demo02.html" method="post"><!--文本輸入框 Input type="text" submit提交按鈕 reset重置按鈕 --><p>名字：<input type="text" name="username"/></p><p>密碼：<input type="password" name="pwd"/></p><p><input type="submit"> <input type="reset"></p> </form>單選框多選框
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-MvXdzrKS-1608813934217)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201224193659751.png)]
<!--單選框按鈕 input type="radio" name必須為一致，才能表示為同一組，才能只選擇一個input標簽 類型是radio時，必須有valuechecked 默認選中--><p><input type="radio" value="boy" name="sex"/>男<input type="radio" value="girl"name="sex">女 <!-- 多選框標簽 input type="checkbox" --><input type="checkbox" value="sleep" name="hobby"/>睡覺<input type="checkbox" value="talk" name="hobby"/>聊天<input type="checkbox" value="game" name="hobby" checked/>游戲<input type="checkbox" value="eat" name="hobby"/>吃東西</p>按鈕
<!-- 按鈕input type="button" 普通按鈕input type="image" 圖片按鈕input type="submit" 提交按鈕input type="reset" 重置按鈕--> <p><input type="button" name="btn1" value="按鈕名字"/><input type="image" src="../resources/image/1.png"/>//和submit擁有相同的功能 </p> <p><input type="submit"><input type="reset"></p>下拉框
<!--下拉框 列表框<select>name是下拉框的名字option value 是下拉框可以選擇的值selected是默認為那個列 --> <p>國家<select name="列表名稱" ><option value="china" selected>中國</option><option value="us">美國</option><option value="agt">阿根廷</option><option value="md">緬甸</option></select> </p>文本域和文件域
<!-- 文本域 cols="30" rows="10" 行，，，列 --> <p>反饋：<textarea name="textarea" cols="30" rows="10">文本內容</textarea></p> <!-- 文件域--> <p><input type="file" name="files"><input type="button" value="上傳" name="upload"> </p>簡單驗證
<!-- 郵箱驗證 --> <p><input type="email" name="email"></p> <!-- URL驗證--> <p><input type="url" name="url"></p> <!-- 數字驗證 max最大數量 min 最小數量 step 每次點擊增加或減少的數量--> <p><input type="number" name="num" max="100" min="1" step="1"></p>滑塊
<!--滑塊--> <p>音量<input type="range" name="voice" max="100" min="0" step="2" ></p>搜索框(刪除東西比較容易)
<!-- 搜索框--> <p><input type="search" name="search"></p>表單的應用
只讀：value=“admin”（先給一個默認值） readonly
禁用：disabled
隱藏：hidden
label提高作用域
<p> <label for="mark">點擊</label><input type="text" id="mark"/> </p>表單初級驗證
placeholder=“請輸入用戶名”
required 非空判斷
pattern 正則表達式
總結
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Jn7mEJY6-1608813934218)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201224204330421.png)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-fjoK5kpJ-1608813934221)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201224204412445.png)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bqgTxUZZ-1608813934222)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201224204447501.png)]
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
- 上一篇： 如何搭建自己心仪的电脑如何搭建自己心仪的
- 下一篇： 2017年html5行业报告,云适配发布