html5新标签的具体应用

最新推荐文章于 2024-09-23 16:31:40 发布
最新推荐文章于 2024-09-23 16:31:40 发布
阅读量440 收藏
点赞数
分类专栏： web 文章标签： html5 标签 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s_a_b_e_r/article/details/37900939
版权

细细的品读了html5之后，对它标签的应用进行了实践，在此和大家分享一下。

<!DOCTYPE html>
<html>
<head>
<title>个人博客</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="">
</head>
<body>

创建页面的页头。页头中的标题被放置在header标签中，导航条放在nav标签中。
<header>
<h1>个人博客</h1>
</header>
<nav class="selected">
<ul>
<li class="selected">
<a href="">博客</a>
</li>
<li>
<a href="">关于</a>
</li>
<li>
<a href="">档案</a>
</li>
<li>
<a href="">联系</a>
</li>
<li class="subscribe">
<a href="">订阅.RSS</a>
</li>
</ul>
</nav>

在section标签中，添加文章。
<section id="intro">
<header>
<h2>你就像我们爱花吗</h2>
</header>
<p>
花形成的时期（或称为花芽的分化时期）和方式是由植物内在的遗传基因所决定的。植物只有完成营养生长，并在某种外界环境下，达到一定的生殖阶段时，才能成花。
</p>
<img src="花.jpg" alt="Flower">
</section>
<section>
<article class="blogpost">
<header>
<h2>
花的生长过程
</h2>
<p>发表于2009年6月29日 共有
         <a href="">3评论</a>
</p>
</header>
<div>
<p>
花形成的时期(或称为花芽的分化时期)和方式是由植物内在的遗传基因所决定的。植物只有完成营养生长，并在某种外界环境下，达到一定的生殖阶段时，才能成花。植物生长到一定阶段后能否成花，在大多数情况下，是由光照和温度等环境因素所决定，许多植物对昼夜相对长度的变化(光周期)和温度有一定的需要范围，在这两种因素的综合影响下，进入生殖时期(见光周期现象)。
</p>
<img src="花2.jpg" alt="flower">
</div>
</article>


</section>
<section id="comments">
<h3>
评论
</h3>
<article>
<header>
<a href="">民以食为天</a>
发表于2009年6月29日23:59</time>
</header>
<p>
诱发期后,也激起了DNA的合成和进一步的有丝分裂活动。这样，细胞的数量大为增多，从而发生出花原基。上述这一发生过程，也就是通常指的花形态发生时期。 成花的分生组织的发生 顶端分生组织在进入到生殖时期后，有相当明显的形态改变。这些变化与营养阶段无限生长的停止和各种方式产生侧生附属器有密切关系。在营养生长时期，顶端分生组织在新的叶间隔期开始以前，向上生长和增宽。相反，在花发育时，顶端分生组织随着花器官的连续发生，面积逐渐减少。有些花在心皮发生以后，还存留一些数量的顶端分生组织，但是停止了活动，而有的植物，则是由顶端分生组织的顶端部分产生心皮。根据花的不同类型，花器官可成螺旋顺序向顶端发生;或者某一种器官(例如花瓣)，在同一水平上形成一轮或两轮，然后另一器官如雄蕊群，紧接着发生.
</p>
</article>
</section>

使用section标签为页面添加独立的块，用于添加页面分类。
<section>
<header>
<h3>
分类
</h3>
</header>
<ul>
<li>
<a href="">月季花</a>
</li>
<li>
<a href="">桃花</a>
</li>
<li>
<a href="">玫瑰</a>
</li>
<li>
<a href="">牡丹</a>
</li>
<li>
<a href="">海棠</a>
</li>

</ul>
</section>
<section>
<header>
<h3>
档案
</h3>
</header>
<ul>
<li>
<a href="">2011年3月</a>
</li>
<li>
<a href="">2011年4月</a>
</li>
<li>
<a href="">2011年5月</a>
</li>
<li>
<a href="">2011年6月</a>
</li>
<li>
<a href="">2011年7月</a>
</li>
<li>
<a href="">2011年8月</a>
</li>
<li>
<a href="">2011年9月</a>
</li>
</ul>
</section>
</body>
</html>

本次练习的标签有<section> <nav> <article> <header> <time>等在html5中首次出现的标签。


s_a_b_e_r
关注
专栏目录
HTML入门与进阶以及HTML5
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
html5 常用标签的使用
baipenggui_bo
08-03 4970
什么是HTML? HTML 指的是超文本标记语言:HyperTextMarkupLanguage HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签(markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML标签及文本内容 HTML文档也叫做web 页面 HTML语法骨架格式 <html> 根标签，页面中最大的标签 <head> 头部，head标签中必须要设置的标签是title ...
HTML5新增的标签属性以及它们的用法
残阳曦月
02-23 3241
HTML5新增了一些标签，但它们并不像我们想象的那样陌生，它们只是更加符合我们的思维方式，更人性化。按照以往的布局方式，我们要划分页面结构时都是使用的div，例如&lt;div class="header"&gt;&lt;/div&gt;、&lt;div id="footer"&gt;&lt;/div&gt;等。HTML5直接用header、footer标签来代替div，这类标签更加语义化，便于爬...
HTML5 新增的标签有哪些
似水流年QC的博客
06-25 2218
①.语义元素：HTML5引入了一些新的语义元素，如、、、、 等，使开发者可以更清晰地定义页面结构，提高可读性和可访问性。是最新的html标准，拥有新的语义、图形以及多媒体元素，简化web应用程序，专为丰富的web内容而设计的，简称“H5”。⑥.改进的表单控件：HTML5引入了一些新的表单元素和属性，如日期选择器、输入验证、进度条、颜色选择器等，使开发者能够更轻松地创建交互性更强的表单。
HTML5 之 Meta 标签
无
06-16 1万+
概述   meta 元素用于指定页面的信息和部分行为。通常用于指定网页的描述，关键字等元数据。   可以被使用浏览器、搜索引擎或其他 Web 服务调用。 <meta name="" http-equip="" content="" charset=""> charset   charset规定HTML文档的字符编码。 <meta charset="utf-8">   charset是HTML 5的新属性，替换了HTML 4.01的指定字符编码的方式，可以减少部分代码量。 &lt.
HTML5语义化标签
wendZzoo的博客
09-17 5959
1、HTML5简化的标签 （1）DOCTYPE文档声明 <!DOCTYPE html> 相较于之前的版本，HTML5没有指定具体版本，这就表示了最新的HTML版本。 （2）<meta>声明 HTML4.01中的meta声明决定了HTML文档中字符的编码方式，HTML5直接一个charset属性即可， <meta charset="UTF-8"> ...
前端HTML5十大新特性详细总结
热门推荐
weixin_45709829的博客
04-04 1万+
前端HTML5十大新特性总结 一 必须知道 写前端的都知道，在代码最前面都有这一行代码，大家都知道一定要把这东西写上去。 <!DOCTYPE html> 但是！这是什么玩意儿？为什么要写上去?不写上去会怎么样？很少人去注意到，反正就照写就可以了。 所以，这是个啥玩意儿?这是声明！这是HTML5声明的新特性！ 既然有HTML5，那肯定有HTML4是吧，那HTML4是怎么声明的呢？ HTML4有三种声明方式：Strict（严格模式），Transitional（过渡模式），Frameset（框架模式
HTML5的革新——语义化标签
小平果的欢乐谷
03-13 4847
一、语义化标签的实战意义 我先收集到一些观点，大家姑且先听上一听，  有人说：  “没必要考虑语义化，只要我写的代码浏览器运行后没问题就行，反正领导根本不关心这些”  “语义化是w3c推广的，我是很想语义化我的代码，但总是用不明白”  “这个不好说，语义化再好有啥用，关键是有好的项目，客户才是金主！”  “除了专业人士，谁会去看我们的代码是不是语义化的” 不仅仅有页面重构人员
HTML常用标签详解
淘小欣的博客
03-04 1万+
HTML常用标签详解 一、head内常用标签 1.基本标签（非meta标签） <!--title: 定义网页标题--> <title>Title</title> <!--style: 定义内部样式表. 内部用来书写css代码--> <style> h1 { color: greenyellow; } </style> <!--script: 内部用来书写js代码--> <script
HTML常用标签--整理篇
程序员小章的博客
09-13 1万+
HTML常用标签 文章目录HTML常用标签文本标签HTML格式化标签HTML图像标签HTML表格标签HTML表单标签 文本标签 常⽤文本标签如下： <hn>...</hn>标题标签，其中n为1–6的值。 <i>...</i>斜体 ... 强调斜体 <b>...</b> 加粗 <strong>...</strong> 强调加粗 <cite></cite&
html5 微信朋友圈 场景应用源码 仿云来
02-18
标签中的“html5 源码 场景 应用 云来”进一步强调了这个项目的核心元素：HTML5技术、源代码、场景应用以及与云来的关联。HTML5是现代网页和移动应用开发的标准，提供了丰富的多媒体支持和离线存储等功能，使得创建...
用HTML5新标签构建页面
PT - Blog
03-22 2215
用HTML5新标签构建页面
html5新增语义化标签和应用
irouduoduo的博客
04-23 1734
人人都说语义化标签好  个人见解：                                                                       小时候舅舅家的墙上贴了一张中国地图，在我刚认识字的时候，我第一次在地图上能找到的是自己的家乡在哪里。然后你会想地图上乱七八糟的线都是什么，           在那个经常和小朋友讨论地图的年代，你会在讨论中注意到左
【HTML5】html5开篇基础（1）
Easonmax的博客
09-20 1265
网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页的组成：网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。HTML5不是一种编程语言，而是一种超文本标记语言。超文本包括：文字、图片、音频、视频、动画等html中代码不分大小写，推荐都小写。
python：基于django的html订单提交页面
我是你大爷
09-23 621
这里给出一个基于django的html订单提交页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能。
HTML粉色烟花秀
兔子王
09-21 6032
HTML语言实现的粉红色跨年烟花秀的完整代码。
python：基于django的html二维码页面生成功能页面
我是你大爷
09-23 425
这里给出一个基于django的html二维码页面生成功能页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能（包含无限扩展内容框生成功能）。
网页设计html心得
ikunlxx的博客
09-23 748
CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等，但是各个浏览器对它的支持不统一，所以流行的版本仍然是CSS3。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
html,js,react三种方法编写helloworld理解virtual dom
最新发布
09-23 518
学习任何一个新语言，好像都从helloworld开始。：）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值