页面开发常用语言HTML，是一种考虑逻辑的编程语言，而是用标签的形式进行编写代码的语言。
利用vscode编译器打开后缀名为html的文件可以进行编写html代码，然后直接用浏览器打开html文件即可得到自己用html代码写的页面。
标签介绍
一开始的标签是标签，
里面的子标签分别是
和标签，然后标签里面放入子标签
标签，然后标题命名直接在两个标签中间进行书写，
例如
这是一个标题<title></p>
<p>具体介绍常见标签：</p>
<p><strong><p></p>标签</strong></p>
<p>叫作段落标签，在中间填写一句话可以得到一个段落，然后两个相邻的p标签是有空格间隙的：</p>
<p>呈现效果为：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022641918.png"></p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642030.png"></p>
<p> 是两个段落。</p>
<p><strong><!---->注释标签</strong></p>
<p>在注释标签中间填写注释：</p>
<p>效果如下：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642106.png"></p>
<p> 在页面上打开不显示，只是在写代码的时候可以作说明提醒的作用。</p>
<p></p>
<p><strong><hx></hx> (x为1至6)小标题标签</strong></p>
<p>数字越小，标题越大，</p>
<p>代码如下：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642172.png"></p>
<p> 打开界面后如下：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642007.png"></p>
<p><strong> <a></a>超链接标签</strong></p>
<p>超链接标签意思是在网页上可以提供一个跳转到别的页面的链接，有当前界面内跳转和另开一个界面跳转两种情况：</p>
<p><a>标签里面的href属性代表的是所需要跳转的界面链接：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022641293.png"></p>
<p> 效果如图：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022641352.png"></p>
<p> 通过点击这句话可以跳转到href里面给的链接地址</p>
<p>情况一：当前界面跳转，即从当前的点击界面跳转到所需要跳转的界面，直接向上述这样写就行。</p>
<p>情况二：另启一个界面进行跳转，此时需要在该<a href="https://so.csdn.net/so/search?q=a%E6%A0%87%E7%AD%BE&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=a%E6%A0%87%E7%AD%BE&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"a标签\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=a%E6%A0%87%E7%AD%BE&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"a标签\"}"}" data-tit="a标签" data-pretit="a标签">a标签</a>所在的范围内加入base标签，然后属性为_blank</p>
<p>代码如下</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022641419.png"></p>
<p> 此时点击就会另外开辟界面进行跳转：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642202.png"></p>
<p></p>
<p><strong><img><\img>图片插入标签</strong></p>
<p><a href="https://so.csdn.net/so/search?q=img%E6%A0%87%E7%AD%BE&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=img%E6%A0%87%E7%AD%BE&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"img标签\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=img%E6%A0%87%E7%AD%BE&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"img标签\"}"}" data-tit="img标签" data-pretit="img标签">img标签</a>里面的属性src和alt，src代表图片来源，即图片的地址，分为相对路径和绝对路径，相对路径就是跟该html文件所在一个文件夹的图片链接，绝对路径就是在具体某盘某文件夹里面的图片，这是在自己电脑上的，还可以从网上找图片的网络路径，这样将html文件发给别人的时候，只要对方有联网就可以看到图片，而相对路径和绝对路径只是自己电脑上的图片，对方电脑里面或许没有该图片，所以可能将html文件发给对方就打不开图片；而alt代表如果你所发的图片打不开了或者链接不存在了，就会显示alt里面的文字：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642122.png"></p>
<p>当给src和alt赋值后：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642007.png"></p>
<p> 此时链接存在，不显示alt文字：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642400.png"></p>
<p> 若图片链接不存在，不显示图片，显示alt里面的文字：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642345.png"></p>
<p style="text-align:center;"> <img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642375.png"></p>
<p> <strong><table><\table>表格标签</strong></p>
<p>在表格里面放置标签</p>
<p><tr><\tr>行标签</p>
<p><th><\th>行标签里面放置小标题标签</p>
<p><td><\td>行标签里面放置文段标签</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022641619.png"></p>
<p style="text-align:center;"> <img alt="" src="https://1000bd.com/contentImg/2023/11/05/022641302.png"></p>
<p><strong> <input>标签</strong></p>
<p>常用：</p>
<p>type属性为text和checkbox</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642305.png"></p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022641361.png"></p>
<p></p>
<p><strong><textarea><\textarea>标签</strong></p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642336.png"></p>
<p> 属性cols和rows代表输入框的宽度和长度</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022641779.png"></p>
<p> <strong><select><\select>标签</strong></p>
<p>里面有<option><\option>选项进行选择：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022641777.png"></p>
<p> 界面效果：</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642840.jpeg"></p>
<p></p>
<p><strong><ul><\ul>有序列表标签 以及<ol><\ol>无序列表标签</strong></p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642127.png"></p>
<p> 显示界面</p>
<p style="text-align:center;"><img alt="" src="https://1000bd.com/contentImg/2023/11/05/022642006.png"></p>
<p></p>
<p></p>
</div>
</div>
</li>
<li class="list-group-item ul-li">
<b>相关阅读:</b><br>
<nobr>
<a href="/Article/Index/1398131">小白学前端遇到的若干问题</a> <br />
<a href="/Article/Index/1325931">arm day1</a> <br />
<a href="/Article/Index/721292">Python多进程</a> <br />
<a href="/Article/Index/889475">如何在 SAP ABAP ALV 报表里以交通灯的方式显示某一列的值</a> <br />
<a href="/Article/Index/1180589">【Docker学习系列】Docker学习1-docker安装</a> <br />
<a href="/Article/Index/851607">网站：推荐几款好用的在线短链生成工具</a> <br />
<a href="/Article/Index/824359">Python函数和代码复用</a> <br />
<a href="/Article/Index/1173376">报名即将结束！11 大云原生领域开源技术干货一场拿下</a> <br />
<a href="/Article/Index/617233">JavaScript中if语句优化和部分语法糖小技巧推荐</a> <br />
<a href="/Article/Index/1401989">SDK广告整合</a> <br />
</nobr>
</li>
<li class="list-group-item from-a mb-2">
原文地址：https://blog.csdn.net/SPMAX/article/details/126816835
</li>
</ul>
</div>
<div class="col-lg-4 col-sm-12">
<ul class="list-group" style="word-break:break-all;">
<li class="list-group-item ul-li-bg" aria-current="true">
最新文章
</li>
<li class="list-group-item ul-li">
<nobr>
<a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br />
<a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br />
<a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br />
<a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br />
<a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br />
<a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br />
<a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br />
<a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br />
<a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br />
<a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br />
</nobr>
</li>
</ul>
<ul class="list-group pt-2" style="word-break:break-all;">
<li class="list-group-item ul-li-bg" aria-current="true">
热门文章
</li>
<li class="list-group-item ul-li">
<nobr>
<a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br />
<a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br />
<a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br />
<a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br />
<a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br />
<a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br />
<a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br />
<a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br />
<a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br />
<a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br />
</nobr>
</li>
</ul>
</div>
</div>
</div>
<!-- 主体 -->
<!--body结束-->
<!--这里是footer模板-->
<!--footer-->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-muted center foot-height">
Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>
<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a>
</div>
<div style="width:300px;margin:0 auto; padding:0px 5px;">
<a href="/regex.html">正则表达式工具</a>
<a href="/cron.html">cron表达式工具</a>
<a href="/pwdcreator.html">密码生成工具</a>
</div>
<div style="width:300px;margin:0 auto; padding:5px 0;">
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
<img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a>
</div>
</div>
</div>
</div>
</nav>
<!--footer-->
<!--footer模板结束-->
<script src="/js/plugins/jquery/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!--这里是scripts模板-->
<!--scripts模板结束-->
</body>
</html>