HTML基础篇 - 基础标签 - Version:0621

最新推荐文章于 2025-07-04 22:31:46 发布

原创最新推荐文章于 2025-07-04 22:31:46 发布 · 542 阅读

1 ·

CC 4.0 BY-SA版权

前端学习笔记 - 渡一教育专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML的基本概念，包括标签使用、属性配置等，并通过实例展示了常见标签的应用，如段落、标题、字体样式等。

HTML，HyperText Markup Language，超文本标记语言。

CSS，负责页面的装修。

JavaScript，动态的人机交互。

根标签，结构化标签。

每个标签都可以添加属性，属性名不需要添加双引号，但是属性值必须添加双引号，二者采用等号连接；如下面字符集设置；

<head>标签，以人类比，就好比人的思想一样，里面内容是给浏览器看的，如编码字符集等，是用户里面看不到的，设置浏览器等；

<head>
    <meta charset="UTF-8"><!--给浏览器设置编码字符集 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="这是一件你穿了就不想脱的衣服" name="description">
   <title>淘宝网，淘，我喜欢！</title><!--设置浏览器标签名称 -->
</head>

GB2312，包含中国的字符集，泰国、韩国等亚裔字符集，但是有不足之处，只能识别简体中文字符集，无法识别繁体字符集；

GBK2312，国家编码字符集扩展版本；

真正常用的是如下两个：unicode编码，万国码；utf-8，其是unicode编码的升级版；

专业素养知识：<thml lang = 'en'>这个属性是告诉搜索引擎爬虫，这个网站是关于什么内容的；en代表内容是英文的，中文是zh；

课外知识：百度，根据网站关键字进行搜索、查询、抓取出来显示；关键字协议，一般五个以内；百度采取“竞价排名”的方式，百度的第二页基本没人看，所以也基本不要钱；竞价排名系统的收费范围是1~999元，挣钱就靠700+以上的，高转换率行业给的，医院，如妇产科、男科、整容整形等的竞价排名费是最贵的；同一个时间段内同一个ip地址多次访问，只算一次；百度大脑，生物行为是否是恶意的，不符合正常浏览网页的生物行为，停留、考虑多长时间等；

SEO，周所周知的秘密，lang属性就属于SEO技术中的一部分；再比如，content属性等；

<body>标签里面的东西是展示给用户看的，类似于皮肤，身体一样的东西。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content = "这是一件你穿了就不想脱的衣服" name = "description">
    <title>淘宝网，淘，我喜欢！</title>
</head>

<body>

</body>

</html>

<p></p>是paragraph标签，是文本成段落先显示；

<h1></h1>到<h6></h6>标签，标题标签；快捷输入方法为h${标题}*6；有三个特征：独成一段；更改字体大小；加粗字体；

<strong></strong>标签，是字体加粗展示；

<em></em>标签，是字体斜体展示；

如何将一段文字又加粗又斜体？

采用标签嵌套的方式来解决，示例源码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="这是一件你穿了就不想脱的衣服" name="description">
    <title>淘宝网，淘，我喜欢！</title>
</head>

<body>
    <strong>
        <em>举个栗子</em>
    </strong>
</body>

</html>

<del></del>标签，有中划线的标签，示例源码如下：：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="这是一件你穿了就不想脱的衣服" name="description">
    <title>淘宝网，淘，我喜欢！</title>
</head>

<body>
    <del style = "color:#999">$50</del>
</body>

</html>

这里加入了CSS行间样式代码，其实style也是<del>标签的一个属性，其值为“color:#999”；

<address></address>标签，用来填写显示地址信息，显示效果为独立成段落，斜体显示；实际应用中，地址展示也不是这样展示的，基本都是后期采用CSS进行修改。简单应用示例源码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="这是一件你穿了就不想脱的衣服" name="description">
    <title>淘宝网，淘，我喜欢！</title>
</head>

<body>
    <address>新疆昌吉市健康西路御景社区，web coffee</address>
</body>

</html>

该标签在实际企业开发中一个用比较少，原因之一就是可以采用常用标签来模拟表示，示例源码如下：

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

<head>
    <meta charset="UTF-8">
    <!--给浏览器设置编码字符集 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="这是一件你穿了就不想脱的衣服" name="description">
    <title>淘宝网，淘，我喜欢！</title>
    <!--设置浏览器标签名称 -->
</head>

<body>
    <p>
        <em>新疆昌吉市健康西路御景社区，web coffee</em>
    </p>
</body>

</html>

<div></div>与<span></span>标签，最重要的两个标签，这二者的区别仅仅在于<div></div>标签显示文本会独立成段显示，而<span></span>标签不会分段显示；在实际应用编程中，基本上在100行代码中有50行代码都是；这两个标签没有什么具体的作用，但是充当非常好的“容器”作用，这个“容器”有下述作用，1.分块明确，划分功能块，划分区间，页面更加结构化，更方便，更规整化，目的好维护，好管理；2.捆绑操作；

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="这是一件你穿了就不想脱的衣服" name="description">
    <title>淘宝网，淘，我喜欢！</title>
</head>

<body>
    <!-- <span style="color:#f40">a</span>
   <em style="color:#f40">b</em>
   <del style="color:#f40">c</del> -->
    <!-- 采用捆绑操作后，可采用如下的方式进行编码： -->
    <div style="color:#f40">
        <span>a</span>
        <em>b</em>
        <del>c</del>
    </div>
</body>

</html>