HTML标签(标签区分)

标签含义

        标签,标记,元素,都是同一个概念

                 标签都需要放在尖角号(<>)里面; 

        标签的语法分为

            1)单标记/单标签

                <标签名字 属性="属性值" 属性="属性值">

            2)双标记/双标签

                <标签名字 属性="属性值" 属性="属性值"></标签名字>

        标签的特点

                a)都需要放在尖角号里面

                b)单标签没有结束,双标签有结束需要带/

                c)每一个标签都可以带属性,可以一个,也可以多个,甚至还可以没有

                d)属性需要放在开始标签位置处

                e)标签名字和属性之间必须带空格

                f)每一组属性和属性值之间必须带空格

                g)属性和属性值之间需要使用等号链接

                h)属性值需要带引号

     

        标签分类(文本)

                1)文本修饰类型

                    只对文字进行修饰

                 a)文本加粗(双)

                        作用:对文字/文本实现加粗效果

                        语法:<b>文本</b> <strong>文本</strong>

                        快捷:b+tab

                        代码: <b>你好呀!!!你是谁</b>

                        区别：相同:都能让文本加粗

                        不同:后者更加具有语义化,实际开发的时候使用频率比较广

                    b)文本倾斜(双)

                        作用:对文本/文字实现倾斜效果

                        语法:<i>文本</i> <em>文本</em> <var></var>

                        快捷:i+tab

                         代码:<i>你好呀!!!你是谁</i>

                         区别：相同:都能实现倾斜效果

                         不同点:em更加具有语义化,实际开发的时候使用频率比较高,为啥不使用var,js里面,声明变量的时候我们通常情况下会使用关键字var来进行声明,为了避免冲突,所以现在我们很少使用

                    c)下划线标签(双)

                        作用:为文本提交下划线效果

                        语法:<u>文本</u> <ins></ins>

                        快捷:u+tab

                        代码:<u>你好呀!!!你是谁</u>

                         区别：相同:都能用来实现下划线效果

                          实际开发的时候,二者使用频率都是比较低的,实际使用CSS完成

                    d)文本修饰:大小,颜色,字体

                        作用:修饰文本其他效果

                        语法:<font color="颜色" size="字号" face="字体">文本</font>

                        注意1:size取值没有任何单位,就是一个纯数值

                        注意2:size取值范围:1-7

                        代码:你好呀!!! <font color="pink" size="7" face="楷体">你是谁</font>

                    e)多种样式修饰:

                        注意事项:同类型的(文本修饰类型的标签,谁嵌套谁都可以,因为级别一样)

                        标签嵌套:一层包裹一层,一层里面包含另外一层

                         <b><i>文本</i></b>  合理嵌套

                        <i><b>文本</b></i>  合理嵌套

                        <b><i>文本</b></i>  不正确,出现了交叉嵌套

                        代码:<b><i>你好呀!!!你是谁</i></b>

                          <b><i><u>你好呀!!!你是谁</u></i></b>

                   f)删除线(双)

                        作用:为文本提供删除线的效果

                        语法:<s>文本</s>  <del>文本</del>

                        场景:商品打折

                        代码:你好呀!!!<s>你是谁</s>

                           区别：  相同:都能实现删除线效果

                                         不同:后面del更加具有语义化

                    g)文本居中(双)

                           居中 让元素,或者是文本, 图片,位于父元素或者是浏览器水平位置居中 

                           使用的标签: H5有一个对应的标签: 

                          基本语法: <center>文本.图片</center>   双标签

                          弊端:就是让所有的内容均居于中间位置显示;

                          文本居中的话, 标签属性: align="center"  只会应用于区块划分元素情况比较多 

                         h)水平线(单)

                                基本语法: <hr>

                                 实际开发的时候,线条效果我们均使用:边框完成

                            1)取消阴影

                                        noshade="noshade"

                                当标签属性使用的时候,属性和属性值取值一样的时候,属性值可以省略不写,直接用   属性代替等价于noshade

                            2)修饰颜色

                                color="red"

                            3)设置宽度

                                width="设置px/%"

                            4)水平线,对其方式

                                align="left左对齐/right右对齐/center(居中,默认)"

                            5)设置高度(设置尺寸)

                                size="数值px"

                    i) 空格效果 

                        对应的特殊符号: &emsp; 

                        全角空格,占一个汉字的大小

           j)角标标签

                        能够让文本以上下角标形式显示,位置位于对应区域的右上角或者是右下角

              ​​​​​​​        ​​​​​​​        上角标

                                    

                              单位计算,平方米,立方米

                              下角标