前端三件套（一）：HTML
生活随笔
收集整理的這篇文章主要介紹了
前端三件套（一）：HTML
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
目錄標(biāo)題
- 一、認(rèn)識HTML
- 1、HTML
- 2、HTMl發(fā)展史
- 3、HTML5的優(yōu)勢
- 4、W3C
- 5、HTML的基本結(jié)構(gòu)
- 二、網(wǎng)頁基本信息
- 1、DOCTYPE聲明
- 2、title標(biāo)簽
- 3、meta標(biāo)簽
- 三、網(wǎng)頁基本標(biāo)簽
- 1、標(biāo)題標(biāo)簽
- 2、段落標(biāo)簽
- 3、換行標(biāo)簽
- 4、水平線標(biāo)簽
- 5、字體樣式標(biāo)簽
- 6、注釋和特殊符號
- 四、圖像標(biāo)簽
- 五、鏈接標(biāo)簽
- 六、塊元素與行內(nèi)元素
- 七、列表
- 八、表格
- 九、媒體元素
- 十、頁面結(jié)構(gòu)分析
- 十一、內(nèi)聯(lián)框架
- 十二、表單
- 1、基本格式
- 2、表單元素格式
- 3、表單的應(yīng)用
- 4、表單的初級驗證
一、認(rèn)識HTML
1、HTML
英文全稱：Hyper Text Markup Language（超文本標(biāo)記語言）
超文本：文字、圖片、音頻、視頻、動畫等
2、HTMl發(fā)展史
3、HTML5的優(yōu)勢
- 世界知名瀏覽器廠商對html5的支持，如：微軟、谷歌、蘋果、opera、mozilla等。
- 市場的需求
- 跨平臺
4、W3C
W3C（World Wide Web Consortium萬維網(wǎng)聯(lián)盟）是制定HTML5的組織，成立于1994年Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)
W3C標(biāo)準(zhǔn)包括：
①結(jié)構(gòu)化標(biāo)準(zhǔn)語言：HTML、CSS
②表現(xiàn)標(biāo)準(zhǔn)語言：CSS
③行為標(biāo)準(zhǔn)：DOM、ECMAScript
5、HTML的基本結(jié)構(gòu)
二、網(wǎng)頁基本信息
1、DOCTYPE聲明
告訴瀏覽器，我們要使用什么規(guī)范
2、title標(biāo)簽
網(wǎng)頁標(biāo)題
3、meta標(biāo)簽
描述性標(biāo)簽，用來描述我們網(wǎng)站的一些信息
<!--DOCTYPE:告訴瀏覽器，我們使用什么規(guī)范--> <!DOCTYPE html> <html lang="en"> <!--head標(biāo)簽代表網(wǎng)頁頭部--> <head><!--meta描述性標(biāo)簽，用來描述我們網(wǎng)站的一些信息--><!--一般用來做SEO--><meta charset="UTF-8"><meta name="keywords" content="我在學(xué)HTMl"><meta name="description" content="我是Ben"><!--title網(wǎng)頁標(biāo)題--><title>Ben的第一個網(wǎng)頁</title> </head> <body>我是Ben </body> </html>網(wǎng)頁：
三、網(wǎng)頁基本標(biāo)簽
1、標(biāo)題標(biāo)簽
字號從大到小
<h1><h1/> <h2><h2/> <h3><h3/> <h4><h4/> <h5><h5/> <h6><h6/>2、段落標(biāo)簽
<p><p/>3、換行標(biāo)簽
<br/>4、水平線標(biāo)簽
<hr/>5、字體樣式標(biāo)簽
粗體：<strong><strong/> 斜體:<em><em/>6、注釋和特殊符號
注釋:<!--注釋內(nèi)容--> 特殊符號:以&開頭，如空格： ,大于：>,小于：< <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>基本標(biāo)簽學(xué)習(xí)</title> </head> <body><!--標(biāo)題標(biāo)簽--><h1>一級標(biāo)簽</h1><h2>二級標(biāo)簽</h2><h3>三級標(biāo)簽</h3><h4>四級標(biāo)簽</h4><h5>五級標(biāo)簽</h5><h6>六級標(biāo)簽</h6><hr/><!--段落標(biāo)簽--><p>床前明月光，疑是地上霜。</p><p>舉頭望明月，低頭思故鄉(xiāng)。</p><!--換行標(biāo)簽-->床前明月光，疑是地上霜。<br/>舉頭望明月，低頭思故鄉(xiāng)。<br/><!--粗體、斜體-->粗體：<strong>i am ben</strong>斜體：<em>i am ben</em><br/><!--特殊符號-->空 格<br/>空 格<br/>大于:><br/>小于:<<br/>版權(quán):©<br/></body> </html>四、圖像標(biāo)簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <!--src：圖片地址建議使用相對路徑../ --上一級目錄--><img src="../resources/image/1.jpg" alt="刺客信條" title="游戲截圖" width="300" height="300"> </body> </html>五、鏈接標(biāo)簽
- 頁面間鏈接
- 錨鏈接（同頁面跳轉(zhuǎn)）
- 功能性連接
六、塊元素與行內(nèi)元素
塊元素：無論內(nèi)容多少，該元素獨占一行（p、h1-h6…）
行內(nèi)元素：內(nèi)容撐開寬度，左右都是行內(nèi)元素的可以排在一行（a、strong、em…）
七、列表
列表是信息資源的一種展示形式。它可以使信息結(jié)構(gòu)化和條理化，并以列表的形式顯示出來。
分類:
- 無序列表
- 有序列表
- 自定義列表
八、表格
基本結(jié)構(gòu)
- 單元格
- 行
- 列
- 跨行
- 跨列
九、媒體元素
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><!--音頻和視頻src:資源路徑controls:控制條autoplay:自動播放--><!--<video src="../resources/video/2.mp4" controls autoplay/>--><audio src="../resources/audio/AniFace%20-%20夜、螢火蟲和你.mp3" controls="controls" autoplay="autoplay"/> </body> </html>十、頁面結(jié)構(gòu)分析
十一、內(nèi)聯(lián)框架
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <!--iframe框架 src：地址 w-h：寬度、高度--> <iframe src="https://blog.csdn.net/weixin_46236591?spm=1011.2124.3001.5343" name="blog" frameborder="0" width="1000" height="500"></iframe> </body> </html>十二、表單
1、基本格式
2、表單元素格式
3、表單的應(yīng)用
4、表單的初級驗證
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>注冊</title> </head> <body> <!--表單form action：表單提交的位置，可以使網(wǎng)站，也可以是一個請求 method：post、get提交方式 get：可以在url中看到提交信息，不安全，高效 post：比較安全，傳輸大文件--><form action="FirstPage.html" method="post"><!--文本輸入框：input type="text"value="ben" 默認(rèn)初始值maxLength="8" 最長能寫幾個字符size="30" 文本框的長度--><p>名字：<input type="text" name="username" placeholder="請輸入用戶名" value="ben" maxlength="8" size="20" ></p><!--密碼框：input type="password"--><p>密碼：<input type="password" name="pwd"></p><p>性別：<!--單選框標(biāo)簽input type="radio"value：單選框的值name：表示組--><input type="radio" value="male" name="gender" checked>男<input type="radio" value="female" name="gender">女</p><!--多選框input type="checkbox"--><p>愛好：<input type="checkbox" value="sleep" name="hobby">睡覺<input type="checkbox" value="coding" name="hobby">編程<input type="checkbox" value="sports" name="hobby">運動<input type="checkbox" value="gaming" name="hobby">打游戲</p><!--按鈕：input type="button" 普通按鈕input type="image" 圖像按鈕input type="submit" 提交按鈕input type="reset" 重置按鈕--><p>按鈕：<input type="button" name="btn1" value="點擊變強(qiáng)"><input type="image" src="../resources/image/1.jpg" width="200" height="200"></p><p>下拉框：<select name="年級" id="1"><option value="freshman">大一</option><option value="sophomore">大二</option><option value="junior" selected>大三</option><option value="senior">大四</option></select></p><!--文本域--><p>備注：<textarea name="textarea" id="2" cols="30" rows="10">文本內(nèi)容</textarea></p><!--文件域--><p><input type="file" name="files"><input type="button" value="上傳" name="upload"></p><!--郵件驗證--><p>郵箱：<input type="email" name="email" required></p><!--URL--><p>網(wǎng)站：<input type="url" name="url" required></p><!--數(shù)字--><p>數(shù)字：<input type="number" name="number"min="0" max="100"></p><!--滑塊input type="range"--><p>滑塊：<input type="range" name="range" min="0" max="100" step="2"></p><!--搜索框--><p>搜索：<input type="search" name="search" id="mark"></p><p><label for="mark">點我</label><input type="text"></p><p><input type="submit"><input type="reset"></p></form> </body> </html>總結(jié)
以上是生活随笔為你收集整理的前端三件套（一）：HTML的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 不长的时间，不短的记忆，岁月使然，色彩依
- 下一篇： 静态HTML网页设计作品 HTML5+C