html

<body>
    <header>
        <!-- 导航 -->
        <nav>
<a href="#">首页</a>
            <a href="#">易牛课堂</a>
            <a href="#">易牛班级</a>
            <a href="#">易牛咨询</a>
            <a href="#">话题小组</a>
        </nav>
    </header>
    <article>
        <!--  文章标题 -->
        <header class="biaoti">
            <div>Web前端--HTML5基础知识</div>
            <div>浏览：316 评论：10 赞：101</div>
        </header>
        <!-- 简述 -->
        <section class="box1">
            <div>HTML5发展简述</div>
            <div>
                HTML发展已久，而HTML5则是在这期间通过人们不断改进HTML而来的。在1991年世界上第一个网页诞生以来，HTML就是网站开发中最主要的语言之一，并且一直在不断发展与进化。而现在，美观、高速、多平台，这些词已经密切地和HTML5联系起来。在HTML5的帮助下，传统的网页，已经带给人们堪比桌面程序的用户体验。2012年12月
                17日，W3C 发布了HTML5以及 Canvas 2D 两个标准的完全定义版本，标志着 HTML5
                的标准已经在趋向稳定。随着移动互联网的高速发展，HTML5也将迎来前所未有的发展机会。越来越多的人涌入HTML5学习浪潮中。</div>
        </section>
        <!-- 新性能 -->
        <section class="box2">
            <div>HTML5新性能</div>
            <div>HTML5 提供了有效的数据管理、绘图、视频和音频工具。它简化了面向 Web
                和便携式设备的跨浏览器应用程序的开发。HTML5是推动移动云计算服务的技术之一，因为它可以实现更高程度的灵活性，可以开发出激动人心的交互式网站。它还引入了新的标记和增强，包括一个优雅的结构、表单控件、API、多媒体、数据库支持，并极大地加快了处理速度。
            </div>
            <div>
                Html5的优点即是“一次性开发，多次分发”，使得一次设计适应不同终端成为可能。信息流架构应用化都是直接在WEB(或wap)端抓取数据，html5可以直接使用跨平台数据面不使用后台API，大大降低研发维护成本而且呈现的效果几乎没有什么区别。Html5最大的意义在于改变WEB文档的结构方式，借助于header,foot,section,article，这些标配、标签我们可以实现更具结构化语义化的WEB文档，这样，搜索引擎更容易索引到WEB站点，我们可以搜索到更快更准备的信息。
            </div>
            <div>
                HTML5不仅仅局限于HTML语言本身，还包括了CSS3以及JavaScript语言里新增的函数和功能。HTML5能始终坚持不断发展，并很快得到广泛认可，与其在制定之初就确立的核心理念有很大的关系。这些核心理念就是我们今天在W3C站点上所看到的HTML5设计原理这份文档，概括起来就是——兼容性、实用性、互操作性以及普遍可访问性。
            </div>
        </section>
        <!-- 两大特点 -->
        <section class="box3">
            <div>HTML5两大特点</div>
            <div>HTML5有两大特点：</div>
            <div>首先，<span> 它强化了Web网页的表现性能。</span></div>
            <div>其次，<span>追加了本地数据库等 Web 应用的功能。</span> </div>
            <div>
                在语义上，HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。而本地存储特性使基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度。这些全得益于HTML5
                APP Cache，以及本地存储功能。
            </div>
            <div>
                总的来说HTML5实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。虽然HTML5有CSS、JavaScript技术，但还是要单独提出CSS3和JS来进行学习更好。如今HTML5是IT行业网站开发不可或缺的技术，也是web前端开发必备技能之一，是很值得大家学习的。
            </div>
        </section>
        <!--  -->
        <footer>
            <div>文章来源：<span>易牛云课堂</span> </div>
            <a href="#">原文链接：http://www.16ketang.com/article/12</a>
        </footer>
    </article>
    <!--  咨询内容 -->
    <div class="zixu">
        <aside>
            <div>相关资讯</div>
            <a href="#">Lorem ipsum dolor sit.</a>
            <a href="#">Lorem ipsum dolor sit.</a>
            <a href="#">Lorem ipsum dolor sit.</a>
            <a href="#">Lorem ipsum dolor sit.</a>
            <a href="#">Lorem ipsum dolor sit.</a>
        </aside>
        <aside>
            <div>热门资讯</div>
            <a href="#">Lorem ipsum dolor sit.</a>
            <a href="#">Lorem ipsum dolor sit.</a>
            <a href="#">Lorem ipsum dolor sit.</a>
            <a href="#">Lorem ipsum dolor sit.</a>
            <a href="#">Lorem ipsum dolor sit.</a>
        </aside>
    </div>
    <footer class="jiaozhu">
        <p>Powered by EduSoho v8.0.23 ©2014-2017 好知网 课程存档</p>
        <p>课程内容版权均归 易牛云课堂 所有 蜀ICP备16007351号
        </p>
    </footer>
</body>
</html>
css
body {
    background-color: #f8f8f8;
}
header {
    width: 100%;
    height: 32px;
    background-color: #373d41;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
nav {
    line-height: 32px;
}
header>div {
    width: 1200px;
    height: 32px;
    margin: 0 auto;
    line-height: 32px;
}
nav>img {
    width: 66px;
    float: left;
    padding-top: 10px;
}
nav>a {
    float: right;
    color: white;
    margin-left: 30px;
    padding: 0 42px;
}
nav>a:hover {
    background-color: #00c0dd;
}
/* 导航栏实现代码  */
.yunshichang {
    width: 100%;
    height: 128px;
    background-color: #fdfdfd;
    margin-top: 20px;
}
/* 搜索栏 */
/*云市场上边*/
.yunshichang-top {
    width: 1200px;
    height: 68px;
    margin: 0 auto;
    overflow: hidden;
}
.input {
    width: 632xp;
    height: 31;
}
.yunshichang-top>img {
    width: 100px;
    float: left;
    overflow: hidden;
}
.fuwu {
    border: 1px solid gray;
    width: 634px;
    height: 28px;
    margin-left: 160px;
    float: left;
    overflow: hidden;
}
.fuwu>p {
    color: gray;
    float: left;
    line-height: 28px;
}
.fuwu>a {
    line-height: 28px;
    float: right;
    color: white;
    background-color: #00c0dd;
}
.yunshichang-top span {
    font-weight: 800;
    float: right;
    color: #00c0dd;
    margin-right: 6px;
    border: 1px solid#00c0dd;
}
.wangzhan>a {
    color: gray;
    margin-right: 20px;
    font-size: 14px;
}
.wangzhan {
    float: left;
    margin-left: 168px;
    margin-bottom: 16px;
    margin-top: 10px;
}
/* 导航栏 */
.yunshichang-bottom {
    background-color: cyan;
    width: 240px;
    height: 343px;
    justify-content:flex-start;
}
/* 云市场类蓝色小分区 */
.yunshichang2>img{
width:960px;
height:299px;
justify-content:space-between;
}
/* 找商品 */
.zhaoshangping{
    width: 1200px;
    height: 164px;
    margin: 0 auto;
    background-color: #ffffff;
   
}
/* div{
display: flex;
} */
.zhaoshangping{
    display: flex;
}
 

html语义化练习易牛课堂代码的更多相关文章

  1. 如何让你的JavaScript代码更加语义化

    语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...

  2. html 语义化 资料

    HTML: The Living Standard 理解HTML语义 什么是HTML语义化 为什么要语义化 写HTML代码时就注意什么 HTML 5的革新——语义化标签(一) header元素 foo ...

  3. HTML5语义化标签

    在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...

  4. HTML中的SEO和HTML语义化

    SEO 1) <title>网站SEO标题</title>, 百度搜索出来的记录, 其标题基本就提取至网站的title, 标签, 因此标题起的好, 不论对点击率还是SEO都至关 ...

  5. 【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解

    [重构前端知识体系之HTML]讲讲对HTML5的一大特性--语义化的理解 引言 在讲什么是语义化之前,先看看语义化的背景. 在之前的文章中提到HTML最重要的特性,那就是标签.但是项目一大,标签多的看 ...

  6. Html技巧 语义化你的代码

    首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用. ...

  7. 前端工程师必须要知道的SEO技巧(2):制作比设计还要漂亮的代码(内容和语义化代码)实现下

    提醒自己:上一篇文章属于纯理论的文章,我自己有的部分之从网上摘抄的,我自己也是不理解的.或许过一段日子我就能全明白了.我自己还是喜欢实战,做几个例子就明白了. 怎么做让自己网页的标签来实现语义化,我直 ...

  8. CSS代码命名惯例语义化的方法

    CSS代码的命名惯例一直是大家热门讨论的话题.今天暴风彬彬想通过分析一个流行三栏布局中的必要元素,来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导. 您还可以参考彬Go的相关文章 ...

  9. 灵魂代码分享HTML元素标签语义化及使用场景实用到爆

    灵魂三问: 标签语义化是什么?为什么要标签语义化?标签语义化使用场景有哪些? 下面让我们跟着这三个问题来展开一下本文的内容. 一.标签语义化是什么? 标签语义化就是让元素标签做适当的事情.例如 p 标 ...

随机推荐

  1. 双跑道------js分机号

    博客园 首页 新随笔 联系 管理 订阅 随笔- 310  文章- 0  评论- 134  [tomcat]启动报错:Failed to initialize end point associated ...

  2. Python全栈之路----数据类型—元组类型

    元组类型:有序,不可变的,又叫只读列表  names = ("alex","jack","eric") 1.元组本身不可变,但如果元组中有可 ...

  3. 20155208徐子涵《网络对抗》Exp2 后门原理与实践

    20155208徐子涵<网络对抗>Exp2 后门原理与实践 基础问题回答 (1)例举你能想到的一个后门进入到你系统中的可能方式? 答:当我们在非官方网站上下载软件时,后门极有可能会进入我们 ...

  4. centos安装redis步骤

    1.官网或wget下载redis-4.0.9.tar.gz: cd /home/tar wget http://download.redis.io/releases/redis-4.0.9.tar.g ...

  5. enumerate()使用

    enumerate()使用 如果对一个列表,既要遍历索引又要遍历元素时,首先可以这样写: list1 = ["这", "是", "一个", ...

  6. day04-Python的流程控制

  7. 小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下: 1.在网站http://imgbase64.duoshiton ...

  8. 快速部署私人git服务--基于docker化Gogs

    Gogs 一款极易搭建的自助 Git 服务. 环境 Linux系统 docker 获取gogs镜像,并运行, docker run -it --: -p : -v /var/gogs:/data go ...

  9. xpython在Windos下的安装及简单的文本打开、保存

    前几天写自动化部署脚本,用的是paramiko和shell相结合,paramiko可是实现ssh登录,文件及文件夹的上传下载,这些功能,然后一直想自己写个东西出来,于是就想把这些功能我把他放到图形化界 ...

  10. Python递归调用

    递归调用:在调用一个函数过程中,直接或间接又调用该函数本身,称之为递归调用 递归必备的2个阶段  1递推 2回溯 当递推结束后就可以进行回溯了 Python默认设置递归层数为1000 递归示例: de ...