带你了解 常用标签的基本语法

---

语义化标签

语义化标签在网页中HTML专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式

---

一、标签的分类

注意：

1、一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
2、块元素中基本上什么都能放
3、p元素中不能放任何的块元素

4、浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正：

 比如：
                标签写在了根元素的外部
                p元素中嵌套了块元素
                根元素中出现了除head和body以外的子元素
                ......

1.块元素

块元素在页面中独占一行的元素称为块元素（block element）

在网页中一般通过块元素对页面进行布局：
1、总是从新的一行开始
2、高度、宽度都是可控的
3、宽度没有设置时，默认为100%
4、块级元素中可以包含块级元素和行内元素

常用的块级元素：标题标签、段落标签等。

2.行内元素

行内元素在页面中不会独占一行的元素称为行内元素（inline element）

行内元素主要用来包裹文字：
1、和其他元素都在一行
2、高度、宽度以及内边距都是不可控的
3、宽高就是内容的高度，不可以改变
4、行内元素只能行内元素，不能包含块级元素

常用的行内元素：em标签、strong标签、br换行、超链接等。

二、常用的标签元素

示例：

布局标签：header、main、footer、nav、aside、article、section、div、span...

列表标签:有序列表、无序列表、定义标签

<ol>                    <ul>                    <dl>
    <li>结构</li>          <li>结构</li>            <dt>结构</dt>
    <li>表现</li>          <li>表现</li>            <dt>表现</dt>
    <li>行为</li>          <li>行为</li>            <dd>css来实现</dd>
 </ol>                  </ul>                   </dl>
 
图片标签: <img src="图片路径" alt=“图片描述”>

内敛框架:<iframe src="https://www.qq.com" width="800" height="500" frameborder="0"></iframe>

音视频标签:

    音频标签audio：<audio controls>
                       <source src=".mp3">
                       <source src=".ogg"> 
                       <embed src=".mp3" type="audio/mp3" width="300" height="100">
                   </audio>
                     
    视频标签video：<video controls>
                        <source src=".mp4">
                        <embed src=".mp4" type="video/mp4" width="300" height="100">
                  </video>

表格标签：
         <table>
               <tr>
                   <td></td>
                   <td></td>
                   <td></td>
              </tr>
          </table>

表单标签： <form action="target.html"></form>

     text(文本框)：<input type="text" name="username">
     
     password（密码框)：<input type="password" name="password">
     
     radio（单选按钮）：<input type="radio" name="hello" value="a">
                       <input type="radio" name="hello" value="b" checked>
                       
     checkbox(多选框）：<input type="checkbox" name="test" value="1">
                       <input type="checkbox" name="test" value="2">
                       <input type="checkbox" name="test" value="3" checked>
                       
     下拉列表：<select name="haha" >
                  <option value="i">选项一</option>
                  <option value="ii">选项二</option>
                  <option selected value="iii">选项三</option>
              </select>
              
       列表框：<select name="haha" multiple>
                 <option value="i">皮球</option>
                 <option value="ii">篮球</option>
                 <option selected value="iii">乒乓球</option>
              </select>
              
       submit（提交按钮）：<input type="submit" value="登录">
       
       reset（重置按钮）：<input type="reset">
       
       button（普通按钮）：<input type="button" value="按钮">
       
       ......

---

总结

标签中属性：
1、标签中设置属性（只能在开始标签或者自结束标签）。
2、属性是一个名值对（属性名=属性值）。
3、属性用来设置标签中的内容如何显示。
4、属性和标签名之间用空格隔开，可多个属性，各属性之间用空格隔开属性不能乱写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属值，应该使用引号引起来，单双引号都可。