html基础01--简单介绍html的作用及其结构

--引入

什么是html?

HTML(Hyper Text Markup Language)超文本标记语言。

 -->那么第一个问题----什么是标记语言呢?

  标记语言就是让文本展示更丰富,更美观的一种语言。比如说文本加粗 更换颜色 斜体……

而html这种标记语言就是为了让网页展示更丰富,更美观的一种语言。

开发者使用特定的格式,对文本进行不同的加工,这个特定的格式对于html来说就是html标记标签。大概是这个样子:

<html>
    <head>
    </head>
    <body>
    </body>
</html>

html标记标签,一般可以简称为html标签:

  ·每个标签都是由两个尖括号‘封装‘起来的,标签不区分大小写,但建议使用小写字母

  ·标签分为闭合标签和自闭合标签。闭合标签成对出现,如:<html>  </html> 自闭合标签如:<br/>

  ·成对的标签中的第一个标签被称为开始标签或者开放标签,第二个标签则被称为结束标签或者闭合标签

html元素

说到html标签就不得不说跟标签相关的一个概念--html元素。

html元素指的是成对的闭合标签以及其中的文本内容或者是自闭合标签,也就是:

<p> hello world </p>
<br/>

以上两个都是html元素。大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。

开发者使用html元素编写html文档(也就是我们平常所说的网页)。我们访问网页时,一般会用浏览器进行访问,浏览器的作用就是解析html标签,然后显示网页内容。

举例:

<html>

<body>

<p>hello world!</p>

</body>
</html>

浏览器则仅会显示hello world!

--html结构

如果我们要编写html网页,了解其结构以及每个部分的功效都是必须的。

doctype声明

  一般来说,所有的html网页最开始都会有<!DOCTYPE>声明。他让浏览器知道本网页是由html的哪个版本编写的。

Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。

  HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。

html5中的声明:

<!DOCTYPE html>

head元素

<head>元素是所有头部元素的容器,也就是说<head>元素中可以嵌套许多其他头部元素。<head>元素定义了关于html文档的相关信息。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

最为常见的例子就是,<title>标签一般嵌套在<head>元素中。

<html>
<head>
    <title>This is a title</title>
</head>
<body>
<p>hello world</p>
</body>
</html>

百度首页中的页面源码有这样一句:

<title>百度一下,你就知道</title>

这就是title元素的作用。

在<head>元素中还有很多的元素,但其中所涉及的知识暂时并没有讲到,所以后续章节中会介绍到。

<body>元素

  <body>元素跟网页内容相关性极大,一般情况下,网页的内容相关的元素都要嵌套在<body>元素下。

列举几个<body>中常见的嵌套元素:

<p>段落</p>
<h1>标题格式</h1>
<html>

<body>
<h1>test</h1>
<p>hello world</p>
</body>

</html>

浏览器显示结果:

不论是<head>元素或者是<body>元素,这两者在网页编写过程中都不是必需的。但一个健壮且丰富的网页是离不开这两个元素的。

时间: 2024-12-19 10:26:13

html基础01--简单介绍html的作用及其结构的相关文章

ios开发UI基础—Kvc简单介绍

一.KVC简单介绍 KVC key valued coding 键值编码 KVC通过键值间接编码 补充: 与KVC相对的时KVO,即key valued observer 键值观察.监听某一个模型的属性,只要模型属性的值一变化就通知你. 二.使用KVC 1.KVC基本使用介绍 (1)代码示例: 新建一个命令行项目,用以演示KVC的用法 完成之后为项目添加一个Person类. 为Person类添加两个属性(name和age),注意这两个属性的类型. 1 #import <Foundation/Fo

shell脚本基础的简单介绍与简单应用

Shell脚本是Linux中很重要的一种"程序". 什么shell脚本? shell脚本是提前设计的可执行语句,用来完成特定任务的文件. Shell脚本可分为交互式和非交互式 交互式:指脚本在运行时,需要一些人为的参与,比如,键盘输入数据,确认选项等.因为有人为的参与,所以运行时更加智能化,但是同时效率会降低 非交互式:指脚本运行时不需要人为干预,批量执行,效率高,但提高智能化难度大 2  shell脚本的规范格式 #!环境申明 # 注释文本 可执行代码 以上就是shell脚本的规范格

ActiveMQ基础教程----简单介绍与基础使用

概述 ActiveMQ是由Apache出品的,一款最流行的,能力强劲的开源消息总线.ActiveMQ是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,它非常快速,支持多种语言的客户端和协议,而且可以非常容易的嵌入到企业的应用环境中,并有许多高级功能. 特性 遵循JMS规范:ActiveMQ的各种特性是JMS1.1规范的实现.它们包括同步和异步消息传递,一次和只有一次的消息传递,对于预订者的持久消息等等.依附于JMS规范意味着,不论JMS消息提供者是谁,同样的基本特

JSON基础,简单介绍

JSON(JavaScript Object Notation(记号.标记)) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等).这些特性使JSON成为理想的数据交换语言.JSON易于人阅读和编写,同时也易于机器解析和生

Dubbo学习总结 01 简单介绍

一 Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的,只有在分布式的时候,才有dubbo这样的分布式服务框架的需求,并且本质上是个服务调用的东东,说白了就是个远程服务调用的分布式框架(告别Web Service模式中的WSdl,以服务者与消费者的方式在dubbo上注册) 其核心部分包含:1. 远程通讯: 提供对多种基于长连接的NIO框架抽象封装,

Nodejs in Visual Studio Code 01.简单介绍Nodejs

1.开始 作者自己:开发人员,Asp.Net , html / js , restful , memcached , oracle ,windows , iis 目标读者:供自己以后回顾 2.我看Nodejs 一个运行时语言,可以使用javascript编写网站程序: 可以运行在windows和linux上,并且不需要iis或tomcat就能够独立运行: 写一些基于业务的API很方便,适合做项目: 据说可以处理高并发等等各种高能,但是我现在并不会: 3.安装Nodejs Nodejs : htt

Maven实战之初识MavenMaven的简单介绍

Maven实战之初识MavenMaven的简单介绍 作用:Maven主要用于项目的构建,管理项目的依赖以及项目的信息(自动化构建.编译.单元测试.生成文档.打包.部署) 优势:相对于Ant.Make等,Maven抽象构建过程,提供构建任务的实现,自动化构建,有效地提高了开发效率,使开发人员可以集中精力在主要的开发任务上.而且Maven是跨平台工具,意味着在主流操作系统中,Maven都提供了对应的技术支持 使用注意:需要在JDK1.4及以上版本使用 Maven的安装下载地址:Maven下载地址,选

link标签的rel等属性属性的作用简单介绍

link标签的rel等属性属性的作用简单介绍:大家知道通过<link>标签可以引入外部样式表,例如: <link rel="stylesheet" type="text/css" href="style.css" /> 属性解析:1.href:规定引入文件的路径.2.type:规定被链接文件的格式类型.3.rel:用来规定当前文档与被连接文档的关系.如果rel的值是stylesheet,也就是说引入的文件可以作为当前文件的

a:active的作用是什么简单介绍

a:active的作用是什么简单介绍:本章节介绍一下a:active的作用是什么,需要的朋友可以做一下参考.它的作用是规定链接激活状态下的样式规则.很多初学者可能对这个"激活状态"不太理解,下面做一下介绍:所谓的激活状态就是鼠标按键在链接上按下但是还没有松开时的状态.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&