• 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

  • 相关阅读:
    安卓中像素px和dp的转换
    Android 使用Vector XML文件创建矢量图片资源,editText监听
    动态设置RecyclerView的高度
    EditText一些用法
    各种加密算法比较
    多线程--Task,等待用户输入AutoResetEvent
    AutoCAD二次开发——AutoCAD.NET API开发环境搭建
    Office(Excel、Word)二次开发——VSTO
    个人信息管理PIM——密码管理工具软件
    【矩阵计算】矩阵乘法其一:基础符号和算法
  • 原文地址:https://www.cnblogs.com/bingquan1/p/14260260.html
Copyright © 2020-2023  润新知