HTML框架的基本结构

合集下载

html5文档的基本结构

html5文档的基本结构HTML5（Hyper Text Markup Language 5）是一种用于创建网页结构的标记语言。

HTML5的文档结构是网页开发中的基本框架，它由一系列标签组成，用于定义网页的结构和内容。

HTML5文档的基本结构如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>网页标题</title></head><body></body></html>让我们逐个解释这些部分的作用：1. <!DOCTYPE html>: 这是文档类型声明，用于告诉浏览器当前页面使用HTML5标准进行解析。

2. <html>: 标签是整个HTML文档的根元素，包含了所有的页面内容。

3. <head>: 标签定义了网页的头部，其中通常包含了一些与页面相关的元数据和外部资源的引用。

在<head>标签中通常会有<meta>标签用于声明页面的字符编码（charset）和一些其他的元数据信息，<title>标签用于设置页面的标题。

4. <body>: 标签包含了网页的主要内容，比如文本、图像、链接和多媒体等元素。

所有的网页内容都应该放在<body>标签中。

在基本结构之外，HTML5文档可以使用各种标签来进一步定义和组织网页的内容。

例如，<h1>到<h6>标签用于定义标题，<p>标签用于定义段落，<img>标签用于插入图像等等。

HTML5还引入了许多新的语义化标签，如<header>、<nav>、<section>、<article>、<footer>等，用于更好地描述网页的结构和内容。

HTML的基本结构

HTML的基本结构在当今社会中，网络已成为人们生活的一部分，网络提供的服务主要是以网页的形式展现出来。

HTML是创建网页的基础语言，如果不了解HTML（超文本标记语言）．就谈不上网页设计。

HTML也是Web用于创建和识别文档的标准语言。

这些标记都是通过使用标签来完成的，标签可指定网页在浏览器中的显示方式。

本章就来介绍HTML文件的基本结构、文本相关标签、图像<IMG>标签、页面链接<A>标签、滚动<MARQUEE>标签等，使大家对HTML的基本标签有深入的了解，为后面的学习打下坚实的基础，其中重点是文本、图像、链接标签的运用，难点是各种标签的综合应用。

本节单词记忆：标签 1.head 2.title 3.body 4.meta 属性 1.bgcolor2.background网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。

1.1 HTML的基本机构完整的HTML文件至少包括<HTML>标签、<HEAD>标签、<TITLE>标签和<BODY>标签，并且这些标签都是成对出现的，开头标签为<>，结束标签为</>，在这两个标签之间添加内容。

通过这些标签中的相关属性可以设置页面的背景色、背景图像等。

1. HTML文档的结构HTML文档主要由3部分组成。

●HTML部分：HTML部分以<HTML>标签开始，以<／HTML>标签结束。

<HTML>……</HTML><HTML>标签告诉浏览器这两个标签中间的内容是HTML文档。

●头部：头部以<HEAD>标签开始，以</HEAD>标签结束。

这部分包含显示在网页标题栏中的标题和其他在网页中不显示的信息。

html5文档的基本结构

html5文档的基本结构HTML5（超文本标记语言第5版）是Web页面开发的标准语言，它定义了网页的结构和内容展示方式。

HTML5文档的基本结构由DOCTYPE声明、html元素、head元素和body元素组成。

下面将详细介绍HTML5文档的基本结构及其各个组成部分的作用。

一、DOCTYPE声明DOCTYPE声明用于告诉浏览器当前文档使用的HTML版本。

在HTML5中，DOCTYPE声明为<!DOCTYPE html>，它位于文档的最前面，并且不需要关闭标签。

DOCTYPE声明的作用是让浏览器以标准模式来解析HTML文档，确保页面能够正确显示。

二、html元素html元素是HTML5文档的根元素，它包含了整个HTML文档的内容。

在html元素中，有两个重要的子元素：head元素和body元素。

三、head元素head元素用于包含一些不会在页面中显示的元素，如网页标题、字符编码、引用的外部样式文件和脚本文件等。

常用的head元素包含以下几个子元素：1. title元素：用于定义网页的标题，显示在浏览器的标题栏或书签中。

例如：```html<title>网页标题</title>```2. meta元素：用于定义网页的一些元数据，如字符编码、关键词和页面描述等。

例如：```html<meta charset="UTF-8"><meta name="keywords" content="关键词1, 关键词2"><meta name="description" content="页面描述">```3. link元素：用于引入外部样式文件和脚本文件。

例如：```html<link rel="stylesheet" href="style.css"><script src="script.js"></script>```四、body元素body元素包含了整个网页的可见内容，如文本、图片、链接等。

40.html框架概述

课题：第四十课html框架概述
框架是一种在一个网页中显示多个网页的技术，通过超链接可以为框架之间建立内容之间的联系，从而实现页面导航的功能。

框架的作用主要是在一个浏览器窗口显示多个网页，每个区域显示的网页内容也可以不同，它的这个特性在“厂”字型的网页中使用极为广泛。

框架的基本结构
<html>
<head>
<title>框架的基本结构<title>
</head>
<frameset>
<frame>
<frame>
…
</frameset>
</html>
在网页文件中，使用框架集的页面的<body>标记将被<frameset>标记替代，然后再利用<frame>标记去定义框架结构，常见的分割框架方式有：左右分割、上下分割、嵌套分割，后面的章节将会具体介绍。

所谓嵌套分割是指在同一框架集中既有左右分割，又有上下分割，。

html语言基本架构

HTML（HyperText Markup Language）语言的基本架构主要由以下几个部分组成：
1.<!DOCTYPE html>：文档类型声明，用于告诉浏览器该文档是HTML5文档。

2.<html>：HTML页面的根元素。

3.<head>：头部元素，包含了所有的元数据元素，
如<meta>,<title>,<link>,<style>等。

4.<body>：主体元素，包含了网页的所有内容，如文本、图片、链接、音频、视频等。

以下是HTML基本架构的示例：
html复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>

</head>
<body>

</body>
</html>
这个基本架构提供了HTML文档的基本框架，用于组织和呈现网页内容。

其中，<head>元素包含了文档的元数据，如字符集、样式表、脚本等；<body>元素包含了网页的主要内容，如文本、图片、链接等。

通过使用这些基本元素，开发者可以创建出丰富多样的网页内容。

html的基本结构写法

html的基本结构写法词性解释与意思：“HTML”是“HyperText Markup Language”的缩写，名词词性，意思是超文本标记语言。

它就像是建筑的蓝图，是构建网页的基础框架与规则集，用各种标记来告诉浏览器如何展示网页内容，比如文字该怎么排版，图片要放在哪里等，是网页世界的“魔法指令手册”。

用法：主要用于网页开发中编写网页的代码结构。

比如“我要创建一个新网页，首先得用HTML 搭建好基本框架”，表明它在网页初始构建阶段的关键作用；也可在网页优化、修改场景使用，“发现网页显示有问题，得检查HTML 代码是不是哪里出错了”，体现其在维护网页正常运行方面的用途。

近义词：“Web Markup Language”（网页标记语言），突出其在网页领域标记功能的表述；“Hypertext Language”（超文本语言），更侧重于超文本特性方面的概括，与HTML 核心概念相近但表述略有不同。

双语例句：HTML is the key to unlocking a beautiful web page. It's like a secret code. Can you imagine building a website without it?（HTML 是开启精美网页的关键。

它就像一个密码。

你能想象没有它来构建网站吗？）The developer was typing HTML codes furiously. His fingers were like dancing on the keyboard. He was determined to make an amazing website.（开发者飞快地输入HTML 代码。

他的手指就像在键盘上跳舞。

他决心打造一个很棒的网站。

）I'm learning HTML and it feels like exploring a new universe. There are so many tags and elements. It's both exciting and a bit overwhelming.（我正在学习HTML，感觉就像在探索一个新宇宙。

HTML文档的基本结构

HTML文档的基本结构主体标记<BODY>…</BODY>META 标记META 标记是一个特殊的 HTML 标记，提供有关网页的信息，如作者姓名、公司名称和联系信息等。

例如：要将 Graham Browne 指定为作者，则使用以下 META 标记： http-equiv 属性可用来代替 META 标记中的 name 属性例如：设置文本格式标题段落换行符字体字符格式化特殊字符水平线设置字体、字号和颜色标记字符格式化标记插入特殊字符某些字符在 HTML 中具有特殊意义，如小于号 (<) 定义 HTML 标签的开始字符实体用于在 HTML 文档中插入特殊字符，如版权号，注册商标等常用特殊符号的实体名称使用水平线列表标记列表用于按逻辑方式对数据分组列表类型：无序列表列表类型：有序列表插入图像创建超级链接创建锚点链接❒链接到同一文档的某个部分锚点标记用于使用户“跳转”到文档的某个部分A标记的NAME属性用于创建锚标记为达到这种跳转效果，请在 HREF 参数中使用该标记❒链接到其他文档的特定位置创建电子邮件链接小结❒HTML 标记一般配对使用，不区分大小写❒标记都具有属性。

属性提供关于网页上HTML元素的附加信息❒META标记放置在网页的标题处以提供关于页面的信息。

搜索引擎常会用到这些标签❒标题级标记使用<H1>…<H6>❒段落标记使用<P align＝“对齐方式”>…</P>❒无序列表使用<UL>标记,有序列表使用<OL>标记❒字体标记<Font color=“颜色” size=“大小” face＝“字体”>❒超链接标记<A href=“链接地址”>超链接文本</A>回顾表格创建表格添加输入型表单控件框架小结:<TABLE width=“?” border=“?” align＝“？”><CAPTION> 表格标题</ CAPTION ><TR bgcolor＝“？”><TH align=“?”>数据1 </TH><TH align=“?”>数据2 </TH>…..</TR><TR bgcolor＝“？” ><TD ali gn=“?”>数据11 </TD><TD align=“?”>数据22 </TD></TR></TABLE><FORM action=“?” method=“?” >文本框<INPUT type＝“text” name＝“？” value＝“？” maxlength=“">密码框<INPUT type＝“password” name＝“？” value＝“” >文本域<textarea name=“？” clos=“？” rows=“？”></textarea >单选按钮<INPUT TYPE=radio NAME=”？” VALUE=”？”>男性复选框<input type="Checkbox" name="？" value="？">酒井法子<SELECT NAME ="？"><OPTION >选项1</OPTION><OPTION>选项2</OPTION><OPTION>...</OPTION></SELECT><INPUT type="Submit" value="提交" name="?"><INPUT type="reset" value="重置" name="?"></ FORM>。

html文档基本结构

html文档基本结构HTML文档的基本结构是一套规范，用于定义网页的组成部分。

这套规范包含了几个必要的元素，如<html>、<head>、<title>和<body>。

下面我将逐一介绍这些元素及其作用。

<html>元素是定义HTML文档的根元素，所有其他元素都是该元素的子元素。

在<html>元素中可以定义文档的语言类型和字符编码等信息。

<head>元素包含了HTML文档的元信息，如文档的标题、作者和关键字等信息。

还可以在<head>元素中定义样式表和JavaScript脚本等内容。

<title>元素用于定义文档的标题，在浏览器中标题通常显示在选项卡上，也是搜索引擎检索结果中的重要部分。

<body>元素是HTML文档的主要部分，包含了网页的所有内容，如文字、图像、表格、链接等等。

除了以上必要元素外，还有一些常用元素，包括<div>、<p>、<img>、<a>、<ul>和<ol>等。

这些元素用于构建网页的具体内容和布局。

需要注意的是，HTML文档的格式必须是规范的，否则可能会导致浏览器无法正确解析网页。

此外，为了提高网页的可访问性和搜索引擎优化效果，应该遵循一些最佳实践和标准，如使用语义化的HTML元素、正确设置图片的alt属性、使用有效的链接文字等等。

总之，HTML文档的基本结构包括<html>、<head>、<title>和<body>等必要元素，以及一些常用元素，用于构建网页的具体内容和布局。

遵循标准和最佳实践可以提高网页的可访问性和搜索引擎优化效果。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML框架的基本结构
在一个网页中，并不是所有的内容都需要改变，如网页的导航栏、网页页脚等部分是不需要改变的，如果在每一个网页中都重复添加这些元素，不仅会浪费时间，而且在浏览时也会带来不便、耗费更多的时间，为了解决这种问题，我们可以使用框架来对网页进行布局。

本节单词记忆：标签 1.frameset 2.frame属性 1.cols 2.rows 3.noresize 4.bordercolor 5.frameborder
网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。

使用框架可以把浏览器窗口划分为多个区域，每个区域可以显示不同的网页，每次浏览者在访问框架页面时，只下载框架页面中变化的区域，对于不变的区域，不用重新下载，从而给浏览者带来方便、节省下载页面所需的时间。

一个框架结构是由以下两部分组成的：
框架(FRAME)：是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分中所显示内容无关的网页文件。

框架集( FRAMESET)：是一个网页文件，它将一个窗口通过横向或纵向的方式分割成多个框架，每个框架中要显示的都是不同的网页文件。

不同的网页文件可以通过超链接联系起来。

如图1所示就是一个比较经典的框架集页面。

此页面一共有3个区域，每个区域分别显示一个HTML文档，由于框架集页面也是一个HTML文档，所以一共有4
个HTML文件。

为了浏览方便，当浏览者单击左侧导航栏中的服务列表（如“注册&认证”、“买家帮助”等）超链接时，右侧窗口显示相应的详细帮助信息。

图1 框架集页面
一、为何使用框架
一个网页可以有一个或多个框架。

框架的一些用法如下：
● 在页面的一个固定部分显示Logo或静态信息。

● 左侧框架显示目录，右侧框架显示内容，用户只需单击左侧窗口的目录，在右侧窗口中就会显示相应内容，如网上在线学习教程、论坛、后台管理、产品介绍等。

● 框架能有机地把多个页面组合在一起，这多个页面之间可互相独立，却又可相互联系。

二、框架的基本结构
框架集( FRAMESET)页面的结构是通过属性rows和cols来设置的，根据框架的分割方式可分为：上下分割窗口（使用rows属性来分割），左右分割窗口（使用cols属性来分割），嵌套分割窗口（同时使用rows和cols属性来分割）。

语法:
<frameset cols="25%,50%,*" rows ="50%,*" border="5">

<frame src=“the_first.html ">
……
</frameset>
说明：FRAMESET仅是一个框架的集合。

FRAME标签可以提供对单独HTML文档URL 引用，其中每个HTML文档占据一个框架。

cols将页面沿垂直方向分割为几个窗口，cols可以取多个值，不同的值用逗号隔开，单位可以是像素，也可以是占浏览器的百分比。

rows将页面沿水平方向分割为几个窗口，也可以取多个值，是由逗号分割的像素值或百分比。

src指定框架窗口的源文件。

示例1:
<HTML>
<HEAD>
<TITLE>rows框架</TITLE>
</HEAD>
<FRAMESET bordercolor="red" rows="25%,50%,*" border="5" >

<FRAME name="top" src="the_first.html">
<FRAME name="middle" src="the_second.html">
<FRAME name="bottom" src="the_third.html">
</FRAMESET>
</HTML>
示例1在浏览器中预览效果如图2所示。

图2 水平方向分割为上中下3个窗口
示例2:
<HTML>
<HEAD>
<TITLE>cols框架</TITLE>
</HEAD>
<FRAMESET cols="120,*" border="5">
<FRAME src="the_first.html" name="topFrame">
<FRAME src="the_second.html" name="mainFrame" scrolling="NO" noresize>

</FRAMESET>
</HTML>
示例2在浏览器中预览效果为两个窗口左右分割，而左边的窗口固定宽度120px。

三、如何创建多个复杂的窗口
前面的示例1和示例2要么是水平分割，要么是垂直分割，如果要实现如图1
所示的框架集页面，那怎么实现？
经分析，首先将页面分割为上下两部分，上部分的高度占浏览器高度的30%左右。

然后将下面部分分割成左右两部分，宽度大约分别占窗口的20%和 80%。

注意对其中的一个框架窗口再次分割时，需要使用<FRAMESET>标签代替<FRAME>标签。

下面我们就一步一步地实现如图1所示的框架集页面。

第一步：创建或直接提供如图1所示的top窗口中所显示的页面文档top.html。

第二步：创建或直接提供如图1所示的left窗口中所显示的页面文档
left.html。

第三步：创建或直接提供如图1所示的right窗口中所显示的页面文档
right.html。

第四步：手写如示例3中的代码，然后保存为frame_Sets.html文件。

示例3:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312" /> <TITLE>创建多框架页面</TITLE>
</HEAD>
<FRAMESET rows="20%,*" frameborder="no" border="0" framespacing="0"> <FRAME src="top.html" name="topFrame" scrolling="No"
noresize="noresize" id="topFrame" title="topFrame" />
<FRAMESET cols="20%,*" framespacing="0" frameborder="no"
border="0">
<FRAME src="left.html" name="leftFrame" scrolling="No"
noresize="noresize" />
<FRAME src="main.html" name="rightFrame" />
</FRAMESET>
</FRAMESET>
</HTML>
示例4在浏览器中预览效果如图1所示。

本节作业：
制作如图1复杂框架网页。

注意事项：
1.掌握框架的基本结构。

2.注意框架结构的网页不能只有一个网页，一点还要存在<FRAME>标签src属性指定的网页。

网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！
点击下载第三章案例及作业资源返回《HTML入门经典》教程列表
转载请注明本文地
址:/html/jc/505.html。