HTML标签,简单归纳

169 阅读2分钟

列表标签

有序列表
:

<ol><li></li></ol>

无序列表:

<ul><li></li></ul> //属性:font-weight字体粗细

表格:

<table>

  
<thead><tr><td></td></tr></thead> //tr行 td列

  
<tbody><tr><td></td></tr></tbody>

</table>

HTML5新标签

1.<figure></figure> //来画类似于照片墙的标签

eg:<figure>

    
<img src=""/>

    
<figcaption>橘子</figcaption> //figcaption就是figure的标题

    
<p>这是一个橘子</p>

</figure>

2.<section></section> //新闻的展示,内容的展示

eg:<section>

    
<nav></nav>

    
<figure></figure>

    
<div></div>

  
</section>

<datalist></datalist> //当输入输入类似或相同的名字时会弹出类似或相同的名字选项

eg:<input type="text" list="searchList"/>

  
<datalist id="searchList">

    
<option value="10086">中国移动客服电话<option>

    
<option value="10010">中国联通客服电话<option>

    
<option value="10000">中国电信客服电话<option>

  
</datalist>

<details></details> //折叠样式标签

eg:<datails>

    
<summary>武汉突降暴雨</summary>

    今天武汉市突然下起暴雨,令出行市民措手不及!

  
</datails>

audio和video //音频和视频标签

  
controls 显示播放条

  
autoplay 自动播放

  
loop 单曲循环

  
preload 预加载

  
source可以替换src

eg:<audio loop autoplay controls muted preload>

    
<source src="tq.ogg" type="audio/ogg">

    
<source src="tq.mp3" type="audio/mpeg">

    
<source src="tq.wav" type="audio/wav">

  
</audio>

  
<video poster="../img/i.jpg" src="" loop autoplay controls muted preload > //poster点开视频首先显示的图片

  
</video>

<form></form>表单

eg:<form action-"" method="post"></form>

  
action 提交的路径

  
method 提交的方式,有两种post和get。关于post和get两种提交方式的区别,我已在之前的一篇随笔做过说明。

<a></a>超链接标签

eg:<a href="http://www.baidu.com"></a>

另外的用法:
<a href="#mao">你是谁?(点击则可以获取答案!)</a>

      
<div id="mao">

        答案:不知道,哈哈哈!

      
</div>

<em></em> <i></i> //都表示斜体

<sup></sup> //上标和下标

想要学习前端开发的同学,可以加群:
543627393学习哦!