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/wzlb/21723.html">电脑怎么安装程序</a></li> <li><a href="https://www.csdndoc.com/doc/9238.html">Redis字符串类型和哈希类型讲解</a></li> <li><a href="https://www.csdndoc.com/doc/7352.html">【GD32F310开发板试用】开箱及任务规划</a></li> <li><a href="https://www.csdndoc.com/doc/3391.html">JavaEE——MyBaits配置详解</a></li> <li><a href="https://www.csdndoc.com/doc/9277.html">【Numpy金融领域的应用】伽玛分布和贝塔分布随机抽样——以债券违约率与回收率为分析对象</a></li> <li><a href="https://www.csdndoc.com/wzlb/23146.html">找不到服务器应用程序</a></li> <li><a href="https://www.csdndoc.com/wzlb/25247.html">小程序开发贵吗</a></li> <li><a href="https://www.csdndoc.com/sygl/27296.html">泰坦巨人攻略</a></li> <li><a href="https://www.csdndoc.com/doc/3044.html">看完这一篇后我同事说我写代码像写诗</a></li> <li><a href="https://www.csdndoc.com/doc/15873.html">单例模式的实现方式(懒汉模式、俄汉模式，java语言)</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"><style> .custom-html-widget p { font-family: 'Arial', sans-serif; font-size: 26px; line-height: 1.5; text-align: justify; margin-bottom: 20px; color: black; } </style> 水利万物而不争, 而万物莫能与之争。</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.965217391304pt;" aria-label="代码 (786个项目)">代码</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.747826086957pt;" aria-label="元素 (629个项目)">元素</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.791304347826pt;" aria-label="函数 (1,123个项目)">函数</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: 9.9478260869565pt;" aria-label="功能 (371个项目)">功能</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.4608695652174pt;" aria-label="参数 (335个项目)">参数</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.165217391304pt;" aria-label="变量 (470个项目)">变量</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.4608695652174pt;" aria-label="命令 (336个项目)">命令</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.147826086957pt;" 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.678260869565pt;" 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.4608695652174pt;" 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.208695652174pt;" aria-label="对象 (831个项目)">对象</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.5826086956522pt;" aria-label="属性 (344个项目)">属性</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.434782608696pt;" aria-label="应用程序 (407个项目)">应用程序</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.069565217391pt;" aria-label="手机 (378个项目)">手机</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.1217391304348pt;" 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.313043478261pt;" aria-label="接口 (400个项目)">接口</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.765217391304pt;" 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.8260869565217pt;" aria-label="操作 (366个项目)">操作</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.860869565217pt;" aria-label="数据 (1,655个项目)">数据</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.4608695652174pt;" 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.113043478261pt;" 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.791304347826pt;" aria-label="文件 (1,118个项目)">文件</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.304347826087pt;" aria-label="方法 (1,030个项目)">方法</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.3652173913043pt;" aria-label="时间 (276个项目)">时间</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.1217391304348pt;" 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.095652173913pt;" aria-label="版本 (315个项目)">版本</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.182608695652pt;" aria-label="用户 (1,002个项目)">用户</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.704347826087pt;" aria-label="电脑 (352个项目)">电脑</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.4869565217391pt;" aria-label="的是 (280个项目)">的是</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,671个项目)">程序</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.165217391304pt;" aria-label="程序员 (471个项目)">程序员</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.4869565217391pt;" 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.8521739130435pt;" aria-label="类型 (300个项目)">类型</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.55652173913pt;" aria-label="系统 (417个项目)">系统</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.895652173913pt;" 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.8pt;" 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: 14.695652173913pt;" aria-label="自己的 (915个项目)">自己的</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.382608695652pt;" aria-label="节点 (583个项目)">节点</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.1217391304348pt;" aria-label="设备 (264个项目)">设备</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.704347826087pt;" aria-label="语言 (353个项目)">语言</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.434782608696pt;" aria-label="软件 (404个项目)">软件</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.5826086956522pt;" aria-label="页面 (348个项目)">页面</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.191304347826pt;" aria-label="项目 (387个项目)">项目</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/cj/19557.html">你们家怎样过年怎么写</a></li> <li><a href="https://www.csdndoc.com/doc/2496.html">【计网入门就看这篇】从零开始的计网学习——物理层（考研人福利）</a></li> <li><a href="https://www.csdndoc.com/wzlb/25964.html">小程序可以换主体吗</a></li> <li><a href="https://www.csdndoc.com/doc/87.html">JavaScript遭嫌弃，“反JS”主义者兴起</a></li> <li><a href="https://www.csdndoc.com/doc/17872.html">HarmonyOS鸿蒙学习笔记（15）Swiper实现抖音切换视频播放效果</a></li> <li><a href="https://www.csdndoc.com/doc/7132.html">2500字，手把手带你初步了解static关键字和指针，结构体</a></li> <li><a href="https://www.csdndoc.com/doc/6554.html">【重温SSM框架系列】13 - Mybatisd的动态SQL及PageHelper分页查询</a></li> <li><a href="https://www.csdndoc.com/doc/2323.html">图像处理2-图像形态学</a></li> <li><a href="https://www.csdndoc.com/doc/10837.html">conda update 命令</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 - 2024 <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="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>