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. linux ipv6开启的配置文件

    1./etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0TYPE=EthernetUUID=9d1d6e2a-cfc5-4e60-8f28-b77 ...

  2. QT | QT MSVC 2015 + VS 2015开发环境配置及GIT设置

    1.下载: 所有Qt版本的下载地址: http://download.qt.io/archive/qt/ 实际使用了http://download.qt.io/archive/qt/5.7/5.7.1 ...

  3. IC卡冷复位时序

    冷复位(cold reset):当提供给IC卡的电源电压和其他信号从静止状态中复苏且收到复位信号后,IC卡产生的复位. 在触点激活后,终端将发出一个冷复位信号,并从IC卡获得一个复位应答信号,过程如下 ...

  4. Mysql 杀死sleep进程

    查询数据库当前设置的最大连接数:查看mysql数据库连接数.并发数相关信息  show global variables like '%max_connections%'; 查看mysql连接数:my ...

  5. Linux学习man page

    1.3.8需要记住,分别代表用户操作.函数库和管理指令. ##man -f command 显示出命令的所有说明文档.等同于 whatis ##man -k key 显示出带key的所有说明文档.等同 ...

  6. highcharts 获取不到隐藏容器大小

    1.固定图表大小 2.图表容器div的resize(绑定一个始终显示的,可以影响所有图表的) 影响容器大小改变的: 窗口大小改变 侧边栏切换 滚动条切换

  7. Parsing with Compositional Vector Grammars--paper

    这篇和2012年的区别: 1)Max-Margin Training Objective J中RNN变为了CVG 2012-两个词向量合并并打分,这个-两个(词向量,POS)合并并打分 2012年: ...

  8. MyBatis举例以及连接数据库过程

    第一:创建实体类 package entity; public class Emp { private int empno; private String ename; private String ...

  9. 在jsp中应如何避免，request.getContextPath();等get报错问题

    导致request中的大部分get方法无法获取,是因为没有依赖的jar包.就像这样.这里不仅仅有getContextPath()方法报错,如果存在这个问题,大部分的request方法都不可用. 解决这 ...

  10. LG1912 [NOI2009]诗人小G

    题意 题目描述 小G是一个出色的诗人,经常作诗自娱自乐.但是,他一直被一件事情所困扰,那就是诗的排版问题. 一首诗包含了若干个句子,对于一些连续的短句,可以将它们用空格隔开并放在一行中,注意一行中可以 ...