码迷，mamicode.com
首页 > 其他好文 > 详细

今天分享一简单的页面，实现的的过程及源码如下。

时间：2018-08-19 14:46:16      阅读：137      评论：0      收藏：0      [点我收藏+]

标签：首页   style   绘图   多次   over   简单   体验   com   方式   

 

技术分享图片 

技术分享图片

 

html源码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5基础知识</title>
<link rel="stylesheet" href="../CSS/html5.css">
</head>

<body>
<!-- 页面头部 -->
<header>
<nav>
<a href="#">首页</a>
<a href="#">易牛课堂</a>
<a href="#">易牛班级</a>
<a href="#">易牛资讯</a>
<a href="#">话题小组</a>
</nav>
</header>
<!-- 文章内容 -->
<article>
<h1>Web前端--HTML5基础知识</h1>
<a href="#">浏览：316</a>
<a href="#">评论：10</a>
<a href="#">赞：101</a>
<div></div>
<h2>HTML5发展简述</h2>
<p>HTML发展已久，而HTML5则是在这期间通过人们不断改进HTML而来的。在1991年世界上第一个网页诞生以来，HTML就是网站开发中最主要的语言之一，并且一直在不断发展与进化。而现在，美观、高速、多平台，这些词已经密切地和HTML5联系起来。在HTML5的帮助下，传统的网页，已经带给人们堪比桌面程序的用户体验。2012年12月
17日，W3C 发布了HTML5以及 Canvas 2D 两个标准的完全定义版本，标志着 HTML5 的标准已经在趋向稳定。随着移动互联网的高速发展，HTML5也将迎来前所未有的发展机会。越来越多的人涌入HTML5学习浪潮中。
</p>
<div></div>
<h2>HTML5新性能</h2>
<p>HTML5 提供了有效的数据管理、绘图、视频和音频工具。它简化了面向 Web 和便携式设备的跨浏览器应用程序的开发。HTML5是推动移动云计算服务的技术之一，因为它可以实现更高程度的灵活性，可以开发出激动人心的交互式网站。它还引入了新的标记和增强，包括一个优雅的结构、表单控件、API、多媒体、数据库支持，并极大地加快了处理速度。
</p>
<p>Html5的优点即是“一次性开发，多次分发”，使得一次设计适应不同终端成为可能。信息流架构应用化都是直接在WEB(或wap)端抓取数据，html5可以直接使用跨平台数据面不使用后台API，大大降低研发维护成本而且呈现的效果几乎没有什么区别。Html5最大的意义在于改变WEB文档的结构方式，借助于header,foot,section,article，这些标配、标签我们可以实现更具结构化语义化的WEB文档，这样，搜索引擎更容易索引到WEB站点，我们可以搜索到更快更准备的信息。
</p>
<p>HTML5不仅仅局限于HTML语言本身，还包括了CSS3以及JavaScript语言里新增的函数和功能。HTML5能始终坚持不断发展，并很快得到广泛认可，与其在制定之初就确立的核心理念有很大的关系。这些核心理念就是我们今天在W3C站点上所看到的HTML5设计原理这份文档，概括起来就是——兼容性、实用性、互操作性以及普遍可访问性。
</p>
<div></div>
<h2>HTML5两大特点</h2>
<h3>HTML5有两大特点：</h3>
<h3>首先，
<span>它强化了Web网页的表现性能。</span>
</h3>
<h3>其次，
<span>追加了本地数据库等 Web 应用的功能。</span>
</h3>
<p>在语义上，HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。而本地存储特性使基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度。这些全得益于HTML5 APP Cache，以及本地存储功能。
</p>
<p>总的来说HTML5实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。虽然HTML5有CSS、JavaScript技术，但还是要单独提出CSS3和JS来进行学习更好。如今HTML5是IT行业网站开发不可或缺的技术，也是web前端开发必备技能之一，是很值得大家学习的。
</p>
<div></div>
<div>
<h4>文章来源：<span>易牛云课堂</span></h4>
<a href="#">原文链接：http://www.16ketang.com/article/12</a>
</div>
</article>
<!-- 页面尾部 -->
<footer>
<p>Powered by EduSoho v8.0.23 ?2014-2017 好知网 课程存档</p>
<p>课程内容版权均归 易牛云课堂 所有 蜀ICP备16007351号</p>
</footer>
</body>

</html>
 
css源码
*{margin: 0;padding: 0;}
body{
background-color: rgb(245, 248, 250);
}
header{
width: 100%;
height: 60px;
background-color: rgb(33, 33, 33);
}
a{
color: white;
text-decoration: none;
line-height: 60px;
}
nav>a:nth-child(1){
margin-left: 200px;
}
nav>a:nth-child(2){
margin-left: 90px;
}
nav>a:not(:nth-child(-n+2)){
margin-left: 58px;
}
a:link{
color: rgb(192, 192, 192);
}
a:visited{
color: rgb(192, 192, 192);
}
a:hover{
color:red;
}
a:active{
color: white;
}
article{
width: 750px;
height:1716px;
margin:32px 32px 0px 88px;
background-color: rgb(255, 255, 255);
color: rgb(97, 97, 97);
padding-left: 20px;
padding-right: 20px;
border: 1px solid rgb(228, 236, 243);
}
h1{
font-weight: 500;
font-size: 30px;
padding: 38px 0px 0px 0px;
}

article>a:link{
color: rgb(97, 97, 97);
}
article>a:visited{
color: rgb(97, 97, 97);
}
article>a:hover{
color: red;
}
article>a:active{
color:blue;
}
article>a{
font-size: 14px;
padding-top: 0px;
}
/* article>a:nth-child(2){
margin-left: 20px;
} */
article>a:nth-child(3),article>a:nth-child(4){
margin-left: 24px;
}
div{
border-bottom:1px solid rgb(228, 236, 243);
}
h2{
font-size: 22px;
font-weight: 500;
margin:44px 0px 40px 0px;
}
p{
line-height: 2em;
font-size: 14px;
padding-top: 0px;
padding-bottom: 38px;
}
article>div:nth-of-type(2){
margin-top: 20px;
}
article>div:nth-of-type(3){
margin-top: 20px;
}
article>div:nth-of-type(4){
margin-top: 20px;
}
article>div:nth-of-type(5){
margin: 32px 0px 20px 0px;
border:1px solid rgb(228, 236, 243);
height: 118px;
background-color: rgb(250, 250, 250);
}
h3{
font-size: 16px;
font-weight: 400;
padding-bottom:38px;
}
span{
font-weight: bold;
}
h4{
font-size: 14px;
font-weight: 400;
margin:28px 0px 0px 30px;
}
h4+a{
font-size: 14px;
margin-left: 30px;
}
h4+a:link{
color: rgb(97, 97, 97);
}
h4+a:visited{
color: rgb(97, 97, 97);
}
h4+a:hover{
color: red;
}
h4+a:active{
color: blue;
}
footer{
width: 100%;
height:160px;
color: rgb(193, 192, 192);
background-color: rgb(33, 33, 33);
}
footer>p:nth-child(1){
font-size: 14px;
text-align: center;
padding:48px 0px 0px 0px;
}
footer>p:nth-child(2){
text-align: center;
padding-top: 30px;
padding-bottom:0px;
}

今天分享一简单的页面，实现的的过程及源码如下。

标签：首页   style   绘图   多次   over   简单   体验   com   方式   

原文地址：https://www.cnblogs.com/dmiao/p/9501112.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！