HTML学习笔记(一)--认识HTML

制作网页的第一步,就是编写 HTML 文件。

HTML(HyperText Markup Language,超文本标记语言)并不是真正的编程语言,它是一种标记语言,用于定义一个网页的结构。它详细地说明了网页的各部分内容应该被理解为段落、列表、链接、图像或者是其他形式的内容。

HTML的标准规范由W3C组织制定,我们可以先来认识一下W3C。

一、W3C和MDN

W3C

W3C(World Wide Web Consortium,万维网联盟)是万维网之父 Sir Timothy John Berners-Lee 于1994年建立的组织。

为解决网络应用中不同平台、技术和开发者带来的不兼容问题,保障网络信息的顺利和完整流通,W3C制定了一系列标准并督促网络应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范,开发中使用的导则和解释引擎的行为等等。除了HTML,W3C还制定了包括XML和CSS等的众多影响深远的标准规范。

在W3C的网站上可以查看HTML的规范文档。

MDN

MDN(Mozilla Developer Network),Mozilla开发者社区,是一个完整的学习平台,汇集了众多Mozilla基金会产品和网络技术开发文档。W3C网站上提供的官方规范文档冗长复杂,而且只有英文的版本。MDN则提供了一种简洁的文档形式,并且保证了内容的严谨性和准确性。基于这些特点,可以把MDN作为官方文档一个替代品,更加快捷地查询相关资料。

二、HTML

如前文所述,HTML是一种标记语言,它由一系列元素(element)组成,这些元素可以用来封装、包装或标记不同内容,使其以某种方式显示,或以某种方式执行。

元素的组成

如下图示例:



它分为以下几部分:

  1. 开始标签(opening tag):包含元素名(本例为p),由尖括号包围,是一个元素的起始点。在本例中表示段落由此开始。
  2. 闭合标签(closing tag):与开始标签相似,只是在元素名之前加一个斜杠,是元素的结尾。在本例中表示段落到此结束。
  3. 内容(content):元素的内容。本例中就是所输入的文本。
  4. 元素(element):开始标签、结束标签和内容共同构成一个完整的元素。

属性

元素还可以具有属性(attribute),例如:

<p class="class-name">xxxxxxxxx</p>

属性包含了关于元素的一些额外的信息,这些信息不会出现在实际的内容中。在这个例子里,class是一个属性名称,class-name是属性的值(value)。class属性为元素提供一个标识名称,以便进一步为元素指定样式或进行其他操作时使用。

属性的写法:

  1. 在元素和其他属性之间以空格隔开
  2. 属性后面紧跟着一个“=”符号
  3. 属性的值,由一对引号“ ”包围
<p attribute1="value" attribute2="value2">xxxxxxxxx<p>

此外,某些属性可以没有值,这类属性叫做布尔属性,如disabled、selected等,例:

<input type="text" disabled>

这表示一个不可用的输入框

空元素

空元素只有一个标签,没有内容和结束标签,通常用来在此元素所在位置插入一些东西。
例如<img>元素:

<img src="xxxxx/xxxxx.png" alt="test image">

它包含了两个属性,src和alt,但是并没有 </img> 闭合标签,也没有内容,它的作用是向其所在的位置嵌入一个图像。

块级元素和内联元素

在HTML中有两种重要的元素类别,块级元素和内联元素。

  • 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容,例如段落、列表、导航菜单、页脚等等。一个块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中。
  • 内联元素通常出现在块级元素中并包裹文档内容的一小部分,而不是一整个段落或者一组内容。内联元素不会导致文本换行,它通常出现在一堆文字之间,例如超链接元素<a>或者强调元素<em>和 <strong>。

【注】:实际上,一个元素是块级元素还是内联元素是由CSS来控制的,而浏览器会给HTML的元素提供默认的样式,一个HTML元素之所以是块级元素,是因为浏览器给它提供的默认样式是块级的。

可替换元素

可替换元素(replaced element)是一种外观渲染独立于CSS的元素,它是一种外部对象,其外观样式来自于目标内容本身 。例如<img>元素,它在页面中会被替换为目标图像,具备自己的宽高等属性。
典型的可替换元素还有<object>、 <video>和表单元素<textarea>、<input>等 。

注释

HTML的注释写法为:

<!-- 这里是注释 -->

(完)

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,754评论 1 92
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,125评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,491评论 1 45
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,340评论 0 7
  • 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西...
    微醺岁月阅读 4,485评论 2 62