废话不多说，直接上例子！

　　工欲善其事，必先利其器

  1. 浏览器要有吧~                       比如：IE、Chrome、Firefox……
  2. 纯文本编辑软件不可少~          比如：最简单的记事本就可以了
  • 打开记事本，输入以下示例代码：
 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="big5">

 <title>背包客旅行札记</title>

 </head>

 <body>

 <header id="header">

     <hgroup>

         <h1>背包客旅行札记</h1>

         <h4>旅行是一种休息，而休息是为了走更长远的路</h4>

     </hgroup>

     <nav>

         <ul>

             <li><a href="#">关于背包客</a></li>

             <li class="current-item"><a href="#">国内旅游</a></li>

             <li><a href="#">国外旅游</a></li>

             <li><a href="#">与我联络</a></li>

         </ul>

     </nav>

 </header>

 <article id="travel">

     <section>

         <h2>Hello World!</h2>

         <p>四季都是适合旅行的季节。</p>

         <p>不一定要花大钱，做点功课和多点自信，就能享受旅游的美好。</p>

     </section>

     <aside>

         <figure>

             <img src="photo.png" alt="眣盯" />

         </figure>

     </aside>

 </article>

 <footer>

     HTML5网页练习

 </footer>

 </body>

 </html>
  • 保存，注意后缀为htm
  • 预览HTML网页

　　打开浏览器，将文件拖曳到浏览器内，就可以看到结果了，嚯嚯！

示例网页如下：

　

　　这样似乎还不够美观，加上CSS语法会变成这样：

　　　　CSS后续会介绍，这里先暂时略过……　　

　　  代码仅共参考：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="big5">

 <title>背包客旅行札记</title>

 <style type="text/css">

 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

 html {

     background-color: #F1F0DF;

 }

 body {

     border: 3px solid #660000;

     background-color: #FFF;

     font: 15px Helvetica, "稬硁タ堵砰", Sans-Serif;

     margin: 20px auto;

     padding: 5px 10px;

     width: 750px;

 }

 a {

     color: #996600;

     text-decoration: none;

 }

 h1, h2, h4 {

     margin: 0;

 }

 a:hover {

     color: #cc3300;

 }

 #header {

     margin-bottom: 15px;

 }

 #header hgroup h4 {

     font-style: italic;

     font-weight: normal;

     margin-bottom: 18px;

     text-indent: 10px;

 }

 #header nav {

     border-bottom: 1px solid #DDDCCC;

     font-size: 16px;

 }

 #header nav ul {

     overflow: hidden;

     padding: 0 0 5px 0;

     margin: 0;

 }

 #header nav li {

     float: left;

     list-style: none;

     padding: 0 5px;

 }

 #header nav li.current-item a {

     color: #765C07;

 }

 #travel {

     overflow: hidden;

     text-align: justify;

 }

 #travel section {

     float: left;

     width: 350px;

 }

 #travel aside {

     margin-left: 400px;

 }

 #travel aside figure {

     margin: 0;

 }

 footer {

     margin: 15px 0 10px;

     text-align: center;

 }

 </style>

 <!--[if lte IE 8]>

 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

 <![endif]-->

 </head>

 <body>

 <header id="header">

     <hgroup>

         <h1>背包客旅行札记</h1>

         <h4>旅行是一种休息，而休息是为了走更长远的路</h4>

     </hgroup>

     <nav>

         <ul>

             <li><a href="#">关于背包客</a></li>

             <li class="current-item"><a href="#">国内旅游</a></li>

             <li><a href="#">国外旅游</a></li>

             <li><a href="#">与我联络</a></li>

         </ul>

     </nav>

 </header>

 <article id="travel">

     <section>

         <h2>Hello World!</h2>

         <p>四季都是适合旅行的季节。</p>

         <p>不一定要花大钱，做点功课和多点自信，就能享受旅游的美好。</p>

     </section>

     <aside>

         <figure>

             <img src="photo.png" alt="眣盯" />

         </figure>

     </aside>

 </article>

 <footer>

     HTML5网页练习

 </footer>

 </body>

 </html>

　　小结：这只是一个简单的引例，旨在开启我的学习之旅，将理论付诸于实践，当看到美美的页面展现在眼前时，是一种极大的满足啊！又该去看书了，先撤……

html基础起航的更多相关文章

  1. Android零基础入门第15节：掌握Android Studio项目结构，扬帆起航

    原文:Android零基础入门第15节:掌握Android Studio项目结构,扬帆起航 经过前面的学习,Android Studio开发环境已准备OK,运行Android应用程序的原生模拟器和Ge ...

  2. MySQL学习基础 之 起航篇

    MySQL 学习来自慕课网<与MySQL的零距离接触> MySQL是一个开源的关系型数据库管理系统 MySQL分为社区版和企业版 MySQL登录和退出相关的命令 参数 描述 -D,--da ...

  3. C++基础——模拟事务 （2）Composite模式

    =================================版权声明================================= 版权声明:原创文章 禁止转载  请通过右侧公告中的“联系邮 ...

  4. C++基础——模拟事务 （1）COMMAND模式

    =================================版权声明================================= 版权声明:原创文章 禁止转载  请通过右侧公告中的“联系邮 ...

  5. C++学习笔记（一）：C++基础知识

    一.C++基础知识 新的数据类型 C语言中的数据类型 C++中新的数据类型 思考:新的数据类型有什么好处?请看下面的代码: 可以见得:新的类型使整个程序更加简洁,程序变得易读易懂!这个就是bool类型 ...

  6. Linux实战教学笔记20:初级阶段结束，中级阶段起航

    第二十节 第一阶段结束第二阶段起航 标签(空格分隔): Linux实战教学笔记-陈思齐 一,承上 Linux实战教学笔记的基础核心能力阶段也就是第一阶段到此也就告一段落了.如果同学们能基本全都掌握,再 ...

  7. 4-c++教程起航篇-学习笔记

    c++教程起航篇 我们会讲C++那些事,C++与C语言的关系. C++诞生于贝尔实验室. C++之父: 本贾尼·斯特劳斯特卢普 C++社区排行榜 最新排行,c++排名第三,Python排名第四 C++ ...

  8. Android零基础入门第29节：善用TableLayout表格布局，事半功倍

    原文:Android零基础入门第29节:善用TableLayout表格布局,事半功倍 前面学习了线性布局和相对布局,线性布局虽然方便,但如果遇到控件需要排列整齐的情况就很难达到要求,用相对布局又比较麻 ...

  9. Android零基础入门第30节：两分钟掌握FrameLayout帧布局

    原文:Android零基础入门第30节:两分钟掌握FrameLayout帧布局 前面学习了线性布局.相对布局.表格布局,那么本期来学习第四种布局--FrameLayout帧布局. 一.认识FrameL ...

随机推荐

  1. 用枚举enum替代int常量

    枚举的好处: 1. 类型安全性 2.使用方便性 public class EnumDemo { enum Color{ RED(3),BLUE(5),BLACK(8),YELLOW(13),GREEN ...

  2. 【Big Data】HADOOP集群的配置（二）

    Hadoop集群的配置(二) 摘要: hadoop集群配置系列文档,是笔者在实验室真机环境实验后整理而得.以便随后工作所需,做以知识整理,另则与博客园朋友分享实验成果,因为笔者在学习初期,也遇到不少问 ...

  3. Js ==和===的区别

    ===判断: Undefined === Undefined,返回 true Null === Null,返回 true null == undefined,返回 false NaN === NaN, ...

  4. Java正则速成秘籍（二）之心法篇

    导读 正则表达式是什么?有什么用? 正则表达式(Regular Expression)是一种文本规则,可以用来校验.查找.替换与规则匹配的文本. 又爱又恨的正则 正则表达式是一个强大的文本匹配工具,但 ...

  5. C# Windows API

    API:应用程序接口(API:Application Program Interface)应用程序接口(API:application programming interface)是一组定义.程序及协 ...

  6. Android ORM -- Litepal(1)

    ORM,即Object Relation Mapping,对象关系映射,实现了程序里面的类和数据库里面的数据之间的对应关系,对数据库的操作可以通过对类的操作去实现,不用再写SQL语句,从而提高了开发效 ...

  7. 数据结构：优先队列 基于堆实现（python版）

    #!/usr/bin/env python # -*- coding:utf-8 -*- ''' Author: Minion-Xu ''' #异常类 class HeapPriQueueError( ...

  8. Js 实现登录验证码

    Js代码: /** * 验证码 */function yzm(){ var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a','b','c ...

  9. 高访问量WEB开发中的架构模式，学习从点滴开始

     当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题.为了解决这些性能压力带来问题,我们需要在Web系统架构 ...

  10. spider RPC开发指南

    协议与兼容性 spider使用java语言开发,使用Spring作为IoC容器,采用TCP/IP协议,在此基础上,结合SaaS系统模式的特性进行针对性和重点设计,以更加灵活和高效的满足多租户系统.高可 ...