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

　　工欲善其事，必先利其器

  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. IL指令详细表

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

  2. JavaScript具有自动垃圾回收机制

    JavaScript具有自动垃圾回收机制 原理: 找出那些不再继续使用的变量,然后释放其占用的内存.   正常的生命周期:     局部变量指在函数执行的过程中存在.而在这个过程中,会为局部变量在栈或 ...

  3. OpenCASCADE Job - Shoe Doctor

    鞋博士 鞋博士经过8年沉淀,在鞋类工业4.0全流程平台上积累了相当的技术实力,获投资商亲睐. 新的一年,在投资商协助下,将踏上新的征途,因此诚邀您加盟顶层技术合伙人. 如果您具备以下实力,我们期待您的 ...

  4. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  5. HBase框架学习之路

    1 背景知识 1.1 解决问题 解决HDFS不支持单条记录的快速查找和更新的问题. 1.2 适用情况 存在亿万条记录的数据库,只有千万或者百万条记录使用RDBMS更加合适 确保你的应用不需要使用RDB ...

  6. Hibernate（3）——实例总结Hibernate对象的状态和ThreadLoacl封闭的session

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及的知识点总结如下: Hibernate的内部执行过程(CRUD) 对象的状态及其转换图和例子 使用JUnit测试 使用getCur ...

  7. CLR via C# 摘要一：托管程序的执行模型

    托管程序的执行模型大致如下: 编译源代码为程序集(dll或exe文件),程序集包括了记录相关信息的元数据和IL代码 执行程序集文件时,启动CLR,JIT负责把IL编译为本地代码并执行 IL是微软推出的 ...

  8. 【转】基于.NET平台常用的框架整理

    自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线,让我对这个平台产生了浓厚的兴趣,在工作和学习中也积累 了一些开源的组件,就目前想到的先整理于此,如果再想到, ...

  9. 【C#公共帮助类】 WebHelper帮助类

    如果你是一个新手,如果你刚接触MVC,如果你跟着置顶的那个项目,我们肯定会用到这里面的几个帮助类 它们都在Common类库下,大家一定要记住要点:取其精华去其糟粕,切勿拿来主义~ Applicatio ...

  10. MyBatis的一系列问题的处理（遍历Map集合和智能标签和属性和字段不一样的解决办法 和sql片段）（三）

    一.字段名与属性名(数据库的名字)不一样怎么办? 方案一:在小配置中配置一个resultMapper <!--方案一:resultMapper 字段名与属性名不一致 --> <res ...