HTML5中常用标签总结

1、HTML5的文档头是默认严格模式的而HTML4的文档头有过渡型和严格型之分:

<!doctype html>

2、HTML5中的标签语义化(使用最恰当的HTML元素标记的内容)更强,而语义化强的好处则是:体现专业性,有利于seo优化,提升可访问性,结构清晰有利于日后的维护

3、SEO优化:Search Engine Optimization  中文:搜索引擎优化

站内优化(网站结构调整,网站内容建设,网站代码优化)和站外优化

4、HTML5中的标签:

<header>网站头部</header>

                <section>网站主体</section>

                <footer>网站尾部</footer>

<aside>侧边栏</aside>

<nav>导航</nav>    一个网站中只能用一次

<article>文章</article>

<hgrounp>标题组合</hgrounp>

<figure>资源组合描述

                  <img src="img/1.jpg"  title="文字描述"  alt="资源描述"/>

                  <figcaption>资源描述</figcaption>

               </figure>

  <time>2016-11-8时间标签</time>

<input type="text"list="id" />联想显示列表

          <datalist id="id">

               <option>apple</option>

              <option>pen</option>

              <option>banana</option>

               <option>orange</option>

          </datalist>

<details> 收缩菜单

<summary>这是一个标题</summary>

                  <p>这是它的内容</p>

</details>

<dialog open>对话框</dialog>

           显示对话框 :open

<address>地址</address>

<mark>文字高亮</mark>

<progress max="100" value="50"></progress>动态加载过程:进度条:不能修改样式

<meter max="100" value="90" style="width:300px;height:50px;"></meter>

               max="100"  最大显示值

               value="50"当前所占值

               进度条:不支持背景色修改

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

                            src="mp4/1.mp4" 资源路径

                            controls 显示控制器

                            autoplay 自动播放

                            loop  循环播放

<audiosrc="mp3/a.mp3" controls>音频标签</audio>

<main>页面主要内容,一个页面只能使用一次</main>

<embed src='...'/> 可以用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等等

5、表单类:

数字输入框:<input type="number"min="0" max="1" step="2" />

☆  step                                 增减基数

☆  autofocus                       自动获取焦点

☆  autocomplete=“off” 自动提示文字

☆  placehoder                    默认文字

☆  required                         必填

☆  title                                     提示错误 和正则相配合

☆  pattern                            正则

       颜色选择器:<input type="color" /> 

       日期选择器:<input type="date" />

       日期输入框:<input type="datetime" />

        email输入框:<input type="email" />

        拖拽条:<input type="range"value="1" max="100" />

        搜索框:<input type="search" />

        拨号键盘:<input type="tel" />

        选择周时间选择器:<input type="week" />

        选择月时间选择器:<input type="month" />

        提交网址:<inputtype="url" />

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值