HTML语言结构(详细免费版)
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元素包含了整个网页的可见内容，如文本、图片、链接等。
《html教程讲义》课件
一、HTML简介1.1 HTML的定义HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。
1.2 HTML的作用HTML用于描述网页的结构和内容，使得浏览器能够展示具有特定格式的文本、、图片等。
1.3 HTML的发展历程HTML 1.0（1993年）HTML 2.0（1995年）HTML 4.01（1997年）XHTML 1.0（2000年）HTML5（2014年）二、HTML文档结构2.1 基本结构<!DOCTYPE ><><head><meta charset="UTF-8"><>文档</></head><body><h1>一级</h1><p>段落内容</p><!-更多的标签和内容 --></body></>2.2 标签分类语义化标签：`<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`等功能性标签：`<div>`、`<span>`等三、文本格式与排版3.1 标签`<h1>`～`<h6>`：依次表示一级到六级3.2 段落标签`<p>`：表示一个段落3.3 换行与清除浮动`<br>`：表示换行`<wbr>`：表示单词换行`<clear>`：清除浮动3.4 字符实体`<>&"`：分别表示小于号、大于号、引号四、图片与4.1 图片标签`<img>`：表示图片<img src="图片地址" alt="图片描述" width="宽度" height="高度"> 4.2 标签`<a>`：表示<a href="地址" target="_blank">文本</a>4.3 锚点`<a name="锚点名称">`：表示锚点`<a href="锚点名称">`：到锚点五、列表与表格5.1 无序列表`<ul>`：无序列表`<li>`：列表项5.2 有序列表`<ol>`：有序列表`<li>`：列表项5.3 定义列表`<dl>`：定义列表`<dt>`：定义`<dd>`：定义描述5.4 表格`<table>`：表格`<tr>`：表格行`<td>`：单元格`<th>`：表头单元格六、表单与数据验证6.1 表单标签`<form>`：表单`<input>`：输入框`<textarea>`：文本域`<select>`：下拉菜单`<option>`：下拉菜单选项6.2 数据验证`required`：必填字段`pattern`：正则表达式验证`minlength`、`maxlength`：字符长度限制`type="e"、type="number"、type=""：输入类型限制七、CSS样式7.1 内联样式在HTML标签内使用`style`属性添加样式7.2 内部样式表在`<head>`标签内使用`<style>`标签添加样式7.3 外部样式表使用`.css`文件作为样式表，通过`<link>`标签引入7.4 CSS选择器标签选择器：`h1 { }`类选择器：`.classname { }`ID选择器：`idname { }`属性选择器：`[attribute="value"] { }`八、盒子模型与布局8.1 盒子模型`margin`：外边距`border`：边框`padding`：内边距`width`、`height`：宽度和高度8.2 布局方式标准流布局浮动布局：`float`属性定位布局：`position`属性弹性盒模型（Flexbox）：`display: flex;`九、响应式设计9.1 媒体查询使用`media`查询不同设备屏幕大小时的样式9.2 移动端布局使用百分比、视口单位（vw、vh）、rem等实现响应式布局9.3 图片响应式使用`<picture>`标签或`srcset`属性实现图片响应式十、HTML5新特性10.1 视频与音频`<video>`：视频`<audio>`：音频10.2 画布（Canvas）`<canvas>`：绘制图形、动画等10.3 Web存储`localStorage`：本地存储`sessionStorage`：会话存储10.4 离线应用与缓存使用`manifest`文件实现离线应用10.5 其他新特性`<nav>`、`<section>`、`<article>`等语义化标签`<input type="e">`、`<input type="number">`等新输入类型`<dialog>`：对话框重点和难点解析HTML的基本结构和标签分类文本格式与排版，如、段落、换行等图片与的使用，包括图片标签和锚点列表与表格的创建和应用表单与数据验证，如必填字段、正则表达式验证等CSS样式的基础知识，包括内联样式、内部样式表和外部样式表盒子模型、布局方式以及响应式设计的基本概念HTML5的新特性，如视频与音频、画布、Web存储等HTML5的新特性，如离线应用、Web存储等，这些内容需要一定的实践和理解CSS的高级应用，如伪类、过渡、动画等，这些内容需要对CSS 有深入的了解表单的数据验证，如何使用JavaScript进行复杂的验证，需要对JavaScript有一定的了解。
标准html文档的结构
标准HTML文档的结构标准的HTML文档结构通常由以下几个部分组成：1. DOCTYPE声明：告诉Web浏览器使用哪个版本的HTML 进行渲染。
2. html标签：表示整个HTML文档的开始和结束，包含lang 属性指定文档的语言。
3. head标签：包含一些元数据信息，如网页的标题、关键字、编码方式等。
4. body标签：包含所有显示在网页中的内容，如文本、图片、链接等。
其中，head标签和body标签是必须的，而html标签和DOCTYPE声明是推荐使用的。
5. meta标签：提供了有关文档的元数据，如字符集、关键字、描述等。
6. title标签：指定网页的标题，显示在浏览器的标题栏上。
7. script标签和link标签：分别用于引入JavaScript脚本和CSS样式表。
8. 注释：可以在HTML代码中添加注释来对代码进行说明或调试。
这些元素和标签构成了标准HTML文档的基本结构，有效地使用它们可以帮助开发者更好地组织和呈现网页内容。
9. header标签、footer标签和nav标签：分别用于定义网页的头部、底部和导航栏。
10. section标签、article标签和aside标签：用于划分网页内容的不同部分，并指定它们的语义含义。
11. h1-h6标签：用于定义标题，数字越小表示级别越高。
12. p标签：用于定义段落。
13. a标签：用于定义超链接，可以链接到其他页面或位置，也可以用于创建锚点。
这些标签和元素可以帮助开发人员更好地描述和组织一个HTML文档的结构，使得网页在语义上更加清晰明了，同时也有利于SEO优化和可访问性。
14. ul标签和ol标签：用于定义无序列表和有序列表。
15. li标签：用于定义列表的某一个条目。
16. table标签、tr标签、th标签和td标签：分别用于创建表格、表格行、表头和表格单元格。
17. form标签和input标签：用于创建表单和表单控件，如文本框、复选框、单选框等。
HTML语言
结束
第二章目录
第2章 HTML语言
2.2.3 设置字体、字号和颜色 在HTML语言中，可以使用字体标记 <FONT>...</FONT>来设置文本的字符格式，为此可以将 文本置于<FONT>和&lE和COLOR属性来设置文本的字体、字 号和颜色。 FACE属性指定一种字体，或者给出一个字体列表，各 种字体名称用逗号来分隔，可以按照作者的喜好程度来排 列。例如：
当遇到这种情况时，可以使用两种方式来输入特殊符号： 即使用字符实体名称或数字表示方式。例如，若要在网页 中输入一个无间断空格，可以输入“ ”或“ ”， 等等。表2.3列出了常用特殊符号的实体名称或数字表示。
结束
第二章目录
第2章 HTML语言
2.3 使用列表格式
第二章目录
结束
2. 首部标记<HEAD>...</HEAD> 首部标记用于提供与Web页有关的各种信息。在 首部标记中，可以使用<TITLE>和</TITLE>标记来
指定网页的标题，使用 <STYLE> 和 </STYLE> 标记
来定义CSS样式表，使用<SCRIPT>和</SCRIPT>标 记来插入脚本，等等。
结束
第二章目录
第2章 HTML语言
3. 标题标记Hn 标题标记用于设置文档中的标题和副标题，其中n的取 值是1到6；<H1>...</H1>标记表示字体最大的标题， <H6>…</H6>标记表示字体最小的标题。 【例2.3】演示 代码 4. 水平线标记HR HR标记在文档中添加一条水平线，用来分开文档的两个部 分。该标记有以下属性： (1) ALIGN：指定线的对齐方式，取值为left（左对齐）、 center（居中对齐）或right（右对齐），默认值为center。 (2) COLOR：指定线的颜色。 (3) NOSHADE：若指定该项，则显示一条无阴影的实线。 (4) SIZE：指定线的宽度，以像素为单位。 (5) WIDTH：指定线的长度，单位可以是像素或百分比（占 页面宽度的百分比）。 【例2.4】演示 代码
html文档的最基本的结构
HTML（HyperText Markup Language）是用于创建网页结构的标记语言。
HTML文档的最基本结构包括文档声明、html元素、head元素和body元素。
1. 文档声明HTML文档的第一行通常是文档声明，用于指定当前文档所使用的HTML版本。
文档声明以<!DOCTYPE>开头，后面跟着HTML版本的名称。
HTML5的文档声明为<!DOCTYPE html>。
文档声明告诉浏览器应该使用哪个HTML版本来解析当前文档。
2. html元素在文档声明下面是html元素，它是HTML文档的根元素，用于包含整个HTML文档的内容。
html元素包括两个部分：lang属性和头部（head）和主体（body）两个子元素。
<html lang="en"><head><!-- 此处为head元素的内容 --></head><body><!-- 此处为body元素的内容 --></body></html>在html元素中，lang属性用于指定当前文档所使用的语言，这有助于搜索引擎和浏览器正确地理解文档的内容。
3. head元素head元素用于包含文档的元信息，例如文档的标题、引入的外部样式表和脚本等。
它不会直接显示在浏览器窗口中，而是提供关于文档的信息。
head元素的常见子元素包括title、meta、link和script等。
<head><title>这是一个HTML文档的标题</title><meta charset="UTF-8"><link rel="stylesheet" href="styles.css"><script src="script.js"></script></head>在head元素中，title元素用于指定文档的标题，它会显示在浏览器的标题栏中。
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文档基本结构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语言代码A 语言结构1．<!Doctype…>用于定义HTML文件的类型。
如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">表明DTD(Document Type Definition)由W3C制订，HTML版本为4.0，使用的语言为英语。
2．<HTML>…</HTML>定义HTML文件的开始和结束。
3．<HEAD>…</HEAD>出现在HTML文件的起始部分，用来表明文件的标题等有关信息。
4．<BODY>…</BODY>BODY元素是HTML文件的主体，可以理解成除标题以外的所有部分。
<BODY>标记可以包含的属性有：BODYGROUND：指定一个图像资源作为网页的背景图案；TEXT：取颜色值，设置文本文字的颜色；LINK：取颜色值，设置未被访问过的链接指示文字的颜色；VLINK：取颜色值，设置已被访问过的链接指示文字的颜色；ALINK：取颜色值，设置被用户选中的链接指示文字的颜色；BGCOLOR：取颜色值，设置网页的背景颜色；ONLOAD：事件处理，当打开网页时，事件ONLOAD发生；ON UNLOAD：当当前网页移去到另一个网页时，事件ONUNLOAD发生；基本用法如下：<BODY aLink=#cc0000 bgColor=#ffffff link=#0000ff text=#0f0000 topMargin=5 vLink=#0000aa marginheight="5">B 文件头部HTML文件头部位于<HTML>和</HTML>之间，内容包括标题名、创作信息等。
1．<BASE>这是一个单标记，为网页中出现的URL设定相对引用的基路径，必须出现在任何引用外部资源的元素之前，用法如下：<BASE HREF=””>2．<ISINDEX>用于在浏览器上建立一个交互索引框。
如：<ISINDEX prompt=”搜索输入”>3．<LINK>定义当前文件和另一文件或资源间的链接关系。
用法如：<link rel="stylesheet" href="css.css" type="text/css">4．<META>用于指明HTML文件自身的一些信息，如文件制作工具、文件作者等。
使用的属性有：Name：指定特性名；Content：指定特性值；http-equiv：定义标记的特性。
用法如下：<META NAME=”keywords”CONTENT=”计算机,电脑,微机”>5．<STYLE>用于定义网页中文档的显示样式，用法如：<style type=”text/css”> .black {FONT-SIZE: 12px; COLOR: #000000}</style>6．<TITLE>…</TITLE>定义网页的窗口标题，用法如：<TITLE>标题名</TITLE>7．<SCRIPT>用来在网页中插入Script脚本。
用法如：<script language="JavaScript"> function doclock() {window.setTimeout("doclock()",1000)today=new Dateself.status=today.toString()}</script>C 文本标记文档格式1．属性<BGCOLOR>背景颜色Black=”#000000” Green=”#008000” Silver=”#C0C0C0” Lime=”#00FF00”Gray=”#808080” Olive=”#808000” White=”#FFFFFF” Yellow=”#FFFF00”Maroon=”#800000” Navy=”#000080” Red=”#FF0000” Blue=”#0000FF”Purple=”#800080” Teal=”#008080” Fuchsia=”#FF00FF” Aqua=”#00FFFF”2．属性<ALIGN>给元素在浏览器显示中指定对齐方式，属性值可取”left”（居左）、”center”（居中）、”right”（居右）、”justify”（撑满整行）。
3．<CENTER>…</CENTER>使文本或图像居中。
段落标记1．<P>…</P>将指定文本作为一个段落，用于分段2．<BR>强行给文本换行注释<!--内空-->引进注释，说明文字标题<Hn>…</Hn>n级标题。
其中n的取值可为1，2，…，6，<H1>是一级标题，字号最大，<H6>是六级标题，字号最小，如：<H4>电脑三维制作</H4>字体与字号1．<B>…</B>指定文本为粗体。
2．<I>…</I>指定文本为斜体格式。
3．<U>…</U>指定文本加上下划线。
4．<EM>…</EM>强调某段文字，通常用斜体显示。
5．<STRONG>…</STRONG>粗体显示，强调文本。
6．<TT>…</TT>等宽体显示，标准打印机字体。
7．<CODE>…</CODE>将程序代码显示成等宽字体。
如：<CODE>int x;x++;</CODE>8．<KBD>…</KBD>提示用户应该从键盘输入的文字，浏览器一般用等宽字体显示。
9．<SAMP>…</SAMP>样本字体格式，常用于举例，浏览器一般用等宽字体显示。
10．<VAR>…</VAR>参数或变量型字体，常显示为斜体。
11．<CITE>…</CITE>书目或报刊杂志的标题引用，通常为斜体文字。
12．<BLOCKQUOTE>…</BLOCKQUOTE>大段引用，通常为缩进编排。
用法如：<BLOCKQUOTE>爱因斯坦说过：A=X+Y+Z，A代表成功…</BLOCKQUOTE>13．<Q>…</Q>HTML4.0新增的标记，给指定文字加上引号，目前大部分浏览器还不支持<Q>标记。
用法如：<Q LANG=”en”>Good Evening! </Q>14．<DFN>…</DFN>指定一个术语的定义。
15．<ADDRESS>…</ADDRESS>地址型格式，用于地址、签名等，表现为斜体。
16．<PRE>…</PRE>预格式化文本，元素<PRE>中的文本在浏览器中会以你键入时的编排格式显示。
17．<SUB>…</SUB>指定文字为下标。
18．<SUP>…</SUP>指定文字为上标。
19．<BIG>…</BIG>大字体文本。
20．<BLINK>…</BLINK>设定文本闪烁(只适用于Netscape Navigator)。
如：<BLINK>此处是闪烁的文本</BLINK>10．21．<SMALL>…</SMALL>指定一段文字为小字体(比当前字体小一号)。
22．<BASEFONT>使用size属性，指定文档中文字的基准大小。
用法如：<BASEFONT SIZE=”3”>23．<FONT>…</FONT>规定字体属性，使用的属性有：size、color等。
用法如：<FONT SIZE=1 COLOR=”#00A0FF”>字号3</FONT>24．<STRIKE>…</STRIKE>指定一段文字在浏览器中显示带删除线。
以下是上述元素的一些使用实例。
<BASEFONT size=2><CITE><B>TCP/IP</B></CITE>是网络中使用的<FONT size=+1 color=#0000FF>基于软件的<BIG><EM>通信协议</EM></BIG></FONT>。
从名字上看，<I><SMALL>TCP/IP</SMALL>包括两个协议：</I><SUP>传输控制协议</SUP>和<SUB>网际协议</SUB>，<STRIKE>但<VAR>TCP/IP</VAR>远非这两个协议组成的单个实体</STRIKE>,<U>而是一大批软件程序</U>，它们提供诸如<STRONG><FONT size=-1 color="#00A0FF">远程登陆、远程文件传输和电子邮件</FONT></STRONG>等网络服务。
浏览器显示如图C-1图C-1画水平线<HR>在浏览器上显示一段水平线。
用法如：<HR SIZE=”5”WIDTH=”700”ALIGN=”CENTER”>缩写1．<ABBR>…</ABBR>将指定文字标记缩写，缩写形式为字母，用法如：<ABBR TITLE=”World Wide Web”>WWW</ABBR>。
2．<ACRONYM>…</ACRONYM>将指定文字标记缩写，缩写形式为单词。
文档更新1．<INS>…</INS>当对网页某些内容进行更新时，可以将指定文字标记为插入修改的新内容。