HTML5自学笔记[ 1 ]新增标签

新增语义化标签

<header></header>：用于页面或板块头部。
<footer></footer>：用于页面底部。
<nav></nav>：导航。
<hgroup></hgroup>：标题组合。
<section></section>：一个板块或区块，用来划分区域。
<article></article>：一般用来呈现论坛的一篇帖子。
<aside></aside>：和主题相关的附属信息，如侧边栏、广告等。
<figure></figure>：包含图片或视频等媒体元素。
<figcaption></figcaption>：包含图片或视频等媒体元素的说明文字，该标签包含在<figure>标签。
<time></time>：包含时间。

新增功能标签

<datalist></datalist>：表单文本输入框的提示列表；在<input>标签中用list属性和该标签的id关联；每个可选项用<option>标签包围，每个选项的值存在对应<option>标签的value属性中。
<details></details>：详情信息；包含<summary>标签配合使用；详细信息默认收缩，设置open属性为true展开。
<dialog></dialog>：对话；内部包含<dt>和<dd>；展开收缩由open属性控制。
<address></address>：定义作者的地址或详细信息。
<mark></mark>：标记；被标记文本高亮。
<keygen></keygen>：公钥；后端使用。
<progess></progress>：进度条；最大值max，最小值min，当前值value；内部包含<span>50</span>%标签，是为了向下兼容。

时间： 2024-12-07 17:48:07

HTML5自学笔记[ 1 ]新增标签的相关文章

HTML5自学笔记[ 2 ]新增表单控件和表单属性

新增<input>属性type="email",自动验证,若输入不为邮箱,则不能提交. 新增<input>属性type="tel",在移动端切换到数字键盘,其他无变化. 新增<input>属性type="url",自动验证,若输入不为url,则不能提交. 新增<input>属性type="search",输入框内显示删除文本按钮,其他无变化. 新增<input>属性t

Html5学习笔记1 元素标签属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<

html5学习笔记——html保留标签（三）

列表和表格这次也是复习. 列表: 列表分为无序列表.有序列表.标题列表很简单,看代码 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 列表 <br/> 无序列表 <ul>a</ul> <ul>b</ul> &l

html5学习笔记——html保留标签（一）

html5保留了之前很多基本标签,来,我们复习一下. <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>师然的博客--h5保留的常用

用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>购物车拖拽</title> 6 7 <style> 8 *{ margin:0; padding:0;} 9 #proList{ overflow:hidden;} 10 #pro

HTML5自学笔记[ 6 ]data自定义数据

在标签中添加data-name属性并赋值,在js脚本中用ele.dataset.name就可以获取该属性的值.如: <div id="box" data-age="20">年龄</div> <script> var oDiv = document.getElementById('box'); alert(oDiv.dataset.age); //20 </script> 如果name是用-连接的两个及以上单词来命名,那

HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>马赛克</title> 6 <style> 7 body{background:#000;} 8 canvas{background: #fff; margin-left:500px;} 9 </style> 10

HTML5自学笔记[20 ]canvas绘图实例之绘制倒影

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>倒影</title> 6 <style> 7 body{background:#000;} 8 canvas{background: #fff; margin-left:500px;} 9 </style> 10

HTML5自学笔记[ 8 ]历史管理

触发历史管理的三种方法: 跳转页面改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <title>随机产生彩票号码</title> 5 <meta charset="utf-8"/> 6 <script> 7 window.onload = func