专业汉语词典知识平台,分享汉字词语知识、历史文学知识解答!

励北网
励北网

htmlcss是什么意思,html和css的关系

来源:小易整编  作者:小易  发布时间:2023-02-21 11:08
摘要:htmlcss是什么意思,html和css的关系。如果我们要编写网页,那么我们肯定离不开HTML。HTML组成了每个网页的基本结构,不管是我们的企业门户网站,还是例如淘宝,京东这种复杂的电商网站,要完成网页的搭建,第一步都是HTML,那么H...

htmlcss是什么意思,html和css的关系。如果我们要编写网页,那么我们肯定离不开 HTML 。HTML 组成了每个网页的基本结构,不管是我们的企业门户网站,还是例如淘宝,京东这种复杂的电商网站,要完成网页的搭建,第一步都是 HTML ,那么 HTML 到底是什么呢?让我们一起探索吧。

htmlcss是什么意思,html和css的关系

HTML

1. 什么是 HTML

HTML 称为超文本标记语言,是一种标识性的语言。它包括一系列标签。通过这些标签可以将网络上的文档格式统一,使分散的 Internet 资源连接为一个逻辑整体。

超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。

2. HTML 的由来

HTML 的英文全称是 Hyper Text Marked Language,即超文本标记语言。

HTML 是由 Web 的发明者 Tim Berners-Lee 和同事 Daniel W. Connolly 于 1990 年创立的一种标记语言,它是标准通用化标记语言 SGML 的应用。

用 HTML 编写的超文本文档称为 HTML 文档,它能独立于各种操作系统平台(如 UNIX, Windows 等)。使用 HTML 语言,将所需要表达的信息按某种规则写成 HTML 文件,通过专用的浏览器来识别,并将这些 HTML 文件“翻译”成可以识别的信息,即现在所见到的网页。

3. 与普通文本的区别

普通文本文件,例如后缀名为 .txt 的文件,只能插入文字,段落等,而 HTML 文件,后缀名为 .html 的文件,既可以插入文字,段落,也可以插入表格,图片,链接,音频,视频等众多资源。

HTML 文件中,我们可以通过 HTML 标签,来实现不同的结构排列。而大部分 HTML 标签都有特定的样式和意义,所以,我们可以用这些标签自由组合,来完成网页的基本结构。

4. HTML 的标准

超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。

网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。

浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。

提示:但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。

HTML 现在最新标准为第五代标准,又简称为 HTML5 。HTML 在 Web 迅猛发展的过程中起着重要作用,有着重要的地位。但随着网络应用的深入,特别是电子商务的应用,HTML 过于简单的缺陷很快凸现出来。HTML 不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML 只能用于信息显示。HTML 可以设置文本和图片显示方式,但没有语义结构,即 HTML 显示数据是按照布局而非语义的。

随着网络应用的发展,各行业对信息有着不同的需求,这些不同类型的信息未必都是以网页的形式显示出来。例如,当通过搜索引擎进行数据搜索时,按照语义而非按照布局来显示数据会具有更多的优点。

5. HTML 的特点

  1. 简易性: 超级文本标记语言版本升级采用超集方式,从而更加灵活方便;

  2. 可扩展性: 超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,它采取子类元素的方式,为系统扩展带来保证;

  3. 平台无关性: 虽然个人计算机大行其道,但使用 MAC 等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因;

  4. 通用性: 另外,HTML 是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,无论使用的是什么类型的电脑或浏览器,这些页面可以被网上任何其他人浏览到。

6. HTML 的应用

如果我们需要编写网页,那么 HTML 为我们提供的标签,就成为了网页的结构。总结起来就是,HTML 为网页提供了基本结构。所以我们要编写网页,HTML 就成为了我们的第一课。

7. 课程设计

由于咱们这门课程是面向基础人群,从零开始进入到 HTML 的学习中。所以我们在课程设计上:

  1. 首先我们会介绍一下 HTML,去了解HTML的一些基本概念、结构格式以及基本语法等内容;

  2. 其次我们将会从结构上认识各个关键的标签,对他们进行讲解;

  3. 最后我们将对 HTML 中主要标签的介绍和使用做一一讲解;

为了保证大家能够尽快的了解各个标签,我们将在每一个小节中的 “真实案例分享”环节把该标签的 真实场景 列举出来,方便大家参照。

8. 学习基础

本课程适用于对于前端没有基础,想要了解学习前端 HTML 知识内容的同学们。

HTML 与 CSS 的关系

上一章节学习了 HTML 的基本概念,我们也知道了 HTML 到底是什么。那么我们在前端领域,经常能听到前端的三架马车,HTML,CSS 和 JavaScript。

HTML 组成了网页的基本结构,那么 CSS 就是给网页当中所有的结构添加样式,让我们的网页不再单调,从而变成一个炫酷的网站。

而 JavaScript 则提供了交互功能,让我们能够在网页中做各种各样的操作,这一小节,我们来学习一下 HTML 与 CSS 的具体作用和关系。

1. HTML 的作用

HTML 标签构成了网页的基本结构,虽然大部分标签有自带的样式,但是并不能满足我们实际的需求,而且有些标签,我们甚至要取消某些标签的默认样式,所以我们需要 CSS 来优化 HTML 标签的样式。

只有 HTML 标签构成的网页就像是一个清水房,只有一个架子,我们还需要给房子做装修,才能变成一个完整的家。

2. CSS 的作用

CSS 是将样式信息与网页内容分离的一种标记语言,我们使用 CSS 为每个元素定义样式,它主要用于美化HTML页面。

通过设置对应的 CSS 样式属性可以修改 HTML 文档内各元素的显示、位置等样式。如修改颜色、字体、字号、宽高、位置、背景等。

CSS 不仅能取消 HTML 标签的默认样式,还能给 HTML 标签加上我们自定义的样式属性。

CSS 就像我们给清水房做了装修,让一个空架子一下子丰富起来,网页也是如此,我们要编写一个完整炫酷的网页,需要 HTML 搭配 CSS 一起使用。

3. HTML 和 CSS 如何结合(CSS的引用方式)

我们想要给 HTML 标签书写样式,那么我们需要结合 CSS 一起使用。怎么样在 HTML 文件当中使用 CSS 呢?我们有 3 种方式:

  1. 通过内联样式来书写样式;

  2. 通过 style 标签来书写样式;

  3. 通过 link 标签引入外部 CSS 文件来书写样式。

htmlcss是什么意思,html和css的关系

4. 经验分享

  1. 如果页面样式不复杂,可以采取 style 标签来书写样式;

  2. HTML 很多标签有默认样式,有时候我们可以借助这些标签的默认样式。如果我们不需要标签的默认样式,我们可以先清除所有标签的默认样式;

  3. 搭建网页,我们一般先写网页结构,先用 HTML 标签把网页架子搭起来,然后再给 HTML 标签加上 CSS 样式;

  4. 因为 div 标签是没有默认样式的,所以很多时候我们喜欢使用 div标签,然后自定义样式。

5. 小结

htmlcss是什么意思,html和css的关系

网页的基本结构由 HTML 构成, 而 CSS 则可以为 HTML 标签添加样式,让本来平平无奇的 HTML 标签,变得光鲜亮丽起来,你也可以把它理解为一个化妆师,为干瘪的标签浓妆淡抹。

掌握了 HTML 知识,还远远不够,只有将 HTML 与 CSS完美结合,才能编写出各式各样的网站。

HTML 基本语法

HTML 它有属于它自己的一套专属语法。我们如果想要编写一个完整的网页,那么我们就必须遵循 HTML 的语法来编写代码,HTML 都是由各种标签构成的,我们只需要记住这些标签的写法和意义,那么我们就可以编写网页的基本结构了。

HTML 文件都由不同的标签构成的:

  <!DOCTYPE HTML>
    <HTML lang="en">
    <head>
      <title>HTML基本语法</title>
    </head>
    <body>
      <p>这是一段话</p>
      <h1>我是一个大标题</h1>
      <a href="https://www.baidu.com">百度</a>
    </body>
    </HTML>
代码块1234567891011

1. HTML 的构成

HTML 文件都是由标签构成的,大部分标签都是双标签,由头标签和尾标签组成,小部分标签为单标签,没有尾标签。每个标签有特定的作用,例如,代表“连接”的 a 标签,代表“图片”的 img 标签等。

2. 标签的基本写法

2.1 双标签的写法

  <p>
  这是一段话
  </p>
代码块123

总结: 双标签是成对出现的, 尾标签在标签名前会多一个/。

2.2 单标签的写法

<img src='https://www.imooc.com/static/img/index/logo.png' alt='慕课logo'>
代码块1

总结:单标签没有尾标签。


本文地址:百科问答频道 https://www.neebe.cn/wenda/903174.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


百科问答
小编:小易整编
相关文章相关阅读
  • HTML列表标签有哪些

    HTML列表标签有哪些

    HTML的列表标签分为3种,无序列表,使用ul标签定义;有序列表,使用ol标签定义;自定义列表,使用dl标签定义。超文本标记语言,简称:HTML,标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML...

  • css布局技巧,css常见布局汇总

    css布局技巧,css常见布局汇总

    css布局技巧,css常见布局汇总要点速看网页开发基本思路:确定版心--》分析行模块--》分析列模块;如果一行当中有多个模块,一定要放在同一个父模块中;列模块首先可以先给宽高背景颜色,实例化盒子;常见布局:两栏/三栏/等高/粘带推荐flex...

  • html5教程,零基础html5自学教程

    html5教程,零基础html5自学教程

    html5教程,零基础html5自学教程通常我们看到的网页是是以.htm或.html结尾的文件,通俗称为HTML文件。HTML是超文本标记语言,是用来描述网页的一种语言。接下来我们一起开始学习HTML叭~网页的基本信息下面是一段简单的代码<...

  • innertext和innerhtml的使用和区别

    innertext和innerhtml的使用和区别

    innertext和innerhtml的使用和区别1、js中innerHTML的用法bai:innerHTML可获取或设置指定元素标签内的duhtml内容,从该元素标签的起始位置zhi到终止位dao置的全部内容(包含html标签)。获取元素...

  • html表单怎么制作,html表单代码

    html表单怎么制作,html表单代码

    html表单怎么制作,html表单代码HTML表单大部分情况下,网页中展示的数据或者图片或者多媒体效果都是静态的数据,但是有时用户需要通过网页跟服务器进行动态的数据交互,例如登录、注册等操作,这时需要用到表单。表单其实是由一些输入框、单选、...

  • shtml和html的区别是什么,shtml和html的差别

    shtml和html的区别是什么,shtml和html的差别

    shtml和html的区别是什么,shtml和html的差别有很多大型门户网站都是使用的SHTML,但是个人网站或是企业网站确实很少使用SHTML,那么究竟SHTML和HTML的差别在哪?网站建设过程中,选择哪种更有利于优化呢?SHTML和...

  • css选择器有哪些,css选择器怎么用

    css选择器有哪些,css选择器怎么用

    css选择器有哪些,css选择器怎么用 CSS选择器又被称为CSS样式属性、CSS属性选择器,CSS中的“选择器”指明了“{}”中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素;常用选择器可分为标签名选择器、类选择器、id选择器...

  • href是什么意思,HTML中src与href的区别

    href是什么意思,HTML中src与href的区别

    href是什么意思,HTML中src与href的区别一、href的概念1规范解释href(HypertextReference)指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。2通俗...

  • 周排行
  • 月排行
  • 年排行

精彩推荐