百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

网页设计入门——HTML5

zhezhongyun 2025-01-16 21:36 24 浏览


HTML基础

HTML历史

早在1969年,美国就建立了世界上第一个电脑网络—阿帕网。但由于当时的电脑网络只是为了数据运算而建,与人们的日常生活相距甚远,故而网络的发展非常缓慢,直到1985年,连接在阿帕网上的电脑主机也只有1961台。

相对于电脑网络来说,网站的出现要晚得多。1989年,欧洲粒子物理实验室研究员Tim Berners-Lee,发明了一种用于网上交换文本的格式,即基于标记的语言HTML,并创建了网上软件平台World Wide Web(万维网)。HTML最吸引人的地方,在于其超文本链接技术,通过超链接,可以非常方便地跳转到其他任何一个网页上。万维网实现了媒体思想家特德·纳尔逊于1965年提出的超文本设想。万维网的出现,带动了网站的裂变式发展,到2006年11月,全球互联网网站总数就已经超过了一亿大关。

1990年11月,第一个Web服务器nxoc01.cern.ch开始运行,Tim Berners-Lee在自己编写的图形化Web浏览器“World Wide Web”上,看到了最早的Web页面。

而世界上第一个网站(当时的网址是
http://nxoc01.cern.ch/hypertext/www/theproject.html)早在1992年就关闭了,然而幸运的是这一界面却被保留了下来,只要单击下面这个链接:Multiple Choices

HTML基础

HTML是目前在网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文档是由HTML标签组成的描述性文本,HTML标签可以标识文字、图形、动画、声音、表格、链接等。

HTML语言作用

HTML作为一种网页内容标识语言,易学易懂,熟悉使用该语言可以制作功能强大、美观大方的网页。HTML语言的主要作用说明如下:

 使用HTMl语言标识文本。例如,定义标题文本、段落文本、列表文本、预定义文本等。

 使用HTML语言建立超链接,通过超链接可以访问互联网上的所有信息,当使用鼠标单击超链接时,会自动跳转到链接页面。

 使用HTML语言创建列表,把信息有序地组织在一起,以方便浏览。

 使用HTMl语言在网页中显示图像、声音、视频、动画等多媒体信息,把网页设计得更富冲击力。

 使用HTML语言可以制作表格,以方便显示大量数据。

 使用HTML语言制作表单,允许在网页内输入文本信息,执行其他用户操作,方便信息互动。

 HTML文档基本结构

HTML文档一般都应包含两部分:头部区域和主体区域。HTML文档基本结构由3个标签负责组织:<html>、<head>和<body>。其中<html>标签标识HTML文档,<head>标签标识头部区域,而<body>标签标识主体区域。一个完整的HTML文档基本结构如下:每个标签都是成对组成,第一个标签(如<html>)表示标识的开始位置,而第二个标签(如</html>)表示标识的结束位置。<html>标签包含<head>和<body>标签,而<head>和<body>标签是并列排列。

HTML基础

编写HTML文档时,必须遵循HTML语法规范。HTML文档实际上就是一个文本文件,它由标签和信息混合组成,当然这些标签和信息必须遵循一定的组合规则,否则浏览器是无法解析的。

HTML语言的规范条文不多,相信读者也很容易理解。从逻辑上分析,这些标签包含的内容就表示一类对象,也可以称为网页元素。从形式上分析,这些网页元素通过标签进行分隔,然后表达一定的语义。很多时候,我们把网页标签和网页元素混为一团,而实际上,网页文档就是由元素和标签组成的容器。

 所有标签都包含在“<”和“>”起止标识符中,构个标签。例如,<style>、<head>、<body>和<div>等。

 在HTML文档中,绝大多数元素都有起始标签和结束标签,在起始标签和结束标签之间包含的是元素主体。例如,<body>和</body>中间包含的就是网页内容主体。

 起始标签包含元素的名称,以及可选属性,也就是说元素的名称和属性都必须在起始标签中。结束标签以反斜杠开始,然后附加上元素名称。例如:

<tag>元素主体</ta

 元素的属性包含属性名称和属性值两部分,中间通过等号进行连接,多个属性之间通过空格进行分隔。属性与元素名称之间也是通过空格进行分隔。例如:

HTML常用标签

HTML定义的标签很多,下面对常用标签进行说明,随着读者学习不断深入,相信会完全掌握HTML所有标签的用法和使用技巧。

1.文档结构标签

文档结构标签主要用来标识文档的基本结构,主要标签说明如下。

 <html>...</html>:标识HTML文档的起始和终止。

 <head>...</head>:标识HTML文档的头部区域。

 <body>...</body>:标识HTML文档的主体区域。

文本格式标签

文本格式标签主要用来标识文本区块,并附带一定的显示格式,主要标签说明如下。

 <title>...</title>:标识网页标题。

 <hi>...</hi>:标识标题文本,其中i表示1、2、3、4、5、6,分别表示一级、二级、三级等标题。

 <p>...</p>:标识段落文本。

 <pre>...</pre>:标识预定义文本。

 <blockquote>...</blockquote>:标识引用文本。字符格式标签

字符格式标签主要用来标识部分文本字符的语义,很多字符标签可以呈现一定的显示效果。例如,加粗显示、斜体显示或者下划线显示等。

在HTML文档中,列表结构可以分为两种类型:有序列表和无序列表。无序列表使用项目符号来标识列表,而有序列表则使用编号来标识列表的项目顺序。

XHTML文档基本结构

完整的XHTML文档结构如下:

XHTML代码不排斥HTML规则,在结构上也基本相似,但如果仔细比较,它有两点不同。

定义文档类型

在XHTML文档第一行新增了<!DOCTYPE>元素。

声明命名空间

在XHTML文档根元素中必须使用xmlns属性声明文档的命名空间。xmlns是XHTML NameSpace的缩写,中文翻译为命名空间(也有人翻译为名字空间、名称空间)。命名空间是收集元素类型和属性名字的一个详细DTD,它允许通过一个URL地址指向来识别命名空间。

XHTML是HTML向XML过渡的标识语言,它需要符合XML规则,因此也需要定义名字空间。又因为XHTML 1.0还不允许用户自定义元素,因此它的命名空间都相同,就是“Er是根据XML语法简化而来的,因此它遵循XML文档规范。同时XHTML又大量继承HTML语言语法规范,因此与HTML语言非常相似,不过它对代码的要求更加严谨。遵循这些要求,对于培养良好的XHTML代码书写习惯是非常重要的。

 XHTML文档类型

XHTML 1.0支持3种DTD(型定义)声明:过渡型(Transitional)、严格型(Strict)和框架型(Frameset)。

1.过渡型

这种文档类型对于标签和属性的语法要求不是很严格,允许在页面中使用HTML 4.01的标签(符合XHTML语法标准)。过渡型DTD语句如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w1.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


2.严格型

这类文档类型对于文档内的代码要求比较严格,不允许使用任何表现层的标签和属性。严格型DTD语句如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w1.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


在严格型文档类型中,以下元素将不被支持。

 center:居中(属于表现层)。

 font:字体样式,如大小、颜色和样式(属于表现层)。

 strike:删除线(属于表现层)。

 s:删除线(属于表现层)。

 u:文本下划线(属于表现层)。

 iframe:嵌入式框架窗口(专用于框架文档类型或过渡型文档)。

 isindex:提示用户输入单行文本(与input元素语义重复)。

 dir:定义目录列表(与dl元素语义重复)。

 menu:定义菜单列表(与ul元素语义重复)。

 basefont:定义文档默认字体属性(属于表现层)。

 applet:定义插件(与object元素语义重复)。

在严格型文档类型中,以下属性将不被支持。

 align(支持table包含的相关元素:tr、td、th、col、colgroup、thead、tbody、tfoot)。

 language。

 background。

 bgcolor。

 border(table元素支持)。

 height(img和object元素支持)。

 hspace。

 name(在HTML 4.01 Strict中支持,在XHTML 1.0 Strict中的form和img元素不支持)。

 noshade。

 nowrap。

 target。

 text、link、vlink和alink。

 vspace。

 width(img、object、table、col和colgroup元素支持)。

框架型

这是一种专门针对框架页面所使用的DTD,

实际上,DTD是一套关于标签的语法规则。DTD文件是一个ASCII的文本文件,后缀名为.dtd。利用DOCTYPE声明中的URL可以访问指定类型的DTD详细信息。例如,对于XHTML 1.0过渡型DTD的URL为
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd,在Dreamweaver中打开XHTML 1.0过渡型DTD文档,代码显示如图2.4所示。

XHTML 1.0过渡型DTD文档

一个DTD文档包含元素的定义规则,元素间关系的定义规则,元素可使用的属性、实体或符号规则。这些规则用于标签Web文档的内容。此外还包括了一些其他规则,它们规定了哪些标签能出现在其他标签中。文档类型不同,它们对应的DTD也不相同。

 DOCTYPE结构图

DOCTYPE声明中各个部分说明如下。

 顶级元素:指定DTD中声明的顶级元素类型,这与声明的SGML文档类型相对应。HTML文档默认顶级元素为html。

 可用性:指定正式公开标识符(FPI)是可公开访问的对象(PUBLIC)还是系统资源(SYSTEM)。默认为PUBLIC,SYSTEM系统资源包括本地文件或URL。

 注册:指定组织是否由国际标准化组织(ISO)注册。“+”(默认)表示组织名称已注册,“-”表示组织名称未注册。W3C是属于非注册的ISO组织,所以显示为“-”符号。

 组织:指定在!DOCTYPE声明引用的DTD(文档类型定义)的创建和维护的团体或组织的名称。HTML语言规范的创建和维护组织为W3C。

 类型:指定公开文本的类,即所引用的对象类型。HTML默认为DTD。

 标签:指定公开文本的描述,即对所引用的公开文本的唯一描述性名称,后面可附带版本号。HTML默认为HTML,XHTML默认为XHTML,后面跟随的是语言版本号。

 定义:指定文档类型定义,包含Frameset(框架集文档)、Strict(严格型文档)和Transitional(过渡型文档)。Strict(严格型文档)禁止使用W3C规范中指定将逐步淘汰的元素和属性,而Transitional(过渡型文档)可以包含除frameset元素以外的全部内容。

 语言:指定公开文本的语言,即用于创建所引用对象的自然语言编码系统。该语言定义已编写为ISO 639语言代码(两个字母要大写),默认为EN(英语)。

名字空间

在XHTML文档中,读者还需要注意另一个容易忽略的问题:给<html>标签定义名字空间。

HTML元信息

在HTML文档结构的头部区域,存储着文档的各种基本信,这些信息主要被浏览器所采用,不会显示在网页正文中。另外,搜索引擎也会检索这些信息,因此重视并设置这些头部信息将有助于提高网页的访问率。


相关推荐

JPA实体类注解,看这篇就全会了

基本注解@Entity标注于实体类声明语句之前,指出该Java类为实体类,将映射到指定的数据库表。name(可选):实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab...

Dify教程02 - Dify+Deepseek零代码赋能,普通人也能开发AI应用

开始今天的教程之前,先解决昨天遇到的一个问题,docker安装Dify的时候有个报错,进入Dify面板的时候会出现“InternalServerError”的提示,log日志报错:S3_USE_A...

用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码

在人体姿态估计领域,传统方法通常将关键点作为基本处理单元,这些关键点在人体骨架结构上代表关节位置(如肘部、膝盖和头部)的空间坐标。现有模型对这些关键点的预测主要采用两种范式:直接通过坐标回归或间接通过...

B 客户端流RPC (clientstream Client Stream)

客户端编写一系列消息并将其发送到服务器,同样使用提供的流。一旦客户端写完消息,它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中,客户端会发送多个请...

我的模型我做主02——训练自己的大模型:简易入门指南

模型训练往往需要较高的配置,为了满足友友们的好奇心,这里我们不要内存,不要gpu,用最简单的方式,让大家感受一下什么是模型训练。基于你的硬件配置,我们可以设计一个完全在CPU上运行的简易模型训练方案。...

开源项目MessageNest打造个性化消息推送平台多种通知方式

今天介绍一个开源项目,MessageNest-可以打造个性化消息推送平台,整合邮件、钉钉、企业微信等多种通知方式。定制你的消息,让通知方式更灵活多样。开源地址:https://github.c...

使用投机规则API加快页面加载速度

当今的网络用户要求快速导航,从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口(SpeculationRulesAPI)的出现改变了网络应用程序接口(WebAPI)领域的游戏规则。...

JSONP安全攻防技术

关于JSONPJSONP全称是JSONwithPadding,是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签,远程调用JSON文件来实现数据传递。如果...

大数据Doris(六):编译 Doris遇到的问题

编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris...

网页内嵌PDF获取的办法

最近女王大人为了通过某认证考试,交了2000RMB,官方居然没有给线下教材资料,直接给的是在线教材,教材是PDF的但是是内嵌在网页内,可惜却没有给具体的PDF地址,无法下载,看到女王大人一点点的截图保...

印度女孩被邻居家客人性骚扰,父亲上门警告,反被围殴致死

微信的规则进行了调整希望大家看完故事多点“在看”,喜欢的话也点个分享和赞这样事儿君的推送才能继续出现在你的订阅列表里才能继续跟大家分享每个开怀大笑或拍案惊奇的好故事啦~话说只要稍微关注新闻的人,应该...

下周重要财经数据日程一览 (1229-0103)

下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是,下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机(安卓,iPhone)同步日历功能的朋友请点击此链接,数据公布...

PyTorch 深度学习实战(38):注意力机制全面解析

在上一篇文章中,我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程,从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变...

聊聊Spring AI的EmbeddingModel

序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e...

前端分享-少年了解过iframe么

iframe就像是HTML的「内嵌画布」,允许在页面中加载独立网页,如同在画布上叠加另一幅动态画卷。核心特性包括:独立上下文:每个iframe都拥有独立的DOM/CSS/JS环境(类似浏...