页面开发常用语言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/988679">【应用统计学】简单随机抽样的区间估计和样本容量的确定</a> <br />
<a href="/Article/Index/1342602">umi+react+dva 配置request的全局配置(请求拦截与响应拦截)和调用请求</a> <br />
<a href="/Article/Index/1224287">BFT 最前线 | 张一鸣成立个人基金；马斯克：AI是双刃剑；阿里首席安全科学家离职；卡内基梅隆究团队：解决农业虫卵问题的机器人</a> <br />
<a href="/Article/Index/817887">赛制出炉！西门子白帽黑客大赛吹响集结号</a> <br />
<a href="/Article/Index/1383142">什么是内存泄漏？JavaScript 垃圾回收机制原理及方式有哪些？哪些操作会造成内存泄漏？</a> <br />
<a href="/Article/Index/800343">【漏洞复现】Tomcat 任意写入文件漏洞（CVE-2017-12615）</a> <br />
<a href="/Article/Index/992083">【Java】数学模块的常见用法。</a> <br />
<a href="/Article/Index/1155230">基于springboot电动车智能充电服务平台设计与实现的源码+文档</a> <br />
<a href="/Article/Index/1400858">如何判断无损连接（例题）</a> <br />
<a href="/Article/Index/1355007">交通物流模型 | 基于交通图卷积长短时记忆网络的网络级交通流预测</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/1906469">【JVM】编译执行与解释执行的区别是什么？JVM 使用哪种方式？</a> <br />
<a href="/Article/Index/1907193">用 Hashids 优雅解决 C 端自增 ID 暴露问题</a> <br />
<a href="/Article/Index/1907195">V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容</a> <br />
<a href="/Article/Index/1907196">LLVM Pass快速入门(四)：代码插桩</a> <br />
<a href="/Article/Index/1907197">milkup：桌面端 markdown AI续写和即时渲染</a> <br />
<a href="/Article/Index/1907198">基于项目工程构建SBOM（软件物料清单）的研究</a> <br />
<a href="/Article/Index/1907199">鸿蒙应用开发UI基础第二节：鸿蒙应用程序框架核心解析与实操</a> <br />
<a href="/Article/Index/1907200">.NET 中如何快速实现 List 集合去重？</a> <br />
<a href="/Article/Index/1907201">扣子Coze实战：从0到1打造抖音+小红书热点监控智能体</a> <br />
<a href="/Article/Index/1907202">浅谈数据访问层</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 text-center">
<div style="padding:0px 5px;">
<a href="/tools">小工具</a>
<a href="https://games.1000bd.com">小游戏</a>
</div>
<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=" 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>