一.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. 10_Android中通过HttpUrlConnection访问网络，Handler和多线程使用，读取网络html代码并显示在界面上，ScrollView组件的使用

     编写如下项目: 2 编写Android清单文件 <?xml version="1.0" encoding="utf-8"?> <mani ...

  2. hive parition的使用，分dynamic和static两种

    partition是hive提供的一种机制:用户通过指定一个或多个partition key,决定数据存放方式,进而优化数据的查询 一个表可以指定多个partition key,每个partition ...

  3. 文件lseek操作产生空洞文件的方法

    在文件操作过程中,lseek操作可以偏移到文件的任意位置. 在UNIX文件操作中,文件位移量可以大于文件的当前长度,在这种情况下,对该文件的下一次写将延长该文件,并在文件中构成一个空洞,这一点是允许的 ...

  4. iOS中多种方式实现打电话、发短信、写邮件

    一.打电话 打电话--方法1 NSURL *URL = [NSURL URLWithString:@"tel://10010"]; [[UIApplication sharedAp ...

  5. C++语言之静态变量的运用

    #include <iostream> using namespace std ; class Banana { public: static int id ; Banana(void) ...

  6. 使用vs2010 opencv2.4.4编译release版本程序

    大体上要注意一下几点内容: 1.vc++目录的选择上,库目录选择为opencv目录中的staticlib目录 2.在链接->输入->附加依赖库,中添加,相应的staticlib库目录中的所 ...

  7. <<操作系统精髓与设计原理>>读书笔记(一) 并发性:互斥与同步（1）

    <<操作系统精髓与设计原理>>读书笔记(一) 并发性:互斥与同步 并发问题是所有问题的基础,也是操作系统设计的基础.并发包括很多设计问题,其中有进程间通信,资源共享与竞争,多个 ...

  8. MATLAB三点确定圆

    function [circleCenter,radius] = ThreePointCircle(obj,x,y,z) A=[x(1)-y(1),x(2)-y(2);z(1)-y(1),z(2)-y ...

  9. ios中block访问外部变量的一些注意点

    Block类型是一个C级别的语法和运行机制.它与标准的C函数类似,不同之处在于,它除了有可执行代码以外,它还包含了与堆.栈内存绑定的变量.因此,Block对象包含着一组状态数据,这些数据在程序执行时用 ...

  10. 前端技术之_CSS详解第四天

    前端技术之_CSS详解第四天 一.第三天的小总结 盒模型box model,什么是盒子? 所有的标签都是盒子.无论是div.span.a都是盒子.图片.表单元素一律看做文本. 盒模型有哪些组成: wi ...