新建HTML5文档

程序员文章站 2024-03-25 16:33:22

...

新建HTML5文档

1-头部信息
在HTML文档的头部区域存储着各种网页的基本信息，这些信息主要被浏览器采用，不会显示在网页中，另外搜索引擎也会检索这些信息，因此重视并设置头部信息非常重要。

浏览器会把文档的标题放在窗口的标题栏或状态栏中显示，当把文档加入到用户的链接列表，收藏夹或者书签列表时，标题将作为该文档的默认名称。

使用meta标签可以定义网页的元信息。

2-构建网页的通用结构
HTML5包含一百多个标签，大部分继承自HTML4，这些标签基本都被放在主体区域body中，正确的选用HTML标签可以避免代码冗余，在设计网页时候不仅需要使用div构建通用网页结构，还要使用下面几类标签来完善网页结构。
h1,h2…h6:定义文档标题，1级标题到6级标题
p：定义段落文本
ul,ol,li：定义列表信息
table,tr,td:定义表格结构
form,input,textarea:定义表单结构
span：定义行内包含框

使用div和span
文档结构的基本构成元素是div，div是division，表示区块的意思，通常是将指定内容包围在div中，并分配id和class，就可以在文档中添加有意义的结构。

3-构建HTML新结构
article表示文章，用来标识页面中一块完整的，独立的，可以被转发的内容。artclie通常包含标题header，段落p,脚注footer，区块section

section表示区块，用于表示文档中的节，在页面上多对内容进行分区，例如，章节，页眉，页脚等。
div元素关注结构的独立性，而section元素关注内容的独立性。

下面的示例混用article和section.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article和section的混用</title>
</head>
<body>
<article>
    <header>
        <h1>蝶恋花</h1>
        <h2>晏殊</h2>
    </header>
    <p>槛菊愁烟兰泣露，罗幕轻寒，燕子双飞去。明日不谙离恨苦，斜光到晓穿朱户。</p>
    <p>昨夜西风凋碧树，独上高楼，望尽天涯路。</p>
    <section>
        <h2>解析</h2>
        <article>
            <h3>注释</h3>
            <p>槛：栏杆</p>
            <p>罗幕：丝罗的帷幕，富贵人家所用</p>
            <p>朱户：指大户人家</p>
        </article>
        <article>
            <h3>评析</h3>
            <p>这首诗真的不错，本人爱了，本菜鸡喜欢，勾起了我的暮秋怀人之情</p>
            <p>如果有一天我们再相逢，睁开您的眼睛看看谁才是英雄！！</p>
        </article>
    </section>
</article>
</body>
</html>

对于session元素的使用应注意以下问题：
1-不要将session元素设置成样式的结构容器，对于此类操作应使用div来实现。
2-如果article，aisde或nav更符合语义使用条件，对此类操作应该使用div元素来实现。
3-不要为没有标题的内容区使用section元素。

下面设计一个HTML页面，整个页面包含两个部分，标题部分和主要部分，标题部分包括网站标题，提示性标题和副标题
主要内容包括4个部分，导航nav,文章块article,侧边栏aside,脚注footer，文章块内容荣包含三个部分，标题部分，正文部分，脚注部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的小树林</title>
</head>
<body>
<header>
    <h1>我的小树林</h1>
    <h2>做个有态度的程序</h2>
    <h4>道友们，一起加油吧</h4>
</header>
<!--整个页面包含两个部分，标题部分和主要部分，标题部分包括网站标题，提示性标题和副标题
主要内容包括4个部分，导航nav,文章块article,侧边栏aside,脚注footer
文章块内容荣包含三个部分，标题部分，正文部分，脚注部分
-->
<main>
    <nav>
        <h3>导航栏</h3>
        <a href = "index.jsp">博客园</a>
        <a href = "index.jsp">首页</a>
        <a href = "index.jsp">新随笔</a>
        <a href = "index.jsp">联系</a>
        <a href = "index.jsp">管理</a>
    </nav>
    <section>
        <h2>文章</h2>
        <article>
            <header><h1>戏说HTML</h1></header>
            <p>褪一份浮躁，守一份安静，握一份真诚，携一份善良，做个简简单单的程序员！！！</p>
            <footer>
                文章脚注
            </footer>
        </article>
    </section>
    <aside>
        <h3>辅助信息</h3>
    </aside>
    <footer>
        <h2>网页脚注</h2>
    </footer>
</main>
</body>
</html>

上一篇： Jsp 博客分类： java jsp九大内置对象

下一篇： string类型转int类型的三种方法速率比较

新建HTML5文档