任何一门语言,我们都需要掌握它的几样东西!
1、概念
我们都知道什么是汉语,什么是中文,什么是英文。那么html这个语言是什么东西呢?我们要明白它的概念。
2、目的
它的目的是什么,它能够做什么事情。
3、基本语法
中文有语法,英文有语法,html作为一门语言,它也有自己的基本语法,以及如何的使用它。
4、使用
具体我们该如何去使用它?
所以任何一门语言,我们都应该要分出这4个方面去了解。
html语言的概念
html语言,又叫超文本标记语言。
为了更便于记住,我们可以把它分解成三个部分来讲解,即超文本、标记、语言。
语言是什么?很好理解,它是浏览器的语言。我们和浏览器要沟通,要能让浏览器帮我们显示我们想要的页面,那么我们就得学习浏览器的语言,而这个html,它就属于浏览器可以直接解释的语言。
什么叫标记?
如图所示,<html><head><meta><title><style><body><h1><p>,这些都叫标记。
从图中我们还能看到,标记有两种样式,有些标记有头有尾,有些标记却只有开头,没有结束。
不同标记之间可能会有嵌套。比如图中h1标题标记,p段落标记,它们是独立的。但是它们整体所有标记,又放在一个叫body的标记里面。又比如图中的head标记,它里面包含了meta、title、style标记。说明标记具有嵌套性,但是不管它怎么嵌套,不管它有多复杂,它都是由一个一个的标记所构成的。
所以它叫标记语言。
什么叫超文本?或者说为什么叫超文本?这其实与我们网页的发展有关系。
我们都知道,网页提供给用户看的元素有很多。早期的网页常见的元素就只有文字,也就是文本。而超文本,意思就是网页上所有的信息,包括文本、图片、链接、表单、音视频等,不仅限于文字文本。
我们通过对这三个部分的理解,连起来就叫超文本标记语言。
html的目的
构成了网页上所有的结构和内容,展示给用户看的。也就是说网页上所有的内容都可以用合适的标记来描述。这里提到了一个词-结构,其实就是网页的布局、排版。合理的排版布局,构成的网页才美观。就像我们的房子一样,三室一厅,一厨一卫,需要布局结构,不能把所有东西都堆在一个大的空间里面。
我们的标记分为两部分,一部分用来放内容,比如前面说的h1、p标记,就主要是内容式标记,多用于存放内容的。另一部分用来布局的,比如div、li等,就像是把我们的房子划分成很多空间,大盒子里面包含小盒子,小盒子里面放内容。当然这个不是绝对的,盒子里面也可以直接放内容。
所以我们的页面不只是内容,并不是把所有的文字图片都揉到一起,不区分它们的结构,还必须有布局标记,让页面产生一种有组织的结构关系。
html的语法
我认为html的语法可以说是所有语言当中最简单的了。它就只有两种语法结构:
<标记名称>内容</标记名称>,两个相同的标记,结尾标记多加一个斜杠,组成一个标记对。
<标记名称>,只有开始,没有结束。
以后看到这种尖括号标记,它就一定属于html语言。
在使用中,通常会给标记添加属性,两种语法结构都可以添加属性,样式为
<标记名称属性=“属性值”属性=“属性值”>内容</标记名称>
html的使用(html文档的基本结构)
<!DOCTYPEhtml>,声明文档的类型,这段语句的意思是告诉浏览器,这是html文档,应当用html语言结构来解释它。
然后接html标记<html></html>,html标记分为两个部分,第一个部分是头部信息标记head,要提供给浏览器的一些基本信息。其中:
<metacharset="UTF-8">声明编码,告诉浏览器使用国际通用编码,能够识别所有语言,不会出现乱码。
<title>文档标题</title>声明标题,告诉浏览器这个网页是什么文档,同时也显示在网页导航条上,用户看得到的。这个标题对于SEO是非常有用的,大家都知道搜索引擎是有排名的,这个排名展示的就是标题。
<metaname="viewport"content="width=device-width,initial-scale=1.0">
视区,也叫视口。作用是自适应移动端,一般响应式网站都必须有这段代码,如果去掉,则只能作为PC端网站,不能适应移动端。
<meta