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

　　工欲善其事，必先利其器

  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. 使用T-SQL找出执行时间过长的作业

        有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下:   SELECT sj.name , ...

  2. Function Set in OPEN CASCADE

    Function Set in OPEN CASCADE eryar@163.com Abstract. The common math algorithms library provides a C ...

  3. 10.JAVA之GUI编程弹出对话框Dialog

    在上节基础上添加对话框显示错误信息. 代码如下: /*弹出对话框显示错误信息,对话框一般不单独出现,一般依赖于窗体.*/ /*练习-列出指定目录内容*/ import java.awt.Button; ...

  4. Java进击C#——应用开发之Asp.net MVC

    本章简言 上一章笔者讲到关于Asp.NET的知识点.了解Asp.NET基本的知识点之后,我们在来学习关于C#的MVC框架就简单多了.显然本章就是来介绍一下关于Asp.NET MVC.对于MVC的思想笔 ...

  5. Nginx最大客户连接数算法一些遐想

    Nginx最大客户连接数算法一些遐想 现在很多互联网公司都在使用nginx,并且替换掉以前的Apache,nginx的优点就不说了,浅聊两句nginx的某些配置参数,找到这些参数设置的目的和关联性,并 ...

  6. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(三)-使用Travis自动部署Hexo(1)

    前言 前面两篇文章介绍了在github上使用hexo搭建博客的基本环境和hexo相关参数设置等. 基于目前,博客基本上是可以完美运行了. 但是,有一点是不太好,就是源码同步问题,如果在不同的电脑上写文 ...

  7. asp.net创建事务的方法

    1.建立List用于存放多条语句 /// <summary> /// 保存表单 /// </summary> /// <param name="context& ...

  8. 发布在即！.NET Core 1.0 RC2已准备就绪！！

    先说点废话,从去年夏天就开始关注学习ASP.NET Core,那时候的版本还是beta5,断断续续不停踩坑.一路研究到11月份RC1发布. 在这个乐此不疲的过程里,学习了很多新的东西,对ASP.NET ...

  9. linux中字体的安装以及Terminal字体重叠问题解决

    安装wps的时候,经常会提示你系统字体缺失,这些字体网上都有,就不分享了,直接讲安装吧. 就比如这个Wingdings字体,在字体目录中新建一个目录Wingdings,将ttf字体文件复制进去,在终端 ...

  10. 【Java学习系列】第2课--Java语法及面向对象

    本文地址 分享提纲: 1. Java程序特点 1.1 基本语法 1.2 字符串 1.3 变量 1.4 Java数组 1.5 Java枚举 1.6 Java修饰符 1.7 Java编译制定在制定目录 2 ...