一、什么是HTML
1.html：
HyperText Markup Language 超文本标记语言，是最基础的网页语言，而且都是由标签组成。
2.基本格式：
放置一些属性信息，辅助信息。
引入一些外部的文件。（css，javascript）
它里面的内容会先加载。
存放真正的数据。
3.注意事项
1）多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
2）想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
3）属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
二、常见标签
1.排版标签
1）换行
2）
属性：align= 对齐方式
3）
一条水平线
属性：
1）宽度：width 值像素 100px 可以写百分比 30%
2）align= 对齐方式
3）size 粗细
4）color 值 red green blue RGB 三原色 (red green blue #aa55ff)
4）div 声明一块区域
5）span 声明一块区域
代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3 <head> 4 <title>排版标签</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 7 </head> 8 9 <body>10 这是一首古诗。11 <hr width="300px" size="20px;" color="red"/>12 <p align="center">13 静夜思<br/>14 床前明月光，<br/>15 疑是地上霜。<br/>16 举头望明月，<br/>17 低头思故乡。<br/>18 </p>19 一首非常出名的古诗。20 21 <hr/>22 <div>这是div区域1</div>23 <div>这是div区域1</div>24 <span>这是span的区域1</span>25 <span>这是span的区域2</span>26 </body>27 </html>
显示：
2.字体标签
1）文本内容
属性：
1）size 字号的大小 最大值是7 最小值是1
2）color 颜色
3）face 字体
2）标题标签
...
从大到小字体缩小。
3）粗体
4）斜体
标签支持嵌套
代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3 <head> 4 <title>字体标签</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 7 </head> 8 9 <body>10 <h2 id="排版标签">排版标签</h2>11 <font size="7">文本内容</font><br/>12 <font size="10">文本内容</font><br/>13 14 <hr/>15 16 <h1 id="这是一级标题">这是一级标题</h1>17 <h2 id="这是二级标题">这是二级标题</h2>18 <h3 id="这是三级标题">这是三级标题</h3>19 <h4 id="这是四级标题">这是四级标题</h4>20 <h5 id="这是五级标题">这是五级标题</h5>21 <h6 id="这是六级标题">这是六级标题</h6>22 23 <hr/>24 25 <b><i>这是粗体又是斜体</i></b>26 <I>这是斜体</I>27 28 29 </body>30 </html>
显示:
3.列表标签
1）dl 列表标签
- 上层项目
- 下层项目 特点：自动对齐，自动缩进。
2）有序列表和无序列表
有序：
type：列表前序标号
start：从第几个开始。
无序：
- 数据内容
- 用户管理
数据条目：
代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3 <head> 4 <title>列表标签</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 11 </head>12 13 <body>14 <h3 id="列表标签">列表标签</h3>15 <dl>16 <dt>上层项目</dt>17 <dd>下层项目</dd>18 <dd>下层项目</dd>19 <dd>下层项目</dd>20 </dl>21 22 <hr/>23 24 <h3 id="有序列表">有序列表</h3>25 <ol type="a" start="4">26 <li>有序列表</li>27 <li>有序列表</li>28 <li>有序列表</li>29 </ol>30 31 <h3 id="无序列表">无序列表</h3>32 <ul type="square">33 <li>无序列表</li>34 <li>无序列表</li>35 <li>无序列表</li>36 </ul>37 38 </body>39 </html>
显示：
4.图片标签
属性：
width 显示图片的宽度
height 显示图片的高度
alt 图片的说明文字/Users/apple/Library/Containers/com.tencent.qq/Data/Library/Application Support/QQ/Users/.png
代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3 <head> 4 <title>图片标签</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 11 </head>12 13 <body>14 <h3 id="图片标签">图片标签</h3>15 <img src="/static/imghwm/default1.png" data-src="girl4.jpg" class="lazy" style="max-width:90%" height="600px" alt="啊，美女！">16 17 </body>18 </html>
显示：一个美女
5.超链接链接
作用：1）链接资源
href="" 必须指定 如果href的值不指定，默认是file文件的协议。只有自己指定协议，链接资源。如果href中指定的协议，浏览器不能解析，就会调用应用程序，可以解析的程序就可以打开。
2）定位资源
name 名称 专业术语 锚
代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3 <head> 4 <title>超链接标签</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 11 </head>12 13 <body>14 <a href="http://www.baidu.com">百度</a><br/>15 <a href="girl4.jpg">啊，美女！</a><br/>16 <a href="mailto:xxx@sina.com">联系我们</a><br/>17 <a href="http://www.xunlei.com/moves/bxjg.rmvb">变形金刚</a><br/>18 <a href="thunder:23cwe2s@32sd==">变形金刚</a><br/>19 20 <hr/>21 22 <a name="top">顶部位置</a>23 <hr/>24 25 50年前，长沙镖子岭。26 27 四个土夫子正蹲在一个土丘上，所有人都不说话，直勾勾地盯着地上那把洛阳铲。28 29 30 <hr/>31 32 <a name="center">中间位置</a>33 <hr/>34 35 36 50年前，长沙镖子岭。37 38 四个土夫子正蹲在一个土丘上，所有人都不说话，直勾勾地盯着地上那把洛阳铲。39 40 <hr/>41 42 <a href="#top">回到顶部</a>43 <a href="#center">回到中间</a>44 <hr/>45 46 </body>47 </html>
显示：这里可以多搞一些文字
6.表格标签（重点）
作用：格式化数据
属性：
1）边框 border
2）width 宽度
3）文字与内边框的距离 cellpadding
属性：
1）align 对齐方式（文本内容）
属性：
1）width
2）height
3）colspan 列合并单元格
4）rowspan 行合并单元格
colspan 合并行， rowspan合并列
代码:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3 <head> 4 <title>表格标签</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 11 </head>12 13 <body>14 <!-- 15 序号 姓名 性别16 1 张三 女17 -->18 19 <table border="1" width="400px" cellpadding="8" cellspacing="1">20 <caption>用户列表</caption>21 <tr>22 <th>序号</th>23 <th>姓名</th>24 <th>性别</th>25 </tr>26 <tr align="center">27 <td>1</td>28 <td>张三</td>29 <td>女</td>30 </tr>31 <tr align="center">32 <td>2</td>33 <td>李四</td>34 <td>男</td>35 </tr>36 </table>37 38 <hr/>39 40 <table border="1" width="400px" cellpadding="8" cellspacing="1">41 <caption>用户列表</caption>42 <tr>43 <th>序号</th>44 <th>姓名</th>45 <th>性别</th>46 </tr>47 <tr align="center">48 <td>1</td>49 <td>张三</td>50 <td>女</td>51 </tr>52 <tr align="center">53 <td>2</td>54 <td>李四</td>55 <td>男</td>56 </tr>57 <tr align="center">58 <td colspan="3">59 人数总计：<font color="red">2人</font>60 </td>61 <!-- <td></td>62 <td></td> -->63 </tr>64 </table>65 66 <hr/>67 68 <table border="1" width="400px" cellpadding="8" cellspacing="1">69 <tr>70 <td rowspan="3">71 <img src="/static/imghwm/default1.png" data-src="bx.jpg" class="lazy" style="max-width:90%" height="200px" alt="Html一天入门_html/css_WEB-ITnose" >72 </td>73 <td>74 商品信息：冰箱75 </td>76 </tr>77 <tr>78 <!-- <td></td> -->79 <td>80 商品价格：299981 </td>82 </tr><tr>83 <!-- <td></td> -->84 <td>85 <img src="/static/imghwm/default1.png" data-src="gwc.png" class="lazy" alt="Html一天入门_html/css_WEB-ITnose" >86 </td>87 </tr>88 </table>89 90 91 </body>92 </html>
显示：
7.表单标签（重点）
作用：可以和服务器进行交互。
输入项的内容 用户名 密码
属性：action="提交的请求位置"
method 提交方式（get和post） 如果method没有写默认是get方式提交。
get和post区别：
1）get方式表单封装的数据直接显示在url上。post方式数据不显示在url上。
2）get方式安全级别较低，post级别较高。
3）get方式数据的长度，post支持大数据。
** ?sex=on：
在每个输入的标签中指定name和value name必须指定
?username=haha&pwd=1223&sex=nv&jishu=html
属性：type 值可以指定很多的值，每一个不同的值代表的不同输入组件。
1）type=text 文本框
2）type=password 密码
3）type=radio 单选按钮
name属性
4）type=checkbox 多选按钮
单选和多选都有默认值：checked="checked"
5）type=reset 重置按钮
6）type=submit 提交按钮
7）type=file 上传文件的输入项
8）type=button 按钮
9）type=image 图片（也是提交按钮，）
10）type=hidden 隐藏标签（用户不用看到的，但是咱们开发时必须要使用的，可以把数据封装到隐藏标签中，和表单一起提交到后台）。
选择标签
选择下拉框
文本域textarea
8.框架标签
框架标签不能写在
的内部。body不能写在frameset的上面。代码：
left.html：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3 <head> 4 <title>left.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 </head>11 12 <body>13 <ul>14 <li><a href="http://www.baidu.com" target="right">百度</a></li>15 <li><a href="http://www.sina.com" target="right">新浪</a></li>16 </ul>17 </body>18 </html>
right.html：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3 <head> 4 <title>right.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->11 12 </head>13 14 <body>15 <font color="green" size="7">北京欢迎您！！</font>16 17 </body>18 </html>
top.html:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3 <head> 4 <title>顶部logo</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->11 12 </head>13 14 <body>15 <img src="/static/imghwm/default1.png" data-src="../girl4.jpg" class="lazy" style="max-width:90%"/ alt="Html一天入门_html/css_WEB-ITnose" >16 17 </body>18 </html>
09-htmldemo.html:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3 <head> 4 <title>框架标签</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->11 12 </head>13 14 <frameset rows="160,*">15 <frame src="top.html" name="top">16 <frameset cols="180,*">17 <frame src="left.html" name="left">18 <frame src="right.html" name="right">19 </frameset>20 </frameset>21 22 <body>23 24 </body>25 </html>
显示：注意这里的frameset
代码下载地址：
https://github.com/BigShow1949/02-HTML-CSS
什麼是自我關閉標籤？舉一個例子。Apr 27, 2025 am 12:04 AMself-closingtagsinhtmlandxmlaretagsthatclosethem hexptneedneedingAseparateClosingTag，SightifyingmarkupStrupupStrupureAndenHancingCodingsigy.1）shemesessientInsentialInxmlforelementswithcontentsswithcontent content content content content content content content content contentcontent，確保wellwell-formedDocuments.2）Inhtmlible5，inhtmlibut forfix
超越HTML：網絡開發的基本技術Apr 26, 2025 am 12:04 AM要構建一個功能強大且用戶體驗良好的網站，僅靠HTML是不夠的，還需要以下技術：JavaScript賦予網頁動態和交互性，通過操作DOM實現實時變化。 CSS負責網頁的樣式和佈局，提升美觀度和用戶體驗。現代框架和庫如React、Vue.js和Angular，提高開發效率和代碼組織結構。
HTML中的布爾屬性是什麼？舉一些例子。Apr 25, 2025 am 12:01 AM布爾屬性是HTML中的特殊屬性，不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為，如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性，高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值，正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔，合理使用布爾屬性以優化網頁性能和用戶體驗。
如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AMHTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。
HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AMHTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。
HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AMHTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。
HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AMHTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AMHTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
WebStorm Mac版
好用的JavaScript開發工具
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
