学习HTML

最新推荐文章于 2023-01-17 22:26:38 发布

XuDTone

最新推荐文章于 2023-01-17 22:26:38 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/XuDTone/article/details/71056778

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过学习HTML了，学会了制作一个静态网页。通过编写HTML代码，在网页中设置文字大小、字体、文字颜色、添加超链接、添加图片、添加表格、建立框架等。

一、制作HTML静态网页

1、设置标题：

<title>互联网</title>

2、设置一级标题，并设置文字的字体、大小、颜色：

<h1 align=center><font color="red" face="宋体" size="7">发展历程</font></h1>

3、设置文字颜色，并进行无序排列：

<font color="blue">
<ul>
<li>1968年，参议员......中表现出的精神。
<li>1978年，UUCP（UNIX和UNIX拷贝协议）在贝尔实验室被提出来。
<li>1979年，在UUCP的基础上新闻组网络系统发展起来。
</ul>

4、在页面中心插入一张图片和一个超链接：

<center>
<img src="Internet.jpg" width=500 height=400><br>
点击<a href=链接 target="_blank">这里</a>查看互联网百度百科<br>
</center>

5、创建一个表格，并设置表格的背景颜色、宽度。

<table bgcolor="#CCCCCC" width="400" border="1" bordercolor="#003399">
<thead>
<tr>
<th colspan="1">一级应用模式</th><th colspan="1">二级网络应用模式</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="5">（信息需求）网络信息获取应用模式</th><td>网络新闻模式</td>
</tr>
......
</tbody>
</table>

6、建立有序列表：

<ol>
<li>互联网能够不受空间限制来进行信息交换
......
</ol>

7、引用网站上的某张图片，并放在页面中心：

<center>
<img src=https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1919803524,1164694154&fm=23&gp=0.jpg>
</center>

8、以下是我通过HTML做出的静态网页：

二、学习HTML的知识点：

1、网页与HTML语言

（1）网页文件是用一种被称为HTML（HyperText Markup Language）的标记语言书写的文本文件，它可以在浏览器中按照设计者所设计的方式显示内容，网页文件也常被称为HTML文件。有两种方式来产生网页文件：一种是自己手工编写HTML代码；另一种是借助一些辅助软件来编写，例如Adobe公司的Dreamweaver或者微软公司的Expression Web这样的网页制作软件。

（2）用浏览器打开任意一个网页，然后选择浏览器的菜单中的“查看---源文件”命令，这时就会自动打开记事本程序，里面显示的就是这个网页的HTML源文件。

2、Web标准：结构、表现与行为

“结构”决定了网页“是什么”，“表现”决定了网页看起来是“什么样子”，“行为”就决定了网页“做什么”。“结构”、“表现”、“行为”分别对应于3种非常常用的技术，即（X）HTML、CSS、JavaScript。也就是说（X）HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为。

3、网站开发的全过程大致分为策划与定义、设计、开发、测试和发布5个阶段。

4、与设计相关的技术因素

（1）屏幕显示分辨率：显示器在显示图像时的分辨率。分辨率是用“点”来衡量的，显示器上的这个“点”就是指像素。

显示分辨率的数值是指整个显示器所有可视面积上水平像素和垂直像素的数量。显示分辨率的水平像素和垂直像素的总数总是成一定比例的，一般为4：3、5：4或8：5。每个显示器都有自己的最高分辨率，并且可以兼容其他较低的显示分辨率，所以一个显示器可以设置多种不同的分辨率。大部分网站中的页面可以按照1024×768像素的分辨率来进行设计。

（2）浏览器类型：设计出来的网页在不同的浏览器上的效果可能会存在很大的差异。就目前而言，在制作网页时，应该保证在Internet Explorer 6.0、Internet Explorer 7.0和Firefor这3个浏览器中都显示正确。

5、HTML简介：全称HyperText Markup Language，译为超文本标记语言。HTML不是一种编程语言，而是一种描述性的编辑语言，用于描述超文本中内容的显示方式。比如如何在网页中定义一个标题、一段文本或者一个表格等，这些都是利用HTML标记完成的。

（1）其最基本的语法是：<标记>内容</标记>。

（2）标记通常都是成对使用的，有一个开头标记就对应有一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器从服务器收到HTML文件时后，就会解释里面的标记符，然后把标记符相对应的功能表达出来。

例如，在HTML中以<p></p>标记在定义一个个文本段落，以<table></table>标记来定义一个表格。当浏览器碰到<p></p>标记时，就回把<p></p>标记之间的所有文字以一个段落的样式显示出来。<p>标记和<table>标记都属于结构标记，它们用于定义网页内容的结构。此外，还有一类标记，称为形式标记，用于定义网页的形式。比如浏览器遇到<b></b>标记时，就会把<b></b>标记中的所有文字以粗体样式显示出来。或者，有“<i>网页</i>”这样以恶搞HTML语句，其显示结果就是斜体的“网页”两个字。

总的原则就是，用什么样的标记就能得到什么样的效果，希望获得什么效果，就用相应的标记即可。

6、创建HTML文件：实际上，网页就是一个文件，只不过这个文件是利用HTML写成的，所以又被称为HTML文件。HTML文件的本质就是一个文本文件，只是扩展名为“.htm”或“.html”的文本文件。可以利用任何文本编辑软件创建、编辑HTML文件。在Windows操作系统中，最简单的文本编辑软件就是记事本。

7、HTML文件结构

（1）<html>标记：<html>标记放在HTML文件的开头，并没有什么实质性的功能，只是一个形式上的标记。在HTML文件开头使用<html>标记来做一个形式上的开始。

（2）<head>标记：<head>也被称为头标记，一般放在<html>标记里，其作用是放置关于HTML文件的信息，如提供索引、定义CSS样式等。

（3）<title>标记：<title>被称为标题标记，包含在<head>标记内，它的作用是设定网页标题，可以在浏览器左上方的标题栏中显示这个标题。

（4）<body>标记：<body>又称为主题标记，网页所要显示的内容都放在这个标记内，它是HTML文件的重点所在。然而它不仅仅是一个形式上的标记，它本身也可以控制网页的背景颜色或背景图像。

在构建HTML框架的时候要注意标记是不可以交错的。否则会造成错误。

（5）<hn></hn>（n表示1到6的数字），这个标记用来设置标题文字以加粗方式显示在网页中，它共有6个层次，也就是可以设置6种大小样式。

（6）<font color=#></font>标记可以用来控制文字颜色，#代表颜色的英文名称，在标记名称（font）的后面有一个单词color，它被称为标记的“属性”，用来设置某一个标记的某些附属属性，例如color这个属性，就用来设置文字的颜色属性。常用的颜色名称有black（黑）、gray（深灰）、silver（浅灰）、green（绿）、purple（紫）、yellow（黄）、red（红）、white（白）等。

（7）<b></b>标记的作用是使其中的文字以加粗的形式显示。

（8）<i></i>标记的作用是使其中的文字以倾斜的形式显示。

（9）图片插入的标记是<img>，它有一个src属性，用于指明图像文件的位置。例<img src=butterfly.jpg>。

（10）<!-和-->这对标记称为注释标记，它的作用是使网页的设计者自己或用户了解该文件的内容，所以注释标记中的内容是不会显示在浏览器中的。

8、用HTML设置文本和图像

（1）文本排版

1、实现段落和段内换行（<p>和<b>）

浏览器会完全按照HTML标记来解释HTML代码，忽略多余的空格和换行。在HTML文件里，不管输入多少空格（按空格键）都将被视为一个空格；换行（按“Enter”键）也是无效的，如果需要换行，就必须使用一个标记来告诉浏览器这里要进行回车操作，这样浏览器才会执行换行操作。

段落标记：<p></p>，用来定义网页中的一段文本，文本在一个段落中会自动换行。

换行标记：<br>，这是一个单个使用标记，作用是将文字在一个段内强制换行。

2、设置标题（<h1>~<h6>）

在HTML中，设定了6个标题标记，分别用于显示不同级别的标题，例如<h1>标记表示1级标题，<h6>标记表示6级标题，数字越小，级别越高，文字也相应越大。

3、使文字水平居中（<center>）

居中对齐标志<ccenter></center>的作用是将文字以居中对齐方式显示在网页中。

4、设置文字段落的缩进（<blockquote>）

<blockquote></blockquote>标记的作用是对某段落进行缩进显示。

9、设置文字列表

（1）建立无序列表（<ul>）

项目列表使用的一对标记是<ul></ul>，其中每一个列表项使用<li></li>。

（2）建立有序列表（<ol>）

使用标记<ol></ol>，每一个列表项前使用<li>。每个项目都有前后数序之分，多使用数字表示。

10、HTML标记与HTML属性

基本语法：<标记名称属性名1=“属性值1” 属性名2=“属性值2”......>

如果一个标记使用了多个属性，各个属性之间以空格隔开，不同的标记可以使用相同的属性，但某些标记有着自己专门懂得属性设置。

（1）用align属性控制段落的水平位置

例：<h1 align=”center”>文本内容</h1>

（2）用bgcolor属性设置背景颜色

例：<body text=”blue” bgcolor=#CCCCFF>

文字的颜色通过<body >标记的text属性设置，而背景颜色通过bgcolor属性定义，#CCCCFF是用了另一种颜色的表达方式（以#开头的6位十六进制数值表示一种颜色，6位数字分别为3组，每组2位，依次表示红、蓝。绿3种颜色的强度）。

（3）设置文字的特殊样式

设置文字显示样式的主要标记：

（4）设置文字的大小和颜色（<font>）

<font>标记设置字体相关的属性，<font>标记有3个主要属性，分别用于设置文字的字体、大小和颜色。

face属性用于设置文字的字体；size属性控制文字的大小，可以取1到7之间的数值；color属性用来设置文字的颜色。

例：<font color=”green” face=”宋体” size=”7”>文本内容</font>

11、HTML标记由两类构成----负责定义网页结构的标记和负责定义网页表现形式的标记。例<p>标记用来定义段落，就是结构标记；<font>标记用于定义网页元素的字体，这就是“形式”标记。

12、特殊文字符号

（1）由于大于号小于号被用于声明标记，因此如果要显示“x>y”这样的数学公式，需要用“<”代表符号“<”，特殊字符“>”代表符号“>”。

（2）如果需要在某处使用空格，需要使用特殊字符来代替，空格的符号是“ ”。

（3）版权符号©需要使用“©；”来输入。

（4）<sup></sup>标记，为上标标记，用于将数字缩小后显示于上方。

（5）sub></sub>标记，为下标标记，用于将数字缩小后显示于下方。

（6）“÷；”代表符号“÷”，“±；”代表“±”，“&permil；”代表“‰”，“&harr；”代表双向的箭头。

13、在网页中使用图像（<img>）

（1）网页中的图片格式：目前在网页上使用的图片格式主要是GIF和JPG两种。

GIF即为图像交换格式，GIF格式只支持256色以内的图像，且采用无损压缩存储，在不影响图像质量的情况下，可以生成很小的文件。它还支持透明色，可以使图像浮现在背景之上。GIF为交换格式，在浏览器下载完整张图片之前，浏览者就可以看到该图像，所以在网页制作中首选的图片格式为GIF。

JPG格式为静态图像压缩标准格式，它为摄影图片提供了一种标准的有损耗压缩方案，它可以保留大约1670万种颜色，因此要比GIF格式的图片小，所以下载的速度要快一些。

如果颜色的深度不是那么重要或者图片中的颜色不多，就可采用GIF格式额图片，反之，则采用JPG格式。GIF格式文件的解码速度快，而且能保持更多的图像细节，而JPG格式文件虽然下载速度快，但解码速度较GIF格式慢，对于图片中鲜明的边缘周围会损失细节，因此若想保留图像边缘细节就应采用GIF格式。如果是和照片类似的图像，，通常适合保存为JPG格式；而主要由线条构成的、颜色种类比较少的图像，通常适合保存为GIF格式。

（2）在网页中插入图片利用<img>标记就可实现。

例：<img src=”cup.gif”>

其中src是该标记的必要属性，该属性指定导入图片的保存位置和名称，在这里，插入的图片与HTML文件是处于同一目录下的，如果不处于同一目录下，就必须采用路径的方式来指定图片文件的位置。

（3）使用路径

相对路径：从自己的位置出发，依次说明到达目标文件的路径。

绝对路径：先指明最高级的层次，然后依次向下说明。

网站中的路径，如果图像文件就在本网站内部，通常以要显示该图像的网页文件为起点，通过层级关系描述图像的位置；如果图像不在本网站内部，那么通常以“http://”开头的URL作为图像文件的路径。

例：显示其他文件夹里的图像

例：引用其他网站上的某一个图像文件

14、用width和height属性设置图片的尺寸

例：<img src=”cup.gif” width=”128” height=”128”>

控制图片大小是由width和height两个属性共同完成，width属性控制图片的宽度，height属性控制图片的高度。当图片只设置了其中一个属性时（如只设置了width属性），图片的高度就以图片原始的长度比例来显示。属性值可以使用整数或者百分比，如果使用整数，就表示绝对的像素数，如果使用百分比设置高度或者宽度，图片就以相对于当前窗口大小的百分比大小来显示。

即使图像按照原来的尺寸显示，也应该咋HTML中指明图像的高度和宽度，这样会使网页的显示速度更快。

15、用alt属性为图像设置替换文本（用于图像无法显示的时候告诉浏览者该图片的内容、分析网页内容）

例：<img src=”no-image.gif” width=”128” height=”128” alt=”杯子图像”>

16、设置基本文字超链接：建立超链接所使用的HTML标记为<a></a>标记。超链最重要的两个要素，设置为超链接的文本内容和超链接指向的目标地址。

例：点击<a href=1.html>这里</a>连接到一个图片网页

在<a></a>标记之间的内容就是网页中被设定为超链接的内容，href属性是必要属性，用来放置超链接的目标地址，可以是本网站内部的某个HTML文件，也可以是外部网站某个网页的URL地址。

（1）URL的格式

每个文档在互联网上有唯一的地址，该地址的全称为统一资源定位器（Uniform Resource Laocaotr），简称为URL。URL由4个部分构成，即协议、主机名、文件夹名和文件名。

协议用来标示应用的种类，通常通过浏览器浏览网页的协议就是HTTP协议，即“超文本传输协议”，因此通常网页的地址都以“http://”开头。主机名表示文件存在于哪台服务器上，主机名可以通过IP地址或者域名来表示。确定到主机后还需要说明文件存在于这台服务器的哪个文件夹中，这里文件夹可以分为多个层级。目标文件的文件名通常以“.htm”或者“.html”为后缀。

（2）URL的类型：绝对URL和相对URL

绝对URL包含文件的所有信息；相对URL则指明相对于原文档同一服务器或者同一文件夹中的文件，相对URL通常仅包含文件夹名和文件名，甚至只有文件名。

相对URL又分为两种：相对文档的URL，这种URL以链接的原文档为起点；相对服务器的URL，这种URL以服务器的根目录为起点。

例：点击<a href=”http://www.artech.cn/01.html>链接01</a>链接到第1个网页（绝对URL）

点击<a href=”/02.html>链接02</a>链接到第2个网页（服务器相对URL）

点击<a href=”.../sub/03.html>链接03</a>链接到第3个网页（文档相对URL）

17、设置页面内部的特定目标的链接

超链接不仅可以跳转到其他网页，也可以在本页内跳转。

例：<a href=”#目标名称”>链接文字</a>（指明网页所应跳到哪个目标名称的位置上）

<a name=”目标名称”>链接目标名字</a>（设置相应的跳转目标位置）

18、设置图片的超链接（通过<a></a>标记实现）

例：<a href=1.html><img src=pic.jpg></a><br>

为一个图片添加超链接后，浏览器会自动给图片加一个粗边框（建立文字超链接时会自动加上下划线），如果希望去掉这个边框，只需在<img>标记中设置border=”0”后就可以取消这个边框。

19、设置电子邮件链接

电子邮件链接格式：“mailto：电子邮件地址”

例：联系我们：<a href=”mailto:support@artech.cn”>给我们发送邮件</a>

20、设置以新窗口显示链接页面：在默认情况下，当点击链接时，目标页面还是在同一个窗口中显示，如果要在点击某个链接以后，打开一个新的浏览器窗口，当这个新窗口中显示目标页面，就需要在<a>标记中设置“target”属性。将“target”属性设置为“_blank”，就会自动打开一个新窗口，显示目标页面。

例：以<a href=1.html target=”_blank”>新窗口</a>方式打开网页

21、创建热点区域：图片的超链接还有一种方式，就是图片的热点区域，所谓图片的热点区域就是将一个图片划分出若干个链接区域，访问者点击不同的区域会链接到不同的目标页面。

（1）用HTML建立热点区域（<map>和<area>）：HTML中可以使用三种类型的热点区域：矩形、圆形和多边形。

例：

</map>

<img>标记后面是热点区域的相关代码，它是通过<map>标记和<area>标记来定义的，这个标记可以这样理解：在图片上画出一个区域来，并为这个区域命名，然后在<img>标记中插入图片并使用该地图的名字。

<map>标记只有一个属性，即name属性，其作用是为区域命名，其设置值可以随便设置。

<img>标记除起到插入图片的作用外，还需要引用区域名字，这里就要加入一个usemap属性，其设置值为<map>标记中name属性的设置值加上#。

<area>标记有3个属性：shape属性，控制划分区域的形状，其设置值有三个，分别为rect（矩形）、circle（圆形）和poly（多边形）；coords属性，控制区域的划分坐标，单位是像素；href属性，设置超链接的目标。

22、框架之间的链接：框架是一种常用的网页布局工具，它的作用是把浏览器的显示空间分隔为几个部分，每个部分都可以独立显示不同的网页。Target属性必须与框架配合使用。

（1）建立框架与框架集（<frame>和<frameset>）

框架集的HTML标记为<frameset>，框架的HTML标记为<frame>。<frameset>标记和</frameset>标记是与<body></body>同级的，因此不能将<frameset>标记包含在<body>标记横纵，否则<frameset>标记将无法正常使用。

（2）用cols属性将窗口分为左右两部分

窗口框架的分割方式有两种，一种是水平分割，另一种是垂直分割。在<frameset>标记中的cols属性和rows属性用来控制窗口的分割方式。

cols属性可以将一个框架分割为若干列，其语法结构是“<frameset cols=”n1,n2,...,*”>”，n

1表示子窗口1的宽度，以像素或百分比为单位；n2表示子窗口2的宽度，以像素或百分比为单位。尾号*表示分配给前面所有窗口后剩下的宽度，比如<frameset cols=”20%,30%,*”>，那么*就代表50%的宽度。

（3）用rows属性将窗口分为上中下三部分：rows属性的使用方法和cols属性是基本一样，只是在分割方向上有所不同而已。

例：<frameset rows=”20%,30%,*”>

（4）用src属性在框架中插入网页

语法结构：<frame src=HTML文件的位置>

例：<frame src=01.html>

（5）用src属性在框架之间链接

（6）创建嵌入式框架（<ifame>）：用于创建嵌入式框架，也称为浮动框架，可以自由控制框架的大小，可以配合表格随意的在网页中的任何位置插入窗口，实际上就是在窗口中再创建一个窗口。

使用<ifame>不需要先创建框架集，直接插入<ifame>标记即可。

例：<ifame width=800 height=200 src=http://www.artech.cn></ifame>（在页面创建一个宽800像素、高200像素，源地址为http://www.artech.cn的嵌入式框架）

<ifame>可以设置name属性，作为其他框架中target属性的值，从而作为链接目标页面的显示窗口。

23、链接增多后网站的组织结构与维护

3种常用的网站文件组织结构方案及文件管理遵循的规则：按照文件类型进行分类管理（适用于中小型的网站）；按照主题对文件进行分类管理（适用于页面与文件数量众多、信息量大的静态网站）；对文件的类型进行进一步细分存储管理（适用于文件类型复杂、包含各种文件的多媒体动态网站）。

24、表格基本结构（<table>）：建立一个最基本的表格，必须包含一组<table></table>标记（定义一个表格）、一组<tr></tr>标记（定义一行）以及一组<td></td>标记（定义一个单元格）。

<table>标记：用于标识一个表格，<table>标记中设置了一个border属性，它的作用是设置表格的边框线粗细。

<tr>标记：用于标识表格的一行，也就是建立一行表格，代码中有多少个<tr></tr>标记，就表示有多少行的表格。

<td>标记：用于标识表格中的一列，也就是建立一个单元格，它必须在<tr>标记里使用，一个<tr>标记内有多少个<td>就表示这里有多少列或者说有多少个单元格。

25、合并单元格：在HTML中合并的方向有两种，一种是上下合并，一种是左右合并。

（1）用colspan属性左右合并单元格

例：<td colspan=”2”>A2A3</td>

（2）用rowspan属性上下合并单元格

例：<td rowspan=”2”>A2<br>B2</td>

（3）同时合并上下左右两个方向的单元格

26、用align属性设置对其方式：在<td>中设置“align=center”，文字就在单元格的中间；对<tr>标记设置“align=center”，这一行中的所有单元格内容都会居中对齐，如果希望一个表格的所有单元格都剧中对齐，就要对每个<tr>设置“align=center”。

27、valign属性可以设置为top（竖直靠上对齐）、middle（竖直居中对齐）、bottom（竖直靠下对齐），其中竖直居中是默认值。

28、用bgcolor属性设置表格背景色和边框颜色：设置背景色的属性是bgcolor，可以为<table>、<td>、<tr>设置bgcolor属性。如果在<table>标记中设置bgcolor属性，将设置整个表格的背景色；如果在<td>标记中设置bgcolor属性，则仅设置该单元格的背景色；如果在<tr>标记中设置bgcolor属性，将设置该行的背景色。

29、用cellpadding属性和cellspacing属性设定距离：这里说的距离是指表格相邻单元格边线之间的距离，以及单元格边线与内容之间的距离。

可以利用cellpadding属性设定表格单元格中的内容距离格线懂得距离。

可以利用cellspacing属性设定表格相邻单元格边线之间的距离。

30、完整的表格标记（<thead>、<thody>、<thody>）

从表格结构的角度来说，可以把表格的行分组，称为行组。不同的行组具有不同的意义，行组分为3类----表头（<thead>）、主题（<thody>）和脚注（<thody>）。

使用<th>标记定义单元格，其内容会以粗体显示，而设置了行组之后，外在的效果并没有特殊之处。

XuDTone

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
学习HTML

1、网页与HTML语言（1）网页文件是用一种被称为HTML（HyperText Markup Language）的标记语言书写的文本文件，它可以在浏览器中按照设计者所设计的方式显示内容，网页文件也常被称为HTML文件。有两种方式来产生网页文件：一种是自己手工编写HTML代码；另一种是借助一些辅助软件来编写，例如Adobe公司的Dreamweaver或者微软公司的Expression Web这样
复制链接

扫一扫