您的位置：首页 > Web前端 > HTML5

HTML5学习笔记（总结提炼版）——001常见的HTML标签

2016-03-14 00:42 786 查看

前言：最近在学HTML5，想想还是把笔记放到博客来，一来可以相互分享和交流学习，二来可以督促自己不要放松！

下面贴上代码：源代码已经打包上传到我的资源里面，可以下载运行。
源码下载链接：点击打开链接

练习1：

<!--根标签-->

<html>

<!--头部标签-->

<!--

src和href的区别

src:引用,该资源是页面不可缺少的一部分,如(img标签 video标签 radio标签);

href:引入,引入外部资源,如(a标签 link标签)

-->

<head>

<meta charset="UTF-8">

<title>第一个程序</title>

</head>

<!--身体标签-->

<body>

你好,世界!

</body>

</html>

练习2：

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<!--标题标签-->

<h1>11111111111111111</h1>

<h2>11111111111111111</h2>

<h3>11111111111111111</h3>

<h4>11111111111111111</h4>

<h5>11111111111111111</h5>

<h6>11111111111111111</h6>

<div>2222222222222222</div>

<div>222222222222222</div>

<div>1111111111111111111111</div>

<div>1111111111111111111111</div>

<!--段落标签-->

<p>eeeeeeeeeedffkjhefhjgerhjkjher</p>

<p>eeeeeeeeeedffkjhefhjgerhjkjher</p>

<p>eeeeeeeeeedffkjhefhjgerhjkjher</p>

<!--输入框标签-->

<input><br>

<input placeholder="请输入用户名"><br><br><br>

<input value="张三"><br>

<input type="color"><br>

<input type="checkbox"><br>

<input type="date"><br>

<input type="range"><br>

<!--换行标签-->

<br>

<!--超链接标签-->

<a href="http://baidu.com" target="_blank">百度一下,你就不知道</a>

<!--图像标签

相对路径 项目中的资源

绝对路径 http:// https:// ftp:// file://

-->

<img src="https://www.baidu.com/img/bd_logo1.png" width="100" height="150">

<img src="img/7.jpg" width="100" height="150">

<!--列表标签-->

<ul>

<li>111111</li>

<li>222222</li>

<li>333333</li>

<li>444444</li>

</ul>

<!--容器标签-->

<div>1111111111111111111111</div>

</body>

</html>

练习3：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>富士康PK万达：同时转型电商背后差别在哪？</title>

</head>

<body>

<!--文章-->

<article>

<!--头部-->

<header>

<h1>富士康PK万达：同时转型电商背后差别在哪？</h1>

<h4>一言楠尽08月28日 07:30 富士康万达富连网分类 :互联网阅读 :39075</h4>

</header>

<!--章节-->

<section>

<h3>1、核心战略PK</h3>

<p>富连网是富士康旗下专业的3C数码电商平台，其最大的亮点是主营3C数码家电品类的产品，有点类似早期的京东，希望利用富士康的产业链优势，从B2C出发最后形成一个C2B的完整生态圈闭环；在服务与资源上看，富士康为富连网提供了相当多区别于传统电商的玩法，甚至独自完成了首届智能手表节的营销推广活动。</p>

<p>对万达电商来说，其主体是“飞凡网”，由万达、百度、腾讯共同出资成立，核心是重新整合万达集团线下资源，实现线上线下业务和服务融合，要打造一个“全球性”O2O开放式电商平台”。此外，该平台不以城市做为分界依据，而是以万达广场为辐射核心，这也是在最大程度上利用万达商业地产的资源来进行扩张。</p>

</section>

<section>

<h3>2、服务层级PK</h3>

<p>事实上，中国互联网发展这十几年鲜有巨头直接合作成功的案例，大多是好聚不好散，尤其是对万达来说，如果把希望都寄托在百度与腾讯身上，也是颇为危险的——要知道“BT”这两个国内最大的互联网公司目前都希望抓住O2O的风口实现二次突破，万达何尝又不是他们眼中的“土大款”呢？初期弄明白O2O电商的玩法后，未来万达电商应该更注重自身品牌与渠道的建设。</p>

</section>

<!--尾部-->

<footer>

<h5>作者介绍：穆楠，《复制互联网之三》系列图书作者，百度百家、网易、搜狐、艾瑞等多家网站专栏作家，科技专栏「一言楠尽」创办人。</h5>

</footer>

</article>

</body>

</html>

练习4：HTML5常用标签

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<progress value="20" max="100"></progress>

<audio src="source/music.m4a" controls="controls"></audio>

<video src="source/BigBuck.m4v" controls="controls"></video>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航