HTML的使用方法_如何用html-CSDN博客

本文链接：https://blog.csdn.net/weixin_58744201/article/details/122398740

1.HTML 标签的语法格式

一般情况下，一个 HTML 标签由开始标签、属性、内容和结束标签组成，标签的名称不区分大小写，但大多数属性的值需要区分大小写（为了规范和专业，建议在定义标签时一律采用小写），如下所示：

除了 class 属性外，开始标签中还可以包含其它属性信息，比如 id、title 等，这些我们会在后面进行讲解。

一个 HTML 文档中必须具有一些基本的标签，以便浏览器区分普通文本和 HTML 文档。您可以根据想要实现的效果使用任意数量的标签，但有以下几点需要注意：

所有 HTML 标签都必须放在尖括号< >内；
HTML 中不同的标签可以实现不同的效果；
如果使用了某个标签，则必须使用对应的结束标签来结尾（自闭和标签除外）

自闭和标签

有一些 HTML 标签没有单独的结束标签，而是在开始标签中添加/来进行闭合，这种标签称为自闭和标签。如以下所示：

<img src="./logo.png" alt="C语言中文网Logo" />
<hr />
<br />
<input type="text" placeholder="请输入内容" />

注释的用法：

表示 HTML 注释

2.嵌套HTML标签

大多数 HTML 元素都是可以嵌套使用的，也就是说一个 HTML 标签中可以包含其他的 HTML 标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML标签的嵌套</title>
</head>
<body>
    <h1>C语言中文网<font size="4" color="#666">简介</font></h1>
    <p>
        C语言中文网，一个在线学习<b>编程</b>的网站，目前已经发布了将近 <font color="red">50<sup>①</sup></font> 套教程，包括<i>C语言</i>、<i>C++</i>、<i>Java</i>、<i>Python</i> 等，请<a href="http://c.biancheng.net/sitemap/" target="_blank">猛击这里</a>查看所有教程。
        <hr />
        <small>注①：C语言中文网会持续更新优质教程，教程数量将远远超过 10 套。</small>
    </p>
</body>
</html>

运行结果：

3.什么是属性

属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。

attr="value"

attr 表示属性名，value 表示属性值。属性值必须使用双引号" "或者单引号' '包围。（尽量使用双引号）

示例：

<p id="user-info" class="color-red">欢迎 <font color="red" size="3">小李同学</font> 来到C语言中文网，您已经使用本站 半 年了，这是您第 10 次登录。<p>
<div class="clearfloat">
    <p class="left">这里显示 小李同学 的账号信息</p>
    <p class="right">这里显示 小李同学 的个性签名</p>
</div>

运行结果:

4.通用属性介绍

HTML 标签中有一些通用的属性，如 id、title、class、style 等

1) id

id 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签。

<input type="text" id="username" />
<div id="content">C语言中文网</div>
<p id="ur">http://c.biancheng.net/</p>

2) class

与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。

3) title

title 属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title 属性的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <a href="http://c.biancheng.net/html/" title="HTML教程">HTML教程</a>
</body>
</html>

4) style

使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式，例如设置文本的颜色、字体等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示</title>
</head>
<body>
    <p style="color:yellow;">http://c.biancheng.net/html/</p>
    <img src="./logo.png" style="height:100px;" alt="C语言中文网LOGO">
    <div style="padding:20px;border:5px solid #999;text-align:center;">C语言中文网</div>
</body>
</html>

运行结果：