html标签分类

常用的HTML标签分类

什么是HTML？

HTML是超文本标记语言，html就是一个正常的文本文件，只不过文本内容比较特殊了。
是被标签包裹着进行的，以此就有了特殊的含义。被标签包裹的文本，就是超文本。
我们平时在浏览器中浏览的网页就是使用HTML语言进行编写的。

HTML标签分类

根据用途分类

一、布局类标签

nav：导航标签
header：头部标签
main ： 中部标签
section ：中部标签(不常用)
footer：尾部标签
作用：用于网页布局

布局类标签分支化总结：

二、文本标签

p ： 段落标签
i ： 斜体标签
b : 字体加粗
span ： 文字标签
strong ：字体变粗
del ： 删除线 标签

文本类标签分支化总结：

三、换行标签

br： 换行标签

四、图片类标签

img ：添加图片
属性：src ：图片的路径
            alt：图片信息描述，在图片加载时会出现

<img src="http://blog.sina.com.cn/pic/473673838c41a039016fb" alt="">

五、连接类标签

a：超链接
属性：href：输入跳转页面的地址
注意： a 标签有默认文本修饰

<a href="https://www.baidu.com"></a>

六、表格类标签<table></table>

thead ：表格头
tbody：表格体
tr：表格行
td：表格列

 <!-- 
        表格类标签
        作用：写表格
        应用：有规律的排列几行几列 
    -->
    <table>
        <!-- 表格头部 -->
        <thead></thead>
        
        <!-- 表格主体 -->
        <tbody>
            <!-- tr 行 -->
            <tr>
                <!-- td  列 -->
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
                <td>星期六</td>
                <td>星期日</td>
            </tr>
        </tbody>
    </table>

注意：表格要写在  table  标签内部

七、表单类标签<form ></form >

input：输入框
textarea：多行文本输入框
select：下拉选择框 （属性：option）

    <!-- 
        表单标签
        作用：表单提交等  登录注册
     -->
    <form action="">
         <label for="">用户名:</label>
         <input type="text">
         <button>提交</button>

         <textarea  cols="30" rows="10"></textarea>

         <select name="" id="">
             <option value="">aa</option>
             <option value="">ss</option>
             <option value="">xx</option>
         </select>
     </form>

注意：表格要写在  form  标签内部

八、列表类标签

1.<ol></ol>：有序列表

    <ol>
        <li>啦啦</li>
        <li>哈哈</li>
        <li>呼呼</li>
    </ol>
    

页面显示效果：

2.<ul></ul>：无序列表

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

页面显示效果：

3.<dl></dl>：定义列表

    <dl>
        <dt>ss</dt>
        <dt>aa</dt>
        <dt>gg</dt>
    </dl>

页面显示效果：

九、音频/视频

audio ：添加音频
video ：添加视频

    <audio src="./audio/青蛙 - 小跳蛙.mp3" controls = 'controls' autoplay = 'autoplay'></audio>
    <video src="./audio/妈妈不在家.mp4" controls = 'controls' ></video>

注意：audio 与 video 都有一个共同的属性 controls ，只有设置 controls 属性，音乐或视频才可显示播放。

根据特点分类

一、行内元素

常用的行内标签有：span、b、i…

另外一些行内元素：
audio video span a input  buttom label selet option ...

行内元素的特征：
1、设置宽高无效
2、margin设置上下无效，设置左右有效；
     padding设置上下左右都有效，padding会使空间撑大。
3、不会自动换行。

二、块级元素

常用的块级标签有p、div…

另外一些块级元素：
html body main div section nav footer header p ul li ol dl dd form ...

块级元素的特征：
1、设置宽高有效
2、margin设置上下左右都有效；
      padding设置上下左右都有效，padding会使空间撑大。
3、会自动换行，多个块级元素在一起，默认从上到下的顺序排列。

三、行内块元素

行内块元素特征：
1、不会自动换行
2、能够识别宽高
3、默认的排列顺序是从左至右

四、三种元素的转化

行内元素转换为块级元素
display: block;
块级元素转换为行内元素
display: inline;
转换为行内块元素
display: inline-block;