一.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. Ext.Net 1.x_Ext.Net.GridPanel 事件

    1.行双击事件 首先设置选择方式为RowSelectionModel单行选中 [html] view plaincopy <SelectionModel> <ext:RowSelec ...

  2. URLClassLoader

    package com.reflect.load; import java.net.URL; import java.net.URLClassLoader; import java.sql.Conne ...

  3. C语言中的位运算和逻辑运算

    这篇文章来自:http://blog.csdn.net/qp120291570/article/details/8708286 位运算 C语言中的位运算包括与(&),或(|),亦或(^),非( ...

  4. DOS窗口如何实现复制粘贴

    最近很多时候直接ctrl+c和ctrl+v无法实现DOS中的复制与粘贴,自己输入很麻烦.就要选择其他方式.查找资源后,总结如下: 方法一:第一种方式:右键标记-->选中-->标题栏右键编辑 ...

  5. Notice to users of DB Query Analyzer in Windows 7, Windows 8 and Windows 10

        UnlikeWinXP, VISTA, Windows2000, Windows Nt and Win98,Windows 7 / Windows 8 / Windows 10 select  ...

  6. 深入理解JNI

    深入理解JNI 最近在学习android底层的一些东西,看了一些大神的博客,整体上有了一点把握,也产生了很多疑惑,于是再次把邓大神的深入系列翻出来仔细看看,下面主要是一些阅读笔记. JNI概述 JNI ...

  7. iOS监听模式系列之关于delegate（代理，委托）的学习

    首先,大家应该都明白的是委托是协议的一种,顾名思义,就是委托他人帮自己去做什么事.也就是当自己做什么事情不方便的时候,就可以建立一个委托,这样就可以委托他人帮自己去实现什么方法. 其次,我简单的总结了 ...

  8. windows下ruby中显示中文的3种方法

    A: 1将x.rb编码为ascii格式 2 在x.rb开头加上 #code:gbk或者 #coding:gbk B: 1 将x.rb编码为utf-8格式 2 在x.rb开头加上 #code:utf-8 ...

  9. 面试心得随谈&线程并发的总结

    ---恢复内容开始--- 线程同步有两种实现方式: 基于用户模式实现和用内核对象实现.前者偏于轻量级,性能也更好,但是只能用于同一进程间的线程同步,后者重量级,性能消耗更大,跨进程. 研读了一下win ...

  10. Demo4

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...