同福

HTML语言入门(1)——标签语言【20201115】

介绍

介绍

福哥今天跟大家讲一讲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" />

8134a1e11c36cd36.jpg

表单标签

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

<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>

57a3c10b3a250f63.jpg

总结

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

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