html基础起航

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

　　工欲善其事，必先利其器

浏览器要有吧~ 比如：IE、Chrome、Firefox……
纯文本编辑软件不可少~ 比如：最简单的记事本就可以了

打开记事本，输入以下示例代码：

 <!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基础起航的更多相关文章

Android零基础入门第15节：掌握Android Studio项目结构，扬帆起航
原文:Android零基础入门第15节:掌握Android Studio项目结构,扬帆起航经过前面的学习,Android Studio开发环境已准备OK,运行Android应用程序的原生模拟器和Ge ...
MySQL学习基础之起航篇
MySQL 学习来自慕课网<与MySQL的零距离接触> MySQL是一个开源的关系型数据库管理系统 MySQL分为社区版和企业版 MySQL登录和退出相关的命令参数描述 -D,--da ...
C++基础——模拟事务（2）Composite模式
=================================版权声明================================= 版权声明:原创文章禁止转载请通过右侧公告中的“联系邮 ...
C++基础——模拟事务（1）COMMAND模式
=================================版权声明================================= 版权声明:原创文章禁止转载请通过右侧公告中的“联系邮 ...
C++学习笔记（一）：C++基础知识
一.C++基础知识新的数据类型 C语言中的数据类型 C++中新的数据类型思考:新的数据类型有什么好处?请看下面的代码: 可以见得:新的类型使整个程序更加简洁,程序变得易读易懂!这个就是bool类型 ...
Linux实战教学笔记20:初级阶段结束，中级阶段起航
第二十节第一阶段结束第二阶段起航标签(空格分隔): Linux实战教学笔记-陈思齐一,承上 Linux实战教学笔记的基础核心能力阶段也就是第一阶段到此也就告一段落了.如果同学们能基本全都掌握,再 ...
4-c++教程起航篇-学习笔记
c++教程起航篇我们会讲C++那些事,C++与C语言的关系. C++诞生于贝尔实验室. C++之父: 本贾尼·斯特劳斯特卢普 C++社区排行榜最新排行,c++排名第三,Python排名第四 C++ ...
Android零基础入门第29节：善用TableLayout表格布局，事半功倍
原文:Android零基础入门第29节:善用TableLayout表格布局,事半功倍前面学习了线性布局和相对布局,线性布局虽然方便,但如果遇到控件需要排列整齐的情况就很难达到要求,用相对布局又比较麻 ...
Android零基础入门第30节：两分钟掌握FrameLayout帧布局
原文:Android零基础入门第30节:两分钟掌握FrameLayout帧布局前面学习了线性布局.相对布局.表格布局,那么本期来学习第四种布局--FrameLayout帧布局. 一.认识FrameL ...

随机推荐

【Win 10 应用开发】TCP通信过程
基于TCP协议的通信,估计大伙儿都不陌生的,以前玩.net或玩C++的时候应该玩得很多吧.现在老周简单介绍一下在RT中如何用. TCP是基于连接的,所以,肯定有一方是监听者,通常称服务端或服务器,它负 ...
【Win 10应用开发】自定义浮动层——Flyout
最近几天总是下雨,真是“何处秋窗无雨声”,也“不知风雨几时休”. 好,进入正题. 弹出层有三种. 第一种是ContentDialog,即内容对话框,它其实类似于模态对话框,弹出后会覆盖整个窗口区域,并 ...
ui-router中使用ocLazyLoad和resolve
1.AngularJS按需加载 AngularJS主要应用开发SPA(Single Page Application)项目,所以在小型项目中,services.filters和controllers都 ...
javascript中的函数式声明与变量式声明
观察下面两段代码,试写出hello('word');的运行结果: // 变量式声明 function hello(msg){ alert(msg); var msg = function(){}; a ...
绝对干货，教你4分钟插入1000万条数据到mysql数据库表，快快进来
我用到的数据库为,mysql数据库5.7版本的 1.首先自己准备好数据库表其实我在插入1000万条数据的时候遇到了一些问题,现在先来解决他们,一开始我插入100万条数据时候报错,控制台的信息如下: ...
Qt信号与槽自动关联机制
参考链接1:http://blog.csdn.net/skyhawk452/article/details/6121407 参考链接2:http://blog.csdn.net/memory_exce ...
js与java正则表达式处理字符串问题
在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要.正则表达式就是用于描述这些规则的工具.换句话说,正则表达式就是记录文本规则的代码.合理使用正则表达式确实会为程序员省去很多字 ...
Struts 2 数据校验要用到的类和两种校验方式以及一些校验问题的解决
通过继承ActionSupport类来完成Action开发,ActionSupport类不仅对Action接口进行简单实现, 同时增加了验证.本地化等支持 .真实开发中自定义Action都需要继承该类 ...
hideSoftInputFromWindow
有的时候会碰到软键盘不好关闭,然后就去调界面代码,发现不行,说到底还是对软键盘不熟悉的原因,软键盘windowSoftInputMode有很多种如果你默认的activity的模式为默认的,或者sta ...
整理UIImagePickerController问题
[assetsLibrary addAssetsGroupAlbumWithName:@"iOSDevTip1" resultBlock:^(ALAssetsGroup *grou ...

html基础起航

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

随机推荐

热门专题