时间：2023-10-03 08:54:01 | 来源：网站运营
时间：2023-10-03 08:54:01 来源：网站运营
HTML零基础入门教程， 零基础学习HTML网页制作（HTML 标签）：
在线咨询
<div>标签与<span>标签：网页开发中使用频率最高的标签，类似于盒子，用于装内容；主要用于实现网页布局。<div>标签与<span>标签的含义与作用；<h1>到<h6>。 <h1>:表示一级标题 <h2>:表示二级标题 以此类推，<h6>表示六级标题。 <h1>我是一级标题</h1>注意： <h1>标签是双标签，标签内部的文字就是具体的标题内容。 我们上面定义的是一级标题，若定义二级标题，可以采用如下写法： <h2>我是二级标题</h2>那么，其他四级标签如何书写呢？ 聪明的你肯定已经想到了吧？ 对，更改h后相应的数字就可以啦！为了方便理解，我们要记住：h，其实是 head 这个单词的缩写，表示头部、标题的意思。<h1>是最高等级的标题标签。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <h1>线上学习，就来博学谷</h1> <h2>线上学习，就来博学谷</h2> <h3>线上学习，就来博学谷</h3> <h4>线上学习，就来博学谷</h4> <h5>线上学习，就来博学谷</h5> <h6>线上学习，就来博学谷</h6> </body> </html> 上述代码中，设置了六个标题，最终展示效果如下：<h1>标签字号最大，<h2>标签相比<h1>较小，<h6>标签最小，且一个标题独占一行。 有兴趣的童鞋，可以尝试一下上面的代码，看看效果是否一样！！关于<h1> ---<h6>标签，说法不正确的是？
A. 添加<h1>---<h6>标签的文字，除了字号会依次递减，不会有其它的变化；
B. 为了使网页更具语义化，经常会在页面中用到标题标签，即<h1>-<h6>；
C. 标题标签中 h，是单词 head 的缩写，意为头部、标题；
D. 添加<h1>-<h6>标签后，一个标题独占一行；
<p>标签，<p>标签用于定义段落，它可以将整个网页分为若干个段落。 <p> 这是一个段落 </p>段落标签的语义，就是将 HTML 文档分割成若干的段落。我们通过一个实例体验一下段落标签的使用，如下图所示：VSCode中，已经按下回车键，将文章的内容分成了两段。通过浏览器浏览时，文案会分段显示吗？<p>标签，看看是否能实现分段？ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <p> 如今，多屏互动和多端兼容友好的界面日益成为所有系统重要的需求，因此优秀的前端开发工程师在就业市场上也变得更为抢手。本文将为广大的前端学习者介绍一下前端开发培训班的一些实战项目，希望大家可以通过理论知识和项目实践的学习，朝着中高级前端工程师的方向发展。 </p> <p> 电商后台管理系统项目通过使用vue官方vue-cli3.0脚手架工具提供的工作流快速搭建和开发项目，运用阿里旗下饿了么 ElementUI组件库搭建网页结构同时实现相应页面中的功能，通过axios请求后端相应的接口，然后把请求到的数据展示到页面中，通过Vue-router作为前端路由管理复杂页面。该项目包括了前后端分离模式开发、vue-cli3.0、ElementUI组件库（饿了么UI）、Echarts数据可视化库等内容。 </p> </body> </html> 仔细阅读上述代码可以发现，我们添加了两组<p>标签，每组<p> 标签内部均包含一段文字，用<p> 标签将文字分成两部分；<p> 标签实现了文章分段。 <p>标签用于定义段落，它可将整个网页分为若干个段落，也就是想分几段，就要用几组<p>标签。标签语法格式： <p> 这是一个段落 </p> 我们通过一个练习题检验一下学习成果：对网页中的文章进行分段，可以直接按下回车键来实现。以上说法是否正确？
<br />。 <br />注意：换行标签是一个单标签。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <p> 如今，多屏互动和多端兼容友好的界面日益成为所有系统重要的需求，因此优秀的前端开发工程师在就业市场上也变得更为抢手。 本文将为广大的前端学习者介绍一下前端开发培训班的一些实战项目，希望大家可以通过理论知识和项目实践的学习，朝着中高级前端工程师的方向发展。 </p> <p> 电商后台管理系统项目通过使用vue官方vue-cli3.0脚手架工具提供的工作流快速搭建和开发项目，运用阿里旗下饿了么 ElementUI组件库搭建网页结构同时实现相应页面中的功能，通过axios请求后端相应的接口，然后把请求到的数据展示到页面中，通过Vue-router作为前端路由管理复杂页面。该项目包括了前后端分离模式开发、vue-cli3.0、ElementUI组件库（饿了么UI）、Echarts数据可视化库等内容。 </p> </body> </html> 上述代码中，添加了换行标签，解析效果如下：标签在 HTML 中的含义是？
A. 加粗
B. 段落
C. 水平线
D. 斜线
关于下列段落和换行标签说法不正确的是？
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <h1>前端开发培训班的实战项目有哪些?</h1> <p> 如今，多屏互动和多端兼容友好的界面日益成为所有系统重要的需求，因此优秀的前端开发工程师在就业市场上也变得更为抢手。本文将为广大的前端学习者介绍一下前端开发培训班的一些实战项目，希望大家可以通过理论知识和项目实践的学习，朝着中高级前端工程师的方向发展。 </p> <h4>学成网在线项目</h4> <p> 学成在线案例是一个在线教育平台，在该案例中使用HTML+CSS进行页面的布局， 在首页中主要有网页的头部区域、网页的banner区域、文导航和文列表。 </p> <h4>品优购电商项目</h4> <p> 品优购电商项目属于B2C电商平台，类似于京东商城和淘宝，在该项目中使用HTML+CSS/CSS3进行页面的布局和动态效果实现， 主要实现了电商首页、列表页面、详情页面，三个页面之间能够进行相互切切换。项目主要根据Photoshop进行效果图的展示和页面尺寸、颜色量取的辅助开发；综合运用DIV+CSS知识，提高学员进行网页布局的能力。 </p> <p> 来源：博学谷<br /> 作者：照照 </p> </body></html>我们通过综合案例完成段落标签、标题标签、换行标签的应用，相信大家已经能掌握其用法，深刻理解了其在网页中的作用。 但是我们也明显的看到一个问题：上述的实例实现的页面效果与日常生活中看到的网页相比还比较简陋，似乎缺少了很多元素。没错，这只是网页开发的第一步，接下来我们将带领大家逐步实现一个完整的网页！！<strong>标签与<b>标签。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> 我是一个<strong>大帅哥</strong> 我是一个<b>大帅哥</br> </body> </html> 在此段代码中，我们同时使用了<strong>标签与<b>标签。<strong>标签与<b>标签都可以实现文字加粗效果；<strong>标签。因为<strong>标签语义更加强烈。<strong>相当于语气更加的强烈，所以推荐使用<strong>标签。<em>标签与<i>标签。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> 我是大<em>美女</em> 我是大<i>美女</i> </body> </html> 实际效果如下：<em>标签与<i>标签都可以实现斜体效果；<em>标签，因为该标签语义更加强烈。<del>标签与<s>标签。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> 商品价格<del>￥50</del> 商品价格<s>￥100</s> </body> </html> 执~行上面代码后，效果如下图所示：<del>标签与<s>标签均能实现删除线效果。 但考虑到具体的应用，若需要给文字添加删除线效果，推荐使用<del>标签，因为其语义更加强烈。<ins>与<u>标签，而我们更推荐使用<ins> 标签，因为该标签语义更加强烈。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> 这是<ins>下划线</ins> 这是<u>下划线</u> </body> </html> 执行上面代码后，效果如下图所示：下列关于文本格式化标签说法正确的是【 】？
<div>与<span>两个比较特殊的标签（这两个标签没有语义），它们类似一个盒子，用来装内容。也就是说，这两个标签主要是用来完成网页布局。<div>与<span>标签的作用： <div> 我是div标签 </div> <span> 我是span标签 </span>从上述代码可知：<div>与<span>标签都是双标签，可以在两个标签中(两个盒子)添加对应的内容。<div>标签用来进行网页布局，但是就目前来说，一行中只能放一个<div>，相当于一个大盒子。<div>标签的应用，具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <div>第一个div标签</div> <div>第二个div标签</div> </body> </html> 上面代码中，我们添加了两个<div>标签，并在标签中添加了文字，相当于这两个盒子中装的就是文字。 运行的效果，如下图所示：<div>独占一行，就像一个大盒子。<div>的应用效果：<div>。<div> 标签的应用后，我们来学习<span>标签的应用，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <div>第一个div标签</div> <div>第二个div标签</div> <span>博学谷</span> <span>传智播客</span> <span>博学谷</span> </body> </html> 上面代码中，我们添加了三组<span>标签，对应在浏览器中展示效果如下：<span>标签内容在一行中展示的，因此，<span>标签就像一行中的一个个小盒子；<div>标签与<span>标签，我们就学习完了，后面学习了 CSS 样式以后，还会继续深入学习这块内容。下面说法正确的选项是【】？
<img src="图像路径" />上述语法格式中，需要注意： （1）标签是一个单标签； （2）在标签中有一个属性 src； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <img src="m.jpg" /> </body> </html>由上面的代码可知，我们直接给 img 标签的 src 属性指定了图片的名称。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> 我的梦中情人 <img src="m.jpg" /> </body> </html>在代码中，添加了一句话“我的梦中情人”；然后通过浏览器运行上面的代码，效果如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <h4>我的梦中情人</h4> <img src="m.jpg" /> </body> </html>运行效果如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <img src="m1.jpg" alt="我的梦中情人" /> </body> </html>在代码中，我们所插入的图片名称叫做 m1.jpg，但是注意，在当前的 MyWeb 文件夹下是没有该图片的。 同时，给 img 标签添加了 alt 属性，并给该属性指定了一段文本，下面通过浏览器查看一下运行的效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <img src="m.jpg" title="我的梦中情人" /> </body> </html>运行上面的代码，效果如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <img src="m.jpg" title="我的梦中情人" width="300" height="300" /> </body> </html>在代码中，我们给<img>标签添加<title>属性的同时，也指定了 width 与 height 属性，设置图片的宽度与高度，分别为300像素。 通过浏览器运行上面的代码，对应的运行效果如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body> <img src="m.jpg" title="我的梦中情人" width="300" border="10" /> </body> </html>在代码中，为<img>标签添加<border>属性，设置边框为10像素，对应的效果如下所示：图像标签中哪个属性必须要写？
关于 alt 属性与 title 属性的区别，说法正确的是？
关键词：基础,标签,学习,入门,教程
