专栏首页程序媛生涯HTML网页概述:简单介绍和基本结构分析

HTML网页概述:简单介绍和基本结构分析

我们都知道,HTML只是一种标记语言,并非脚本语言。标记语言的意思就是,标记某种文档的语言。

比如:一个叫123.txt的文档,我们根据它的后缀txt就能判断出,这是一种文本文档,因为txt标记着文本文档;而一个叫123.doc的文档,我们根据它的后缀doc就能判断出,这是一种Word文档,因为doc标记着Word文档。

同样的原理,当我们看到后缀为html的文档时,我们就知道这是一个网页文档,比如index.html,test.html等。另外后缀为htm的文档也是网页文档。html和htm都是网页的标记,所以index.html和index.htm是一样的。

接下来我们了解一下HTML的发展以及其版本

(1)1993年6月发布HTML1.0版本

(2)1995年11月发布HTML2.0版本

(3)1997年1月发布HTML3.0版本

(4)1997年12月发布HTML4.0版本

(5)2014年10月发布HTML5版本

对于这些发展历程,大家了解一下就好了。另外,自从发布html3.0版本后,大家就开始使用w3c标准了,w3c是一个万维网联盟机构,是web技术领域最有权威和影响力的机构,我们都使用他们的一套标准规范。

之前说过,HTML需要使用编辑器来开发网页。编辑器工具有很多,在这里,推荐大家使用sublime text3。而展示HTML网页的浏览器,就推荐大家使用谷歌。

HTML网页有一个很常见的问题,浏览器上的中文全部变成看不懂的文字了。其实,那就是乱码。导致乱码的原因是HTML网页和浏览器的编码不一样,所以解决方法就是统一它们的编码问题。

HTML虽然在发展历程中产生了多个版本,但它们的基本结构还是一样的,就是声明文档稍微不一样。目前来说,HTML5是主流版本,所以我们将会以HTML5这个版本来解说HTML的相关介绍。

看以下代码,这是HTML5的基本结构,下面我们一一来解说

(1)<!DOCTYPE html>是文档声明,这是在告诉浏览器,这是html文档

(2)html是根标签。另外,像html,head,meta等都是标签,也叫元素。标签分为双标签和单标签。

像html,head,title,body这些标签都是双标签,因为它们有开始标签(如:<html>)和结束标签(如:</html>),它们成双成对存在的,缺一不可。而meta就属于单标签,因为meta只有开始标签,没有结束标签。

(3)head是头部标签。meta标签和title标签都要写在head标签里面。

(4)charset="UTF-8"是把网页编码设置为utf-8,而charset是属性,UTF-8是内容。一般情况下,属性和内容是这样搭配的,属性=“内容”,我们可以这样理解,颜色=“红色”,年龄=“18岁”,颜色,年龄就是属性,红色和18岁就是内容。

(5)title里面的内容在浏览器地址栏上面的窗口显示。

(6)body里面的内容是在浏览器的主体界面上显示。

(7)在这个基本结构中,还涉及到一个概念:缩进。看下图,三种不同颜色圈住的标签中,橙色比蓝色的标签往右了一小格,黄色比橙色的标签往右了一小格,而他们之间是包含关系,被包住的下层,往右退了一小格。这样看起来就清晰明了,易于维护和管理了。

另外,HTML里面还有一个注释的说法。<!-- 写内容 --> 这是HTML里面的注释,注释跟旁批是一样的意思,用来说明某段代码的用处等,方便我们理解自己写的代码,注释是不会在浏览器显示出来的,只有在编辑器或调试工具里面才能看的到。

这就是今天所讲的HTML网页概述,相对比较容易理解。大家记得在实操的时候,多思考,多实践,这样才能更快的成长。

本文分享自微信公众号 - 程序媛生涯(bcffl1024),作者:叶子幽

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • H5入门之文本标签和特殊字符

    在网页简介的文章中,我们已经接触过超链接标签了。除了超链接标签以外,h5还有很多展示不同内容的标签,其中包括文本标签。那么,什么是文本标签呢?文本标签是用来展示...

    邂逅千寻
  • HTML文本和图像:做一个简单的文章网页

    我们已经了解过HTML的基本结构了,那么,现在,我们通过一个简单的文章网页案例来跟大家讲解一下HTML的部分基础知识。文章网页的效果图如下,有点丑,但包含了很多...

    邂逅千寻
  • H5入门之图像和多媒体

    H5入门时,图像一般是指图片相关的标签,而多媒体是指音频和视频相关的标签。以下是图像相关标签的示例:

    邂逅千寻
  • HTML简介

    白胡杨同学
  • 0基础HTML

    一、什么是HTML HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标...

    奶糖味的代言
  • html初识

    浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、Safari和Opera等

    py3study
  • JavaWeb——web概念概述(静态资源与动态资源)、HTML概念概述

    以上分析可知,我们要学习动态资源,必须要先学习静态资源。静态资源三剑客,各自的作用:

    Winter_world
  • 【Python】Python爬虫爬取中国天气网(一)

    最近想写一个爬取中国天气网的爬虫。所以打算写一个关于爬虫的系列教程,本文介绍爬虫的基础知识和简单使用。

    树枝990
  • html 摸鱼中(1)

    HTML 文档描述网页 HTML 文档包含 HTML 标签和纯文本 HTML 文档也被称为网页 Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出...

    blankmiss
  • 带你了解网页是怎样做出来的

    对的,你没有看错,就是上面这些密密麻麻的字符拼凑在一起就构成了这样的一个百度首页,淘宝网站的一个个商品网页,视频网站等也是同样的原理组成的。网页组合在一起就构成...

    用户7054460

扫码关注云+社区

领取腾讯云代金券