HTML网页标签代码基本教学（1）基本标签学习

最新推荐文章于 2023-01-30 10:00:00 发布

wangzirui32

最新推荐文章于 2023-01-30 10:00:00 发布

阅读量2.9k

点赞数 4

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/wangzirui32/article/details/113775838

版权

HTML 专栏收录该内容

21 篇文章 4 订阅

订阅专栏

HTML全名超文本标记语言（Hyper Text Markup Language），可以用来制作网页。它有一套语法规则，通过这些语法规则，就可以设计出丰富多彩的网页了。
首先，HTML标签定义格式为：

<标签名>标签内容</标签名>

以<标签名>开头，以</标签名>结尾。
还有亿点要说明，HTML代码最常使用两个空格进行缩进，当然，也可以为4格，3格，甚至可以不用缩进。但我建议缩进代码，因为这利于网页后期开发时的修改。
开始今天的学习吧！

html 标签定义网页代码

用于标识网页代码的开始位置与结束位置，如：

<!DOCTYPE html>
<html>
  网页代码
</html>

注：第一行的代码用于标识这个文件使用的HTML规范。

head 标签设置网页头部信息

用于定义网页的头部信息，格式：

<!DOCTYPE html>
<html>
  <head>头部信息</head>
</html>

这个标签嵌套在html标签里。

meta 标签描述HTML文档的属性

用于描述HTML文档的属性，例如作者，创建日期等。经常用于声明HTML文档在外部脚本文件中使用的字符编码。如果外部文件中的字符编码与主文件中的编码方式不同，就要用到 charset 属性。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    其它标签
  </head>
</html>

注：要嵌套在head标签内。

title 标签设置网页标题

用于显示网页的标题，格式如下：

<!DOCTYPE html>
<html>
  <head>
    <title>测试标题</title>
    其它标签
  </head>
</html>

注：也要嵌套在head标签里。

body 标签定义网页主体

定义网页的主体，一般HTML代码都在这里面编写，位置在head标签的后面：

<!DOCTYPE html>
<html>
  <head>
    头部标签
  </head>
  <body>
    HTML网页主体
  </body>
</html>

h1-h6 标签设置文字大小

这些标签一般在body标签里，可以将嵌套的文字的大小进行改变，h1最大，h6最小：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <h1>我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <h5>我是h5</h5>
    <h6>我是h6</h6>
  </body>
</html>

用浏览器打开此网页，看到的应该是一段从大到小的文字。

i 标签创建斜体文字

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <i>斜体测试</i>
  </body>
</html>

i标签主要将标签内的文字变成斜体。

b 标签创建粗体文字

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <b>粗体测试</b>
  </body>
</html>

b标签主要将标签内的文字变成粗体。

p 标签创建段落

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <p>我正在开发网页。我很开心。</p>
    <p>我正在开发网页。我很开心。</p>
  </body>
</html>

p标签将会把标签内的文字起新的一段来展示。

ul 标签创建无序列表

用于展示一个无序列表，格式为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <ul>
      <li>第一项</li>
      <li>第二项</li>
      <li>第三项</li>
    </ul>
  </body>
</html>

里面要嵌套li标签，每个li标签就是列表的其中一项。

ol 标签创建有序列表

用于展示一个有序列表，格式为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <ol>
      <li>第一项</li>
      <li>第二项</li>
      <li>第三项</li>
    </ol>
  </body>
</html>

里面也要嵌套li标签，每个li标签就是列表的其中一项。

table 标签创建表格

table标签用于创建表格，如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <table>
      <tr>
        <td>测试1</td>
        <td>测试2</td>
      </tr>
      <tr>
        <td>测试1</td>
        <td>测试2</td>
      </tr>
    </table>
  </body>
</html>

这个标签内需要嵌套tr标签，tr标签为表格的一行，内部的td标签定义这一行每个列显示的内容。

a 标签链接网址

此标签用于链接到某个网址：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <a href="https://blog.csdn.net/">CSDN博客网站</a>
  </body>
</html>

a标签的属性href定义跳转到的网址，文字内容定义这个标签在哪样的文字上创建链接。

div 标签划分板块

用于将页面分成独立的板块，为页面分区或节：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <div>
      <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
      </ul>
    </div>
    <div>
      <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
      </ol>
    </div>
  </body>
</html>

span 标签

HTML的行内标签，方便了给行内元素设置单独的样式。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <span>文字内容</span>
  </body>
</html>

br 标签换行符

这个标签没有结尾，和换行符作用一样，可以插入文本内：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <p>第一段文字<br>第二段文字</p>
  </body>
</html>

script 标签加载或编写js代码

这个标签用于在网页中编写或加载javascript文件代码：
加载：（一般在head内加载，body也行）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <script src="js脚本文件.js"></script>
  </head>
  <body>
    <p>测试网页</p>
  </body>
</html>

编写：（一般在主体body内编写）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <script type="text/javascript">
       var a = 1;
       var b = 2;
       alert(a + b);
    </script>
  </body>
</html>

如上，我们在script标签内写了亿些简单的js代码，这些代码在浏览器浏览时时将会运行。

img 标签加载图片

img标签主要用来加载图片，上代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
  </head>
  <body>
    <img src="test.png" />
  </body>
</html>

属性src指定图片路径，这里为test.png，当然，网络图片也是可以加载显示的。
（注：img标签没有结束标签，只是在">“前写一个”/"即可）

style 样式设置

CSS又叫做层叠样式表(英文全称：Cascading Style Sheets)，主要用来设置HTML网页的样式。
CSS提供来选择器来选定HTML标签设置相应的样式，常用的选择器是类选择器和ID选择器。

类选择器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style type="text/css">
    .test1{
            width:300px;
            height:50px;
            background:red;
    }
    .test2{
            width:100px;
            height:50px;
            background:green;
    }
    </style>
  </head>
  <body>
    <div class="test1">style测试1</div>
    <div class="test2">style测试2</div>
  </body>
</html>

首先，我们定义了style标签，在内部写上了两个类选择器，一个叫test1，另一个叫test2，在每个选择器里边，我们定义了width，height，background属性（什么意思可以自己上网查一下），然后在body内定义了两个div标签，都有属性class（类），这里面我们写上了类选择器名称，就可以加载显示对应的样式了。

ID选择器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style type="text/css">
    #test1{
            width:300px;
            height:50px;
            background:red;
    }
    #test2{
            width:100px;
            height:50px;
            background:green;
    }
    </style>
  </head>
  <body>
    <div id="test1">style测试1</div>
    <div id="test2">style测试2</div>
  </body>
</html>

首先，我们定义了style标签，在内部写上了两个ID选择器，一个叫test1，另一个叫test2，在每个选择器里边，我们定义了width，height，background属性，然后在body内定义了两个div标签，都有属性id，这里面我们写上了ID选择器名称，就可以加载显示对应的样式了（其实就是把div的class换成id，style标签里的“.”换成“#”而已）。

link 标签链接资源

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <link rel="stylesheet" href="test.css" />
  </head>
  <body>
    <p>测试段落</p>
  </body>
</html>