HTML(一)

文档中心

👨‍💻作者简介: 大家好,我是小火车~~,在校大二学生一枚

🛳️个人主页: 嘟嘟嘟的小火车的博客

📗系列专栏: 本文写在《HTML5》专栏

✉️如果文章知识点有错误的地方,请指正! 和大家一起学习一起进步🎈

🔥如果觉得博主的文章还不错的话,请👍三连支持👍一下博主哦

HTML一

- 一.初识HTML
- 二.HTML的基本结构
- 三.网页基本信息
- 四. 语法基本规范
- 五.HTML标签分类
- 六. 基本标签
- - 标题标签(块级标签)
  - 段落标签(块级标签)
  - 换行标签(块级标签)
  - 水平线标签(块级标签)
  - 有序列表标签(块级标签)
  - 无序列表标签(块级标签)
  - 定义列表标签(块级标签)
  - 三种列表小结
  - 分区标签 (块级标签)
  - 字体样式标签(行级标签)
  - 范围标签(行级标签)
其他专栏

一.初识HTML

Hyper Text Markup Language（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等

版本:HTML5

IDE推荐: WebStorm

二.HTML的基本结构

<html><head>    <title>我的第一个网页</title></head><body>    Hello,World! </body></html>

三.网页基本信息

DOCTYPE声明
标签 </li> <li> 标签 <blockquote> 描述型标签用来描述网站的一些信息 </blockquote> </li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8">  <title>我的第一个网页</title> <meta name="keywords" content="关键字1,关键字2" />  <meta name="description" content="内容描述....." /> </head><body> Hello,World! </body></html></code></pre> <h2>四. 语法基本规范</h2> <ul> <li> 标签名和属性名称必须小写 </li> <li> 属性值必须用引号括起来 </li> <li> HTML标签必须关闭 双标签：成对书写 单标签：或 </li> <li> 标签必须正确嵌套 嵌套关系：如，html标签中嵌套着head和body 并列关系：如，head标签同级的body标签 </li> <li> 嵌套关系的标签要缩进：一般缩进2个空格或4个空格 </li> <li> 必须添加文档类型声明 ,声明必须位于文档的最前面 </li> </ul> <h2>五.HTML标签分类</h2> <ul> <li>行级标签:按行逐一显示</li> <li>块级标签:显示为“块”状，前后隔一行</li> </ul> 分类好处：方便后续的布局设计 <h2>六. 基本标签</h2> <h3>标题标签(块级标签)</h3> <pre><code class="prism language-html"><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></code></pre> <h3>段落标签(块级标签)</h3> <pre><code class="prism language-html"><p>这是一段话</p></code></pre> <h3>换行标签(块级标签)</h3> <pre><code class="prism language-html"><br/> </code></pre> <h3>水平线标签(块级标签)</h3> <pre><code class="prism language-html"><hr/> </code></pre> <h3>有序列表标签(块级标签)</h3> <pre><code class="prism language-html"><ol type="1"> <li>描述1</li> <li>描述2</li> <li>描述3</li></ol></code></pre> type取值 <table> <thead> <tr> <th>取值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>使用数字作为项目符号，默认值</td> </tr> <tr> <td>A/a</td> <td>使用大写/小写字母作为项目符号</td> </tr> <tr> <td>I/i</td> <td>使用大写/小写罗马数字作为项目符号</td> </tr> </tbody> </table> <h3>无序列表标签(块级标签)</h3> <pre><code class="prism language-html"><ul> <li>描述1</li> <li>描述2</li> <li>描述3</li></ul></code></pre> type取值 <table> <thead> <tr> <th>取值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>disc</td> <td>项目符号显示为实体圆心,默认值</td> </tr> <tr> <td>square</td> <td>项目符号显示为实体方心</td> </tr> <tr> <td>circle</td> <td>项目符号显示为空心圆</td> </tr> </tbody> </table> <h3>定义列表标签(块级标签)</h3> <pre><code class="prism language-html"><dl> <dt>标题</dt> <dd>描述1</dd> <dd>描述2</dd> <dd>描述3</dd></dl></code></pre> <h3>三种列表小结</h3> <table> <thead> <tr> <th align="center">类型</th> <th>说明</th> <th>项目符号</th> </tr> </thead> <tbody> <tr> <td align="center">无序列表</td> <td>以 <ul>标签来实现,以 <li>标签表示列表项</td> <td>无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容</td> </tr> <tr> <td align="center">有序列表</td> <td>以 <ol>标签来实现,以 <li>标签表示列表项</td> <td>有序列表一般用于显示带有顺序编号的特定场合</td> </tr> <tr> <td align="center">定义类表</td> <td>以 <dl>标签来现,以 <dt>标签定义列表项,以 <dd>标签定义内容</td> <td>定义列表一般适用于带有标题和标题解释性内容的场合</td> </tr> </tbody> </table> <h3>分区标签 (块级标签)</h3> <pre><code class="prism language-html"><div></div></code></pre> <blockquote> 一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用 </blockquote> <h3>字体样式标签(行级标签)</h3> <pre><code class="prism language-html"><strong></strong> <em></em> <del></del> <ins></ins> </code></pre> <h3>范围标签(行级标签)</h3> <pre><code class="prism language-html"><span>文本内容</span></code></pre> <blockquote> 用作行内区域划分 </blockquote> <hr /> <h1>其他专栏</h1> <blockquote> ❤️《编程相关技能》专栏 🧡《HTML5》专栏 💛《CSS3》专栏 💚《java从0到1》专栏 💙《英语语法》专栏 </blockquote> </div> <div class="clear"></div> <div class="article_tags"> <div class="tagcloud"> 网络标签：<a href="https://www.csdndoc.com/tag/%e5%88%97%e8%a1%a8" rel="tag">列表</a> <a href="https://www.csdndoc.com/tag/%e6%a0%87%e7%ad%be" rel="tag">标签</a> <a href="https://www.csdndoc.com/tag/%e6%a0%87%e9%a2%98" rel="tag">标题</a> </div> </div> </div> </div> <div> <ul class="post-navigation row"> <div class="post-previous twofifth"> 上一篇 <a href="https://www.csdndoc.com/doc/6557.html" rel="prev">修改Windows10的开机启动项</a> </div> <div class="post-next twofifth"> 下一篇 <a href="https://www.csdndoc.com/doc/6559.html" rel="next">【Linux篇】Linux 用户和用户组管理。用户账号的管理，用户组的管理，与用户账号有关的系统文件介绍</a> </div> </ul> </div> <div class="article_container row box article_related"> <div class="related"> <div class="newrelated"> <h2>相关问题</h2> <ul> <li><a href="https://www.csdndoc.com/doc/11513.html">一文掌握MySQL中的锁</a></li> <li><a href="https://www.csdndoc.com/doc/9801.html">操作系统知识点（可学习，可复习，可面试）</a></li> <li><a href="https://www.csdndoc.com/wzlb/20156.html">十五元宵节不能出去吗</a></li> <li><a href="https://www.csdndoc.com/doc/6418.html">Java学习笔记＜一＞(HelloWorld；常用包装类)</a></li> <li><a href="https://www.csdndoc.com/doc/15443.html">MySQL查询和删除重复记录</a></li> <li><a href="https://www.csdndoc.com/doc/15563.html">linux中用conda安装大于3.6版本的R</a></li> <li><a href="https://www.csdndoc.com/doc/9664.html">js 常用排序总结（图解）</a></li> <li><a href="https://www.csdndoc.com/doc/12341.html">《五月集训》（第14天）——栈</a></li> <li><a href="https://www.csdndoc.com/wzlb/29209.html">你若安好便是晴天下一句</a></li> <li><a href="https://www.csdndoc.com/wzlb/25472.html">电脑一运行程序就卡死</a></li> </ul> </div> </div> </div> <div class="clear"></div> <div id="comments_box"> </div> </div> <div id="sidebar"> <div id="sidebar-follow"> <div class="search box row"> <div class="search_site"> <form id="searchform" method="get" action="https://www.csdndoc.com/index.php"> <button type="submit" value="" id="searchsubmit" class="button">☚</button> <label><input type="text" class="search-s" name="s" x-webkit-speech="" placeholder="请输入搜索内容"></label> </form></div></div> <div class="widget_text widget box row widget_custom_html"><h3>公告</h3><div class="textwidget custom-html-widget"><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><h2>DeepSeek全套部署资料免费下载</h2></a> <a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/deep.png" alt="DeepSeekR1本地部署部署资料免费下载"></a> <a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><h2>免费可商用字体批量下载</h2></a> <a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/freefont.png" alt="免费可商用字体下载"></a></div></div> <div class="widget box row widget_tag_cloud"><h3>标签</h3><div class="tagcloud"><a href="https://www.csdndoc.com/tag/%e4%bb%a3%e7%a0%81" class="tag-cloud-link tag-link-19 tag-link-position-1" style="font-size: 13.913793103448pt;" aria-label="代码 (787个项目)">代码</a> <a href="https://www.csdndoc.com/tag/%e5%85%83%e7%b4%a0" class="tag-cloud-link tag-link-500 tag-link-position-2" style="font-size: 12.706896551724pt;" aria-label="元素 (630个项目)">元素</a> <a href="https://www.csdndoc.com/tag/%e5%87%bd%e6%95%b0" class="tag-cloud-link tag-link-111 tag-link-position-3" style="font-size: 15.724137931034pt;" aria-label="函数 (1,129个项目)">函数</a> <a href="https://www.csdndoc.com/tag/%e5%8a%9f%e8%83%bd" class="tag-cloud-link tag-link-294 tag-link-position-4" style="font-size: 10.051724137931pt;" aria-label="功能 (383个项目)">功能</a> <a href="https://www.csdndoc.com/tag/%e5%8f%82%e6%95%b0" class="tag-cloud-link tag-link-680 tag-link-position-5" style="font-size: 9.448275862069pt;" aria-label="参数 (336个项目)">参数</a> <a href="https://www.csdndoc.com/tag/%e5%8f%98%e9%87%8f" class="tag-cloud-link tag-link-81 tag-link-position-6" style="font-size: 11.137931034483pt;" aria-label="变量 (471个项目)">变量</a> <a href="https://www.csdndoc.com/tag/%e5%91%bd%e4%bb%a4" class="tag-cloud-link tag-link-570 tag-link-position-7" style="font-size: 9.448275862069pt;" aria-label="命令 (337个项目)">命令</a> <a href="https://www.csdndoc.com/tag/%e5%9c%a8%e8%bf%99%e9%87%8c" class="tag-cloud-link tag-link-33 tag-link-position-8" style="font-size: 21.034482758621pt;" aria-label="在这里 (3,056个项目)">在这里</a> <a href="https://www.csdndoc.com/tag/%e5%ad%97%e7%ac%a6%e4%b8%b2" class="tag-cloud-link tag-link-556 tag-link-position-9" style="font-size: 10.655172413793pt;" aria-label="字符串 (428个项目)">字符串</a> <a href="https://www.csdndoc.com/tag/%e5%ae%b9%e5%99%a8" class="tag-cloud-link tag-link-332 tag-link-position-10" style="font-size: 9.448275862069pt;" aria-label="容器 (338个项目)">容器</a> <a href="https://www.csdndoc.com/tag/%e5%af%b9%e8%b1%a1" class="tag-cloud-link tag-link-175 tag-link-position-11" style="font-size: 14.155172413793pt;" aria-label="对象 (832个项目)">对象</a> <a href="https://www.csdndoc.com/tag/%e5%b1%9e%e6%80%a7" class="tag-cloud-link tag-link-468 tag-link-position-12" style="font-size: 9.6896551724138pt;" aria-label="属性 (350个项目)">属性</a> <a href="https://www.csdndoc.com/tag/%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f" class="tag-cloud-link tag-link-39 tag-link-position-13" style="font-size: 10.413793103448pt;" aria-label="应用程序 (410个项目)">应用程序</a> <a href="https://www.csdndoc.com/tag/%e6%89%8b%e6%9c%ba" class="tag-cloud-link tag-link-28 tag-link-position-14" style="font-size: 10.293103448276pt;" aria-label="手机 (400个项目)">手机</a> <a href="https://www.csdndoc.com/tag/%e6%8c%87%e9%92%88" class="tag-cloud-link tag-link-849 tag-link-position-15" style="font-size: 8.1206896551724pt;" aria-label="指针 (262个项目)">指针</a> <a href="https://www.csdndoc.com/tag/%e6%8e%a5%e5%8f%a3" class="tag-cloud-link tag-link-110 tag-link-position-16" style="font-size: 10.293103448276pt;" aria-label="接口 (401个项目)">接口</a> <a href="https://www.csdndoc.com/tag/%e6%8f%92%e5%85%a5%e5%9b%be%e7%89%87" class="tag-cloud-link tag-link-336 tag-link-position-17" style="font-size: 16.689655172414pt;" aria-label="插入图片 (1,344个项目)">插入图片</a> <a href="https://www.csdndoc.com/tag/%e6%93%8d%e4%bd%9c" class="tag-cloud-link tag-link-179 tag-link-position-18" style="font-size: 9.9310344827586pt;" aria-label="操作 (368个项目)">操作</a> <a href="https://www.csdndoc.com/tag/%e6%95%b0%e6%8d%ae" class="tag-cloud-link tag-link-97 tag-link-position-19" style="font-size: 17.775862068966pt;" aria-label="数据 (1,667个项目)">数据</a> <a href="https://www.csdndoc.com/tag/%e6%95%b0%e6%8d%ae%e5%ba%93" class="tag-cloud-link tag-link-92 tag-link-position-20" style="font-size: 9.448275862069pt;" aria-label="数据库 (336个项目)">数据库</a> <a href="https://www.csdndoc.com/tag/%e6%95%b0%e7%bb%84" class="tag-cloud-link tag-link-671 tag-link-position-21" style="font-size: 13.068965517241pt;" aria-label="数组 (669个项目)">数组</a> <a href="https://www.csdndoc.com/tag/%e6%96%87%e4%bb%b6" class="tag-cloud-link tag-link-109 tag-link-position-22" style="font-size: 15.724137931034pt;" aria-label="文件 (1,127个项目)">文件</a> <a href="https://www.csdndoc.com/tag/%e6%96%b9%e6%b3%95" class="tag-cloud-link tag-link-112 tag-link-position-23" style="font-size: 15.362068965517pt;" aria-label="方法 (1,035个项目)">方法</a> <a href="https://www.csdndoc.com/tag/%e6%97%b6%e9%97%b4" class="tag-cloud-link tag-link-21 tag-link-position-24" style="font-size: 8.6034482758621pt;" aria-label="时间 (290个项目)">时间</a> <a href="https://www.csdndoc.com/tag/%e6%a8%a1%e5%9e%8b" class="tag-cloud-link tag-link-49 tag-link-position-25" style="font-size: 8.1206896551724pt;" aria-label="模型 (263个项目)">模型</a> <a href="https://www.csdndoc.com/tag/%e7%89%88%e6%9c%ac" class="tag-cloud-link tag-link-15 tag-link-position-26" style="font-size: 9.2068965517241pt;" aria-label="版本 (319个项目)">版本</a> <a href="https://www.csdndoc.com/tag/%e7%94%a8%e6%88%b7" class="tag-cloud-link tag-link-100 tag-link-position-27" style="font-size: 15.241379310345pt;" aria-label="用户 (1,018个项目)">用户</a> <a href="https://www.csdndoc.com/tag/%e7%94%b5%e8%84%91" class="tag-cloud-link tag-link-564 tag-link-position-28" style="font-size: 9.8103448275862pt;" aria-label="电脑 (360个项目)">电脑</a> <a href="https://www.csdndoc.com/tag/%e7%9a%84%e6%98%af" class="tag-cloud-link tag-link-41 tag-link-position-29" style="font-size: 8.9655172413793pt;" aria-label="的是 (306个项目)">的是</a> <a href="https://www.csdndoc.com/tag/%e7%a8%8b%e5%ba%8f" class="tag-cloud-link tag-link-102 tag-link-position-30" style="font-size: 22pt;" aria-label="程序 (3,730个项目)">程序</a> <a href="https://www.csdndoc.com/tag/%e7%a8%8b%e5%ba%8f%e5%91%98" class="tag-cloud-link tag-link-58 tag-link-position-31" style="font-size: 11.258620689655pt;" aria-label="程序员 (479个项目)">程序员</a> <a href="https://www.csdndoc.com/tag/%e7%ae%97%e6%b3%95" class="tag-cloud-link tag-link-225 tag-link-position-32" style="font-size: 8.4827586206897pt;" aria-label="算法 (284个项目)">算法</a> <a href="https://www.csdndoc.com/tag/%e7%b1%bb%e5%9e%8b" class="tag-cloud-link tag-link-273 tag-link-position-33" style="font-size: 8.8448275862069pt;" aria-label="类型 (303个项目)">类型</a> <a href="https://www.csdndoc.com/tag/%e7%b3%bb%e7%bb%9f" class="tag-cloud-link tag-link-138 tag-link-position-34" style="font-size: 10.655172413793pt;" aria-label="系统 (424个项目)">系统</a> <a href="https://www.csdndoc.com/tag/%e7%ba%bf%e7%a8%8b" class="tag-cloud-link tag-link-463 tag-link-position-35" style="font-size: 11.862068965517pt;" aria-label="线程 (532个项目)">线程</a> <a href="https://www.csdndoc.com/tag/%e7%bb%84%e4%bb%b6" class="tag-cloud-link tag-link-523 tag-link-position-36" style="font-size: 10.775862068966pt;" aria-label="组件 (438个项目)">组件</a> <a href="https://www.csdndoc.com/tag/%e8%87%aa%e5%b7%b1%e7%9a%84" class="tag-cloud-link tag-link-5 tag-link-position-37" style="font-size: 15pt;" aria-label="自己的 (971个项目)">自己的</a> <a href="https://www.csdndoc.com/tag/%e8%8a%82%e7%82%b9" class="tag-cloud-link tag-link-676 tag-link-position-38" style="font-size: 12.344827586207pt;" aria-label="节点 (584个项目)">节点</a> <a href="https://www.csdndoc.com/tag/%e8%ae%be%e5%a4%87" class="tag-cloud-link tag-link-25 tag-link-position-39" style="font-size: 8.2413793103448pt;" aria-label="设备 (268个项目)">设备</a> <a href="https://www.csdndoc.com/tag/%e8%af%ad%e8%a8%80" class="tag-cloud-link tag-link-36 tag-link-position-40" style="font-size: 9.8103448275862pt;" aria-label="语言 (360个项目)">语言</a> <a href="https://www.csdndoc.com/tag/%e8%bd%af%e4%bb%b6" class="tag-cloud-link tag-link-155 tag-link-position-41" style="font-size: 10.534482758621pt;" aria-label="软件 (417个项目)">软件</a> <a href="https://www.csdndoc.com/tag/%e9%98%9f%e5%88%97" class="tag-cloud-link tag-link-678 tag-link-position-42" style="font-size: 8pt;" aria-label="队列 (254个项目)">队列</a> <a href="https://www.csdndoc.com/tag/%e9%a1%b5%e9%9d%a2" class="tag-cloud-link tag-link-279 tag-link-position-43" style="font-size: 9.5689655172414pt;" aria-label="页面 (349个项目)">页面</a> <a href="https://www.csdndoc.com/tag/%e9%a1%b9%e7%9b%ae" class="tag-cloud-link tag-link-82 tag-link-position-44" style="font-size: 10.172413793103pt;" aria-label="项目 (392个项目)">项目</a> <a href="https://www.csdndoc.com/tag/%e9%b8%bf%e8%92%99" class="tag-cloud-link tag-link-136 tag-link-position-45" style="font-size: 8pt;" aria-label="鸿蒙 (257个项目)">鸿蒙</a></div> </div> <div class="widget box row"> <div id="tab-title"> <div class="tab"> <ul id="tabnav"> <li class="selected">猜你想看的文章</li> </ul> </div> <div class="clear"></div> </div> <div id="tab-content"> <ul> <li><a href="https://www.csdndoc.com/doc/17890.html">边缘计算开源框架EdgeXFoundry的部署应用开发(二)源码调整</a></li> <li><a href="https://www.csdndoc.com/doc/13380.html">Vue3+webpack的axios的封装</a></li> <li><a href="https://www.csdndoc.com/wzlb/26507.html">智能手机上出现神秘词汇</a></li> <li><a href="https://www.csdndoc.com/doc/15068.html">Maven过滤资源问题</a></li> <li><a href="https://www.csdndoc.com/doc/28408.html">“维申及甫”的出处是哪里</a></li> <li><a href="https://www.csdndoc.com/cj/19283.html">冬天为什么气温干燥</a></li> <li><a href="https://www.csdndoc.com/doc/10455.html">java手动构建二叉树并实现广度遍历、深度遍历（前序中序后序）</a></li> <li><a href="https://www.csdndoc.com/doc/18137.html">47 岁从华为退休，操作系统老兵转战 OpenHarmony 生态 | 近匠</a></li> <li><a href="https://www.csdndoc.com/wzlb/21376.html">微信小程序怎么删不掉</a></li> <li><a href="https://www.csdndoc.com/wzlb/23659.html">设计与开发控制程序</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <div id="footer"> <div class="container"> <div class="twothird"> </div> </div> <div class="container"> <div class="twothird"> <div class="copyright"> Copyright © 2012 - 2025 <a href="https://www.csdndoc.com/">程序员档案馆</a> Powered by <a href="/lists">网站分类目录</a> | <a href="/top100.php" target="_blank">精选推荐文章</a> | <a href="/sitemap.xml" target="_blank">网站地图</a> | <a href="/post/" target="_blank">疑难解答</a> <a href="https://beian.miit.gov.cn/" rel="external">陕ICP备05009492号</a> 声明：本站内容来自互联网，如信息有错误可发邮件到f_fb#foxmail.com说明，我们会及时纠正，谢谢 本站仅为个人兴趣爱好，不接盈利性广告及商业合作 </div> </div> <div class="third"> <a href="http://www.xiaoboy.cn" target="_blank">小男孩</a> </div> </div> </div>  <div id="tbox"> <a id="home" href="https://www.csdndoc.com" title="返回首页"></a> <a id="pinglun" href="#comments_box" title="前往评论"></a> <a id="gotop" href="javascript:void(0)" title="返回顶部"></a> </div> <script src="//css.5d.ink/body5.js" type="text/javascript"></script> <script> function isMobileDevice() { return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || /iPhone|iPad|iPod/i.test(navigator.userAgent) || /Windows Phone/i.test(navigator.userAgent); } // 加载对应的 JavaScript 文件 if (isMobileDevice()) { var script = document.createElement('script'); script.src = '//css.5d.ink/js/menu.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } </script> <script> $(document).ready(function() { $("#sidebar-follow").pin({ containerSelector: ".main-container", padding: {top:64}, minWidth: 768 }); $(".mainmenu").pin({ containerSelector: ".container", padding: {top:0} }); $(".swipebox").swipebox(); }); </script> </body></html>