本文介绍了HTML的基础知识，包括标签与元素的区别，以及常用的块级和行内标签如h1、a、img、ul、ol、table等的用法。通过实例展示了HTML结构和元素在实际页面中的应用。
HTML中的标签
首先HTML全称：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
这里介绍下HTML中标签与元素的概念，它们俩是有区别的：标签就是一左一右<>括起来的标记字符，标签分开始标签和结束标签<>,</>，也有单个标签<>。而元素则是从开始标签到结束标签所包含的区间内容叫元素，可以理解为一个[<>,</>]闭区间，是HTML文档内容组成的单位。通俗点来理解：标签好比英语中的单词，而元素则是一个句子中的成分。
下面来看一个最简单的html页面，为了方便阅读注释少写了一个‘-’：
<!DOCTYPE html>
<!- 声明为html5 文档-->
<html lang="en">
<!- html标签，在html文档中它属于根元素-->
<!- html内部最常见的head与body标签，在HTML文档中这两个元素的顺序不可颠倒-->
<head>
<!- head元素是HTML头部标签，一般用于引用文件和相关设置，基本不会展示到WEB中-->
<meta charset="UTF-8">
<!- 设置编码格式-->
<title>Hello Flask</title>
<!- title元素，会显示在浏览器上的标题-->
</head>
<body>
<!- body元素是HTML正文标签，在此可以使用其他标签，此部分内容是在web页面中可见的-->
<h1>FLASK</h1>
<!- h1元素是标题标签-->
</body>
</html>
标签按结构可分为两大类，块级标签和行内标签：
通俗讲解就是：==块级标签会占据页面一整行区域，而行内标签根据自身数据大小占据部分区域。== 可以在任何一个html网页中，鼠标右键选择检查，展开右侧的元素标签，鼠标移动到对应的标签上，左侧会显示阴影部分就是这个标签元素所占的区域。
下面是一个span元素在web中所占的区域，很明显span元素是一个行内标签。
下面是一些最常用的标签：
<h1>标题元素</h1>
//块级标签；类似word中的标题，修改字母后面的数字可以调整显示的字体大小，范围是1-6.
<a href = "web address">超链接元素</a>
//行内标签；设置属性href = “网页路径”,点击标签实现跳转。
<a href = "web address" target = "blank">超链接元素</a>
//这里说下另一个常用属性 target = “_blank”,点击链接会在新的空白页打开跳转网页
来看实际效果
<img src = "img address">
//图片元素，它是上文提到单个标签形式，不需要结束标签也就是</img>，行内标签；在src中添加图片路径或者网络连接皆可
<ul> //列表元素
<li>beijing</li>
<li>shanghai</li>
<li>shenzhen</li>
</ul>
<ol> //列表元素
<li>beijing</li>
<li>shanghai</li>
<li>shenzhen</li>
</ol>
<ul></ul> <ol></ol> 都是列表标签，块级标签；
其中使用<ul>则列表项会带项目符号，而<ol>列表项会带有序号，可以是数字或者字母顺序
<li>列表项元素</li>
是在<ul><ol>内使用的标签，一对<li></li>就定义一个列表项
<table>表格元素</table>，行内标签；由一对或多对<tr>行标签，<th>列的标题，<td>列的元素组成
以下三个标签是对table中的标签分组的，不影响表的结构
<thead>表格页眉标签，至少要包含一个<tr>标签
<tbody>表格正文标签，至少要包含一个<tr>标签
<tfoot>表格页脚标签，至少要包含一个<tr>标签
实际标签效果：
——————————
未完待续！谢谢阅读
3470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
