提示

本文讲解 HTML 一些基础的语法。@ermo

# HTML 基础

# 注释

注释是用来帮助程序员理解代码逻辑的，浏览器并不会将注释内容渲染到网页上。

使用  将注释内容包裹起来。

<!-- 注释内容 -->

# 标签的组成关系

HTML 中大部分标签都是成对出现了。比如一个 div 标签。

<div>some text</div>

标签之间的关系有两种，嵌套关系和并列关系。

<head>
    <title></title>
</head>
<body>

</body>

head 和 title 属于嵌套关系。前者是后者的父节点。

head 和 body 属于并列，彼此之间为兄弟节点关系。

在实际开发过程中，通过已知节点寻找另一个节点的技巧经常会用到。

# 基本标签

# title

title 标签用于定义网站的标题，放在 head 标签内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站标题</title></title>
</head>
<body>
    第一个网页，你好！
</body>
</html>

上述网页在浏览器打开后，当前网页的标签顶部会展示标题：网站标题。

# meta

meta 标签用于存放元数据。这个标签不是给用户看的，而是用于搜索引擎蜘蛛的抓取。

SEO 的过程中会用到。

meta 标签常用到的就是 keywords 和 description 这两个属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站标题</title></title>
    <meta name="keywords" content="Java 后端知识笔记,前端开发"/>
    <meta name="description" content="Java 后端知识笔记是一个分享知识的技术网站"/>
</head>
<body>
    第一个网页，你好！
</body>
</html>

# style

style 标签用于放置样式内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* 样式 */
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        第一个网页，你好！
    </div>
</body>
</html>

上述代码在网页中打开后，可以看到 body 内的文字变成了红色。

# script

script 标签用于编写 JavaScript 内容，控制元素的行为。

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        // 编写 JavaScript 代码
        alert("Warning window.");
    </script>
</head>
<body>

</body>
</html>

上述代码在网页中打开后会出现一个警告弹窗。

# link

link 标签可以引入外部的 CSS 样式文件。这样可以将 HTML 代码和 CSS 代码完全分离，便于开发与阅读。

<!DOCTYPE html>
<html lang="en">
<head>
    <link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
    <div>Some text.</div>
</body>
</html>

index.css 文件的内容。

div {
    color: red;
}

上述代码在网页中打开后，文字会变成红色。

# 标题标签

标题标签是 h1 到 h6，字体从大到小。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
</body>
</html>

# p

p 标签为段落标签。多个段落标签的内容间会有间隔。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <p>一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字。</p>
    <p>一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字。</p>
</body>
</html>

# br

br 为换行标签，与 p 的区别是，文字即使没有撑满页面，也会强制换行。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <p>一段简单的文字一段简单的文字一段简单的文字 <br> 一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字。</p>
    <p>一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字。</p>
</body>
</html>

# hr

hr 是水平分割线，属于单标签，使用 hr 后会在页面上展示一条水平线。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <h1>标题</h1>
    <hr>
    <p>一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字一段简单的文字。</p>
</body>
</html>

# 字体格式化标签

b 标签的作用是加粗文字。

u 标签的作用是添加下划线。

i 标签的作用是让字体变为斜体。

s 标签的作用是添加删除线。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
   <b>加粗</b>
   <i>倾斜</i>
   <u>下划线</u>
   <s>删除线</s>
</body>
</html>

# img

img 是图片标签，可以在网页中嵌入图片。

图片标签有三个属性：

src 用于存放图片的路径
alt 用于存放图片的描述，主要是给搜索引擎蜘蛛检索，图片显示失败也会展示当前描述文字
title 用于存放图片的描述，鼠标移入图片内部会展示当前描述文字

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <img src="img/logo.png" alt="" title="图片">
</body>
</html>

img 还有2个常用的属性，是 width 和 height，分别代表宽和高。

在 img 中设置一个值即可，图片会自动等比例缩放。

<img src="img/logo.png" alt="" title="图片" width="100">

# audio

audio 是音频标签，用于在网页中插入音频。

audio 有以下几个常用的属性：

src 用于存放音频的路径
controls 用于显示音频播放的控件
autoplay 用于自动播放音频
loop 代表循环播放

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <audio src="img/music.ma3" controls loop autoplay></audio>
</body>
</html>

# video

video 是视频标签，用于在网页中插入视频内容。

video 有以下几个常用属性：

scr 用于存放视频的路径
constrols 用于显示视频播放控件
autoplay 用于自动播放视频
loop 代表视频循环播放

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <audio src="img/video.ma4" controls loop autoplay></audio>
</body>
</html>

# a

a 是超链接标签，用于从一个网页跳转到另一个页面。在网页中使用频率非常高。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <a href="https://ermo.cc">二默</a>
</body>
</html>

上述网页点击「二默」后会在 当前网页 跳转到 https://ermo.cc 网址。

a 标签有2个属性：href 和 target。

href 属性用于存放跳转链接的地址，这个地址可以是内部链接和外部链接。

<a href="https://ermo.cc">二默</a>

上例会跳转到外部网址，即外部链接。

<a href="page.html">二默</a>

上例会跳转到相对路径的 page.html 网页，即内部链接。

href 还有一个作用，就是可以设置 锚点链接。

当一个网页特别长的时候，点击锚点链接可以快速跳转到网页的某一个位置。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <a href="#top">顶部</a>
    <a href="#middle">中部</a>
    <a href="#foot">底部</a>

    <div id="top">顶部网页</div>
    <br>
    <!-- 省略大量网页 -->
    <div id="middle">中部网页</div>
    <br>
    <!-- 省略大量网页 -->
    <div id="foot">底部网页</div>
</body>
</html>

在实战开发中常用到3中阻值超链接跳转的方法。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <a href="javascript:void(0);">不跳转</a>
    <a href="javascript:;">不跳转</a>
    <a href="#">不跳转</a>
</body>
</html>

target 代表超链接跳转方式，有以下4中可选值：

_self 在原窗口打开链接，默认值
_blank 在新窗口打开链接
_parent 在父窗口打开链接
_top 在顶层窗口打开链接

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <a href="https://ermo.cc" target="_blank">blank</a>
    <a href="https://ermo.cc" target="_self">self</a>
    <a href="https://ermo.cc" target="_parent">parent</a>
    <a href="https://ermo.cc" target="_top">top</a>
</body>
</html>

# 列表标签

列表标签分为三种：

有序列表
无序列表
自定义列表

（1）有序列表

ol 即 Ordered List 的缩写，li 即 List 的缩写。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <ol>
        <li>Java</li>
        <li>Vue</li>
        <li>JavaScript</li>
        <li>Python</li>
    </ol>
</body>
</html>

ol 有一个 type 属性，决定列表序号的类型：

1，阿拉伯数字，为默认值
a，小写英文字母
A，大写英文字母
i，小写罗马数字
I，大写罗马数字

（2）无序列表

ul 即 Unordered List 的缩写

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <ul>
        <li>Java</li>
        <li>Vue</li>
        <li>JavaScript</li>
        <li>Python</li>
    </ul>
</body>
</html>

ul 也有一个 type 属性，决定列表序号的形状：

disc，实心圆，为默认值
circle，空心圆
square，正方形

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <ul type="disc">
        <li>Java</li>
        <li>Vue</li>
        <li>JavaScript</li>
        <li>Python</li>
    </ul>

    <ul type="circle">
        <li>Java</li>
        <li>Vue</li>
        <li>JavaScript</li>
        <li>Python</li>
    </ul>

    <ul type="square">
        <li>Java</li>
        <li>Vue</li>
        <li>JavaScript</li>
        <li>Python</li>
    </ul>
</body>
</html>

（3）自定义列表

自定义列表是元素与注释的组合。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <dl>
        <dt>Java</dt>
        <dd>一门广泛使用的服务端语言</dd>

        <dt>JavaScript</dt>
        <dd>一门广发使用的脚本语言</dd>

        <dt>Vue</dt>
        <dd>一门流行的前端框架</dd>
    </dl>
</body>
</html>

← 快速开始表格 →