HTML 5 快速入门（一）

YTC_040518

已于 2024-09-25 12:24:16 修改

阅读量399

点赞数 7

文章标签： html 前端 java

于 2024-09-24 22:50:58 首次发布

本文链接：https://blog.csdn.net/YTC178/article/details/142437192

版权

1.HTML的基本语法

基础：

HTML文件主要由元素和标签组成，HTML 5 用标签来规定元素 的属性和它在文件中的位置。

1.标签

标签分为单独标签和成对标签

单独标签格式：<元素名称>

成对标签格式：<元素名称> </元素名称>（HTML标签不区分大小写）

可以在标签中设置属性，用来控制HTML 标签建立的元素

例如：

首标签格式：<元素名称属性 1 = "值“ 属性 2 = "值2"......>

尾标签格式：</元素名称>

元素完整定义语法如下：

<元素名称属性 1="值1" 属性2="值2"......> 元素资料 </元素名称>（HTML中可省略用于设置各属性的""）

2.元素

用一对标签 将 一段文字 包含在中间，这段文字与包含文字的 HTML标签 被称为一个元素

HTML 元素内 可以 包含另一个元素，因此整个 HTML文件就是一个大元素包含了许多小元素

2.代码格式

1.类型声明

HTML 中最开始的一行是文件类型声明，告诉浏览器使用哪种 HTML规范，HTML 5的声明为 <!DOCTYPE html>（其中DOCTYPE不区分大小写）

你还可以在后面添加 SYSTEM 标识（不区分大小写），用来兼容一些旧版浏览器以防不兼容HTML 5的规范。例如：

<!DOCTYPE html SYSTEM "about:legancy-compat">（也可以将双引号变为单引号）

<!DOCTYPRE HTML SYSTEM "about:legancy-compat">

2.开始标签

最先开始的标签就是<html> 表示该文件是以超文本标识语言（HTML）编写

现在常用的浏览器可以自动识别HTML文件，并不要求<html>标签

<html>
...
</html>

3.文件头部

1.定义文件标题

规定该文件的标题（出现在Web浏览器窗口的标题栏）

格式：<title>文件标题名</title>

每个HTML文件都必须要有一个 文件标题。

<title>
...
</title>

2.定义元信息

用<meta>标签（不需要结束标签）

该标签的信息不会显示在页面中，一般用来定义 网页编码格式、页面关键字、作者信息

一个头页面中可以有 多个<meta>标签

从HTML5开始，文件的编码格式推荐使用 UTF-8

例如：

设置网页编码格式：<meta charset="UTF-8">

设置页面关键字：<meta name="keyname content="具体的关键字>

设置作者信息：<meta name ="author content="作者的姓名">

<meta charset="utf-8">
<meta name="keyname"content="具体的关键字">
<meta name="author"content="作者的姓名">

3.文件主体

基础：

使用 <body> </body> 一对标签

文件主体包含：文本、超链接、图像、表格、列表等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容
</body>
</html>

1.使用 <div> 标签

<div>标签用来为 HTML文档的内容 提供结构和背景元素。<div> 开始标签和 </div>结束标签之间的所有内容都是用来构成这个块的，其中 包含标签的特性由 <div>标签中的属性来控制，或是通过使用 样式表格式化这个块来控制。<div>标签是分割标签，<div>之间的内容自成一行

说明：块级标签又名块级元素，而块级元素的文本单独占据一行；与其对应的是内联元素，也叫行内标签。

<div> 标签中的属性，如：

（1）<div style="background-color: red;"> 设置背景颜色

（2）样式表格式化：<div class="类名"> div元素被赋予一个类名，这个功能需要与CSS联动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>输出古诗</title>
</head>
<body>
    <div>---春晓---</div>
<div>春眠不觉晓</div>
<div>处处闻啼鸟</div>
<div>夜来风雨声</div>
<div>花落知多少</div>
</body>
</html>

2.使用<span>标签

概念：

HTML 只是赋予内容的手段，大部分HTML 标签都有其意义，然而 <span> 和 <div> 标签似乎没有任何内容上的意义，但与CSS结合时，他们的应用范围很广

语法格式：

<span>...</span>

<span>就是一个内联元素（行内标签）

<span>可以作为插入 CSS 这类风格的容器，或插入class、id等语法内容的容器。

作用：

<span>允许你在 同一行内 组合文本和其它元素，从而创建更加紧凑和灵活的布局。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><span>标签应用</title>
</head>
<body>
<span style="color.red">“我爱你”</span>这句话，不同的语言是怎么说的呢？
英语中是<span style="color"red">"I love you"</span>
韩语中是<span style="color.red">"撒浪嘿"</span>。
</body>
</head>
</html>

3.注释

概念：

不显示在页面中的元素

语法格式：

4.主体结构元素

1.article元素

格式：<article>...</article>

一个 article元素通常有它自己的标题（通常放在一个 header元素 里面），有时还有自己的注脚。例如：

<article>

        <header>

......

        <header>

        <footer>

......

        </footer>

</article>

这样的结构。

article元素可以嵌套使用，内层的内容要与外层的内容 相关联。

<article> 这是外层

......

        <article> 这是内层一

......

        </article> 内层一结束

        <article> 这是内层二

......

        </article> 内层二结束

</article> 外层结束

小结：

article元素表示自包含成分构成的页面的一部分，这部分专用于 独立地分类和复用。

自包含：可以独立于页面的其它部分存在，有自己的标题、内容、注脚等。

2.nav元素

用来构建导航

格式：<nav>......</nav>

作用：

（1）传统导航条：

主流网站上都有不同层级的导航条，其作用是将当前画面重定向到网站的其它主要页面。

（2）侧边导航条：

主流博客网站及商品网站上都有侧边导航，作用是将页面从当前文章或当前商品重定向到其它文章或其它商品页面上。

（3）页内导航：

页内导航的作用是在页面几个主要的组成部分之间进行跳转。

（4）翻页操作：

在多个页面的上下页或博客网站的上下篇文章之间进行滚动。

注：HTML5中不要用 menu元素代替 nav元素，因为 menu元素是用在一系列发出命令的菜单上的，是一种交互性的元素，用在Web应用程序中。

使用nav元素实现导航：

<h1>编程词典简介</h1>
<nav>
    <ul>
        <li><a href="/">主页</a></li>
        <li><a href="/">简介文档</a></li>
        ...more...
    </ul>
</nav>
<article>
    <header>
        <h1>编程词典功能介绍</h1>
        <nav>
            <ul>
                <li><a href="#gl">管理功能</a></li>
                <li><a href="#kf">开发功能</a></li>
                ...more...
            </ul>
        </nav>
    </header>
    <settion id="gl">
        <h1>编程词典的管理模式</h1>
        <p>编程词典的管理模式介绍</p>
    </setction>
    <setction id="kf">
        <h1>编程词典的开发模式</h1>
        <p>编程词典的开发模式介绍</p>
            </section>
        ...more...
        <footer>
            <p>
                <a href="?edit">编辑</a>
                <a href="?delete">删除</a>
                <a href="?rename">重命名</a>
            </p>
        </footer>
</article>
<footer>
    <p><small>版权所有：杨天成</small></p>
</footer>

3.aside元素

格式：<aside>......</aside>

aside所包含的内容，是与其周围内容无关的，是与周围内容独立分开的，往往用边栏表示。

主要用法：

（1）被包含在article 元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关信息、名词解释等

（2）在article 元素之外使用，可以作为页面或站点全局的附属信息部分。最典型的就是侧边栏。其中内容是可以友情链接的，博客中其它文章列表、广告单元等

4.pubdate属性

布尔属性，用来表示特定的<time>是一篇<article> 或整个 <body>内容的发布日期。

没有假设一篇 <article> 的 <header> 中的任何一个 <time> 元素就是其发布日期的原因：、

<article>
    <header>
        <h1>明日科技<time datetime=2023-03-26>3月26日</time>的放假通知
        <p>发布日期：<time datetime=2023-3-26 pubdate>2023年3月26日</time></p>
    </header>
</article>

在这个例子中有 两个time元素，分别定义了两个日期——放假日期 和 通知发布日期。两个日期都使用了time元素，因此需要使用pubdate属性表明哪个time元素代表了通知的发布日期。

5.hgroup 元素

标题及其子标题进行分组的元素。hygroup 元素通常会对 h1 ~ h6 元素进行分组，

6.footer 元素

footer 可以作为其上层父级内容区块或是一个根区块的脚注。如：作者、相关阅读链接、版权信息等

<footer>
    <ul>
        <li>版权信息</li>
        <li>联系方式</li>
    </ul>
</footer>

与header元素一样，一个页面中也没有限制footer元素的个数。同时，可以为article元素或section元素添加footer元素，如下面的两个实例：

（1）在 article 元素中添加 footer元素的实例：

<article>
    文章内容
    <footer>
    文章的脚注
    </footer>
</article>

（2）在 section 元素中添加 footer的实例：

<section>
    分段内容
    <footer>
    分段内容的脚注
    </footer>
</section>

7.address 元素

定义当前的 article元素或文档的作者或拥有者的联系信息，不应该使用address 来描述邮政地址。

联系信息包括： Email地址、邮政地址、或其它形式。

下面代码中展示了一些博客中谋篇文章评论者的名字及其在博客中的网址链接：

<address>
    <a href="http://blog.***.com.cn/damai571">大麦</a>
</address>

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>文章内部的 aside 元素示例</title>
</head>
<body>
<footer>
    <div>
        <address>
            <a href="http://blog.***.com.cn/damai571" title="作者：大麦">大麦</a>
        </address>
        发表于<time datetime="2023-02-27">2023年2月27日</time>
    </div>
</footer>
</body>