1200字范文 > 【HTML基础-1】HTML标签简介及常用标签

【HTML基础-1】HTML标签简介及常用标签

时间：2020-08-12 07:31:06

1 HTML概述1.1 什么是HTML1.2 HTML的语法规则2 HTML标签简介2.1 HTML标签2.2 HTML元素2.3 HTML实例3 HTML常用标签3.1 标题标签3.2 段落标签3.3 换行标签3.4 < hr/ >水平线3.5 span标签和div标签3.6 文字段落缩进标签3.7 文字特殊样式3.8 超链接标签3.9 图片标签3.10 注释及特殊字符标签3.11 建立列表3.11.1 建立无序列表3.11.2 建立有序列表3.11.3 建立自定义列表3.12 表格标签3.13 表单标签归纳参考文章

1 HTML概述

HTML文档的后缀名为.html和.htm，以上两种后缀名没有区别，都可以使用。

1.1 什么是HTML

HTML是超文本标记语言的缩写（HyperText Markup Language），作用是利用HTML标记，告诉浏览器被标记的内容要如何摆放及内容的含义，如：< p>这是个段落元素< /p>，这里，被标记的内容是“这是个段落元素”这句话，而< p></ p>则是HTML的标记；当浏览器读取到这个标记时，就会知道这里的内容是一个段落文本，然后用相应的格式显示。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

注意，HTML语言为解释型语言，即写出来代码直接就能运行，而例如C语言、JAVA则为编译型语言，需要编译成二进制文件，计算机才能解释执行。

1.2 HTML的语法规则

要让页面正确的显示，就必须使用正确的HTML语法和HTML元素，如：对于标题应该使用< h1>、< h2>、< h3>…等标题元素，而对于一整段的文字内容则应该使用< p>元素。

一个规范的页面代码有利于维护和阅读，要想知道自己的HTML代码是否规范，可以使用w3school的HTML验证工具来检查，然后根据检查结果进行调整，直至通过验证为止。

2 HTML标签简介

2.1 HTML标签

HTML 是所有网页制作技术的核心和基础，也是每个网页制作者必须掌握的基本知识，而 html 标签是 html 语言中最基本的单位，是 HTML 最重要的组成部分。

HTML标签的特点：

HTML 标签是由尖括号包围的关键词，比如 < html >HTML 标签分别双标签和单标签，标签中有属性，属性具有属性值。比如 < b> 和 < /b>为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。

初学者首先要知道 HTML 标签的一些特点： HTML 标签是与大小写无关的，例如“< BODY>”跟< body>表示的意思是一样的，推荐使用小写。类似“< p>”这样由尖括号包关键字组成，例如：

<P>P 是段落标签,HTML标签不区分大小写</P><p>意思是一样的，推荐使用小写。</p>

2.2 HTML元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思。但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下为一个HTML元素:

<p>这是一个段落。</p>

HTML 元素以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容。某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）。大多数 HTML 元素可拥有属性

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。HTML 文档由相互嵌套的 HTML 元素构成。如下实例

<!DOCTYPE html><html><body><p>这是第一个段落。</p></body></html>

以上实例包含了三个 HTML 元素。

1）< p > 元素:

<p>这是第一个段落。</p>

这个 < p > 元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 < p > 以及一个结束标签 < /p >。元素内容是: 这是第一个段落。

2）< body > 元素:

<body><p>这是第一个段落。</p></body>

< body > 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签以及一个结束标签 < /body >。元素内容是另一个 HTML 元素（p 元素）。

3）< html > 元素：

<html><body><p>这是第一个段落。</p></body></html>

< html > 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 < html > ，以及一个结束标签 < /html >.元素内容是另一个 HTML 元素（body 元素）。

2.3 HTML实例

HTML文档结构：

头部：文档控制信息，包括整个页面的说明和编码等等

身体：真正显示文档内容的部分。

<html><head></head><body></body></html>

以下为一个简单的HTML实例：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程()</title></head><body><h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body></html>

上述实例的解析如下：

< !DOCTYPE html > 声明为 HTML5 文档< htm l> 元素是 HTML 页面的根元素< head > 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。charset为标签的属性，用来告诉浏览器当前页面的编码格式。< title > 元素描述了文档的标题< body > 元素包含了可见的页面内容< h1 > 元素定义一个大标题< p > 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

3 HTML常用标签

3.1 标题标签

<body><h1> 一级标题</h1><h2> 二级标题</h2><h3> 三级标题</h3><h4> 四级标题</h4><h5> 五级标题</h5><h6> 六级标题</h6></body>#<h1></h1>：代表一级标题，级别高，字体也最大，其他依次递减。#<h6></h6>：级别最小，字体最小

属性：align ；定义标题中的文本水平方向的对齐方式。

属性值：left（左对齐）、right（右对齐）、center（居中对齐）

3.2 段落标签

<p>段落标签</p>

功能：用来定义网页中的一段文本，段落与段落之间换行。

属性：align ；定义段落中的文本水平方向的对齐方式。

属性值：left（左对齐）、right（右对齐）、center（居中对齐）

例子：

<html><head><meta charset="utf-8"> <title>这是我的第一个网页</title></head><body><h1>格言 </h1><p> 事实胜于雄辩 </p><p> 疗效战胜一切 </p>没有对比,就没有伤害</body></html>

3.3 换行标签

<br/> ：换行标签，指行与行之间换行，他是一个单标签。

例子：

<html><head><meta charset="utf-8"> <title>这是我的第一个网页</title></head><body><h1>格言 </h1><p> 事实胜于雄辩 </p><hr/><p> 疗效战胜一切 </p><hr/>没有对比,<br/> 就没有伤害</body></html>

< br/ >与< p > < /p >两者的区别：

< br/ >：是单标签，小行换行提行；< p > < /p > ：是双标签，大行换行分段；

3.4 < hr/ >水平线

< hr/ >：水平线

例子：

<html><head><meta charset="utf-8"> <title>这是我的第一个网页</title></head><body><h1>格言 </h1><p> 事实胜于雄辩 </p><hr/><p> 疗效战胜一切 </p><hr/>没有对比,就没有伤害</body></html>

3.5 span标签和div标签

span标签和div标签是最常用的标签，主要对他们进行样式的应用来改变视觉上的变化。span标签和div标签的功能分别如下：

span标签被用来组合文档中的行内元素。div可定义文档中的分区或节（division/section）

span标签和div标签的格式分别如下：

<span>我是span标签</span><div class="test">111111</div>

注意，< div > 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 < div > 固有的唯一格式表现。可以通过 < div > 的 class 或 id 应用额外的样式。

例子：

<html><head><meta charset="utf-8"> <title>这是我的第一个网页</title></head><body><h1>格言 </h1><p> 事实胜于雄辩 </p><hr/><p> 疗效战胜一切 </p><hr/>没有<div style="background-color: green;">对比</div>,<br/>就没有<span style="color:red;font-size:30px;background-color: yellow;">伤害</span></body></html>

3.6 文字段落缩进标签

< blockquote >< /blockquote >：文字段落缩进，在标签中包含块级标签，而不是纯文本。

<blockquote><p>自动缩进p标签内的文本</p></blockquote>

3.7 文字特殊样式

<b>加粗</b><i>倾斜</i><u>下划线</u><s>删除线</s><big>放大</big><small>缩小</small><strong>加强强调</strong><em>强调倾斜</em>

3.8 超链接标签

< a >< /a >：超链接，即从一个页面跳转到另外一个页面。

属性：.

href：连接地址；空连接可以用"#"代替；地址可以为绝对路径也可以为相对路径。target：定义打开方式，默认情况下可以不写，默认在当前页面打开。属性值为_self和_blank

①;_self在当前页面中打开；

②_blank在新的空白窗口打开。

例子：

<a href="" target="_blank"></a>#注意一定要写http或https，“"为绝对路径<a href="./login.html" target="_blank"></a>#注意：./是指当前目录，不写./也为当前目录，“./login.html”为相对路径

3.9 图片标签

< img/ >：图片标签，在页面中插入标签。

属性：

src：指定图片源文件，图片路径可以为相对路径也可以为绝对路径。alt ：图片未加载成功的提示文字；width：指定图片的宽度；height：指定图片的高度；border：指定图片的边框样式；alghr：top/bottom/middle；图片位于两端文字在垂直方向的一个上/中/下的对齐方式；

#图片地址为绝对路径<img src="/uploads/item/10/31/1031181100_TVEPU.jpeg"/>#图片地址为相对地址<img src="./style/img/PHP封面.png"/>

3.10 注释及特殊字符标签

注释及特殊字符：

空格：  #若直接输入空格，无论输入多少个空格都只显示一个，采用特殊字符时，需要多少个空格，则输入多少个特殊字符< ：<> ：>& ：&amp

例子：

<html><head><meta charset="utf-8"> <title>特殊字符</title></head><body><p>让子弹   飞一会儿</p><p><再飞一会儿></p></body></html>

3.11 建立列表

3.11.1 建立无序列表

<ul type="circle"> <li>列表项</li> <li>列表项</li></ul>

属性：type ；定义列表项的符号。

属性值：circle（空心圆）、disc（实心圆）、square（实心方块）

3.11.2 建立有序列表

<ol type="a"><li>列表项</li><li>列表项</li> </ol>

属性：type ；定义列表项的符号。 start：用来设置列表编号的起始数值。

属性值：a、A、i、I

3.11.3 建立自定义列表

<dl> <dt>列表标题</dt> <dd>列表项</dd><dd>列表项</dd></dl>

3.12 表格标签

< table >< /table >：定义表格

< tr >< /tr >：定义行；

< td >< /td >：定义列；

<table><caption>表格标题</caption><tr><td>我是第一行的第一个单元格</td><td>我是第一行的第二个单元格</td></tr><tr><td>我是第二行的第一个单元格</td><td>我是第二行的第二个单元格</td></tr></table>

表格的表头是单元格的一种变体，实质上是一种单元格加粗和居中

table的属性：

width：表格的宽度height：表格的高度align：表格的对齐方式border：表格的边框bordercolor：边框的颜色cellspaning：单元格之前的距离csllpadding：单元格与内容之间的距离bgcolor：表格的背景颜色background：表格的背景图片

tr的属性：

height：行的高度bordercolor：边框的颜色bgcolor：表格的背景颜色background：背景图片align：文本水平对齐方式valign：文本垂直对齐方式

tr的属性：

width：单元格的宽height：单元格的高度bordercolor：边框的颜色bgcolor：背景颜色background：表格的背景图片align：文本水平对齐方式valign：文本垂直对齐方式 colspan：水平合并单元格（跨列）rowspan：垂直合并单元格（跨行）

完整的表格标记

如果使用thead、tfoot、tbody元素，就必须使用全部的元素。

跨列表格的实例：

html><head><meta charset="utf-8"> <title>跨列表格</title> </head><body><h1>跨列表格</h1><table border="2"> <tr><td colspan="2">学生成绩 </td> </tr><tr><td>语文 </td><td>98 </td></tr><tr><td> 数学</td><td>95 </td></tr></table></body></html>

跨行表格的实例：

<html><head><meta charset="utf-8"> <title>跨行表格</title></head><body><h1>跨行表格</h1><table border="2"> <tr><td rowspan="2">张三 </td><td >语文 </td><td >98 </td></tr><tr><td>数学 </td><td>95 </td></tr><tr><td rowspan="2"> 李四</td><td>语文</td><td>88 </td></tr><tr><td>数学 </td><td>78 </td></tr></table></body></html>