HTML元素标签

什么是标签?

在HTML页面中,带有“< >”符号的元素被称为HTML标签(元素==标签)


 标签分为:单标签和双标签

HTML中标签元素一般会分成三种不同类型,分别为:块状元素(块盒),行内元素(行盒),行内块状元素

这三种类型元素的特点以及用处


 

块状元素的特点:

    1、独占一行,每一个块状元素都会从新的一行重新开始,从上到下排布

    2、可以直接控制宽度、高度以及盒子模型的相关css属性(元素的高度、宽度、行高以及内和外边距都可设置)

    3、在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度

    4、在不设置高度的情况下,块级元素的高度是它本身内容的高(适应内容高度

常用的块状元素:

    1、普通元素

      div(常用块状容器,也是csslayout的主要标签)、p(段落)、hr(水平分隔线)、table(表格)、form(交互表单)

    2、标题元素:

       h1(大标题)、h2(副标题)、h3(三级标题)、h4(四级标题)、h5(五级标题)、h6(六级标题)

    3、列表元素

      menu(菜单列表)、ol(有序列表)、ul(无序列表)、li(列表项)、dl(定义列表)、dt(定义术语)、dd(定义描述)

    4、其他元素

        <address></address>(一般用于显示网站上的公司地、电子邮件地址、签名、文档作者身份等信息,浏览器对其的默认样式是’斜体‘。)

       <blockquote></blockquote>(作用是引用别人的文本。但它不同于’<q>引用短文本</q>‘是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。浏览器对其的默认样式是’两边缩进‘。)

       <pre></pre>(在网页上显示一段计算机编程代码,不同于’<code>加入一行编程代码</code>‘是加入多行代码)



行内元素的特点:

  1、总是和相邻的行内元素在同一行上(物以类聚)

  2、设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效。

  3、默认宽度是他自身内容的宽度。

  4、行内元素只能容纳其他行内元素或者文本。

特殊:a比较特殊,可以放块级元素,但是链接里面不能再放链接。


 

 常用的行内元素:
    1、字体元素
      <a></a> (超链接)、<span></span>(此标签没有语义,作用就是为某段文字单独设置样使用的)、<br/>(换行)、
      <i></i>(斜体效果)、<em></em>(斜体效果)、<strong></strong>(粗体)
      <q></q>(引用短文本)、<code></code>(在网页上显示一行计算机编程代码)
      <var></var>(表示变量的名词或者由用户提供的值,经常与<code><pre>标签配合使用,用来显示计算机编程代码范例及类似特定元素。通常显示为斜体。)等..............
    2、控件元素

      <label></label>为input元素定义标注

                for属性:表示label标签要绑定的html元素,你点击label标签时,绑定的html元素将获的焦点。(绑定的必须是Id值)

               accesskey属性:表访问label标签的for元素指定的html元素的快捷键,当按下快捷键时指定的元素将获得焦点。

               <Label FOR="InputBox" ACCESSKEY="N">姓名</Label><input ID="InputBox" type="text">  按下N或单击’姓名‘ ,inputBox获取焦点


 

行内块元素的特点:

  1、和相邻行内元素在同一行,但是之间会有空白缝隙。

  2、默认宽度是他本身内容的宽度。(适应内容)

  3、宽度、高度、行高、外边距以及内边距都可以手动设置。

行内块元素综合了块元素和行内元素的不同特点。


 常用的行内块元素:

  1.<img>(图片)

  2、<input>(文本框)

  3、<td>(列)


 

HTML标签的关系

    针对双标签的相互关系分2种:嵌套关系、并列关系

 

  1、嵌套关系 =======(父子关系)

    <head>

      <title> </title>

    </head>

  2、并列关系=======(兄弟关系)
    <body>

      <p>1</p>

      <p>2</p>

    </body>  


标签显示模式转换(display)

既然标签有不同的显示模式,就会有相应的转换办法以应对各种需要。

display正是我们想要的。

块元素——>行内元素 : display:inline;

行内元素——>块: display:block;

块、行内元素——>行内块: display: inline-block;


2021-01-11

posted @ 2021-01-11 19:32  HuangBingQuan  阅读(311)  评论(0编辑  收藏  举报