HTML标签书写规范那些事儿

我们知道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(简短的描述),便于爬虫查找与分类。

keywords

2)http-equiv与content属性

目前较多是使用它们的是进行页面的刷新与跳转页面。

refresh

title标签

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...#吾日三省吾身#     梦想无关大小,只要做自己就好。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,208评论 1 41
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,499评论 32 459
  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 3,996评论 1 25
  • 花莲村榆树下小溪旁 你单纯懵懂一如初时模样 牵你手不由心酸惆怅 这次,莫再轻放 还记一次次为你梳妆 为你调香为你洗...
    苏冽阅读 491评论 2 6