一.HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
包含head及body,head是给浏览器看的，不是网页内容。

二.实例

   

<!DOCTYPE html>
<html lang="en">
<head> <!--head部分,填入给浏览器看的内容(以下文字部分均为注释)-->
    <meta charset="UTF-8">
    <title>The blah</title>
    <link rel="stylesheet" type="text/css" href="homework.css"> <!--引用文件夹中的css样式:homework.css-->
</head>
<body> <!--body部分,填入在网页上可见的内容,也就是给人看的内容-->
    <div class="header"> <!--第一个div,对应header头部部分,使用class=""引用css中对应的样式-->
        <img src="data:images/blah.png"> <!--引用logo图片-->
        <ul class="nav"> <!--使用ul标签构建导航模块,并且引用导航样式-->
            <li><a href="#">Home</a></li>  <!--使用三个li标签套嵌a标签,创建3个带链接的导航栏-->
            <li><a href="#">Site</a></li>
            <li><a href="#">Other</a></li>
        </ul>
    </div>
    <div class="main-content"> <!--第二个div,对应content内容部分-->
        <h2>The Beach</h2>  <!--使用h2标签实现标题样式-->
        <hr>  <!--使用hr标签实现水平分割线,需要注意的是这个标签比较特殊,在html中只有开始标签<hr>,没有结束标签</hr>-->
        <ul class="photos"> <!--使用ul标签构建图片模块,并且引用图片样式-->
            <li><img src="data:images/0001.jpg" width="150" height="150" alt="Pic1"></li> <!--使用三个li标签套嵌img标签,创建3个并列的图片,图片限定了宽高;alt是 img标签的属性,是图片的文字提示-->
            <li><img src="data:images/0003.jpg" width="150" height="150" alt="Pic2"></li>
            <li><img src="data:images/0004.jpg" width="150" height="150" alt="Pic3"></li>
        </ul>
        <p> <!--p标签实现一段文字的效果-->
            stretching from Solta to Mljet, and this unique cycling trip captures the highlights with an ideal
            balance of activity, culture and relaxation. Experience the beautiful island of Korcula with its picturesque old town,
            the untouched beauty of Vis, and trendy Hvar with its Venetian architecture. In the company of a cycling guide,
            this stimulating journey explores towns and landscapes, many of which are on UNESCO's world heritage list.
            Aboard the comfortably appointed wooden motor yacht,
            there is ample time between cycles to swim in the azure waters and soak up the ambience of seaside towns.
        </p>

    </div>
    <div class="footer">  <!--第三个div,对应footer页脚部分-->
        <p>&copy; Mugglecoding</p> <!--&copy;是©的固定写法-->
    </div>
</body>
</html>
运行效果如下：

HTML结构及基础语法的更多相关文章

  1. Python学习笔记(Ⅰ)——Python程序结构与基础语法

    作为微软的粉丝,最后终于向Python低头了,拖了两三个月终于下定决心学习Python了.不过由于之前受到C/C#等语言影响的思维定式,前期有些东西理解起来还是很费了些功夫的. 零.先抄书: 1.Py ...

  2. GoLand（二）语言结构和基础语法

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.Go语言结构1.Go语言有6大部分组成,分别是:包声明.引入包.函数.变量.语句或表达式.注释2.输出一个He ...

  3. javascript基础语法——词法结构

    × 目录 [1]java [2]定义 [3]大小写[4]保留字[5]注释[6]空白[7]分号 前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫 ...

  4. Verilog HDL基础语法讲解之模块代码基本结构

    Verilog HDL基础语法讲解之模块代码基本结构   本章主要讲解Verilog基础语法的内容,文章以一个最简单的例子"二选一多路器"来引入一个最简单的Verilog设计文件的 ...

  5. Java05-Java基础语法（四）循环结构

    Java05-Java基础语法(四)循环结构 循环结构(重复/迭代):根据条件重复执行部分语句 1.while循环结构 while(条件表达式){ 循环体语句; } 1)语法:a.while是关键字 ...

  6. 【Day1】4.基础语法及分支结构

     视频地址(全部) https://edu.csdn.net/course/detail/26057 课件地址(全部) https://download.csdn.net/download/gentl ...

  7. 基础语法-循环结构for

    基础语法-循环结构for 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.for循环格式 for(初始化表达式;循环条件表达式;循环后的操作表达式){ 执行语句(循环体); } ...

  8. 基础语法-循环结构do...while

    基础语法-循环结构do...while 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.do...while语句格式 do{ 执行语句; }while(条件表达式); 温馨提示: ...

  9. 基础语法-循环结构while

    基础语法-循环结构while 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.while语句格式 while(条件表达式){ 执行语句; } 二.while语句案例 /** * ...

随机推荐

  1. my project 中git使用过程（基本操作流程）

    1.g  it clone git@name:server/BM/APPS.git 则BM_APPS.git项目被下载到当前目录下了,这时git@name:server/BM/APPS.git就是自己 ...

  2. 《java入门第一季》之StringBuffer小案例

    这里是针对其反转功能来举的例子,再对比之前写的一篇String类的反转功能,StringBuffer明显提高了代码量,提高了效率. import java.util.Scanner; /* * 把字符 ...

  3. LayoutInflater和inflate的用法，有图有真相

    1.概述 有时候在我们的Activity中用到别的layout,并且要对其组件进行操作,比如: A.acyivity是获取网络数据的,对应布局文件为A.xml,然后需要把这个数据设置到B.xml的组件 ...

  4. Java集合之WeakHashMap

    纸上得来终觉浅,绝知此事要躬行  --陆游    问渠那得清如许,为有源头活水来  --朱熹 WeakHashMap继承于AbstractMap,同时实现了Map接口. 和HashMap一样,Weak ...

  5. 《java入门第一季》之面向对象（方法重写问题）

    方法重载的引入:根据一个案例: /* 继承中成员方法的关系: A:子类中的方法和父类中的方法声明不一样,这个太简单. B:子类中的方法和父类中的方法声明一样,这个该怎么玩呢? 通过子类对象调用方法: ...

  6. Cocos2D的OALSimpleAudio预加载音频

    在OALSimpleAudio接口中,没有委托机制和通知机制告诉你什么时候预加载完成.也不需要这样的机制. 如下代码: //Listing 11-1. Preloading a background ...

  7. C/C++中如何产生伪随机数

     1. C语言中的伪随机数产生函数 本节主要参考自一博文及cppreferrence. 我们知道rand()函数可以用来产生随机数,但是这不是真正意义上的随机数,是一个伪随机数,是根据一个数(我们可以 ...

  8. Mybatis的resultType

    使用mybatis去查询数据时,没有指定resultType,mybatis无法返回正常结果,当然在web中并没有出现报错,所以有点坑自己了,所以需要使用如下配置: <select id=&qu ...

  9. 关于getch()函数

    从百度上得知: 这个函数是一个不回显函数,当用户按下某个字符时,函数自动读取,无需按回车,有的C语言命令行程序会用到此函数做游戏,但是这个函数并非标准函数,要注意移植性! 所以有这样的一个接口,那就很 ...

  10. rails中validates_confirmation_of验证方法无效的解决办法

    rails的model中提供了很多种自带的验证方法,validates_confirmation_of可以验证变量xxx和xxx_confirmation是否相等:这可以用于验证2遍输入的密码是否一致 ...