前端基础——html5新增标签

文章目录

    • 一、新增表单标签
    • 二、媒体标签
    • 三、语义化标签
    • 额外涨知识

一、新增表单标签

原始表单标签:input(text、password、radio、checkbox、button)、select、textarea、button、form。 h5增加了很多功能性的表单标签用于pc端和移动端的表单开发。

  • 邮箱:input(type="email"),提交数据时提供了邮箱格式的验证(格式不一定完全正确,因此以后需要通过js来进行调整;
  • 数字输入框:input(type="number")
  • 网址输入框:input(type="url"),验证输入内容是否为网址,需要完整网址,以http协议开头
  • 搜索输入框:input(type="search"),提供了输入文本清空的控件
  • 选择范围:input(type="range"),有一个选择条
  • 选择颜色:input(type="color") ,有一个颜色选择器
  • 文件上传:input(type="file"),默认只能上传一个,要想上传多个,需要在属性中加入multiple
<input type="file" multiple>
  • 时间控件:input(type="date"),date——年/月/日,month——年/月,year——年 ,week——年/周,time——14:32
  • 选项列表:
<h3>选项列表h3>
    
    <input type="text" list="mylist">
    <datalist id="mylist">
        <option value="">小米option>
        <option value="">小强option>
        <option value="">小米手机option>
        <option value="">小米玩偶option>
        <option value="">小米手表option>
        <option value="">大米option>
    datalist>
  • 必填项:属性required
  • 只读:不可编辑,属性readonly,文本只读,不能更改,可以复制,可以提交
  • 禁用:文本可以复制,不能更改,不可以提交给数据库,属性disabled
  • 自动获取焦点:属性autofocus

二、媒体标签

H5新增了音频和视频的标签

  • 音频标签
    • 用于页面中引入音频文件
    • 语法:
      写法二的好处在于当一个音频文件有多个不同的格式时,可以写多个source,从而使得多种浏览器兼容
<body>
    
    <audio src="file/music.mp3" controls>audio>
    
     <audio>
         <source src="file/music.mp3" type="audio/mp3">
         <source src="file/music.ogg" type="audio/ogg">
     audio>
body>

在这里插入图片描述

  • 视频标签
    语法格式与音频格式类似,标签为
<video src="file/play.mp4" controls loop>video>
     
      <video controls>
          <source src="file/test.MP4">
      video>

三、语义化标签

  • 概念:
    能够通过标签名很好的合理正确地表达标签内容的意思,语义化标签具有可读性
  • 优点:
    • 易于用户阅读,样式丢失的时候,可以让页面呈现清晰的代码结构
    • 有利于SEO优化,搜索引擎根据标签来确定上下文的各个标签的关键字的关系以及权重
      (seo一般指搜索引擎优化。 SEO(Search Engine Optimization)
    • 方便其他设备进行解析,比如盲人阅读器
    • 有利于开发和维护
  • 使用
<body>
    
    <header>
        
        <nav>
            <ul>
                <li>
                    <a href="">a>
                li>
            ul>
        nav>
    header>
    
    <main>
        
        <aside>aside>
        
        <article>
            
            <section>section>
            <section>section>
        article>
    main>
    
    <footer>
        <table>
            
            <thead>
                <tr>
                    <td>td>
                    <td>td>
                tr>
            thead>
            
            <tbody>
                <tr>
                    <td>td>
                    <td>td>
                tr>
            tbody>
            
            <tfoot>
                
            tfoot>
        table>
    footer>
body>
  • 标签的选择
    • 最外层的标签尽量使用HTML5的语义化标签,比如header、main、footer等;
    • 标题尽量使用标题标签,主要是为了seo优化;
    • 对于网页的内容的框架,重复出现的使用section标签,大体的内容区域可以使用article标签;
    • 具体内容该什么标签就使用什么标签;
  • 语义化标签的样式渲染
    直接把语义化标签当成普通的div标签进行样式的设置,语义化标签的设置只是增加可读性

额外涨知识

  • 使用i标签在导航中插入雪碧图做小图标
    (1) 在a标签中,加一个i标签,设置类选择器,表示该标签显示的东西在a标签中位于后面的文字前方。
    (2) i标签仅作为选择器,标签之间不放任何东西。(注意:i标签本身是斜体标签
    (3) 给i标签设置背景图片,插入小图标
<li>
    <div class="title">前端div>
    <a href="">
        <i class="icon-web">i>
        web前端工程师a>
    <a href="">
        <i class="icon-weixin">i>
        微信小程序a>
li>

效果图如下:
前端基础——html5新增标签_第1张图片

  • 这里需要注意的点是,如果一张雪碧图放了很多小图标,对小图标设置公共样式可以采用选择器[class *=icon]表示以icon开头的类选择器
header .container nav ul li .nav2 ul li a [class *=icon]{
    width: 14px;
    height: 14px;
    /* border: 1px solid red; */
    vertical-align: middle;
}
  • i标签还可以用于插入字体图标
<li>
    <a href="" >
        <i class="fa fa-edit">i>在线编辑器
    a>
li>

你可能感兴趣的:(前端开发,css,html5)