一.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. Android进阶(十五)socket通信——聊天室

    想做一个聊天室,花费了将近一天的时间,各种错误.讲解知识点之前,絮叨几句:动手能力还是很重要的,有时看似简单的一个问题,当你真正着手去解决的时候就有可能会遇到各种各样的问题,原因之一就是因为你的知识储 ...

  2. [面试算法题]比较二叉树异同-leetcode学习之旅（5）

    问题描述 Given two binary trees, write a function to check if they are equal or not. Two binary trees ar ...

  3. mysql进阶(九)多表查询

    MySQL多表查询 一 使用SELECT子句进行多表查询 SELECT 字段名 FROM 表1,表2 - WHERE 表1.字段 = 表2.字段 AND 其它查询条件 SELECT a.id,a.na ...

  4. window环境下搭建react native及相关插件

    可以先浏览一下中文翻译的开发文档具体了解一下关于React Native,想要查看官方文档可以点http://facebook.github.io/react-native/docs/getting- ...

  5. Java-ServletContext

    //定义了一系列servlet用来与servlet 容器交流的方法 public interface ServletContext { /** * Returns a <code>Serv ...

  6. Linux其他常见压缩备份工具 - dd，cpio

    dd dd 可以读取磁碟装置的内容(几乎是直接读取磁区"sector"),然后将整个装置备份成一个文件呢!真的是相当的好用啊- dd 的用途有很多啦-但是我们仅讲一些比较重要的选项 ...

  7. mybatis源码之PreparedStatementHandler

    /** * @author Clinton Begin */ public class PreparedStatementHandler extends BaseStatementHandler { ...

  8. OpenCV——彩色图像转成灰度图像

    // PS_Algorithm.h #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include <iostr ...

  9. CUDA跟OpenCV的混合编程，注意OpenCV需要重新编译

    1.注意事项 编译的办法参见: http://blog.csdn.net/wangyaninglm/article/details/39997113   以下是程序代码,网上搜的例子: 注意事项:32 ...

  10. IOS空数据页面，网络加载失败以及重新登陆View的封装（不需要继承）

    一.问题 对于B2C和B2B项目的开发者,可能会有一个订单列表为空,或者其他收藏页面为空,用户token失效,判断用户要重新登陆,以及后台服务错误等提示.本篇课文,看完大约10分钟. 原本自己不想写空 ...