（web前端学习笔记）HTML基础
HTML基础
- 一、HTML简介
-
- 1、什么是HTML
- 2、HTML版本
- 3、HTML特点
- 二、HTML基础
-
- 1、书写规范
- 2、HTML 文档 = 网页
- 3、HTML元素
-
- 3.1、HTML 元素语法：
- 3.2、嵌套的 HTML 元素
- 3.3、空的 HTML 元素
- 4、 HTML元素 VS HTML标签
- 5、HTML属性
-
- 5.1、HTML 全局属性
- 三、HTML标签介绍
-
- 1、基础标签
-
- 1.1、声明
- 1.2、< html > 、< head >、< body>标签
- 1.3、< title> 标签
- 1.4、HTML 标题< h>
- 1.5、HTML 段落< p>
- 1.6、 < br>、< hr> 标签
- 2、表单标签
-
- 2.1、< form> 标签
-
- 2.11< form> 标签常用属性
- 2.12、method属性值描述：
- 2.13、target属性值描述
- 2.14、举例：
- 2.2、< input>标签
-
- 2.21、type属性 值描述：
- 2.22、value属性值描述
- 2.3、< textarea>标签（文本域）
-
- 2.31< textarea>常用属性
- 2.4、< select>标签（下拉列表）
-
- 2.41 < select>标签常用属性
- 2.42、< option> 标签
- 2.43、举例：
- 2.5、< label> 标签
- 3、列表标签
-
- 3.1、< ul> < ol>标签
- 3.2、< li>标签
- 3.3、< dl>、< dt>、< dd>标签
- 4、表格标签
-
- 4.1、< table> 标签
- 4.2、< tr>、< th> 、< td> 标签
- 4.3、 < caption> 标签
- 4.4、举例
-
- 4.41、带标题的表格
- 4.42、带标签的表格
- 4.43、跨行、跨列、去空隙的表格
- 5、链接标签
-
- 5.1、< a> 标签
- 5.2、< link> 标签
- 6、样式、节标签
-
- 6.1、< span>、< div>标签 （节标签）
- 6.2、 < style> 标签
- 7、其他标签
-
- 7.1、< img> 标签
- 7.2、 < iframe> 标签
一、HTML简介
1、什么是HTML
Hyper Text Markup Language （超文本标记语言） 简写：HTML
1、HTML 是==用来描述网页的一种语言==
2、HTML 不是一种编程语言，而是一种标记语言 (markup language)
3、标记语言是一套标记标签 (markup tag)
4、HTML 使用标记标签来描述网页
5、超文本标记语言的结构包括"头"部分（Head）、和"主体"部分（Body），其中"头"部提供关于网页的信息，"主
体"部分提供网页的具体内容。
2、HTML版本
取自百度百科：
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0：1995年11月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
③HTML 3.2：1997年1月14日，W3C推荐标准。
④HTML 4.0：1997年12月18日，W3C推荐标准。
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。
3、HTML特点
取自百度百科：
- 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便
- 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
- 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
- 通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件， 通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）
二、HTML基础
1、书写规范
代码示例：
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>某宝title>
head>
<body>
hello html
body>
html>
html注释：
注：将注释插入 HTML 代码中，可以提高其可读性。浏览器会忽略注释，不会显示它们。
2、HTML 文档 = 网页
开始标签和结束标签中间的内容为为纯文本
HTML 文档包含 HTML 标签和纯文本。
HTML文件以.html或.htm结尾
HTML文档用来描述网页：
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
3、HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
3.1、HTML 元素语法：
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
3.2、嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
<body>
<div>
这是一个div文本
<h2>这是一个标题h2>
<p>
<span>这是一个span文本span><br/>
这是一个段落
p>
div>
body>
3.3、空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的
注：空元素=空标签
例：< br > 就是没有关闭标签的空元素（< br > 标签定义换行）
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 < br />，是关闭空元素的正确方法
注：虽然不加斜杠的空元素 < br >在所有浏览器中也是有效的，但强烈建议使用 < br />形式来操作。
目前在HTML中有以下这些空元素(空标签)：
<br>、<hr>、<img>、<input>、<link>、<meta>、
<area>、<base>、<col>、<colgroup>、<command>、
<embed>、<keygen>、<param>、<source>、<track>、<wbr>
4、 HTML元素 VS HTML标签
1、HTML 标记标签通常被称为 HTML 标签 (HTML tag）
- HTML 标签是由==尖括号包围的关键词==，比如 < html>
- HTML 标签通常是成对出现的，比如 < div > 和 < /div>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 也有单独呈现的标签，如：< img src=“百度百科.jpg” />等。
- 一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如< h1>标题< /h1>和 < input type=“text” value=“按钮” />。
- 网页的内容需在< html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在< head>标签中，而网页需展示的内容需嵌套在< body>标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。
2、HTML元素
HTML 元素指的是==从开始标签（start tag）到结束标签（end tag）的所有代码==。
3、举例：
<div>
这是一个div文本
<span>这是一个span文本span><br/>
div>
5、HTML属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息
属性总是以 名称=值 （类似于键值对）的形式出现，比如：name=“value”。
属性总是在 HTML 元素的开始标签中规定。
例：
<a href="http://www.baidu.com.cn">这是一个超链接a>
注意：
1、属性和属性值对大小写不敏感，但推荐使用小写的属性/属性值。
2、要始终为属性值加引号，属性值应该始终被包括在引号内，双引号最常用，不过使用单引号也
5.1、HTML 全局属性
全局属性可用于任何 HTML 元素
以下取自W3school:
| 属性 | 描述 |
|---|---|
| accesskey | 规定激活元素的快捷键。 |
| class | 规定元素的一个或多个类名（引用样式表中的类）。 |
| contenteditable | 规定元素内容是否可编辑。 |
| contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
| data-* | 用于存储页面或应用程序的私有定制数据。 |
| dir | 规定元素中内容的文本方向。 |
| draggable | 规定元素是否可拖动。 |
| dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接。 |
| hidden | 规定元素仍未或不再相关。 |
| id | 规定元素的唯一 id。 |
| lang | 规定元素内容的语言。 |
| spellcheck | 规定是否对元素进行拼写和语法检查。 |
| style | 规定元素的行内 CSS 样式。 |
| tabindex | 规定元素的 tab 键次序。 |
| title | 规定有关元素的额外信息。 |
| translate | 规定是否应该翻译元素内容。 |
三、HTML标签介绍
1、基础标签
1.1、声明
作用：使浏览器获知文档类型（上述声明为HTML5文档）
注意： 声明必须是 HTML 文档的第一行，位于 < html > 标签之前
声明不是 HTML 标签,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.1.2、< html > 、< head >、< body>标签
作用：定义HTML文档
<html lang="en">
<head>
这里是文档的头部
head>
<body>
这里是文档的主体
body>
html>
1.3、< title> 标签
作用：定义文档的标题
< title> 标签是 < head> 标签中唯一要求包含的东西
1.4、HTML 标题< h>
HTML 标题（Heading）是通过 < h1> - < h6> 等标签进行定义的。
< h1> 定义最大的标题。< h6> 定义最小的标题。
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
...
注意：请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题
因为搜索引擎会使用标题为网页的结构和内容编制索引，用户可以通过标题来快速浏览网页。
可添加的事件属性：
onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup。
1.5、HTML 段落< p>
作用：定义段落
<p>这是一个段落p>
注：p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
默认会在段落的上方和下方空出1行 （若有就不在空出）。
1.6、 < br>、< hr> 标签
< br>作用：插入一个换行符。使用时为< br />
< hr> 作用：在 HTML 页面中创建一条水平线。使用时为< hr />
2、表单标签
2.1、< form> 标签
作用：用于为用户输入创建 HTML 表单。
HTML 表单用于向服务器传输数据。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend和 label 元素。
2.11< form> 标签常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| action | URL | 规定当提交表单时向何处发送表单数据。（设置提交的服务器地址） |
| method | get、post | 规定用于发送 form-data 的 HTTP 方法。（设置提交方式） |
| name | form_name | 规定表单的名称。 |
| target | _blank、_self、_parent、_top、framename | 规定在何处打开 action URL。 |
2.12、method属性值描述：
浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法
POST 请求特点：
1.浏览器地址栏中只有action属性值（即服务器地址url）
2.相对于GET请求要安全
3.理论上没有数据长度的限制
GET请求的特点：
1.浏览器地址栏中的地址：action属性[+ ? + 请求参数]
请求参数的格式是 name=value 键值对 中间用 & 连接
2.不安全，信息泄露，如：密码框中的信息
3.有数据长度的限制
附：
1.POST方法请求过程：
首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
2.GET方法 请求过程
浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
2.13、target属性值描述
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开。 |
| _self | 默认。在相同的框架中打开。 |
| _parent | 在父框架集中打开。 |
| _top | 在整个窗口中打开。 |
| framename | 在指定的框架中打开。 |
2.14、举例：
<form action="http://www.baidu.com" method="post">
<h1 align="center">用户注册h1>
<table align="center">
<tr>
<td>用户名称：td>
<td>td>
tr>
<tr>
<td>用户密码：td>
<td><input type="password" name="password">td>
tr>
<tr>
<td>确认密码：td>
<td><input type="password" name="verifyPassword">td>
tr>
<tr>
<td> 性别：td>
<td><input type="radio" name="sex" checked="checked" value="boy">男
<input type="radio" name="sex" value="girl">女
td>
tr>
<tr>
<td>兴趣爱好：td>
<td>
<input type="checkbox" name="hobby" value="java">java
javaScript
C++
td>
tr>
<tr>
<td>国籍：td>
<td>
<select name="Country">
<option value="none">--请选择国籍--option>
<option selected="selected" value="CHN">--中国--option>
<option value="USA">--美国--option>
<option value="US">--英国--option>
<option value="France">--法国--option>
select>
td>
tr>
<tr>
<td>自我评价：td>
<td><textarea rows="10" cols="30" name="desc">这里是默认值textarea>td>
tr>
<tr>
<td><input type="reset">td>
<td align="right"><input type="submit">td>
tr>
table>
<input type="hidden" name="action" value="login">
form>
运行结果：
2.2、< input>标签
作用：< input> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
注：< input>标签常用在< form>内，作为表单元素出现
input标签常用属性有 type、name、value
name属性：规定 input 元素的名称。用于对提交到服务器后的表单数据进行标识。
2.21、type属性 值描述：
| 值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。 |
| checkbox | 定义复选框。 |
| file | 定义输入字段和 "浏览"按钮，供文件上传。 |
| hidden | 定义隐藏的输入字段。（隐藏域） |
| image | 定义图像形式的提交按钮。 |
| password | 定义密码字段。该字段中的字符被掩码。（密码框） |
| radio | 定义单选按钮。 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。（文本框） |
2.22、value属性值描述
value属性：为 input 元素设定值
对于不同的输入类型，value 属性的用法也不同：
- type=“button”, “reset”, “submit” - 定义按钮上的显示的文本
- type=“text”, “password”, “hidden” - 定义输入字段的初始值
- type=“checkbox”, “radio”, “image” - 定义与输入相关联的值
注意：< input type=“checkbox”> 和 < input type=“radio”> 中必须设置 value 属性
2.3、< textarea>标签（文本域）
作用：定义多行的文本输入控件
在起始标签之间输入的文本为文本域的默认值
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性
2.31< textarea>常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| cols | number | 规定文本区内的可见宽度。 |
| form | form_id | 规定文本区域所属的一个或多个表单。 |
| maxlength | number | 规定文本区域的最大字符数。 |
| name | name_of_textarea | 规定文本区的名称。 |
| placeholder | text | 规定描述文本区域预期值的简短提示。 |
| readonly | readonly | 规定文本区为只读。 |
| required | required | 规定文本区域是必填的。 |
| rows | number | 规定文本区内的可见行数。 |
| wrap | hardsoft | 规定当在表单中提交时，文本区域中的文本如何换行。。 |
<textarea rows="10" cols="30" name="desc">这里是默认值textarea>
2.4、< select>标签（下拉列表）
作用：select 元素可创建单选或多选菜单。select 元素是一种表单控件，可用于在表单中接受用户输入
常用在表单元素中。
2.41 < select>标签常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 规定禁用该下拉列表。 |
| form | form_id | 规定文本区域所属的一个或多个表单。 |
| multiple | multiple | 规定可选择多个选项。 |
| name | name | 规定下拉列表的名称。 |
| required | required | 规定文本区域是必填的。 |
| size | number | 规定下拉列表中可见选项的数目。 |
2.42、< option> 标签
作用：option 元素定义下拉列表中的一个选项（一个条目）
注意：浏览器将 < option> 标签中的内容作为 < select> 标签的菜单或是滚动列表中的一个元素显示。
option 元素位于 select 元素内部
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| selected | selected | 规定选项（在首次显示在列表中时）表现为选中状态。 |
| value | text | 定义送往服务器的选项值。 |
2.43、举例：
<select name="Country">
<option value="none">--请选择国籍--option>
<option selected="selected" value="CHN">--中国--option>
<option value="USA">--美国--option>
<option value="US">--英国--option>
<option value="France">--法国--option>
select>
2.5、< label> 标签
作用：为 input 元素定义标注（标记）。
注：label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
< label> 标签的 for 属性应当与相关元素的 id 属性相同
属性：
| 属性 | 值 | 描述 |
|---|---|---|
| for | id | 规定 label 绑定到哪个表单元素。 |
举例：
<form>
<label for="male">Malelabel>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Femalelabel>
<input type="radio" name="sex" id="female" />
form>
3、列表标签
3.1、< ul> < ol>标签
ul标签定义无序列表 ol标签定义有序列表
<ul>
<li>Coffeeli>
<li>Teali>
<li>Milkli>
ul>
<ol>
<li>Coffeeli>
<li>Teali>
<li>Milkli>
ol>
ul属性：
| 属性 | 值 | 描述 |
|---|---|---|
| compact | compact | 不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。 |
| type | disc、square、circle | 不赞成使用。请使用样式取代它。规定列表的项目符号的类型。 |
ol属性：
| 属性 | 值 | 描述 |
|---|---|---|
| reversed | reversed | 规定列表顺序为降序(9,8,7…) （HTML5新加属性） |
| start | number | 规定有序列表的起始值。 |
| type | 1、A、a、I、i | 规定在列表中使用的标记类型。 |
3.2、< li>标签
作用：定义列表项目，可用在有序列表 (< ol>) 和无序列表 (< ul>) 中。
3.3、< dl>、< dt>、< dd>标签
< dl> 标签定义了定义列表（definition list）（自定义列表）
< dl> 标签用于结合 < dt>（定义列表中的项目）和 < dd>（描述列表中的项目）
举例：
<html>
<body>
<h2>一个定义列表：h2>
<dl>
<dt>计算机dt>
<dd>用来计算的仪器 ... ...dd>
<dt>显示器dt>
<dd>以视觉方式显示信息的装置 ... ...dd>
dl>
body>
html>
运行结果：
4、表格标签
4.1、< table> 标签
作用：定义 HTML 表格
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
< table> 标签属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align | left、center、right | 不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。 |
| bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 不赞成使用。请使用样式代替。规定表格的背景颜色。 |
| border | pixels | 规定表格边框的宽度。 |
| cellpadding | pixels、% | 规定单元边沿与其内容之间的空白。 |
| cellspacing | pixels、% | 规定单元格之间的空白。 |
4.2、< tr>、< th> 、< td> 标签
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
理解：table元素中的tr元素的个数，表示表格的行数，tr元素中的td元素的个数，表示这一行分成几列。
注：th元素相当于一个特殊的tr元素。
4.3、 < caption> 标签
作用：caption 元素定义表格标题
注意：caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上
4.4、举例
4.41、带标题的表格
<table border="1">
<caption>我的标题caption>
<tr>
<td>100td>
<td>200td>
<td>300td>
tr>
<tr>
<td>400td>
<td>500td>
<td>600td>
tr>
table>
4.42、带标签的表格
<table border="1">
<tr>
<td>
<p>这是一个段落。p>
<p>这是另一个段落。p>
td>
<td>这个单元包含一个表格：
<table border="1">
<tr>
<td>Atd>
<td>Btd>
tr>
<tr>
<td>Ctd>
<td>Dtd>
tr>
table>
td>
tr>
<tr>
<td>这个单元包含一个列表：
<ul>
<li>苹果li>
<li>香蕉li>
<li>菠萝li>
ul>
td>
<td>HELLOtd>
tr>
table>
运行结果：
4.43、跨行、跨列、去空隙的表格
colspan属性设置跨行 rowspan属性设置跨列 cellspacing属性设置单元格之间的空白间隙
<table align="center" border="1" width="200" height="200" cellspacing="0">
<tr>
<th colspan="2">1.1th>
<th>1.3th>
tr>
<tr>
<td align="center">2.1td>
<td rowspan="2">2.2td>
<td>2.3td>
tr>
<tr>
<td>3.1td>
<td>3.3td>
tr>
table>
运行结果：
5、链接标签
5.1、< a> 标签
作用：定义超链接，用于从一张页面链接到另一张页面。
< a> 元素最重要的属性是 href 属性，它指示链接的目标
注：被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）
请使用 CSS 来设置链接的样式。
举例：1、链接到同一界面的不同位置
<p>
<a href="#C4">查看 Chapter 4。a>
p>
<h2>Chapter 1h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 2h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 3h2>
<p>This chapter explains ba bla blap>
<h2><a name="C4">Chapter 4a>h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 5h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 6h2>
<p>This chapter explains ba bla blap>
举例：2、在新的浏览器窗口打开链接
<a href="http://www.w3school.com.cn/" target="_blank">W3School!a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。p>
5.2、< link> 标签
作用：定义文档与外部资源的关系，最常用于链接样式表。
link空元素定义在HTML文档的头部。
举例：链接CSS样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS测试title>
<link rel="stylesheet" type="text/css" href="Test1.css"/>
head>
<body>
<div>div标签1div>
<div>div标签2div>
<div>div标签3div>
<span>span标签1span>
<span>span标签2span>
<span>span标签3span>
body>
html>
Test1.css中的代码
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
6、样式、节标签
6.1、< span>、< div>标签 （节标签）
< span>作用：用来组合文档中的行内元素，以便通过样式来格式化它们。
如果不对 span 应用样式（CSS样式），那么 span 元素中的文本与其他文本不会任何视觉上的差异
（他的长度是封装的数据（文本信息…）的长度）
p.tip span {
font-weight:bold;
color:#ff9955;
}
<p class="tip"><span>提示：span>... ... ...p>
< div>作用：定义文档中的分区或节，它的内容自动地开始一个新行。
(数据默认独占一行)
<div class="news">
<h2>News headline 1h2>
<p>some text. some text. some text...p>
...
div>
<div class="news">
<h2>News headline 2h2>
<p>some text. some text. some text...p>
...
div>
6.2、 < style> 标签
作用：为 HTML 文档定义样式信息
< style> 标签中，type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"
注：style 元素位于 head 部分中,内容为CSS样式代码
<html>
<head>
<style type="text/css">
h1 {
color: red}
p {
color: blue}
style>
head>
<body>
<h1>header 1h1>
<p>A paragraph.p>
body>
html>
7、其他标签
7.1、< img> 标签
作用：向网页中嵌入一幅图像。
注意：从技术上讲，< img> 标签并不会在网页中插入图像，而是从网页上链接图像。< img> 标签创建的是被引用图像的占位空间。
必须的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 规定图像的替代文本。 |
| src | URL | 规定显示图像的 URL。 |
可选的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| height | pixels % | 定义图像的高度。 |
| width | pixels % | 设置图像的宽度。 |
举例：
<img src="/x/xxx.jpg" alt="图片找不到" />
7.2、 < iframe> 标签
作用：创建包含另外一个文档的内联框架
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
我是一个iframe<br/>
<iframe src="hello.html" name="abc" width="800" height="600">iframe>
<br/>
<ul>
<li><a href="FormView.html" target="abc">
FormView.html
a>li>
ul>
body>
html>
解释：上述代码表示 首先通过iframe标签创建了一个内联框架，宽800，高600，初始内容为hello.html页面，后又创建了超链接FormView.html 该链接会转到FormView.html页面。通过iframe中的name属性和a标签的targe属性相关联。点击该链接，内联框架的页面会跳转到FormView.html页面。
注：若需要更详细的学习该技术，推荐去w3school网进行进一步学习。
网址：https://www.w3school.com.cn/