當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端三件套（一）：HTML

發布時間：2024/3/26 HTML 32 豆豆

生活随笔收集整理的這篇文章主要介紹了前端三件套（一）：HTML 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目錄標題

一、認識HTML
- 1、HTML
- 2、HTMl發展史
- 3、HTML5的優勢
- 4、W3C
- 5、HTML的基本結構
二、網頁基本信息
- 1、DOCTYPE聲明
- 2、title標簽
- 3、meta標簽
三、網頁基本標簽
- 1、標題標簽
- 2、段落標簽
- 3、換行標簽
- 4、水平線標簽
- 5、字體樣式標簽
- 6、注釋和特殊符號
四、圖像標簽
五、鏈接標簽
六、塊元素與行內元素
七、列表
八、表格
九、媒體元素
十、頁面結構分析
十一、內聯框架
十二、表單
- 1、基本格式
- 2、表單元素格式
- 3、表單的應用
- 4、表單的初級驗證

一、認識HTML

1、HTML

英文全稱：Hyper Text Markup Language（超文本標記語言）
超文本：文字、圖片、音頻、視頻、動畫等

2、HTMl發展史

3、HTML5的優勢

世界知名瀏覽器廠商對html5的支持，如：微軟、谷歌、蘋果、opera、mozilla等。
市場的需求
跨平臺

4、W3C

W3C（World Wide Web Consortium萬維網聯盟）是制定HTML5的組織，成立于1994年Web技術領域最具權威和影響力的國際中立性技術標準機構
W3C標準包括：
①結構化標準語言：HTML、CSS
②表現標準語言：CSS
③行為標準：DOM、ECMAScript

5、HTML的基本結構

二、網頁基本信息

1、DOCTYPE聲明

告訴瀏覽器，我們要使用什么規范

2、title標簽

網頁標題

3、meta標簽

描述性標簽，用來描述我們網站的一些信息

<!DOCTYPE html> <html lang="en">  <head><meta charset="UTF-8"><meta name="keywords" content="我在學HTMl"><meta name="description" content="我是Ben"><title>Ben的第一個網頁</title> </head> <body>我是Ben </body> </html>

網頁：

三、網頁基本標簽

1、標題標簽

字號從大到小

2、段落標簽

<p><p/>

3、換行標簽

<br/>

4、水平線標簽

<hr/>

5、字體樣式標簽

粗體：<strong><strong/> 斜體:<em><em/>

6、注釋和特殊符號

注釋: 特殊符號:以&開頭，如空格：&nbsp,大于：&gt,小于：&lt <!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>床前明月光，疑是地上霜。<br/>舉頭望明月，低頭思故鄉。<br/>粗體：<strong>i am ben</strong>斜體：<em>i am ben</em><br/>空格<br/>空     格<br/>大于:><br/>小于:<<br/>版權:©<br/></body> </html>

四、圖像標簽

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <img src="../resources/image/1.jpg" alt="刺客信條" title="游戲截圖" width="300" height="300"> </body> </html>

五、鏈接標簽

頁面間鏈接
錨鏈接（同頁面跳轉）
功能性連接

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <a name="top" href="https://www.baidu.com" target="_self">點擊我跳轉到百度</a><br/><a href="FirstPage.html"><img src="../resources/image/1.jpg" alt="刺客信條" title="游戲截圖" width="300" height="300"></a> <br/> <a href="FirstPage.html"><img src="../resources/image/1.jpg" alt="刺客信條" title="游戲截圖" width="300" height="300"> </a> <br/> <a href="FirstPage.html"><img src="../resources/image/1.jpg" alt="刺客信條" title="游戲截圖" width="300" height="300"> </a> <br/> <a href="FirstPage.html"><img src="../resources/image/1.jpg" alt="刺客信條" title="游戲截圖" width="300" height="300"> </a> <br/> <a href="FirstPage.html"><img src="../resources/image/1.jpg" alt="刺客信條" title="游戲截圖" width="300" height="300"> </a> <br/> <a href="FirstPage.html"><img src="../resources/image/1.jpg" alt="刺客信條" title="游戲截圖" width="300" height="300"> </a> <br/> <a href="#top">回到頂部</a> <br/> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1501037322&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1501037322:53" alt="點擊這里給我發消息" title="點擊這里給我發消息"/> </a> </body> </html>

六、塊元素與行內元素

塊元素：無論內容多少，該元素獨占一行（p、h1-h6…）
行內元素：內容撐開寬度，左右都是行內元素的可以排在一行（a、strong、em…）

七、列表

列表是信息資源的一種展示形式。它可以使信息結構化和條理化，并以列表的形式顯示出來。
分類:

無序列表
有序列表
自定義列表

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <ol><li>Java</li><li>Python</li><li>運維</li><li>前端</li><li>產品經理</li></ol><hr/><ul><li>Java</li><li>Python</li><li>運維</li><li>前端</li><li>產品經理</li> </ul><hr/>  <dl><dt>崗位</dt><dd>后端</dd><dd>前端</dd><dd>運維</dd><dd>產品經理</dd><dt>位置</dt><dd>北京</dd><dd>上海</dd><dd>重慶</dd> </dl> </body>

八、表格

基本結構

單元格
行
列
跨行
跨列

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <table border="2px"><tr><td colspan="3">學生成績</td></tr><tr><td rowspan="2">Ben</td><td>語文</td><td>100</td></tr><tr><td>數學</td><td>95</td></tr><tr><td rowspan="2">本</td><td>語文</td><td>85</td></tr><tr><td>數學</td><td>100</td></tr></table> </body> </html>

九、媒體元素

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><audio src="../resources/audio/AniFace%20-%20夜、螢火蟲和你.mp3" controls="controls" autoplay="autoplay"/> </body> </html>

十、頁面結構分析

十一、內聯框架

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body>  <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、表單的應用

4、表單的初級驗證

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>注冊</title> </head> <body> <form action="FirstPage.html" method="post"><p>名字：<input type="text" name="username" placeholder="請輸入用戶名" value="ben" maxlength="8" size="20" ></p><p>密碼：<input type="password" name="pwd"></p><p>性別：<input type="radio" value="male" name="gender" checked>男<input type="radio" value="female" name="gender">女</p><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><p>按鈕：<input type="button" name="btn1" value="點擊變強"><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">文本內容</textarea></p><p><input type="file" name="files"><input type="button" value="上傳" name="upload"></p><p>郵箱：<input type="email" name="email" required></p><p>網站：<input type="url" name="url" required></p><p>數字：<input type="number" name="number"min="0" max="100"></p><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>

總結

以上是生活随笔為你收集整理的前端三件套（一）：HTML的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
三件

上一篇：不长的时间，不短的记忆，岁月使然，色彩依
下一篇： ibm 浪潮小型机 oracle解决方