怎么选择合适的HTML标签

在divcss布局时会遇到一个问题,那就是如何选择html标签布局,但对于非新手csser来说非常简单,但对于刚刚学习或刚刚入手css制作来说却是一个无形问题。那么我们今天就来归纳一下,什么情况下用什么标签。

我们在布局的时候总是会遇到各种各样的问题,那么这里大家简单介绍如何选择HTML标签:

1、框架布局(使用DIV标签)

在网页中框架布局一般使用DIV布局,无论大小DIV盒子一般均使用DIV标签(

)布局。

2、列表型布局(使用ul li标签)

立即学习“前端免费学习笔记(深入)”;

遇到图片列表、文章标题列表,通常使用ul li列表标签进行布局。当然使用这些标签时要进行设置需要CSS样式达到布局效果。这样程序调用数据时候更容易做循环内容。

3、标题型布局(使用h1、h2、h3、h4标签)

遇到独立的栏目标题、正文标签,通常使用h1、h2、h3、h4标题标签,这样布局内容具有层次感。同时考虑SEO来说适当使用这些标题标签有利于优化排名。

4、内容独立样式型(使用span)

在一段文字中,有几个文字需要单独设置一个颜色值,这个时候可以对这几个文字加span标签,对span标签单独设置class或直接CSS样式达到效果,一般来说布局框架很少使用span。

5、功能型布局(img、b、strong、u、s等标签)

遇到网页中引人图片使用Img标签;遇到文字加粗可以使用b标签或strong标签、遇到下划线可以使用u标签、遇到文字贯穿线(删除线)使用s标签等,有时不一定使用CSS来实现这些功能布局,适当选用这些HTML标签从SEO方面更加好些。

6、段落(p标签)

一般文章段落都是使用p标签,即每段文字开始时候使用

结束时使用

,这样文章段落分明。

7、手动强行换行布局(br标签)

遇到文字需要换行的使用br标签即“
”,值得注意br标签是单独的标签非盒子标签,独立的一个标签,什么地方需要换行就使用br标签。

8、表格型(table表格标签)

在HTML布局中,学习DIV CSS并不意味着放弃table标签,这个有时还是需要table标签的,比如遇到表格型布局的,还是需要table tr td标签布局,这个时候使用表格布局优于div标签。

9、表单布局(form、input等)

遇到表单布局,比如注册、登录、填写数据提交地方等,均是使用表单标签。

相信通过我们的介绍大家已经清楚了,更多精彩请关注创想鸟其它相关文章!.

相关阅读:

div浮动层与默认的div层有什么关系

怎么知道DIV设置什么CSS属性样式?

怎样知道浏览器支不支持html5

以上就是怎么选择合适的HTML标签的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545268.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:47:07
下一篇 2025年12月21日 16:47:14

相关推荐

  • HTML里怎么使用margin 0 auto

    margin是一个很重要的属性,那么在html里怎么使用margin 0 auto呢?我们今天就好好介绍一下margin:0 auto,下面给大家举一个小列子 margin设置对象外边距,如果我们给DIV设置一条边框线(border)样式后,在DW软件里即可看出margin设置值其实是在边框外距离,…

    好文分享 2025年12月21日
    000
  • HTML里DIV相互重叠怎么办

    我们常常在做网页的时候发现一个问题,那就是div覆盖了div,这样就出现了div的盒子重叠覆盖导致内容没有出现这么一个问题,那么我们今天就来给大家介绍一下产生原因以及解决方法。 可能您遇到过上下结构的布局,下面DIV内容重叠上面DIV内容上,也可能下面内容覆盖掉上面DIV布局,形成DIV与DIV覆盖…

    好文分享 2025年12月21日
    000
  • html 的标签需要怎么使用

    在html5之前的版本大家可能有用div标签布局网页的习惯,但是h5在div标签的基础上增加了header标签元素,也就是我们说的头部标签,以往我们在布局中常常把网页分为头部,内容,底部,现在已经有系统的标签来帮我们规划,也是方便了很多,那么这个header标签需要怎么使用呢?今天我们就来好好的研究…

    好文分享 2025年12月21日
    000
  • HTML5 标签怎么用

    这次我们来说一下对h5的footer标签,nav的基本语法和结构,nav配合什么标签使用,在什么情况下可以使用,帮助大家快速理解nav。 首先nav也是在html5中新增的元素标签。同时和其它新增标签一样,nav在传统html5以前版本Html布局中作为导航条相关常用命名来使用。 比如: 网站导航内…

    好文分享 2025年12月21日
    000
  • 在HTML里DIV怎么使用

    div作为我们html网页中常用的标签,它的默认样式是单独占一行,如果创建一个div,那么其css样式需要重新赋予。像div宽度、高度等样式设置、内部字体大小、字体颜色这些,都是需要通过css来实现。 通俗认识div,div作用就是实现布局、实现对内容样式控制、实现各种各样的布局效果。 DIV的用法…

    好文分享 2025年12月21日
    000
  • 在HTML里p段落行高行距怎么设置

    怎么样设置p段落之间的上下间距?哪些样式能够控制 之间行距距离呢?css行高怎么写?今天我们来把这个p段落研究个明明白白,让大家彻底掌握p行距行高样式。 那么我们为大家介绍如何通过CSS样式设置p段落上下行距,而p是文章段落标签,控制p段落行距的css div属性有: 1、css line-heig…

    2025年12月21日
    000
  • HTML里空格字符怎么输入

    html里空格字符怎么输入?今天和大家说一下html网页代码里的多个空格需要怎么输入。怎么在网页代码里输入多个空格。 我们知道这HTML网页中插入多个空格间隔是需要特殊字符编码的。如果是直接敲入多个空格键,虽然看似代码中有了多个空格效果,但在浏览器中还是只有1个空格的间隔位置。 接下来DIVCSS5…

    好文分享 2025年12月21日
    000
  • DOCTYPE html 很重要

    默认情况下,ff和ie的解释标准是不一样的,也就是说,如果一个网页没有声明doctype,它就会以默认的doctype解释下面的html。在同 一种标准下,不同浏览器的解释模型都有所差异,如果声明标准不同,不用我说,您自己想就可以了。学习网页标准,浏览器兼容,从哪里开始您自己决定,但是, 请认识do…

    好文分享 2025年12月21日
    000
  • HTML里table标签的使用方法

    html的table元素是包含tr td th表格标签元素的,那么今天我们就来给大家详细介绍一下表格的布局以及语法,最后是对表格的总结经验,大家也可以借鉴一下 表格布局篇,认识html表格基础语法,认识table表格结构语法,通过html table tr td、html table tr th表格…

    好文分享 2025年12月21日
    000
  • html的网页源代码怎么查看

    既然我们是前端工作者,那么我们一定要学会查看html的网页源代码,今天就给大家介绍俩种不同的查看网页源代码的方法。 网页源代码是什么?通俗了解,通过html语法规则让图片、文字等内容,在浏览器显示出来的代码我们称之为网页源代码。 源代码(源文件)是指网页的html代码,这里可以将CSS代码也称为CS…

    好文分享 2025年12月21日
    000
  • HTML网页字体大小的设置

    html网页字体大小的设置有很多种方法,今天给大家主要介绍俩种,一种是css设置html中字体大小,另外一种是html标签里设置style属性设置字体大小。 接下来通过html案例介绍字体大小设置教程。 html font标签设置字体大小 在css之前html中文字设置字体,通常直接对文字使用fon…

    好文分享 2025年12月21日
    000
  • HTML里white-space怎么使用

    white-space是html一个标签,那么今天我们给大家科普一下,这个属性究竟怎么使用,可以在哪些情景下使用 white-space norma nowrap强制同一行内显示所有文本文字,让所有文字内容中一排显示不换行。 让文字不自动换行,无论CSS宽度设置多少,所有文字都在一行内显示。特别是标…

    好文分享 2025年12月21日
    000
  • HTML下拉菜单代码

    福利来拉福利来拉,经典的html下拉菜单代码,直接拿去用即刻,不用谢,叫我雷锋,代码是符合web标准的css下拉导航菜单布局,兼容性这方面非常的不错,大家可以放心使用 Html源代码 下拉 下拉 产品一 产品一 产品一 产品一 产品一 下拉 入门一 入门二 入门二 入门二入门二 入门二入门二入门二 …

    好文分享 2025年12月21日
    000
  • html文档类型声明怎么写

    想让css样式表生效,那么doctype声明是必须的,在以前table布局的网页doctype可以省略也是能正常显示。但是如果是在div css布局中,doctype的这一小段代码就至关重要了,是会影响css样式是否生效。少了doctype html声明有的css样式仍是生效,但有的css样式是失效…

    好文分享 2025年12月21日
    000
  • HTML里的checkbo怎么使用

    checkbo的使用很多种方法,那么今天给大家介绍一下。html form checkbox多选复选框控件多选。 使用html input标签,name为自定义,type类型为“checkbox”的表单 1、对应主要部分HTML代码:   立即学习“前端免费学习笔记(深入)”; 当然以后我们也会为大…

    2025年12月21日
    000
  • 为什么HTML网页乱码与解决方法

    有时候我们做出来的网页打开以后是乱码,那么我们需要怎么解决这种情况呢?以下就给大家带来乱码造成的原因以及解决乱码的方法。 一、乱码造成原因  1、比如网页源代码是gbk的编码,而内容中的中文字是utf-8编码的,这样浏览器打开即会出现html乱码。反之网页是编码utf-8,内容是gbk也会出现乱码。…

    好文分享 2025年12月21日
    000
  • HTML标题标签元素怎么修改

    当我们做网页时,标题一定要比内容引人注目,那么我们需要怎么做出标题呢?以下就给大家html标题标签元素怎么使用和修改 HTML标题标签元素怎么修改。 H1 H2 H3 H4标题标签常常使用在一个网页中唯一标题、重要栏目、重要标题等情形下。 H1 H2 H3 H4目录 搜索引擎下看h1标题标签 立即学…

    好文分享 2025年12月21日
    000
  • html中的label标签使用方法

    这次给大家介绍的是html中的label标签使用方法,我们都知道一个完整的表单是由表单标签 与其中包裹的各种表单控件组成的,那么label标签就是一种常见的表单控件了。 先举个例子: [html] view plain copyE-mail: 表单控件都是内联元素所以他俩会在一行显示。在网页中当我们…

    好文分享 2025年12月21日
    000
  • html的注释有什么作用

    当我们使用html的时候一定会用到一个标签,那就是注释标签那么今天我们就给大家好好的介绍一下,注释的作用以及给大家举一个小列子。 html 注释语法  使用解释:在html中,小于符号“”,注意这些字符都需要英文半角小写输入。 html注释作用 立即学习“前端免费学习笔记(深入)”; 在html中使…

    好文分享 2025年12月21日
    000
  • html的锚文本怎么写

    锚文本这个词大家可能不是很熟,但是说到超链接你一定很清楚,所以如果说锚文本_锚链接也被称为超链接。那你一定知道什么是锚文本了吧?今天我们就来说说锚文本的使用。 被链接内容 网址,网址一定加上http://+域名 相对路径,如htef=”/abc/”,代表本站内锚文本 targ…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信