HTML笔记——hyper text markup language
生活随笔
收集整理的這篇文章主要介紹了
HTML笔记——hyper text markup language
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML筆記——hyper text markup language
（ 超文本標記語言）超文本包括：文字、圖片、音頻、視頻、動畫等
IDEA官網下載
指定瀏覽器
<!--DOCTYPE:告訴瀏覽器，我們要使用什么規范--> <!DOCTYPE html> <html lang="en"> <!--head標簽代表網頁頭部--> <head> <!--meta描述性標簽，它用來描述我們網站的一些信息--> <!--meta一般用來做SEO--><meta charset="UTF-8"><meta name="keywords" content="關鍵詞"><meta name="description" content="描述信息"><!-- title網頁標題 --><title>我的第一個網頁</title> </head> <!--body標簽代表網頁主題--> <body> 今天是2022年8月27日星期六 </body> </html>注釋快捷鍵Ctrl+/
P按住Tab生成段落標簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>基本標簽</title> </head> <body> <!--標題標簽--> <h1>一級標簽</h1> <h2>二級標簽</h2> <h3>三級標簽</h3> <h4>四級標簽</h4> <h5>五級標簽</h5> <h6>六級標簽</h6><!--水平線標簽--> <hr/><!--段落標簽--> <p> 一段</p> <p> 二段 </p> <p> 三段 </p> <p> 四段 </p><!--換行標簽--> 換行標簽<br/> 換行標簽換行標簽換行標簽<br/> 換行標簽<br/><!--粗體，斜體--> <h1>字體樣式標簽</h1> 粗體： <strong>i love you</strong> 斜體： <em>i love you</em> <br/> <!--特殊符號--> 空 格： 空 格： <!-- 特殊符號記憶方式 & ; --> &g </body> </html>Tab自動閉合補齊Ctrl+C復制Ctrl+D粘貼光標段Ctrl+V復制所選
圖像標簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>圖像標簽學習</title> </head> <body> <!--img學習 src:圖片地址（必填）相對地址，絕對地址../ --上一級目錄alt:圖片名字（必填）--><img src="resources/image/1.jpg" alt="圖片名稱" title="懸停文字" width="400" height="400"></body> </html>鏈接標簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>鏈接標簽學習</title> </head> <body> <!--使用name作為標記--> <a name="top">頂部</a> <!--a標簽學習 href :必填，表示要跳轉到那個頁面 target :表示窗口在哪里打開_blank 在新標簽中打開_self 在自己的網頁中打開 --> <a href="跳轉網頁地址">點擊我跳轉到頁面一</a> <a href="https://www.baidu.com" target="_blank " >點擊我跳轉到百度</a><!--錨鏈接 1.需要一個錨標記 2.跳轉到標記 跳轉名稱前加#，和markdown語法一樣 --> <a href="#top">回到頂部</a><!--功能性鏈接 郵件鏈接 ：mailto; QQ鏈接 ：百度QQ推廣 --> <a href="mailto:308679108@11.com">點擊聯系我</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="點擊這里給我發消息" title="點擊這里給我發消息"/></a></body> </html>反復復習理解a標簽
列表標簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>列表學習</title> </head> <body> <!--有序列表 應用范圍 ：試卷，問答... orderlist簡稱ol大標簽，小標簽li;Tab自動補全 --> <ol><li>Java</li><li>python</li><li>運維</li><li>前端</li><li>C/c++</li> </ol> <hr/> <!--無序列表 應用范圍： 導航， 側邊欄 --> <ul><li>Java</li><li>python</li><li>運維</li><li>前端</li><li>C/c++</li> </ul> <!--自定義列表 dl : 標簽 dt : 列表名稱 dd : 列表內容 公司網站底部 --> <dl><dt>學科</dt><dd>Java</dd><dd>python</dd><dd>linux</dd><dd>C</dd><dt>位置</dt><dd>西安</dd><dd>重慶</dd><dd>四川</dd> </dl></body> </html>列表標簽總結：orderlist簡稱ol大標簽，小標簽li,無序列表ul,自定義dl,dt列表名稱，dd列表內容。Tab自動補全！
表格標簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格學習</title> </head> <body> <!--表格table 行 tr table rows 列 dr border="1px" 邊框1個像素--> <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>表格標簽總結：table表格，tr行，dr列，border邊框，colspan跨列,rowspan跨行
媒體元素
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>媒體元素學習</title> </head> <body><!--音頻和視頻 src: 資源路徑 controls: 控制條 autoplay： 自動播放--><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： 自動播放
第二種路徑可以先用瀏覽器打開本地文件后轉換播放路徑
頁面結構分析
header頭,footer腳,section區,article文,aside邊,nav導
內鏈框架
a,tab自動補全a標簽=
表單語法
tab向后縮進，shift+tab向前縮進
表單元素格式
placeholder提示信息
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>登陸注冊</title> </head> <body><h1>注冊</h1><!--表單formaction : 表單提交的位置，可以是網站，也可以是一個請求處理地址 method : post,get, 提交方式get方式提交：我們可以在url中看到我們提交的信息，不安全，高效post: 比較安全，傳輸大文件 --><form action="第一個網頁.html" method="get"><!--文本輸入框 ：input type="text"value="我好厲害" 默認初始值maxlength="8" 最長能寫幾個字符size="30" 文本框的長度--><p>名字：<input type="text" name="username" placeholder="請輸入用戶名" required> </p><!--密碼框：input type="password"--><p>密碼：<input type="password" name="pwd" hidden value="123456"> </p><!--單選框標簽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>愛好：<input type="checkbox" value="sleep" name="hobby">睡覺<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="點擊變長"><input type="image" src="../resources/image/1.jpg"></p><!--下拉框，列表框--><p>國家 ：<select name="列表名稱" ><option value="china">中國</option><option value="usa">美國</option><option value="japan" selected>日本</option><option value="korea">韓國</option></select></p><!--文本域text area : 文本區域--><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><!--郵件驗證--><p> 郵箱：<input type="email" name="email"></p><!--URL--><p> URL：<input type="url" name="url"></p><!--數字--><p> 數字：<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><!--增強鼠標可用性--><label for="mark">你點我試試</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>正則表達式速查表_腳本之家 (jb51.net)
自定義郵箱pattern
HTML總結
【【狂神說Java】HTML5完整教學通俗易懂】 https://www.bilibili.com/video/BV1x4411V75C?share_source=copy_web&vd_source=0e96973c49dcca902daad2367a6fd072
net)](https://www.jb51.net/tools/regexsc.htm)
自定義郵箱pattern
HTML總結
[外鏈圖片轉存中…(img-q36wht9G-1661844318653)]
【【狂神說Java】HTML5完整教學通俗易懂】 https://www.bilibili.com/video/BV1x4411V75C?share_source=copy_web&vd_source=0e96973c49dcca902daad2367a6fd072
跟著視頻里記
總結
以上是生活随笔為你收集整理的HTML笔记——hyper text markup language的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在win2000下安装mysql完全版本
- 下一篇： 在html5中怎么设置背景音乐,HTML