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. 转发 C# Win32 API程序控制鼠标的操作

    命名空间:using System.Runtime.InteropServices; 在程序中添加: [DllImport("User32")]public extern stat ...

  2. centOS连接没问题，使用SecureCRT就不能连接

    原因: 将NAT模式改为自定义的模式即可:

  3. 编译Linux-4.15.1内核时遇到：“error : openssl/bio.h :No such file or folder”

    如题: scripts/extract-cert.c::: fatal error: openssl/bio.h: No such file or directory compilation term ...

  4. maven整合ssh框架笔记

    具体工程会上传文件sshpro <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:x ...

  5. 第二个web网页

    1.源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">-------- ...

  6. np金融量化分析

    在所有的np中都是已返回值的形式进行修改的,否则不会修改  只是显示内容 形状是三维数据  全0数组 reshape也可以将二维的变成一维的 下标和切片 一维的切片 二维切片 . 列表切片 给一个数组 ...

  7. zombodb 几点说明

    内容来自官方文档,截取部分 默认es 索引的副本为0 这个参考可以通过修改索引,或者在创建的时候通过with 参数指定,或者通过pg 的配置文件中指定 索引更多的列以为这使用了更多的es 能力 索引的 ...

  8. Python tkinter模块和参数

    转自:https://www.cnblogs.com/aland-1415/p/6849193.html 1.使用tkinter.Tk() 生成主窗口(root=tkinter.Tk()):root. ...

  9. 迅雷磁力链接转BT种子工具

    种子文件目录:C:\Users\jifeng\AppData\Local\Temp\magnetex MagnetEx.exe 从迅雷5.8支持磁力链接的无视受限资源版提取 MagnetEx.exe ...

  10. C# Interview Question 1

    What is C#? What's the feature of C# language? Answer: