HTML5--新增加标签

最新推荐文章于 2024-08-31 17:25:57 发布

supper_me

最新推荐文章于 2024-08-31 17:25:57 发布

阅读量779

点赞数

CC 4.0 BY-SA版权

分类专栏： java HTML5

本文链接：https://blog.youkuaiyun.com/supper_me/article/details/79401927

java 同时被 2 个专栏收录

39 篇文章

订阅专栏

HTML5

2 篇文章

订阅专栏

1.文档说明

<！Doctype html > 这样简小精悍了，可以记住。

2.新增加的标签

（1）结构标签 --div的具体标签

之前我们采用div+css划分页面，现在更加具体的标签出现了。

<header> <section> <aside><footer> 三部分区域的标签用来标记区域的分块，上中下。

<nav> 导航链接标签

<article> 用来标记一篇文章

<aside> 侧边栏标签

<hgroup> hr标签的分组，h1--h6

<figure> 标记一组媒体内容，以及他们的标题；标题用<figureCaption>。

如：<figure>

<p> UFO指的是外星人，以及外星人的飞船。</P>

<dd> UFO指的是外星人，以及外星人的飞船。</dd>

<dialog> 标签，定义一个对话框，如网页聊天，或者提问框。

如：

（2）多媒体交互标签

<video> 视频标签

<audio> 音频标签

<sourse>文件来源标签

<canvas> 图片标签，大家比较关心的标签，是在网页上绘图的标签

如常装的flash插件，提高用户的使用体验。

（3）web应用标签

<meter>状态标签，表示气压、温度等等

如：<meter min = "0" max = "10" value = "5" low = "3" high = "7" ></meter>

<progress> 状态栏标签，比如导入数据的进度条。

如：<progress max = "100" value = "0" id = "pro"></progress>

var pro = getelementByid("pro");

setInterval(function(

pro.value += 1;

),100)

</script>

常用的就是这两个。

<datalist> 是定义input的下拉列表，配合 option 使用

<datails> 是一个元素的详细标签，配合dd、dt标签（三角形的下拉菜单）

</details>

<menu>命令列表 <menuitem> 命令列表标签 <command> 命令按钮目前，这三个标签大多数浏览器不支持，前两个可用火狐浏览器。

<div>和<menu>和<menuitem>是鼠标右键div定义的字体，右键出来的菜单中选项按钮。menu是一个大的菜单，menuitem定义的是具体的每一个按钮。

如：

<div contextmenu = 'caidan'>右击我试试<div>
<menu id = "caidan" type = "context">

</menu>

（4）注释标签

用做做注释的标签：<ruby> <rp> <rt> 三个一起使用。

<ruby> 表示标记的注释，<rt> 注释的文本内容 , <rp> 告诉不能识别<ruby>标签的浏览器，如何显示注释

<ruby><rt>张</rt><rp>(</rp>zhang<rp>)</rp></ruby>

（5）其他标签

<mark> 标记定义有标记的文本（黄色选中状态）

<keygen> 标记定义表单里一个生成的键值

<output> 标记一个输出流

3、删除的html标签--3类

（1） css效果的标签：内容与效果分离，使用css显示效果就好了。

font、basefont、center、s、big、u、strike、tt

（2）不好用的标签： frame框架标签，因为搜说引擎无法确定框架里的时间，不好用

frame、frameset、frames

（3）不常用的标签：产生混淆的标签

acronym、applet、isindex、dir

4、重新定义的标签

（1） <b> <i> 表示粗体，斜杠不代表重要的意思 <strong> 表示重要性、不强调符号

（2） <dd> <dt> 在html4的时候，与<dl> 一起定义一个列表：<dt>列表题目，<dd>列表内容

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

在html5中，他们的作用放大了。

----与<details>一起使用，描述详细信息，<dt>列表题目，<dd>列表内容

----与<figure> 结构标签一起使用，标记一组媒体内容，描述一个事物：<dt>列表题目，<dd>列表内容。‘

----与<figure>结构标签一起使用，标记一组对话：<dt>一个会话（比如问），<dd>一个会话（比如答）。

（3）<hr> 表示主题结束，其实还是水平线的样式。华丽的分割线。

（4） <menu> 之前不是用。菜单，配合<command>\<menuitem>标签定义一个命令按钮。

（5）<small>标签，网页页脚的部分，公司的@.....或者法律的注释呀，常用。<big>标签不怎么用，删除了。

5.页面布局

（1）老的页面布局

（2）新的页面布局

举一个简单的例子：

<!doctype html>
<html>
<head>
<style>
*{border:1px solide red;height: 1px}
header{height:150px;background:#ABCDEF}
div{height: 700px; margin-top:10px}
section{height: 700px; width: 70%; background:#ABCDEF;float:left}
aside{height:700px;width: 28%; background:#ABCDEF;float:right}
footer{height:150px;background:#ABCDEF;clear:both;margin-top:10px}
nav{height:40px;background:#FF9900;margin-top:100px}
nav ul li {float:left;line-height:30px;height:30px;width:100px}
article{height:200px;width:280px;margin:0 auto;text-align:center;background:#FF9900}
figure{}
</style>
</head>
<body>

<header>
<p>这是一个头标签</p>
<nav>
<ul>
<li>网页</li>
<li>音乐</li>
<li>视频</li>
<li>图片</li>
<li>地图</li>
<li>知道</li>
</ul>
</nav>
</header>
<div>
<section>
<p>这是一个section标签</p>
<article>
<h2>春晓</h2><br/>
<p>
春眠不觉晓<br/>
处处蚊子咬<br/>
夜来风雨声<br/>
花落知多少<br>
</p>
</article>
<hr/>
<article>
<h2>纯棉</h2><br/>
<p>
春晓不觉眠<br/>
处处蚊子咬<br/>
夜来风雨声<br/>
花落知多少<br>
</p>
</article>
<hr/>
<figure>
<figcaption>UFO</figcaption>
<p>UFO是美军的高级飞行器，你知道吗？</p>
</figure>
<br/>
<figure>
<dt>UFO</dt><br>
<dd>UFO是美军的高级飞行器，你知道吗？</dd>
</figure>
<br>
<hr/>
<div contextmenu = 'caidan'>右击我试试<div>
<menu id = "caidan" type = "context">
<menuitem label = "菜单一" onclick = "alert('这是一个点击弹出事件')" icon = "https://www.baidu.com/img/bd_logo1.png"></menuitem>
</menu>
<hr/>
<ruby>张<rp>(</rp><rt>zhang</rt><rp>)</rp></ruby>
</section>
<aside>
<p>这是一个aside标签</p><br/>
<hgroup>
<h3>你轻轻的来</h3>
<h3>不带走一片云彩</h3>
<h3>生活就像是大海汪洋</h3>
<h3>总有奇迹发生</h3>
</hgroup>
</aside>
</div>
<footer>这是一个footer标签<br>
<small>法律条文</small>
<small>公司地址</small>
<small>联系我们</small>
<small>自己吓自己</small>
</footer>
</body>
</html>