HTML笔记——hyper text markup language
生活随笔
收集整理的這篇文章主要介紹了
HTML笔记——hyper text markup language
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
HTML筆記——hyper text markup language
（ 超文本標(biāo)記語(yǔ)言）超文本包括：文字、圖片、音頻、視頻、動(dòng)畫(huà)等
IDEA官網(wǎng)下載
指定瀏覽器
<!--DOCTYPE:告訴瀏覽器，我們要使用什么規(guī)范--> <!DOCTYPE html> <html lang="en"> <!--head標(biāo)簽代表網(wǎng)頁(yè)頭部--> <head> <!--meta描述性標(biāo)簽，它用來(lái)描述我們網(wǎng)站的一些信息--> <!--meta一般用來(lái)做SEO--><meta charset="UTF-8"><meta name="keywords" content="關(guān)鍵詞"><meta name="description" content="描述信息"><!-- title網(wǎng)頁(yè)標(biāo)題 --><title>我的第一個(gè)網(wǎng)頁(yè)</title> </head> <!--body標(biāo)簽代表網(wǎng)頁(yè)主題--> <body> 今天是2022年8月27日星期六 </body> </html>注釋快捷鍵Ctrl+/
P按住Tab生成段落標(biāo)簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>基本標(biāo)簽</title> </head> <body> <!--標(biāo)題標(biāo)簽--> <h1>一級(jí)標(biāo)簽</h1> <h2>二級(jí)標(biāo)簽</h2> <h3>三級(jí)標(biāo)簽</h3> <h4>四級(jí)標(biāo)簽</h4> <h5>五級(jí)標(biāo)簽</h5> <h6>六級(jí)標(biāo)簽</h6><!--水平線標(biāo)簽--> <hr/><!--段落標(biāo)簽--> <p> 一段</p> <p> 二段 </p> <p> 三段 </p> <p> 四段 </p><!--換行標(biāo)簽--> 換行標(biāo)簽<br/> 換行標(biāo)簽換行標(biāo)簽換行標(biāo)簽<br/> 換行標(biāo)簽<br/><!--粗體，斜體--> <h1>字體樣式標(biāo)簽</h1> 粗體： <strong>i love you</strong> 斜體： <em>i love you</em> <br/> <!--特殊符號(hào)--> 空 格： 空 格： <!-- 特殊符號(hào)記憶方式 & ; --> &g </body> </html>Tab自動(dòng)閉合補(bǔ)齊Ctrl+C復(fù)制Ctrl+D粘貼光標(biāo)段Ctrl+V復(fù)制所選
圖像標(biāo)簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>圖像標(biāo)簽學(xué)習(xí)</title> </head> <body> <!--img學(xué)習(xí) src:圖片地址（必填）相對(duì)地址，絕對(duì)地址../ --上一級(jí)目錄alt:圖片名字（必填）--><img src="resources/image/1.jpg" alt="圖片名稱" title="懸停文字" width="400" height="400"></body> </html>鏈接標(biāo)簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>鏈接標(biāo)簽學(xué)習(xí)</title> </head> <body> <!--使用name作為標(biāo)記--> <a name="top">頂部</a> <!--a標(biāo)簽學(xué)習(xí) href :必填，表示要跳轉(zhuǎn)到那個(gè)頁(yè)面 target :表示窗口在哪里打開(kāi)_blank 在新標(biāo)簽中打開(kāi)_self 在自己的網(wǎng)頁(yè)中打開(kāi) --> <a href="跳轉(zhuǎn)網(wǎng)頁(yè)地址">點(diǎn)擊我跳轉(zhuǎn)到頁(yè)面一</a> <a href="https://www.baidu.com" target="_blank " >點(diǎn)擊我跳轉(zhuǎn)到百度</a><!--錨鏈接 1.需要一個(gè)錨標(biāo)記 2.跳轉(zhuǎn)到標(biāo)記 跳轉(zhuǎn)名稱前加#，和markdown語(yǔ)法一樣 --> <a href="#top">回到頂部</a><!--功能性鏈接 郵件鏈接 ：mailto; QQ鏈接 ：百度QQ推廣 --> <a href="mailto:308679108@11.com">點(diǎn)擊聯(lián)系我</a><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=308679108&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:308679108:51" alt="點(diǎn)擊這里給我發(fā)消息" title="點(diǎn)擊這里給我發(fā)消息"/></a></body> </html>反復(fù)復(fù)習(xí)理解a標(biāo)簽
列表標(biāo)簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>列表學(xué)習(xí)</title> </head> <body> <!--有序列表 應(yīng)用范圍 ：試卷，問(wèn)答... orderlist簡(jiǎn)稱ol大標(biāo)簽，小標(biāo)簽li;Tab自動(dòng)補(bǔ)全 --> <ol><li>Java</li><li>python</li><li>運(yùn)維</li><li>前端</li><li>C/c++</li> </ol> <hr/> <!--無(wú)序列表 應(yīng)用范圍： 導(dǎo)航， 側(cè)邊欄 --> <ul><li>Java</li><li>python</li><li>運(yùn)維</li><li>前端</li><li>C/c++</li> </ul> <!--自定義列表 dl : 標(biāo)簽 dt : 列表名稱 dd : 列表內(nèi)容 公司網(wǎng)站底部 --> <dl><dt>學(xué)科</dt><dd>Java</dd><dd>python</dd><dd>linux</dd><dd>C</dd><dt>位置</dt><dd>西安</dd><dd>重慶</dd><dd>四川</dd> </dl></body> </html>列表標(biāo)簽總結(jié)：orderlist簡(jiǎn)稱ol大標(biāo)簽，小標(biāo)簽li,無(wú)序列表ul,自定義dl,dt列表名稱，dd列表內(nèi)容。Tab自動(dòng)補(bǔ)全！
表格標(biāo)簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格學(xué)習(xí)</title> </head> <body> <!--表格table 行 tr table rows 列 dr border="1px" 邊框1個(gè)像素--> <table border="1px"><tr> <!--colspan 跨列--><td colspan="4">1-1</td><tr/><tr> <!--rowspan 跨行--><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr></table></body> </html>表格標(biāo)簽總結(jié)：table表格，tr行，dr列，border邊框，colspan跨列,rowspan跨行
媒體元素
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>媒體元素學(xué)習(xí)</title> </head> <body><!--音頻和視頻 src: 資源路徑 controls: 控制條 autoplay： 自動(dòng)播放--><video src="../resources/video/111.mp4" controls autoplay ></video><audio src="http://localhost:63342/HTML/resources/audio/mp3.mp3?_ijt=6arlj2g66nf6o6sa25brc015h2&_ij_reload=RELOAD_ON_SAVE" controls autoplay></audio></body> </html>src: 資源路徑
controls: 控制條
autoplay： 自動(dòng)播放
第二種路徑可以先用瀏覽器打開(kāi)本地文件后轉(zhuǎn)換播放路徑
頁(yè)面結(jié)構(gòu)分析
header頭,footer腳,section區(qū),article文,aside邊,nav導(dǎo)
內(nèi)鏈框架
a,tab自動(dòng)補(bǔ)全a標(biāo)簽=
表單語(yǔ)法
tab向后縮進(jìn)，shift+tab向前縮進(jìn)
表單元素格式
placeholder提示信息
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>登陸注冊(cè)</title> </head> <body><h1>注冊(cè)</h1><!--表單formaction : 表單提交的位置，可以是網(wǎng)站，也可以是一個(gè)請(qǐng)求處理地址 method : post,get, 提交方式get方式提交：我們可以在url中看到我們提交的信息，不安全，高效post: 比較安全，傳輸大文件 --><form action="第一個(gè)網(wǎng)頁(yè).html" method="get"><!--文本輸入框 ：input type="text"value="我好厲害" 默認(rèn)初始值maxlength="8" 最長(zhǎng)能寫(xiě)幾個(gè)字符size="30" 文本框的長(zhǎng)度--><p>名字：<input type="text" name="username" placeholder="請(qǐng)輸入用戶名" required> </p><!--密碼框：input type="password"--><p>密碼：<input type="password" name="pwd" hidden value="123456"> </p><!--單選框標(biāo)簽input type="radio"value ；單選框的值name ； 表示組--><p>性別：<input type="radio" value="man" name="sex" checked disabled/>男<input type="radio" value="women" name="sex"/>女</p><!--多選框input type="checkbox"--><p>愛(ài)好：<input type="checkbox" value="sleep" name="hobby">睡覺(jué)<input type="checkbox" value="code" name="hobby" checked>敲代碼<input type="checkbox" value="chat" name="hobby">聊天<input type="checkbox" value="game" name="hobby">游戲</p><!--按鈕input type="button" 普通按鈕input type="image" 圖像按鈕input type="submit" 提交按鈕input type="reset" 重置--><p>按鈕：<input type="button" name="btn1" value="點(diǎn)擊變長(zhǎng)"><input type="image" src="../resources/image/1.jpg"></p><!--下拉框，列表框--><p>國(guó)家 ：<select name="列表名稱" ><option value="china">中國(guó)</option><option value="usa">美國(guó)</option><option value="japan" selected>日本</option><option value="korea">韓國(guó)</option></select></p><!--文本域text area : 文本區(qū)域--><p>反饋：<textarea name="textarea" cols="90" rows="10"></textarea></p><!--文件域input type="file" name="files"--><p><input type="file" name="files"><input type="button" value="上傳" name="upload"></p><!--郵件驗(yàn)證--><p> 郵箱：<input type="email" name="email"></p><!--URL--><p> URL：<input type="url" name="url"></p><!--數(shù)字--><p> 數(shù)字：<input type="number" name="number" max="100" min="0" step="1"></p><!--滑塊input type="range"--><p>音量 :<input type="range" name="voice" min="0" max="100"></p><!--搜索框--><p>搜索 :<input type="search" name="search" ></p><p><!--增強(qiáng)鼠標(biāo)可用性--><label for="mark">你點(diǎn)我試試</label><input type="text" id="mark"></p><p>自定義郵箱:<input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></p><p><input type="submit"><input type="reset" value="清空表單"></p></form> </body> </html>正則表達(dá)式速查表_腳本之家 (jb51.net)
自定義郵箱pattern
HTML總結(jié)
【【狂神說(shuō)Java】HTML5完整教學(xué)通俗易懂】 https://www.bilibili.com/video/BV1x4411V75C?share_source=copy_web&vd_source=0e96973c49dcca902daad2367a6fd072
net)](https://www.jb51.net/tools/regexsc.htm)
自定義郵箱pattern
HTML總結(jié)
[外鏈圖片轉(zhuǎn)存中…(img-q36wht9G-1661844318653)]
【【狂神說(shuō)Java】HTML5完整教學(xué)通俗易懂】 https://www.bilibili.com/video/BV1x4411V75C?share_source=copy_web&vd_source=0e96973c49dcca902daad2367a6fd072
跟著視頻里記
總結(jié)
以上是生活随笔為你收集整理的HTML笔记——hyper text markup language的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 在win2000下安装mysql完全版本
- 下一篇： 个人理财管理系统的设计与实现