HTML标签

常用HTML标签分类

布局类标签
头部标签：<header></header>
导航标签：<nav></nav>
内容标签：<section></section>
侧边栏标签：<aside></aside>
底部标签：<footer></footer>

文本类标签
段落标签：<p></p>
文字标签：<span></span>
斜体标签：<i></i>
粗体标签：<b></b>
加强显示标签：<strong></strong>
标题标签： 在一个页面中h1标签只能出现一次，其他标题标签可以出现多次，h1-h6标题级别依次降低，字体依次减小
<h1>我是大标题，一个网页中只能有一个h1标签</h1>
<h2>我是标题标签</h2>
<h3>我是标题标签</h3>
<h4>我是标题标签</h4>
<h5>我是标题标签</h5>
<h6>我是标题标签</h6>

图片类标签

 <!-- 
        图片类标签 作用：加载图片
        src：图片路径
        alt：图片信息描述，在图片不能加载时出现
    -->
 <img src="./img/白敬亭.jpg" alt="白敬亭">

链接类标签

  <!--
        a 标签有默认文本样式，改变url地址
        href：跳转页面地址
     -->
    <a href="https://github.com/">github</a>

音频标签

  <!-- 
        音频类标签 
        src：路径 
        controls：是否加控制条，值为controls表示加控制条
    -->
    <audio src="./audio/青蛙 - 小跳蛙.mp3" controls="controls">小跳蛙</audio>

视频标签

 <video src="./video/视频.mp4" controls="controls"></video>

表格类标签

<table>
        <!-- thead: 表格头部 -->
        <thead>
            <th>表格行</th>
        </thead>
        <!--tbody: 表格身体 -->
        <tbody>
            <!-- tr：行 -->
            <tr>
                <td>列</td>
            </tr>
        </tbody>
 </table>

表单标签

<form></form>
描述表单标签：<label for="">表单描述信息</label>
输入框：<input type="text" name="" id="">
按钮：<button></button>
多行输入文本标签：<textarea name="" id="" cols="30" rows="10"></textarea>
下拉列表：<select name="" id=""></select>
下拉列表选项：<option value=""></option>

<select name="" id="">
     <option value="">html</option>
     <option value="">java</option>
     <option value="">android</option>
</select>

列表类标签
有序列表：<ol></ol>

    <ol>
        <li>哈哈</li>
        <li>嘿嘿</li>
        <li>吼吼</li>
        <li>嘻嘻</li>
    </ol>
```js
无序列表：`<ul></ul>`

```js
 <ul>
        <li>哈哈</li>
        <li>嘿嘿</li>
        <li>吼吼</li>
        <li>嘻嘻</li>
    </ul>
```js
定义列表：`<dl></dl>`

```js
<dl>
    <dd>列表说明</dd>
    <dt>嘿嘿</dt>
    <dt>吼吼</dt>
    <dt>嘻嘻</dt>
</dl>

根据特点分类
块元素：

• 特点：默认宽度100%（子元素相对于父元素），元素的高度，由子元素撑起来
• 子元素在父元素中排列方式从上往下
  html body 所有布局标签：<main></main> <div></div> <section></section> <nav></nav> <footer></footer> <header></header> <p></p> <ul></ul> <ol></ol> <dl></dl> <dd></dd> <form>…

行元素：

• 特点：默认宽度为内容宽度，内容高度（*没有高度和宽度）
• 子元素在父元素中排列方式从左往右依次排列，直到排满换行
  <audio></audio> <video></video> <span></span> <a></a> <input> <button></button> <label></label> <select></select> <option></option>…

行内块：

• 后天改变，既具有行元素的特点又具有块元素的特点
• 特点：大小为内容大小，可以设置宽度和高度