介绍

福哥今天跟大家讲一讲HTML语言，讲到HTML语言就要说说标签，因为HTML语言又称为标签语言。HTML语言的基本结构就是一个一个的标签组成的，每个标签在网页上面会作为一个元素展示出来，再通过CSS样式表调整它们的样式，最终把漂亮的网页呈现到用户面前。

标签格式

标签格式为双尖角符号括起来一个英文单词，示例:

<div>

属性

标签可以有很多属性控制标签的样式，常用属性包括:

class
style

除此之外，还有很多属性只针对特殊标签有效，例如:

<table>
<iframe>

标签种类

标签种类包括很多，它们自带一些属性特征，满足网页设计需要。

结构标签:

结构标签用来构成网页的基本结构，这些标签在网页中的位置一般情况下是固定不变的。

html
head
body
title
meta

普通标签:

普通标签用来展示网页上的各种布局，这些标签之间是嵌套使用的。

div
span
font
p
br
h1，h2，h3，h4，h5，h6
table，thead，tbody，tr，th，td
a
i
b
strong
img
label
frame，frameset，iframe

表单标签:

表单标签是网页的重要组成部分，它可以展示用户表单给用户，达到与用户交互的目的。

form
input
textarea
select
option
button

特殊标签

link，用来引入CSS样式表
script，用来引入Javascript脚本

结构

网页都是html语言编写的，而一个网页必定保护页头，页体两个部分。下面是一个标准的空白网页的结构代码。

<!DOCTYPE html>
<html>
<head>
    <title>HTML标签</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

</body>
</html>

示例

下面福哥给出一个比较完整的HTML标签的示例，里面将大部分的标签都给出了一个例子，大家可以直观地看看这些标签的默认样子。

普通标签

下面的普通标签的代码和显示效果。

<div>福哥说我是div标签，一般做布局使用</div>
<span>福哥说我是span标签，通常用来放文字的</span>
<br>
<font>福哥说我是font标签，也是放文字的，现在地位已经被span替代了</font>
<br>
<p>福哥是我是p标签，用来放一段文字的</p>
<h1>福哥，我是h1</h1>
<h2>福哥，我是h2</h2>
<h3>福哥，我是h3</h3>
<table>
    <thead>
        <tr>
            <th>福哥，我是表格头区</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>福哥，我是表格内容区</td>
        </tr>
        <tr>
            <td>福哥，我是表格内容区</td>
        </tr>
        <tr>
            <td>福哥，我是表格内容区</td>
        </tr>
    </tbody>
</table>
<br>
<a href="#">福哥，我是超链接a标签</a>
<br>
<i>福哥，我是斜体字i标签</i>
<br>
<b>福哥，我的粗体字b标签</b>
<br>
<strong>福哥，我也是粗体字strong标签</strong>
<br>
<label>福哥，我是标签label标签</label>
<br>
<img src="https://tongfu.net/images/logo.png" />

表单标签

接下来是表单标签，也是先代码后截图。

<form>
    <input type="text" value="福哥，我的单行文本框" />
    <br>
    <textarea>福哥，我是多行文本框</textarea>
    <br>
    <div>
        <input type="radio" value="male"/>男生
        <input type="radio" value="female"/>女生
    </div>
    <div>
        <input type="checkbox" value="c/c++"/>C/C++
        <input type="checkbox" value="java"/>Java
        <input type="checkbox" value="php"/>PHP
    </div>
    <div>
        <select>
            <option>全部</option>
            <option>TFPHP</option>
            <option>TFUMS</option>
        </select>
    </div>
    <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button>提交表单</button>
    </div>
</form>

总结

今天福哥给童鞋们介绍了HTML语言的基础——标签的知识，对于初次接触web编程的童鞋这个HTML语言是必修课了，只有把HTML学精学透才能把web编程写好。

下一课，福哥将带着童鞋们了解HTML语言的另外一大知识点——CSS样式表。

同福

HTML语言入门（1）——标签语言【20201115】

介绍

介绍