02_HTML5+CSS详解第一天
视频来源:麦子学院 讲师:朱朝兵
- HTML5概念:HTML即超文本标记语言(HyperText Makeup Language),是一种语法简单,结构清晰的解释型文档,不同于其他编程语言。
- HTML5新增的网页结构
header元素表示页面中的一个内容区块或者整个页面的标题
nav元素表示页面中导航链接部分
article元素表示页面中一块与上下文不相关的独立内容,比如一篇文章中的文章?【表示理解无能】
section元素表示页面中的一块内容区块,比如章节的页眉页脚,也可以和Hn等一起使用,标示出文档的结构,不带标题的内容区块不建议使用section
aside元素表示article元素的内容之外的,和内容相关的辅助信息
footer元素表示页面或者页面中一块区域的页脚,比如文章创建时间,作者,联系方式等等- article元素的使用方法
<article>
<header>
<h1>article元素的使用方法</h1>
<p>创建时间:<time pubdate >2017/11/27</time></p>
<!-- 使用pubdate属性,表示这个时间是当前内容的发布日期(比如<time>所在的<article>) -->
</header>
<p><b>Article</b>是一个独立的区域</p>
<section>
<h2>读者评论</h2>
<article>
<header>
<h3>读者:Yolo</h3>
<p><time pubdate datetime="2017-11-27 18:39">两小时前</time></p>
</header>
<p>很精彩的文章!</p>
</article>
</section>
<footer>
<p><small>版权所有</small></p>
</footer>
</article> - section元素的使用方法
<article>
<h1>产品</h1>
<p>产品列表</p>
<section>
<h2>产品A</h2>
<p>产品A的介绍</p>
</section>
<section>
<h2>产品B</h2>
<p>产品B的介绍</p>
</section>
</article>*当一段内容比较独立时使用article,当想把独立内容划分为几段时用section
- aside元素的使用方法
使用方法一、作为主要内容的附属信息部分
<header>
<h1>国庆节去成都看熊猫</h1>
</header>
<article>
<h2>大熊猫基地</h2>
<p>大熊猫基地有很多大熊猫</p>
<aside>
<h3>名词解释:</h3>
<dl>
<dt>大熊猫</dt>
<dd>大熊猫是国家一级保护动物</dd>
<dt>大熊猫基地</dt>
<dd>大熊猫基地在四川卧龙</dd>
</dl>
</aside>
</article> 使用方法二、作为全局页面站点的附属信息
<aside>
<h1>网站公告:</h1>
<p>国庆节放假通知</p>
<p>中秋节放假通知</p>
</aside> - nav元素的使用方法
1、传统的导航条
2、侧边栏导航
3、内页导航
4、翻页操作 - time元素及pubdate属性
<p>发布时间:<time datetime="2017-11-27" pubdate>2017年11月27日</time></p>
*用来给机器识别的,便于搜索引擎,爬虫解析
- header元素
<style type="text/css">
*{margin: 0;padding: 0}
body{font-family: '微软雅黑';text-align: center;}
a{
color: #f60;
text-decoration: none;
}
nav{
height: 48px;
background: #f60;
}
nav li{
background: #000;
float: left;
border-radius: 5px;
list-style: none;
padding: 5px 10px;
margin:10px;
}
</style>
<header>
<hgroup>
<h1>HTML5视频教程</h1>
<a href="">手机版</a>
<a href="">论坛</a>
</hgroup>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="">手机版</a></li>
<li><a href="">论坛</a></li>
</ul>
</nav>
</header> hgroup是将标题和它的子标题进行分组的元素,hgroup元素一般会把h1-h6元素进行分组。比如在一个内容区块的标题和它的子标题是一组。通常情况下,文章只有一个主标题时,是不需要hgroup元素的
<article>
<header>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>发布时间:<time datetime="2017-11-27">2017年11月27日</time></p>
</header>
<p>文章正文</p>
</article>footer元素
<style type="text/css">
*{margin: 0;padding: 0;}
body{
font-family: '微软雅黑';
text-align: center;
}
a{
text-decoration: none;
color: #555;
}
</style> <div class="footer">
<p>
<a href="">版权信息</a> |
<a href="">关于我们</a> |
<a href="">联系我们</a> |
<a href="">站点地图</a> |
</p>
<p>麦子学院版权所有</p>
</div>*也可以为article元素或者section元素添加footer元素,注脚
address元素用来在页面中呈现联系信息,包括文档的作者,邮箱、地址、电话信息等,也可以用来展示和文章相关的联系人的所有联系信息
<article>
<header>
<h1>HTML5与CSS视频教程</h1>
</header>
<p>这里是文章正文部分</p>
<footer>
<address>
<a href="" title="朱朝兵">朱朝兵</a>
<a href="" title="麦子学院">麦子 学院</a>
</address>
<p>时间:<time datetime="2017-11-27">2017年11月27日</time></p>
</footer>
</article>figure元素是一种元素的组合,带有可选标题。figure元素用来表示页面上一块独立的内容。如果删除不影响网页内容。
figcaption元素表示figure元素的标题,它属于figure元素。figcaption元素必须书写在figure元素内部。一个figure元素只允许放置一个figcaption元素。<figure>
<img src="data:images/0.jpg" title="pic0">
<img src="data:images/1.jpg" title="pic1">
<img src="data:images/2.jpg" title="pic2">
<figcaption>可爱的小动物</figcaption>
</figure>details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性,true子元素展开,默认false子元素收缩。
summary元素从属于details元素。(目前只有谷歌的chrome浏览器支持!)<details>
<summary>HTML5+CSS视频教程</summary>
<p>该视频来源于麦子学院</p>
</details>mark元素表示页面中需要突出或高亮显示的内容。通常在引用原文时使用mark元素,目的是引起读者注意。比如搜索关键词时对搜索结果中的关键词高亮显示。
<h2>以下是关于<mark>HTML5</mark>的搜索结果</h2>
<section>
<article>
<h2><a href=""><mark>HTML5</mark>百度百科</a></h2>
<p>正文</p>
</article>
<article>
<h2><a href=""><mark>HTML5</mark>中国:中国最大的HTML5中文门户</a></h2>
<p>正文</p>
</article>
</section>progress元素代表一个任务的完成进度。value属性表示已完成了多少工作量,max属性表示共有多少工作量。value和max属性只能指定为有效的浮点数,必须大于0.
<p>
当前任务完成进度
<progress value="79" max="100"></progress>
</p>meter元素表示规定范围内的元素值。value属性表示实际值,默认为0;min表示最小值;max最大值;low规定范围的下限值;high规定范围的上限值;optimum最佳属性值,必须在min和max之间,可以大于high
<p>
硬盘实际使用情况
<meter value="90" min="0" max="100" low="50" high="80" optimum="90" ></meter>
</p>
- article元素的使用方法
HTML5废除的元素
big……
不再使用frame框架,对于frameset,frame,noframes元素,由于frame框架对页面可用性存在负面影响,html5已经不支持frame框架,只支持iframe框架
废除rb元素,使用ruby代替
02_HTML5+CSS详解第一天的更多相关文章
- 02_HTML5+CSS详解第四天
依旧是CSS部分贴个CSS主要知识点总结的链接:http://blog.csdn.net/html5_/article/details/26098273 [自己的笔记做得好乱,以前一直以为是字丑的原因 ...
- 02_HTML5+CSS详解第三天
WebStorage简单的网页留言板用到的函数有3个1.saveStorage函数使用"new Date().getTime()"语句来获取当前的日期和时间戳,然后使用localS ...
- 02_HTML5+CSS详解第二天
html5大纲分析工具:https://gsnedders.html5.org/outliner/ <section> <h1>HTML部分</h1> <se ...
- CSS详解
Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...
- 前端技术之_CSS详解第一天
前端技术之_CSS详解第一天 一html部分 略.... 二.列表 列表有3种 2.1 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unorde ...
- jquery的css详解(二)
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
- IIS负载均衡-Application Request Route详解第一篇: ARR介绍(转载)
IIS负载均衡-Application Request Route详解第一篇: ARR介绍 说到负载均衡,相信大家已经不再陌生了,本系列主要介绍在IIS中可以采用的负载均衡的软件:微软的Applica ...
- PE文件格式详解,第一讲,DOS头文件格式
PE文件格式详解,第一讲,DOS头文件格式 今天讲解PE文件格式的DOS头文件格式 首先我们要理解,什么是文件格式,我们常说的EXE可执行程序,就是一个文件格式,那么我们要了解它里面到底存了什么内容 ...
- DIV+CSS详解
DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...
随机推荐
- 【读书笔记】【深入理解ES6】#13-用模块封装代码
什么是模块 模块是自动运行在严格模式下并且没有办法退出运行的 JavaScript 代码. 在模块顶部创建的变量不会自动被添加到全局变量作用域,这个变量仅在模块的顶级作用域中存在,而且模块必须导出一些 ...
- flask动态url规则
动态URL规则 URL规则可以添加变量部分,也就是件更符合同规则的URL抽象成一个URL模式. @app.route('/item/<id>') def item(id): return ...
- C#学习笔记-装饰模式
题目:给顾客打扮,但是需要满足正常的穿衣风格,例如先穿了衬衣再打领带,最后在穿鞋子,这种基本要求. 分析: 现在将具体的衣服裤子和鞋子都分别写在不同的类里面,这样方便以后添加新的衣服,这些全部都属于服 ...
- 超市买苹果.py
# 定义苹果数量 price = 5 # 挑选苹果 weight = 4 # 计算金额 money = price * weight money -= 5 # 三个变量 print(type(1.5) ...
- 我们编写 React 组件的最佳实践
刚接触 React 的时候,在一个又一个的教程上面看到很多种编写组件的方法,尽管那时候 React 框架已经相当成熟,但是并没有一个固定的规则去规范我们去写代码. 在过去的一年里,我们在不断的完善我们 ...
- CTF---安全杂项入门第一题 丘比龙的最爱
丘比龙的最爱分值:10 来源: 2014HCTF 难度:易 参与人数:4498人 Get Flag:1366人 答题人数:1384人 解题通过率:99% 传说,丘比龙是丘比特的弟弟,丘比龙是一只小爱神 ...
- bzoj:2018 [Usaco2009 Nov]农场技艺大赛
Description Input 第1行:10个空格分开的整数: N, a, b, c, d, e, f, g, h, M Output 第1行:满足总重量最轻,且用度之和最大的N头奶牛的总体重模M ...
- BZOJ2565: 最长双回文串(回文树)
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2565 记录一下每个点往前最长延伸位置,正反两遍,枚举分割点. #include<cstr ...
- dp水一天
水一些dp的联系题 标签: dp ###hdu_2045 题意 一穿珠子,用三种颜色染色,要求相邻的珠子和两端的珠子不能是同一种颜色,求当有n个珠子的时候有几种染色方案 题解 表示dp[i][j][k ...
- c语言中标识符的作用域
1.代码块作用域(block scope) 位于一对花括号之间的所有语句称为一个代码块,在代码块的开始位置声明的标识符具有代码块作用域,表示它们可以被这个代码中的所有语句访问.函数定义的形式参数在函数 ...