块级标签
div 标签
HTML 的 <div> 标签是最重要的一个块级元素，它是可用于组合其他 HTML 元素的容器。<div> 标签没有特定的含义，它主要是用于实现页面布局操作。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
网络流行的“DIV+CSS”布局方式中的 div 指的就是 <div> 标签。
这种新的文档布局方式取代了传统使用表格布局的旧布局方式。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
基本语法
<div>其他标签或文档</div>
示例代码
<body> <div> uiuing.com </div> </body>
显示效果：
<p> 标签
在 HTML 语言中，用标签 <p> 表示段落。
基本语法
<p>段落内容</p>
对于段落标签，有一个可选的属性 align，用于表示段落相对浏览器窗口在水平位置上的对齐方式。
align 属性有四个可取值，每个可取值的含义如表所示：
示例代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>< p ></title> </head> <body> <body> <p>1+1等于几</p> <p align="center"> 等于2 </p> </body> </body> </html>
显示效果
<hn> 标签
标题标签 <hn>（非 <title> 标签）主要用来标识 HTML 文档中的各级标题。
在浏览器解析标题标签时，会将标题内容设为一个段落，字体设为黑体，字号大小根据 n 值的大小确定。
基本语法
<hn>标题文字</hn>
标题标签共有六种，每种的标题在字号上都有明显的区别。
在 HTML 中，定义了六级标题，从一级到六级，每级标题的字体大小依次递减。
示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题标签</title> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> </html>
显示效果
<ul>/<ol>/<li> 标签
介绍
HTML 中的列表可分为两种类型
- 一种是有序列表
- 另一种是无序列表
前者使用编号来记录，而后者则使用项目符号来标识无序的项目。
有序列表
在有序列表中，主要使用 <ol> 和 <li> 两个标签，其中 <ol> 标签定义有序列表，<li> 标签定义列表项目。
基本语法：
<ol> <li>项目一</li> <li>项目二</li> <li>项目三</li> … </ol>
对于
标签有两个可选的属性，下表列出了每个属性、可取值和简单描述。
示例代码
<ol type="A" start="2"> <li>我是1</li> <li>我是2</li> <li>我是3</li> <li>我是4</li> <li>我是5</li> </ol>
显示效果
无序列表
在 HTML 文档中，所谓无序列表，是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。
在无序列表中，各个列表项之间没有顺序之分。无序列表由 <ul> 和 </ul> 标签对实现，每个列表项也是由 <li> 标签定义的。
基本语法
<ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> … </ul>
无序列表与有序列表非常类似，不同点在于因为无序列表是无序的，所以不存在 start 这个规定列表起始点的属性。
无序列表的 type 属性可以设置为 disc、circle、square，其中 disc 代表 实心圆 ●（默认），circle 代表 空心圆 ○、square 代表 实心方块 ■。
示例代码
<ul type="disc"> <li>我是1</li> <li>我是2</li> <li>我是3</li> <li>我是4</li> </ul>
显示效果
<dl>/<dt>/<dd> 标签
在 HTML 中，<dl><dt><dd> 是一组合标签，如果使用 <dt> 或 <dd> 标签的话，那么最外层就必须使用 <dl> 包裹，这种组合标签也称作表格标签，与 <table> 表格类似故而也可以称之为 <dl> 表格。
在开发的过程中，一般使用这个组合标签来实现图文混编的功能。例如既有图片又有描述的商品列表，就可以使用这个组合标签来实现。
基本语法
<dl> <dt>列表项</dt> <dd>列表描述</dd> </dl>
示例代码
<body> <dl> <dt> <img width="400" src="https://user-images.githubusercontent.com/73827386/148187928-2db0116a-3a0e-486b-a427-2f5d959b37c3.jpg" /> </dt> <dd>访问地址: https://varbook.uiuing.com</dd> </dl> </body>
显示效果
综合案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <div> <h1>大数据</h1> <hr /> <p>大数据的5V特点：</p> <ul> <li>Volume(大量)</li> <li>Variety(多样)</li> <li>Velocity(高速)</li> <li>Veracity(真实性)</li> <li>Value(低价值密度)</li> </ul> </div> </body> </html>
行内标签
<a> 标签
超链接，也可以称之为锚（anchor），使用 <a></a> 标签标记。超链接极为常用，是网站页面的重要组成部分。
超链接可以是一个字，一个词，也可以是一张图片，点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当用户把鼠标指针移动到网页中的某个链接上时，鼠标指针箭头会变为一只小手，这是超链接的重要特征。
在开发的过程中有两种使用 <a> 标签的方式：
- 通过使用 href 属性 - 创建指向另一个文档的链接；
- 通过使用 name 属性 - 创建文档内的书签。
超链接
href 属性
一个超链接包含以下两部分：
链接地址：链接的目标，可以是某个网址或文件的路径等，对应为 标签的 href 属性。
链接文本或图像：单击该文本或图像，将跳转到 href 属性指定的目标，对应为 标签对中的文本或图像。
基本语法
<a href="连接地址或文本">文本或者图片</a>
示例代码
<body> <a href="https://uiuing.com">我的博客</a><br /> <a href="https://uiuing.com"><img src="https://pic.imgdb.cn/item/61dc512e2ab3f51d91f96bb9.png" /></a> </body>
显示效果
target 属性
<a> 标签的 target 属性规定在何处打开链接文档。如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。
如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。
首先我们到根目录创建三个HTML文件
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <ul> <li><a href="onePage.html" target="showHTML">第一页</a></li> <li><a href="twoPage.html" target="showHTML">第二页</a></li> </ul> </body> </html>
第一次选择内容列表中的某个链接时，浏览器会打开一个新的窗口，将它标记为 “showHTML”，并在其中显示文档内容。当用户选择另一个链接打开时，如果这个标记为 “showHTML” 的窗体仍处于打开状态，浏览器就会再次将选定的文档在该窗口中显示。
onePage.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <p>我是 onePage.html</p> </body> </html>
twoPage.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <p>我是 twoPage.html</p> </body> </html>
效果
例如以下,我点击了第一个时，他将自动更改已点击的效果，并且将新建一个浏览器标签
<a> 标签的 target 属性有一个有 4 个保留的目标名称用作特殊的文档重定向操作：
文档与id跳转
当一个页面内容特别多时，可以通过给页面建立书签的方式，对同一页面里的内容进行链接。这样用户在浏览网页时，可以通过书签进行页面内的内容跳转，提高浏览者的用户体验效果。
既然要通过超链接的方式访问同一页面的某一位置内容，那么首先要给该位置建立一个书签。
基本语法
<a name="书签名称">文字</a>
定义了书签后，链接到该书签的超链接的基本语法为：
<a href="#书签名称">链接点</a>
下面通过一个案例，演示使用超链接跳转至本文档的另一个位置，即当用户单击“查看本文档第三部分”这个内部链接时，即可链接到本页面的第三部分位置。代码如下：
<body> <p><a href="#d3">查看本文档第三部分</a></p> <h2>第一部分</h2> <p>这是第一部分的内容！</p> <h2>第二部分</h2> <p>这是第二部分的内容！</p> <h2><a name="d3">第三部分</a></h2> <p>这是第三部分的内容</p> <h2>第四部分</h2> <p>这是第四部分的内容！</p> <h2>第五部分</h2> <p>这是第五部分的内容！</p> <h2>第六部分</h2> <p>这是第六部分的内容！</p> <h2>第七部分</h2> <p>这是第七部分的内容！</p> <h2>第八部分</h2> <p>这是第八部分的内容！</p> <h2>第九部分</h2> <p>这是第九部分的内容！</p> <h2>第十部分</h2> <p>这是第十部分的内容！</p> </body>
显示效果
同理，也可操作标签的id
<p><a href="#d3">查看本文档第三部分</a></p> <h2>第一部分</h2> <p>这是第一部分的内容！</p> <h2>第二部分</h2> <p>这是第二部分的内容！</p> <h2><a id="d3">第三部分</a></h2> <p>这是第三部分的内容</p>
<span> 标签
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。所以可以这样认为：<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
基本语法
文本
示例代码
<body> <span>您好</span> </body>
短语标签
举例如 <strong> 标签是一个短语标签，用来定义重要的文本。
在 HTML 中，短语标签是专用标签，用于指示文本块具有结构意义，执行与文本格式标签类似的特定操作。在开发的过程中并不反对使用这个标签，但如果只是为了达到某种视觉效果而使用这个标签的话，强烈建议使用 CSS ，这样可能会取得更丰富的效果。
基本语法
<strong>重要的文本</strong>
所有短语标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <p> <strong>strong</strong> </p> <p> <dfn>dfn</dfn> </p> <p> <code>code</code> </p> <p> <samp>samp</samp> </p> <p> <kdb>kdb</kdb> </p> <p> <var>var</var> </p> </body> </html>
效果
<img> 标签
当浏览网页时，如果一个页面内容都由文字组成，往往会让人觉得枯燥、呆板，提不起浏览的兴趣。如今丰富多彩的网页，很大程度上要归功于图像的作用。本节主要介绍如何在 HTML 文档中插入图像。
在日常生活中，使用比较多的图像格式主要有五种，即 JPG、GIF、BMP、PNG、SWF。在网页中使用较多的是 PNG、JPG、GIF，大多数浏览器都可以显示这些图像。
在页面中插入图像可以起到美化的作用，同时可以更形象地说明要表达的意思。在 HTML 文档中，插入图像的标签只有一个，即 <img> 标签，它负责向页面中嵌入一幅图像。准确来讲，<img> 标签并不会在页面中真正插入图像，而只是提供了一个链接地址，链接显示出图像。所以说，<img> 标签创建的是被引用图像的占位空间。
基本语法
<img src="图像 URL" alt="图像描述" />
基本语法中只列出了 <img> 标签的两个重要属性：src 属性和 alt 属性，其中 src 属性定义了图像的链接地址（通常会把图像文件存放在一个单独的目录中，并将这个目录命名为 pics 或者 images 之类的名称），而 alt 属性则当图像无法显示时，替代显示的文本。
<img src="图片地址" alt="描述" />
对于 图像标签还有一些其他可选的属性，例如 width 属性和 height 属性。下表列出了属性名、可取值及简单描述。
综合练习
目标
请通过今天所学实现以下页面
素材
图片素材
文字素材
HTML版本 HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由CERN的 TimBerners-Lee 发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。 [5] HTML历史上有如下版本： [5] HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5] HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 [5] HTML 3.2：1997年1月14日，W3C推荐标准。 [5] HTML 4.0：1997年12月18日，W3C推荐标准。 [5] HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。 [5] HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。 [6] HTML在Web迅猛发展的过程中起着重要作用，有着重要的地位。但随着网络应用的深入，特别是电子商务的应用，HTML过于简单的缺陷很快凸现出来：HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式，但没有语义结构，即HTML显示数据是按照布局而非语义的。随着网络应用的发展，各行业对信息有着不同的需求，这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时，按照语义而非按照布局来显示数据会具有更多的优点。 总而言之，HTML的缺点使其交互性差，语义模糊，这些缺陷难以适应Internet飞速发展的要求，因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。 特点 超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4] 简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4] 可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4] 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4] 通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。 [4]
