四，细说 HTML5 之 新增的非主题结构元素

最新推荐文章于 2023-12-07 16:18:05 发布
最新推荐文章于 2023-12-07 16:18:05 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： HTML 文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenteryan/article/details/51189237
版权
前端 同时被 2 个专栏收录
27 篇文章 0 订阅
订阅专栏
HTML
10 篇文章 0 订阅
订阅专栏

这是一个HTML5系列，主要是零基础的宝宝们快速认识与学习HTML5.

非主题结构元素：header

定义和用法
header 元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面的一个内容区块的标题，但是也可以包括其他内容，例如数据表格、搜索表单或相关的Logo 图片。

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>

相关实例

代码分析：

<!-- start header -->
<header class="main-header"  style="background-image: url(http://static.ghostchina.com/image/6/d1/fcb3879e14429d75833a461572e64.jpg)"">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">

                <!-- start logo -->
                <a class="branding" href="http://www.ghostchina.com" title="Ghost 开源博客平台"><img src="http://static.ghostchina.com/image/b/46/4f5566c1f7bc28b3f7ac1fada8abe.png" alt="Ghost 开源博客平台"></a>
                <!-- end logo -->
                <h2 class="text-hide">Ghost 是一个简洁、强大的写作平台。你只须专注于用文字表达你的想法就好，其余的事情就让 Ghost 来帮你处理吧。</h2>

                <img src="http://static.ghostchina.com/image/6/d1/fcb3879e14429d75833a461572e64.jpg" alt="Ghost 博客系统" class="hide">
            </div>
        </div>
    </div>
</header>
<!-- end header -->

<!-- start navigation -->
<nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header">
                    <span class="nav-toggle-button collapsed" data-toggle="collapse" data-target="#main-menu">
                    <span class="sr-only">Toggle navigation</span>
                    <i class="fa fa-bars"></i>
                    </span>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
    <li class="nav-current" role="presentation"><a href="/">首页</a></li>
    <li  role="presentation"><a href="http://wenda.ghostchina.com">论坛</a></li>
    <li  role="presentation"><a href="/ghost-cheat-sheet/">快捷手册</a></li>
    <li  role="presentation"><a href="http://docs.ghostchina.com/zh/">中文文档</a></li>
    <li  role="presentation"><a href="/download/">下载</a></li>
    <li  role="presentation"><a href="/about/">关于</a></li>
</ul>
                </div>
            </div>
        </div>
    </div>
</nav>
<!-- end navigation -->

显示结果：

这里写图片描述

非主题结构元素：footer

footer 元素可以作为其上层父级内容区块是一个区块的脚注。
footer 元素通常包括其相关区块的，如作者、相关阅读链接及版权等。
文档中的页脚部分：

<footer>
  <p>Posted by: wenteryan</p>
  <p>Contact information: <a href="http://blog.csdn.net/wenteryan">wenteryan 的博客</a></p>
</footer>

相关实例

代码分析：

<footer class="main-footer">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="widget">
                        <h4 class="title">最新文章</h4>
                        <div class="content recent-post">
                                <div class="recent-single-post">
                                    <a href="/install-nodejs-of-latest-version-in-ubuntu-and-debian/" class="post-title">为 Ubuntu 和 Debian 安装最新版本的 Node.js</a>
                                    <div class="date">2016年3月23日</div>
                                </div>
                                <div class="recent-single-post">
                                    <a href="/ghost-0-7-4-released/" class="post-title">Ghost 0.7.4 正式发布</a>
                                    <div class="date">2015年12月29日</div>
                                </div>
                                <div class="recent-single-post">
                                    <a href="/ghost-0-7-0-released/" class="post-title">Ghost 0.7.0 正式发布</a>
                                    <div class="date">2015年9月7日</div>
                                </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="widget">
                        <h4 class="title">标签云</h4>
                        <div class="content tag-cloud">
                                <a href="/tag/about-ghost/">Ghost</a>
                                <a href="/tag/release/">新版本发布</a>
                                <a href="/tag/javascript/">JavaScript</a>
                                <a href="/tag/promise/">Promise</a>
                                <a href="/tag/zhuti/">主题</a>
                                <a href="/tag/nodejs/">Node.js</a>
                                <a href="/tag/mysql/">MySQL</a>
                                <a href="/tag/nginx/">Nginx</a>
                                <a href="/tag/aliyun-ecs/">阿里云服务器</a>
                                <a href="/tag/ubuntu/">Ubuntu</a>
                                <a href="/tag/ghost-in-depth/">深度玩转 Ghost</a>
                                <a href="/tag/theme/">Theme</a>
                                <a href="/tag/markdown/">Markdown</a>
                                <a href="/tag/proxy/">反向代理</a>
                                <a href="/tag/apache/">Apache</a>

                            <a href="/tag-cloud/">...</a>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="widget">
                        <h4 class="title">合作伙伴</h4>
                        <div class="content tag-cloud friend-links">
                            <a href="http://www.bootcss.com" title="Bootstrap中文网" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'bootcsscom'])" target="_blank">Bootstrap中文网</a>
                            <a href="http://www.bootcdn.cn" title="开放CDN服务" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'bootcdncn'])" target="_blank">开放CDN服务</a>
                            <a href="http://www.gruntjs.net" title="Grunt中文网" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'gruntjsnet'])" target="_blank">Grunt中文网</a>
                            <a href="http://www.gulpjs.com.cn/" title="Gulp中文网" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'gulpjscomcn'])" target="_blank">Gulp中文网</a>
                            <hr>
                            <a href="http://lodashjs.com/" title="Lodash中文文档" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'lodashjscom'])" target="_blank">Lodash中文文档</a>
                            <a href="http://www.jquery123.com/" title="jQuery中文文档" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'jquery123com'])" target="_blank">jQuery中文文档</a>
                            <hr>
                            <a href="http://www.aliyun.com/" title="阿里云" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'aliyun'])" target="_blank">阿里云</a>
                            <hr>
                            <a href="https://www.upyun.com/" title="又拍云" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'upyun'])" target="_blank">又拍云</a>
                            <a href="http://www.ucloud.cn/" title="UCloud" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'ucloud'])" target="_blank">UCloud</a>
                            <a href="http://www.qiniu.com/" title="七牛云存储" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'qiniu'])" target="_blank">七牛云存储</a>
                        </div>
                </div></div>
            </div>
        </div>
    </footer>

    <div class="copyright">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <span>Copyright &copy; <a href="http://www.ghostchina.com/">Ghost中文网</a></span> | 
                    <span><a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备11008151号</a></span> | 
                    <span>京公网安备11010802014853</span>
                </div>
            </div>
        </div>
    </div>

显示结果：

这里写图片描述

非主题结构元素：address

定义和用法
<address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

提示：
<address> 标签不应该用于描述通讯地址，除非它是联系信息的一部分。
<address> 元素通常连同其他信息被包含在 <footer> 元素中。

代码分析：

<address>
wenteryan ：  <a href="http://blog.csdn.net/wenteryan">wenteryan 的博客</a><br> 
一，细说 HTML5 之 HTML5 基础讲解<br>
二，细说 HTML5 之 HTML5 基础讲解 2<br>
三，细说 HTML5 之 新增的主题结构元素<br>
</address>

显示结果：

这里写图片描述

网页排编示例

网页排编是对新增的结构元素的一个实例。针对零基础的一个整体布局。

代码分析：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页排编示例</title>
</head>
<body>
  <header>
    <h1>网页标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">帮助</a></li>
      </ul>
    </nav>
  </header>
  <article>
    <hgroup>
      <h1>文章主标题</h1>
      <h1>文章子标题</h1>
    </hgroup>
    <p>文章正文</p>
    <section>
      <div>
        <article>
          <h1>评论标题</h1>
          <p>评论正文</p>
        </article>
      </div>
    </section>
  </article>
  <footer>
    <small>版权所有。。。</small>
  </footer>
</body>
</html>

显示结果：

这里写图片描述

wenteryan
关注
专栏目录
细说HTML5高级API PDF 下载
01-05
Cordova诞生的目的，是为了快速构建跨平台的移动APP，在市场开发需求增加和要求开发效率提高的情况下，我们不得不选择基于HTML5的开发技术，而Cordova是基于HTML5的，支持所有市面上的移动端设备，本书的主要特点...
新闻自动化处理
大胡子的博客
01-03 691
新闻自动化处理 假设场景：给你一个URL（about新闻），希望你完成以下几个步骤 新闻页面抓取：by beautifulsoup 人物、地点识别：中文切词jieba库，英文切词NLTK库 文本清洗（一个页面包含很多无效信息）：by 正则化表达式 关键词、关键句（摘要）提取：by textrank 词云可视化：by WordCloud 以上是本次项目中涉及的任务 & 技术 import requests from bs4 import BeautifulSoup import jie
页面埋点 pv(百度统计)
qq_45156302的博客
09-09 1328
一.如何部署百度统计JS代码 在项目头部插入以上由百度统计提供的代码: 二.相关API trackPageView(用于发送某个指定URL的PV统计) 使用方法1 在生成页面或切换页面是，在JS中调用以下代码: _hmt.push([’_trackPageview’, pageURL]); pageURL: 指定要统计PV的页面的URL. 此项必选, 必须是以’/‘开头的相对路径 使用方法2 如果页面的url比较乱, 希望在统计报告中可以按照某种规则进行
百度统计工具html,百度统计事件跟踪的使用方法
weixin_32820457的博客
06-08 837
内部文档，管理员莫推荐^_^资料方法引入百度统计的js后，会在全局(window)下 暴露_hmt的方法：事件跟踪最核心的方法就是_hmt.push:_hmt.push(['_trackEvent', category, action, opt_label, opt_value]);1. '_trackEvent': 固定参数，表明统计类型是时间跟踪。1. category：要监控的目标的类型名称...
单页应用添加百度统计
韩爽的博客
07-30 3812
1. 添加统计代码 const baiduTongji = () =&gt; { window._hmt = window._hmt || []; let sc; (function () { if ((sc = document.getElementById('baidu'))) { document.head.removeCh...
百度统计js-api
一朵翔云的博客
06-02 6018
百度统计js-api 1._trackPageView 2._trackEvent 3._setCustomVar 4._setAccount 5._setAutoPageview 1._trackPageView 用于发送某个指定URL的PV统计请求，通常用于AJAX页面的PV统计 使用方法：_hmt.push(['_trackPageview', pageURL]); ...
细说HTML(HTML+HTML5）
06-14
本课程包含15章72个小节课程，内容涵盖：开发环境搭建、HTML概述、HTML元数据、标记文字、组织内容、文档划分、表格、表单、表单输入、其他表单元素、嵌入内容、图形绘制Canvas、多媒体、Web存储、拖放效果等。
Git由浅入深之细说变基(rebase)
02-01
rebase，有垫底，基底的意思，Gitrebase我们称它为Git变基，即在当前分支外另一点上重新应用当前分支的提交历史，变基是Git整合变更的一种方式，另一种方式是什么呢（当然是合并了）？变基的基础使用已经在上一篇中...
html5+css3 弹出遮罩层
09-22
这是一款使用html5 svg和css3制作的全屏遮罩导航菜单，这些遮罩层没有固定的大小但是它们全屏覆盖整个屏幕，可以说大小是以你的浏览器为准。默认是绿色背景，你完全可以换成其它颜色，这个不用我细说了吧。 请在现代...
vuepress-----23、百度分析
最新发布
weixin_44235759的博客
12-07 327
经过查阅和调试之后，发现是 v-if 的问题，也就是在 PageInfo 和 Footer 组件中，如果你用了 v-if 去控制浏览量的显隐，因为在服务端是不会渲染的，而到了浏览器就报错了。然后我们回到刚开通数据导出服务的那个页面，点击api调试工具，来到调试界面，选择百度账号之后，填入自己的 access_token，选择获取报告数据，网站概况(趋势数据)，最后再填入参数就OK啦。来统计浏览量的，首先要注册账号，如果有了也可以直接登陆。虽然走了不少弯路，还修改了主题的源码，好在最终想要的效果也实现了。
使用百度统计工具对php网站进行事件埋点追踪
Kosmoo的博客
12-08 1万+
使用百度统计工具对php网站进行事件埋点追踪1.背景 在用户浏览我们的网页时，我们都希望知道用户从哪个途径找到并浏览我们的网站，然后在网站上都做了些什么。如果有了这些信息，我们就可以改善用户在网站上的体验，提高用户留存率和转化率。 百度统计是百度推出的一款免费的专业网站流量分析工具，通过在网页上埋入一些百度统计工具提供的监测的代码，就能获取到这些数据，然后进行分析。 生成的报告如下： 2. 环境 系
立即(自)执行函数 定义全局变量 var _hmt = _hmt || [] 百度统计代码引发的思考
热门推荐
huch的博客
05-26 1万+
相信大家对下面的这段代码肯定不陌生，前端同学可能都写过或者在扒别人网站时都见过： var _hmt = _hmt || []; (function() { var hm = document.createElement(&amp;amp;quot;script&amp;amp;quot;); hm.src = &amp;amp;quot;//hm.baidu.com/hm.js?xxxxxxxxxxxxx&amp;amp;quot;; var s = docum
vue单页应用项目加入百度统计代码
qq_38355456的博客
08-28 1万+
在网上各种找不到vue项目加入百度统计的代码与实现： 自己探索出了一套加入百度统计的办法，首先要明确一点，因为vue是单页应用，所以直接加百度统计代码到index.html的header里面是并没有什么用的，页面只加载一次。 首先来看一下百度统计的官方API，_trackPageview 用于发送某个指定URL的PV统计请求，通常用于AJAX页面的PV统计。
百度统计事件跟踪的使用方法
weixin_33961829的博客
03-06 581
内部文档，管理员莫推荐^_^ 资料 百度统计 方法 引入百度统计的js后，会在全局（window）下 暴露_hmt的方法： 事件跟踪最核心的方法就是_hmt.push: _hmt.push(['_trackEvent', category, action, opt_label, opt_value]); 1...
vue使用百度统计埋点
Lval的博客
12-09 5043
统计代码安装 //main.js 声明_hmt对象 var _hmt = _hmt || []; window._hmt = _hmt; // 必须把_hmt挂载到window下，否则找不到 //统计代码获取 (function() { var hm = document.createElement("script"); hm.src ="https://hm.baidu.com/hm.js?百度统计所申请的appKey"; var s = document.ge
前端工程师做事的三重境界：我的进阶之路
weixin_33697898的博客
05-02 131
共 2835 字，读完需 5 分钟。写作本文的目的：构建自己关于前端工程师成长过程的认知模型，从自己的视角来分析 Programmer、Developer、Enginner 的能力结构与工程师成长过程的关联，并分享出来给大家，期望能对入门的前端同学有所借鉴和启发。需要提前说明的是，文中用到的工程师的不同叫法并不是要给工程师分类或者贴标...
单页面应用里同时埋放多段百度统计的访问分析代码——实战
weixin_33881753的博客
08-07 477
背景 单页面应用使用百度统计需要使用_trackPageview和_setAutoPageview API用来统计每个页面的访问, 应用里如果同时埋放多段百度统计的访问分析代码又需要使用_setAccount API。但是如果单页面应用里又同时埋放多段百度统计的访问分析代码该如何处理呢？ How Step1 引入方式 直接呈上代码，注意事...
关于这一次h5踩到的坑
weixin_34361881的博客
11-15 186
场景1：返回弹窗 需求：页面返回的时候弹窗确认是否返回，确认返回，取消留在当前页面 // 点击返回的时候，路由拦截，并将单前页面的路由保留下来 beforeRouteLeave(to, from, next) { let self = this; if (to.name === "SeckillDetail" && self.countDown != "00:0...
HTML5新增主题结构
wang362011532的博客
07-19 772
article元素
其中创建第四步细说
05-28
第四步是在layout文件中使用Data Binding来绑定数据。下面是具体步骤： 1. 在layout文件的根布局中添加`<layout>`标签，使其变成Data Binding布局。 ``` android:layout_width="match_parent" android:layout...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值