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

　　工欲善其事，必先利其器

  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. JavaScript权威设计--JavaScript词法结构(简要学习笔记二)

    1.字符集 JavaScript是用Unicode字符集编写的 2.区分大小写 html不区分大小写,xhtml区分大小写 如:html中onclick可以写成Onclick 但是js中必须写成onc ...

  2. Chrome浏览器Cookie解密

    做过 web 开发的都知道:浏览器会把重要的认证登录认证信息存放到 cookie 中,在 cookie 有效期内,再次访问这个网站的时候就可以直接从 cookie 中获取到登录信息,这样就可以实现自动 ...

  3. .NET Core采用的全新配置系统[1]: 读取配置数据

    提到“配置”二字,我想绝大部分.NET开发人员脑海中会立马浮现出两个特殊文件的身影,那就是我们再熟悉不过的app.config和web.config,多年以来我们已经习惯了将结构化的配置定义在这两个文 ...

  4. UWP开发之Mvvmlight实践五：SuspensionManager中断挂起以及复原处理

    最近比较忙有一段时间没有更新了,再接再厉继续分享. 案例下载:https://github.com/NewBLife/UWP/tree/master/SuspendSample 先我们看看App在生命 ...

  5. Handler系列之内存泄漏

    本篇简单的讲一下平常使用Handler时造成内存泄漏的问题. 什么是内存泄漏?大白话讲就是分配出去的内存,回收不回来.严重会导致内存不足OOM.下面来看一下造成内存泄漏的代码: public clas ...

  6. 读书笔记--SQL必知必会11--使用子查询

    11.1 子查询 查询(query),任何SQL语句都是查询.但此术语一般指SELECT语句. SQL还允许创建子查询(subquery),即嵌套在其他查询中的查询. 作为子查询的SELECT语句只能 ...

  7. 基于Metronic的Bootstrap开发框架经验总结（14）--条码和二维码的生成及打印处理

    在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...

  8. hibernate 中根据id删除一条记录的语句

    qid name like content 1 A 1 the first text 2 B 2 the Second text 1 C 3 the Third text 如上表所示,当我们需要某个q ...

  9. nginx反向代理下thinkphp、php获取不到正确的外网ip

    在记录用户发送短信需要获取用户ip时,tp一直获取的是内网ip:10.10.10.10 tp框架获取ip方法:get_client_ip /** * 获取客户端IP地址 * @param intege ...

  10. JVM调优总结

    堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为操作 ...