认识Html5

东方醒狮 發表於 2020-2-27 10:17:00

1 认识HTML5（2）
教学难点：理解语义标签
教学重点：熟练使用常见文档结构标签
教学时间：2学时
教学内容：
<ol>
<li>认识HTML文档结构</li>
</ol>
HTML5简化了HTML文档结构的复杂性，让HTML的文档结构更加简洁。
 
HTML4文档结构：
<div class="cnblogs_code">
<pre> 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2
 3 "http://www.w3.org/TR/html4/strict.dtd">
 4
 5 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 6
 7 <head>
 8
 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10
11 <title>文档标题</title>
12
13 </head>
14
15 <body>
16
17 内容。。。。
18
19 </body>
20
21 </html></pre>
</div>
 
HTML5文档结构：
<div class="cnblogs_code">
<pre> 1 <!DOCTYPE html>
 2
 3 <html>
 4
 5 <head>
 6
 7 <meta charset="UTF-8">
 8
 9 <title>文档标题</title>
10
11 </head>
12
13 <body>
14
15 文档内容......
16
17 </body>
18
19 </html></pre>
</div>
 
1.1. 文档声明
（1）.内容类型
扩展名认为.html或.htm,内容类型仍为text/html
（2）.文档类型声明
<!DOCTYPE HTML>
（3）.字符编码
<div class="cnblogs_code">
<pre><meta http-equiv="Content-Type" content="text/html; charset=utf-8">从HTML5开始，对于文件的字符编码推荐使用utf-8</pre>
</div>
1.2. 采用文档结构元素优化
 
 
<ol>
<li>HTML5语义标签</li>
</ol>
2.1. 新标签
HTML中最核心的部分就是标签，在新一代HTML5中新增的很多新的标签，并且这些标签都附有语义。
2.2. 语义标签
语义= 意义。
语义标签 = 标签的意义。
 
标签名就代表了标签中内容的意思。<table>表格<form>表单
 
具有语义的标签能够让你更恰当地描述你的内容是什么，简单的理解：看到标签名，就知道这个标签所想表达的意义。一栋楼？语义：医院、学校一个div？<header>、<main>、<footer>。
语义元素能够清楚的描述其意义给浏览器、开发者、搜索引擎；
 
例如：
HTML4   成都市高新区
HTML5 <address>成都市高新区</address>
 
HTML4   <div>我是头部</div>
HTML5   <header>我是头部</header>
 
无语义元素实例: <div>、无需考虑内容.
有语义元素实例: <form>、<table>、<img>清楚的定义了它的内容.
2.3. HTML5语法
1、标签不区分大小写
HTML5采用宽松的语法格式，标签可以不区分大小写，这是HTML5语法变化的重要体现。例如：
这里的p标签大小写不一致
在上面的代码中，虽然p标记的开始标记与结束标记大小写并不匹配，但是在HTML5语法中是完全合法的。
2、允许属性值不使用引号
在HTML5语法中，属性值不放在引号中也是正确的。例如：
<div class="cnblogs_code">
<pre><input checked=a type=checkbox/>

<input readonly=readonly type=text /></pre>
</div>
 
以上代码都是完全符合HTML5规范的，等价于
<div class="cnblogs_code">
<pre><input checked="a" type="checkbox"/>

<input readonly="readonly" type="text" /></pre>
</div>
 
3、允许部分属性值的属性省略
在HTML5中，部分标志性属性的属性值可以省略。例如：
<div class="cnblogs_code">
<pre><input checked="checked" type="checkbox"/>

<input readonly="readonly" type="text" /></pre>
</div>
 
可以省略为：
<div class="cnblogs_code">
<pre><input checked type="checkbox"/>

<input readonly type="text" /></pre>
</div>
 
从上述代码可以看出，checked="checked"可以省略为checked，而readonly="readonly"可以省略为readonly。
在HTML5中，可以省略属性值的属性如下表所示。
 
<ol>
<li>HTML5全局属性</li>
</ol>
在HTML5中新增了全局属性，是指可以对任何元素都使用的属性。
1、contenteEditable属性
该属性的主要功能是允许用户在线编辑元素中的内容，是一个布尔值属性，可以被指定为true或false。此外，该属性还有一个隐藏的继承状态，属性值为true时，元素被指定为允许编辑；属性值为false时，元素被指定为不允许编辑。未指定true或false时，则由inherit状态来决定，如果父元素是可编辑的，则该元素就是可编辑的。
示例：让列表可编辑。
 
代码如下：
<div class="cnblogs_code">
<pre><h2>可编辑列表</h2>

<olcontentEditable="true">

<li>网页设计</li>

<li>HTML5</li>

<li>正在学习中。。。。。</li>

</ol></pre>
</div>
 
注意：在编辑完元素中的内容后，如果要保存这些内容，只能把该元素的innerHTML发送到服务器端进行保存，目前没有特别的API来保存编辑后元素中的内容。
2、designMode属性
该属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上述属性的元、素都变成了可编辑状态。该属性只能在JavaScript脚本里被编辑修改，有两个值on与off。
3、hidden属性
在HTML5中，所有的元素都允许使用一个Hidde属性，其功能是通知浏览器不渲染该元素，使元素处于不可见状态。但元素内容还是浏览器创建的，页面加载以后可以使用JavaScript脚本取消该属性，让元素可将。
<ol>
<li>文档结构元素</li>
</ol>
4.1. HTML5元素分类
 
HTML5新增了27个元素，废弃了16个元素，按优先等级定义为结构性元素、级块性元素、行内语义性元素和交互性元素4大类。
（1）结构性元素
主要负责Web的上下文结构的定义，确保HTML文档的完整性。
section：在Web页面中，用于区域的章节描述。
header：页面主体上的头部，head中的内容往往不可见，而header元素往往在一对body元素之中。
footer：页面的底部，通常会在这里标出网站的一些相关信息。
nav：专门用于菜单导航、链接导航的元素。
article：用于表示一篇文章的主体内容。
（2）级块性元素
用于Web页面区域的划分，确保内容的有效分隔。
aside：用于表达摘要、插入的引用等作为补充主体的内容，从一个单页面表示看，就是侧边栏，可以在左边，也可以在右边。从一个页面的布局看，就是摘要。
figure：是对多个元素进行组合并展示的元素。
code：表示一段代码块
dialog：用于表达人与人之间的对话。还包括dt和dd这两个组合元素，通常同时使用，dt表示说话者，dd表示说话者的内容。
（3）行内语义元素
主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础。
meter'：表示特定范围内的数值，可用于工资、数量、百分比等。
time：表示时间值
progress：表示进度条。
video：表示视频元素
audio：音频元素
（4）交互性元素
主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
details：用于表示一段具体的内容
datagrid：用于控制客户端数据与显示，可以由动态脚本及时更新。
menu：主要用于交互菜单
command：用于处理命令按钮。
4.2. 构建主体内容元素
在HTML5中，为了使文档的结构更加清晰明确，追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。
（1）article元素
   article元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。除了内容部分，一个article元素通常有它自己的标题，一般放在一个header元素里面，有时还有自己的脚注。当article元素嵌套使用的时候，内部的article元素内容必须与外部article元素内容相关。article元素支持HTML5全局属性。
示例1：演示使用article元素设计网络新闻展示。
<div class="cnblogs_code">
<pre><body>

<article>

<header>

<h1>谷歌董事长施密特；每天把手机电脑关一小时</h1>

<time pubdate=”pubdate">2012年05月21号</time>

</header>

<p>新浪科技讯北京时间5月21日早间消息，谷歌(微博)执行董事长埃里克.施密特周日在波士顿大学发表演讲时表示，大学生应当将眼光从智能手机和电脑屏幕上移开

</p>

<footer>

<p>http://www.sina.com.cn</p>

</footer>

</article>

</body></pre>
</div>
（2）pubdate添加发布日期
pubdate是一个可选的布尔值属性，可用在article元素的time元素上，意思是time元素代表了文章或整个网页的发布日期。
<div class="cnblogs_code">
<pre><body>

<article>

<header>

<h1>谷歌董事长施密特；每天把手机电脑关一小时</h1>

<p>发布日期<time datetime="2012-5-22" pubdate>2012年5月22日</time></p>

<p>关于<time datetime=2012-5-23>5月23日</time>更正通知</p>

</header>

<p>新浪科技讯北京时间5月21日早间消息，谷歌(微博)执行董事长埃里克.施密特周日在波士顿大学发表演讲时表示，大学生应当将眼光从智能手机和电脑屏幕上移开

</p>

<footer>

<p>http://www.sina.com.cn</p>

</footer>

</article>

</body></pre>
</div>
 
 
注意：有两个time元素，分别定义了两个日期：更正日期和发布日期，使用pubdate表明哪个time元素代表了发布日期。
（3）section元素
section元素用于对网站或应用程序中页面上的内容进行分区。一个section元素通常由内容及标题组成。div元素也可以用来对页面进行分区，但section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div,而非section元素。
在使用section元素时，需要注意以下3点：
●不要将section元素用作设置样式的页面容器，那是div的特性。section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。
●如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。
●没有标题的内容区块不要使用section元素定义。
 
（4）设计导航信息
nav元素用于定义导航链接。可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。并不是所有的链接组都要被放进nav元素，值需要将主要的、基本的链接组放进nav元素即可。
例如：只要是导航性质的链接，就可以很方便地将其放入nav元素中。该元素可以在一个文档中多次出现，作为页面区域的导航。
例如：
 
<div class="cnblogs_code">
<pre><nav>

<ul>

<li><ahref="#">首页</li>

<li><ahref="#">公司概况</li>

<li><ahref="#">产品展示</li>

<li><ahref="#">联系我们</li>

</ul>

</nav>

</pre>
</div>
 
（5）设计辅助信息
aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
aside元素的用法主要分为两种：
●被包含在article元素内作为主要内容的附属信息。
●在article元素之外使用，作为页面或站点全局的附属信息部分。
例如：如下代码：
<div class="cnblogs_code">
<pre><body>

<article>

<header>

<h1>标题</h1>

</header>

<section>文章主要内容</section>

<aside>其他相关文章</aside>

</article>

<aside>右侧菜单</aside>

</body></pre>
</div>
 
 
4.3. 添加语义模块
在HTML5中新增了一些语义模块：标题模块header、标题分组hgroup、脚注模块footer、联系信息address。
（1）添加标题快header
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面的一个内容区块的标题，也可以包含其他内容。
示例：
<div class="cnblogs_code">
<pre><body>

<header>

<h1>网页标题</h1>

</header>

<article>

<header>

<h1>文章标题</h1>

</header>

<p>文章正文</p>

</article>

</body></pre>
</div>
 
（2）给标题分组hgroup
hgroup元素可以为标题或者子标题进行分组，通常它与h1-h6元素组合使用，一个内容块中的标题及其子标题可以通过hgroup元素组成一组。如果文章只有一个标题，则不需要hgroup。
示例：
<div class="cnblogs_code">
<pre><body>

<article>

<header>

<hgroup>

<h1>主标题</h1>

<h2>副标题</h2>

<h3>标题说明</h3>

</hgroup>

<p>

<time datetime="2012-6-20">发布时间:2012年6月20日</time>

</p>

</header>

</article>

</body></pre>
</div>
 
（3）添加脚注块footer
footer元素可以作为内容块的注脚，如在父级内容块中添加注释，或者在网页中添加版权信息等。
（4）添加联系信息address
address原来用来在文档中定义联系信息，包括文档作者或者文档编辑者名称、电子邮箱、真实地址、电话号码等等。
示例：
<div class="cnblogs_code">
<pre><body>

<address>

<ahref="http://www.w3.org/">W3C</a>

<ahref="http://www.whatwg.org/">WHATWG</a>

<a href="http://www.mthml5.com/">HTML5研究小组</a>

</address>

</body>

</pre>
</div>
 
<ol>
<li>复习</li>
</ol>
常见的文档结构元素如下：
header:标记头部区域内容（用于整个页面或页面中的一块区域）
footer：标记脚部区域的内容（用于整个页面或页面中的一块区域）
section：用于对网站或应用程序中页面上的内容进行分区。
article：用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。
aside：相关内容或者引文
nav：导航类辅助内容
 
例如：制作如图页面（采用div）：
 
 
修改成H5再来看看
<div class="cnblogs_code">
<pre><!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style type="text/css">

header,nav,article,footer

{

border:solid 1px #666;

padding:10px;

margin:6px;

}

header{width:500px;}

nav{float:left;width:60px;height:100px;}

article{float:left;width:406px;height:100px;}

footer{clear:both;width:500px;}

</style>

</head>

<body>

<header>导航</header>

<nav>菜单</nav>

<article>内容</article>

<footer>底部说明</footer>

</body>

</html></pre>
</div>
 
修改成如下格式：使用百分比
 
课堂练习：按照刚才讲解的使用H5建立网页。
<ol>
<li>作业：</li>
</ol>
使用文档结构标签header,section,nav,footer,article等等完成下面的网页
 
分析如下：
 
 
 
 
 
 
Nav aside
 
 
 
 
1 header：设置margin、width90%、height等属性
2 div：设置width、height、背景等属性
3 nav：设置width25%、height、浮动等属性，在css样式表中设置a标签：display、width、height、margin、background-color等属性，还可设置伪类。
4 Session：设置width25%、height、浮动等属性，包含article，包含header、footer元素。
 

</div>
<div id="MySignature" role="contentinfo">
出现在别人的生活里要像礼物 
来源：https://www.cnblogs.com/jokejie/p/12370696.html

頁: [1]

琼殿技术论坛's Archiver

认识Html5