HTML标签及其属性

select:下拉菜单 

    下拉菜单整体：select标签   name

    每一项：     option标签   value

    属性：

      1、默认选中：selected  一个select标签中只能设置一个（规范）

出生年月：<select name="" id="">

                <option value="">1998</option>

                <option value="">1999</option>

                <option value="">2000</option>

                <option value="" selected>2001</option>

                <option value="">2002</option>

            </select>

 文本域标签：textarea

    作用：用于输入大段文字

    属性：

      1、cols：规定文本区内的可见宽度。

      2、rows：规定文本区内的可见行数。

   <textarea name="" id="" cols="10" rows="10"></textarea>

  label标签：

  作用：把文字和表单标签绑定起来！

    方式一（推荐使用）：

      1、先用label标签把文字包裹起来

      2、在表单标签上添加一个id属性

      3、在label标签的for属性中 写表单标签的id属性值

    方式二（简单粗暴）：

      直接用label标签把文字和表单标签一起包裹起来

      注意点：需要把label标签上的for属性删除掉！！！！

   -->

   性别：<input type="radio" name="sex" id="man"><label for="man">男</label>

             <label><input type="radio" name="sex">女</label><br><br>

  爱好：<input type="checkbox" id="code"><label for="code">敲代码</label>

 

 没有语义的标签：

   div:没有语义

    显示的特点：

      1、宽度默认占满一行！！！

      2、高度默认由内容撑开（自适应）

      3、独占一行（一行中只能显示一个）

    span：没有语义

    显示的特点

      1、一行可以显示多个

      2、宽度和高度都是由内容撑开的（自适应）

   -->

   <span>燃烧我的卡路里</span>

   <span>保温杯里泡枸杞</span>

   <div>燃烧燃烧把我的心燃烧</div><div>不再流泪哦不再流泪</div>

 新增语义标签：

header标签：表示网页头部的语义

    显示的特点：和div一样

    header = div + 网页头部的语义

nav标签：表示网页的导航的语义

    nav= div + 网页导航的语义

footer标签：表示网页底部的语义

    footer = div + 网页底部的语义

   <header>网页头部</header>

   <nav>网页导航</nav>

   <footer>网页底部</footer>

   <footer>长亭外</footer>

   <footer>古道边</footer>

新增表单属性：

1、placeholder：占位符

      作用:提示用户输入什么信息

2、autofocus：自动获取焦点，即不点击鼠标自动闪烁

3、multiple：多文件上传

  昵称：<input type="text" placeholder="请输入用户名" autofocus ><br><br>

            <input type="file" multiple>

 音频标签：audio

      属性：

        1、src：音频的路径

        2、controls：音频播放的控件（必加）

        3、autoplay：自动播放(有兼容性问题)

        4、loop：循环播放（有兼容性问题）

    <audio src="1.mp3" controls autoplay loop></audio> 

<!-- 

      兼容性处理：告诉老版本的浏览器的用户电脑的浏览器版本太低了！！去下载最新的浏览器

 -->

    <audio controls autoplay loop>

      <source src="1.mp3">

      <a href="http://www.itcast.cn">您的浏览器太垃圾了！！！请下载最新的版本！！</a>

    </audio>

 视频标签：video

    属性：

      1、src：视频的路径

      2、controls：视频的控件

      3、loop：循环播放（有兼容性问题）

      4、autoplay：自动播放（有兼容性问题）

   <!-- <video src="1.mp4" controls loop autoplay></video> -->

    <!-- 

      兼容性处理：告诉老版本的浏览器的用户电脑的浏览器版本太低了！！去下载最新的浏览器

    -->

    <video controls autoplay loop>

      <source src="1.mp4">

      <a href="http://www.itcast.cn">您的浏览器太垃圾了！！！请下载最新的版本！！</a>

    </video>