前端基础小标签3 H5新标签
第二部分
H5的新标签
一、
<!-- mark标签
1.用于显示页面中需要重点关注的内容,就像看书需要用荧光笔划重点一样
2.浏览器通常会用黄色显示mark标注的内容
二、 -->
<article>
<header>
<h2>我们需要好好学习<mark>HTML5</mark>相关课程</h2>
</header>
<p>
<mark>HTML 5</mark>是下一代的HTML规范<br />
</p>
</article>
****疑问:article和section以及nav的区别?
<!--
article:代表一篇独立的文档内容,可以是一片文章或者一篇短文,通常由标题和内容组成
可以使用header定义文档的标题
可以使用footer定义文档的脚注
可以使用子article划分文档的多个段落
可以使用section对文档进行分块
section:对页面的内容进行分块,通常也可以由标题和内容组成
二者的区别: article侧重于文档 section侧重于分块
-->
三、
header标签与footer标签:
<!-- header通常用于代表标题,但是和h1到h6不一样,h1-h6仅代表标题,
而header代表头部分,header范围更广,header可以包含h1-h6,也可以包含p或者span或者nav等标签
一般header所代表的的标题内容更加丰富
-->
<!-- footer代表脚注部分,可以包含一些版权信息或者脚注部分,一般代表附加说明信息 -->
实例:
<body>
<header>
<img src="../img/logo.png" alt="尚学堂" />
<a href="#">返回首页</a>
<h1>浏览帖子内容</h1>
</header>
<!-- 帖子内容 -->
<article>
<h2>学习Android,必须先学习Java吗?</h2>
<p>Android上的应用程序只能用Java编写吗?可以用C++吗?</p>
<!-- 回复部分 -->
<section>
<h2>回复内容</h2>
<!-- 每个article代表一个回复 -->
<article>
<!-- 回复的标题 -->
<header>
<h3>还是得学习Java</h3>
<div>作者: xyr</div>
</header>
<p>虽然Android不一定要使用Java开发,还可以选择JavaScript开发或者NDK开发,但是Java毕竟是Android开发的主流语言</p>
</article>
<!-- 每个article代表一个回复 -->
<article>
<!-- 回复的标题 -->
<header>
<h3>Java是基础</h3>
<div>作者: xyr2</div>
</header>
<p>Java是基础,学好Java再去学习Android事半功倍</p>
</article>
</section>
<!-- 评价部分 -->
<section>
<h2>评价内容</h2>
<!-- 每个article代表一个评价 -->
<article>
<!-- 评价的标题 -->
<h3>讨论很好</h3>
<p>大家讨论的很深入</p>
</article>
<article>
<!-- 评价的标题 -->
<h3>赞</h3>
<p>不错,赞</p>
</article>
</section>
<!-- 帖子的"脚注" -->
<footer>
以上帖子和回复只代表个人观点,不代表尚学堂的观点和立场
</footer>
</article>
</body>
<!-- nav专门用于页面上的导航栏 如上方的主导航条,侧边导航栏,页面内部导航栏,页面底部导航栏
aside专门用于定义当前页面和当前文章的附属信息,通常推荐将aside元素渲染成侧边栏
将aside元素放在body的内部,表明为整个页面添加边栏
将aside元素防在其他元素内部,表明为父元素添加边栏
-->
前端基础小标签3 H5新标签的更多相关文章
- H5新标签(适合新手入门)
H5新标签 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTML5 sublime 输入 html:5 < ...
- H5新标签
1. H5新标签 语义标签: <article>定义文章</article><aside>定义文章侧边栏</aside> <figure>定 ...
- 前端面试基础-html篇之H5新特性
h5的新特性(目前个人所了解)如下 语义化标签 表单新特性 视频(video)和音频(audio) canvas画布 svg绘图 地理定位 为鼠标提供的拖放API webworker (重点)Stor ...
- 处理H5新标签方法
语义化 HTML5中加入了更加具有语义化的标签,比如header,nav,footer等,可以为搜索引擎优化,让爬虫能更好地理解网页结构. 但是对于新标签的兼容性不是很好,IE9以下旧版本不支持新的语 ...
- h5新标签介绍
html5新增了一些标签 这些标签都是语义标签,可以帮助我们更好的理解,代码中的意思:(都是双标签) 案例: 将语义标签翻译过来为 <div class="header"&g ...
- ie8以下不兼容h5新标签的解决方法
HTML5新添了一些语义化标签,他们能让代码语义化更直观易懂,有利于SEO优化.但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理. 解决思路就是用js创建h ...
- 前端基础之CSS的引入+HTML标签选择器+CSS操作属性
clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: ...
- 前端基础小标签5 H5的一些新标签属性
第二部分 部分图片和内容摘要于网络 二. formaction 属性规定当表单提交时处理输入控件的文件的 URL. formaction 属性覆盖 <form> 元素的 action 属性 ...
- H5 新标签用法及解释
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...
随机推荐
- iOS UI基础-9.1 UITableView 团购
概述 接下来,我们要做的是团购界面的设计,最张要实现的效果图及项目结构图 团购数据的展示 思路: 系统自带的tableCell不能展示三个文本,不能满足条件,自定义tableCell 每一个 ...
- Oracle SPA取报告阶段xml解析失败解决方案
SPA的整体测试过程可以参考: 记录一则完整的SPA(10g->11g)测试过程 故障描述:数据库字符集:US7ASCII,在SPA分析阶段正常,但在取报告阶段xml解析失败,具体现象如下: S ...
- Linux(Centos)服务器配置node项目
以阿里云服务器,CentOS系统为例 上一节已经提到怎么安装nodejs,以下是以vue项目为例 步骤: (1)首先安装vue脚手架@vue/cli, 官网参考 vue-cli3.x [root@lu ...
- html常用文本标签(转)
内容一<br />内容二 让文本强制换行 内容一内容二 <p>段落一</p><p>段落二</p> 段落标签 段落一 段落二 <b> ...
- Cassandra创建第一个用户
Cassandra配置文件cassandra.yaml 的配置项, 默认是 authenticator: AllowAllAuthenticator 现在想创建Cassandra的用户,但是如果保持以 ...
- Oracle数据库分区相干知识点
Partition Characteristics:1.Partition Key;2.Partitioning Strategies Partitioning Strategies:1. range ...
- efcore从数据库快速生成实体及context
有些项目开发时先建立数据库,再用codefirst来书写entity和EntityConfiguration,比较耗费功夫. 1.在vs2017中新建个asp.net core的web项目,或者其他项 ...
- 4.无监督学习--K-means聚类
K-means方法及其应用 1.K-means聚类算法简介: k-means算法以k为参数,把n个对象分成k个簇,使簇内具有较高的相似度,而簇间的相似度较低.主要处理过程包括: 1.随机选择k个点作为 ...
- win10安装mongodb-win32-x86_64-2008plus-ssl-3.4.10-signed
1.下载mongodb在windows下的安装文件 首先去官网https://www.mongodb.com/download-center?jmp=nav#community下载安装文件.mongo ...
- 20165305 苏振龙 《Java 程序设计》第一次测试总结
第一个代码运行结果截图 功能:从1到5305进行求和 第二个代码运行结果截图 代码托管 第三个代码运行结果截图 (1)源文件的名字为Person.java (2)生成2个字节码文件,名字为Person ...