我们知道HTML5是由HTML+CSS+JavaScript,三部分组成。
其中HTML是Hyper Text Markup Language的缩写,那HTML主要是包含一系列的标签,我们把这些标签叫做HTML标签,它是HTML语言中最基本的单位、最重要的组成部分。我们一起来看看吧。
一、文档类型声明:
在具体聊HTML标签前,先来扯扯别的,我们平时接触的浏览器都有哪些呢?谷歌(Chrome)、火狐(Firefox)、欧朋(Opera)、IE、Safari等,有很多,对吧。那用户使用哪一种浏览器,作为开发人员来说也是不确定的,是吧。同时由于各大浏览器的内核不同,各个浏览器对页面的渲染上存在差异,就连同为IE浏览器的不同版本也不一样。自W3C标准推出后,浏览器渲染页面有了统一的标准,但一些旧的网页如何保证它们还能继续浏览呢?就只好将两种渲染方式共同存在一个浏览器上。这两种方式就是怪异模式与标准模式。
那如何识别是哪一种模式呢?就是我们的DTD(Document Type Definition),即网页文档声明的作用 。
这里仅介绍HTML4版本和HTML5版本的文档声明:
HTML4文档声明: 严格型(strict) 框架型(frameset)过渡型(transitional)
HTML5文档声明:<!DOCTYPE html> 较为简洁。
注意若是没有写文档声明,则会出现怪异解析哟。
二、文档的规范:
在上面这张图中,我们能看到最上面是文档的声明<!DOCTYPE html>。接着的其实就是HTML的标签,它们一般都是成对出现,且用<>符号表示,例如图中的<html></html>、<head></head>、<body></body>等标签,那么也存在像<meta>这样的单标签。在一个html标签里,有且仅有一对的head和body标签。
在head标签里,有meta和title标签,它们有什么含义和作用呢?
meta标签:
meta标签提供的是有关页面的元信息(meta-information),在meta标签里,我们看到charset=”utf – 8”,对吧,这是字符编码,因为不同国家的语言不同,其转义的方式不同,所以为了不会出现乱码的情况,我们必须加上一个字符编码,而“utf – 8”又被称为“万国码”。
meta标签的属性有两种:
1)name与content属性
name属性用于描述网页,它以名称/值来表现的,而name具体的内容则由content属性来表示。其中,name一般使用较多是:keywords(关键字)、description(简短的描述),便于爬虫查找与分类。
2)http-equiv与content属性
目前较多是使用它们的是进行页面的刷新与跳转页面。
title标签:
title顾名思义,就是用来表示这个网页是用来干什么的。title标签内的内容会在浏览器的标题栏中进行显示,平时我们收藏一些网页的书签名称就是title的内容。同时它可以方便搜索引擎索引页面,所以一定要加上,同时最好是和网站本身有关联性,不能是独立的。例如:
注意!!!!
meta标签一定是在title标签的前面。原因是:网页的读取顺序是从上到下,我们要先进行字符编码的设置,不然title里的内容就有可能会出现乱码了。
在head标签里放置的内容是不会在页面中显示的。页面中显示的内容是放在body里的。head部分除了放置meta、title标签,还有链接到CSS的link标签和链接到JS的script标签,这里就不介绍了,在之后的相应部分会再聊到的。
三、标签书写的规范:
1.代码缩进,使用Tab键。
2.标签通常是成对出现的,一开一关。也存在一些单标签,如:<meta />、<br />等。
3.标签与它的属性都必须小写。
4.所有的标签必须合理嵌套。
是这样的,标签存在一定的语义性,需要根据标签自身的属性来进行合理嵌套。例如:<p>
标签(paragraph)是用来定义段落的,就不用它来布局;像<div><span><em>一念成mo</span></em></div>是不对称的,这样是错误的。具体的基本嵌套规则:
1)body可以直接包含块状元素、ins、del、script。不可以直接包含行内元素
2)ins和del(行内元素)可以包含块状元素或者行内元素,其他任何行内元素都不允许包含块状元素
3)p、h1-h6可以直接包含行内元素和文本信息,但是不允许包含块状元素
4)dl元素只允许包含dt和dd,同时dt不能包含块状元素,只允许包含行内元素,对于dd可以包含任何元素
5)form元素不能够直接包含input元素。原因在于input元素属于行内元素,form元素仅仅能够包含块状元素
6)table元素只能够包含caption、colgroup、col、thead、tbody、tfoot,不能够直接包含tr或者其他任何元素
关于最后一部分嵌套不太理解的,没关系,等之后把具体的标签有哪些,各具有什么特点,进行闲扯后,再回来看就会更加清晰了,今天就先写到这了。�
D.ate...#吾日三省吾身# 梦想无关大小,只要做自己就好。