zoukankan      html  css  js  c++  java
  • 一个最简单的网页是如何构成的

    一个最简单的网页是如何构成的


    一个最最最简单的网页是怎么做出来的呢?首先我们先来简单的了解一下HTML语言,HTML是网络的通用语言,一种简单、通用的全置标记语言。HTML允许网页建设者建立文本与图片相结合的复杂页面,无论使用的是什么类型的电脑或浏览器,这些页面可以被网上任何所人浏览到。比如,你现在看到的就是这种语言写的页面。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>

     HTML的基本组成结构


    1、<!DOCTYPE html >


    这是一个标准网页的声明,<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML规范,这样浏览器就能了解文档类型。

    2、<html>······</html>


    此元素可告知浏览器,这是一个 HTML 文档。<html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间的是文档的头部和主体。


    3头部<head>······</head>:


    <head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
    文档的头部描述了文档的各种属性和信息,包括文档的标题<title>。<title> 定义了文档的标题,它是 head 部分中唯一必需的元素。

    在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

    4、元标签<meta>


    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签永远位于 head 元素内部。

    5、眼睛<title>······</title>


    就好像人的眼睛一样,它是心灵的窗口,而一个网页的眼睛应该就是它的页面的标题title了,我们都知道眼睛是长在头上的,所以,<title>标题</title>这些应放在<head>和</head>之间。也就是 <head><title>标题</title></head>

    6、身体<body>······</body>


    身体body是网页最主要的部分了,因为上面写的那些东东网页是不显示出来的,而大家所看到的页面页就是身体部分了(当然它的TITLE可以在浏览器的最左上角可以看到)。
    body的写法是:<body>页面内容</body> ,网页的主体布局就在body里面进行。

    7、在HTML5时代,新定义了大量的语义化结构化标签


    结构化标签优点:

    1、方便浏览器处理和识别,提升了网页的质量和语义。

    2、减少了大量无意义的div标签,增强代码的可读性。

    结构化标签:(header,nav,body,article,section,aside,hgroup,figure,figcaption,footer)

    <header>定义文档的页眉
    <nav>定义导航链接的部分
    <article>定义外部的内容,可以是一篇新的文章
    <section>定义文档的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
    <aside>定义article以外的内容,aside的内容可用作文章的侧边栏
    <figure>用于对元素进行组合,使用figcaption元素为元素组添加标题
    <figcaption>定义figure元素的标题
    <hgroup>用于对section或网页的标题进行组合,使用figcaption元素为元素添加标题
    <time>定义日期或时间,或者两者。
    <footer>定义section或文档的页脚
    最后,别忘了把这些部分组成一体----网页,所以咱们就用<html></html>把他们给包起来。


    8、示例代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>标题<title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="本页描述或关键字描述" />
    </head>
    <body>
    <header>
    <nav></nav>
    </header>
    <article></article>
    <aside></aside>
    <footer>
    </
    footer> </body> </html>
    巴中市职业中学罗海老师
  • 相关阅读:
    NSString 处理
    我的第一个IOSDemo
    NSArray创建和使用
    NSDate
    NSDictionary
    flash全屏代码
    getBounds
    运用递归随机出与上一个数不重复的数
    标签跟随鼠标移动
    保存数据到本地
  • 原文地址:https://www.cnblogs.com/bzluohai/p/12699331.html
Copyright © 2011-2022 走看看