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. shell中括号的特殊用法 linux if多条件判断

    一.   bash [  ] 单双括号 基本要素: Ø  [ ] 两个符号左右都要有空格分隔 Ø  内部操作符与操作变量之间要有空格:如  [  “a”  =  “b”  ] Ø  字符串比较中,&g ...

  2. 【持续更新】 | OpenCV 学习笔记

    本文地址:http://www.cnblogs.com/QingHuan/p/7365732.html,转载请注明出处 ######################################## ...

  3. linux基础之LSB定义的常用目录详解

    Linux基础之LSB定义的基本目录详解 1.LSB中FHS(Filesystem Hierarchy Standard)定义的一些文件 /boot:主要是存放引导文件的目录,比如内核文件(vmlin ...

  4. alpha冲刺(2/10)

    前言 队名:旅法师 作业链接 队长博客 燃尽图 会议 会议照片 会议内容 陈晓彬(组长) 今日进展: 召开会议 安排任务 博客撰写 构建之法的阅读 问题困扰: 分配任务,还是不熟练,对后台不熟悉,不知 ...

  5. [ Codeforces Round #549 (Div. 2)][D. The Beatles][exgcd]

    https://codeforces.com/contest/1143/problem/D D. The Beatles time limit per test 1 second memory lim ...

  6. AJAX 请求后使用 JS 打开新标签页被阻止的解决方法

    需求:发起一个 AJAX 请求,根据请求结果来打开一个新页面. 问题:AJAX 请求后,使用 window.open() 方法来打开新页面会被浏览器阻止. 解决方法:在 AJAX 请求之前,就使用 c ...

  7. 二、tcp/ip基础知识

    一.TCP/IP的标准化 1.TCP/IP的含义 一般来说,TCP/IP是利用IP进行通信时所必须用到的协议群的统称. 具体点,IP或ICMP.TCP或UDP.TELENT或FTP.以及HTTP等都属 ...

  8. 装系统时 System clock uses UTC 问题

    装系统也装了至少不下50次了,每次都是傻瓜一样的按照第一印象在弄,从未想过为啥,装到这里的时候,System clock uses UTC 勾不勾呢,每次都是百度,然后装完这一次下一次又忘了,这是没有 ...

  9. laravel的filter()方法的使用 (方法使用给定的回调函数过滤集合的内容,只留下那些通过给定真实测试的内容)

    filter 方法使用给定的回调函数过滤集合的内容,只留下那些通过给定真实测试的内容: $collection = collect([1, 2, 3, 4]); $filtered = $collec ...

  10. 淘宝客知道这几个ID,收入将会提高50%

    基础问题天天说,天天有人问.这篇文章写点基础的.特别对新手的帮助会很大哦. 1,PID,做淘宝客不知道PID,赚到钱也会被冻结. 如何手动获取PID 2,单品ID,淘宝商品的唯一识别编号,和身份证一样 ...