目录1. 什么是HTML2. 剖析一个HTML元素2.1 创建你的第一个HTML元素2.2 嵌套元素2.3 空元素3. 属性3.1 为元素添加属性3.2 布尔属性3.3 省略属性值周围的引号3.4 单引号还是双引号4. 剖析HTML文档4.1 为HTML文档添加一些特性4.2 HTML中的空白5. 字符引用在HTML中包含特殊字符6. HTML注释参考待了解1. 什么是HTMLHyperText Markup Language HTML是一种标记语言它告诉Web浏览器如何组织你访问的网页。它可以像Web开发者希望的那样复杂或简单。HTML由一系列元素组成你使用这些元素来包围、包装或标记内容的不同部分使其以某种方式显示或运作。闭合的标签可以使内容成为一个连接到其他页面的超链接、将文字变为斜体等等。考虑一下文本My Cat is very grumpy我们想让这段文本独立成段我们可以用段落p元素来包裹它pMy Cat is very grumpy/pHTML存在于扩展名为.html的文本文件中这种文件被称为HTML文档简称文档。一个HTML文档包含了网页的内容并指定了其结构。你将遇到的最常见的HTML文件是index.html它通常用于包含网站主页的内容。同样常见的是看到带有各自index.html的子文件夹因此一个网站可以在不同的位置有多个索引文件。HTML中的标签不区分大小写。为了保持一致性和可读性最佳实践是所有标签都用小写书写。2. 剖析一个HTML元素esmp;一个HTML元素的构成如下1. 开始标签opening tag由元素的名称包裹在开、闭角括号中组成。这个开始标签标志着元素开始或生效的位置。2. 内容content这是元素的内容。3. 结束标签closing tag这与开始标签相同只是在元素名称前包含一个正斜杠。这标志着元素的结束。2.1 创建你的第一个HTML元素在WebStorm中新建一个html文件在body/body之间填入em和/em标签会让文本变为斜体格式pMy Cat is very grumpy/pem这是我的文本/em2.2 嵌套元素元素可以放置在其他元素内部。这称为嵌套。如果我们想要表明我们的小猫脾气很暴躁可以将很这个词用strong元素包裹起来这意味这个词将以粗体的文本格式显示p我们的小猫脾气strong很/strong暴躁。/p嵌套有正确和错误的处理方式。在上面的例子中我们先打开了p元素然后打开了strong元素。为了正确嵌套我们应该先关闭strong元素然后再关闭p元素。2.3 空元素并非所有元素都遵循开始标签、内容和结束标签的模式。有些元素只包含一个标签通常用于在文档中插入/嵌入某些东西。这类元素被称为空元素。例如img元素可以在页面上嵌入一个图像文件imgsrchttps://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.pngaltFirefox 图标/在HTML中没有要求在空元素的标签末尾添加/。3. 属性元素也可以有属性。pclasseditor-noteMy cat is very grumy/p属性包含关于元素的额外信息这些信息不会出现在内容中。在上面的代码中class属性是一个标识名称用于通过样式信息来定位元素。一个属性应该有1. 一个在它和元素名之间的空格。对于拥有多个属性的元素属性之间也应该用空格分分隔。2. 属性名后跟一个等号。3. 一个属性值用开始和结束的引号包裹。3.1 为元素添加属性以img为例向其添加属性。img元素可以接受多个属性包括1. src一个必须的属性指定图像的位置。2. alt图像的文本描述。3. width图像的宽度单位为像素。4. height: 图像的高度单位为像素。imgsrchttps://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.pngaltFirefox 图标width400height400/3.2 布尔属性有时你会看到没有值的属性。这是完全可以接受的。这些被称为布尔属性。当一个布尔属性没有值或有任何值时该布尔属性总是被设置为true。否则如果该属性没有写在HTML标签中该属性就被设置为false。规范要求该属性的值要么是空字符串要么与属性的名称相同但其他的值作用也一样。例如考虑disabled属性你可以把它赋给表单输入元素。你可以用它来禁用表单输入元素这样用户就不能输入内容了。被禁用的元素通常呈现为灰色。inputtypetextdisableddisabled/简写!-- 使用disabled属性来防止终端用户输入文本到输入框中--inputtypetextdisabled/!-- 下面这个输入框不包含disabled属性所以用户可以向其中输入 --inputtypetext/3.3 省略属性值周围的引号如果你查看许多其他网站的代码你可能会遇到一些奇怪的标记样式包括没有引号的属性值。这在某些情况下是允许的但在其他情况下也可能破坏你的标记。a元素被称为锚点。锚点包裹文本并将其变成链接。href属性指定了链接指向的网址。ahrefhttps://www.mozilla.org/最喜欢的网站/a锚点也可以有一个title属性用来描述链接的页面。然而我们一旦像href属性一样添加title问题就来了ahrefhttps://www.mozilla.org/titleTheMozillahomepage最喜欢的网站/a浏览器会误解标记将title属性误认为三个属性一个值为The的title属性以及两个布尔属性Mozilla和homepage。title显示为The。始终包含属性引号就可以避免此类问题并使代码更具可读性。3.4 单引号还是双引号在本文中你会注意到属性都是用双引号包裹的。然而你可能在某些HTML代码中看到单引号。这是一个风格问题。你可以随意选择你喜欢的一种。下面这两行是等效的ahrefhttps://www.example.com一个指向示例的链接。/aahrefhttps://www.example.com一个指向示例的链接。/a确保不要混合使用单引号和双引号。但是如果你使用一种类型的引号你可以在属性值内部包含另一种类型的引号ahrefhttps://www.example.comtitle你觉得好玩吗一个指向示例的链接。/a要在相同类型的引号内使用引号(单引号或双引号)请使用字符引用。ahrefhttps://www.example.comtitle一个quot;有趣quot;的引用一个指向示例的链接。/a4. 剖析HTML文档单个HTML元素本身并不是很有用。接下来我们看看单个元素如何组合成一个完整的HTML页面!doctypehtmlhtmllangzh-CNheadmetacharsetutf-8/title我的测试页面/title/headbodyp这是我的页面/p/body/html1. !doctype html文档类型声明doctype。在HTML早期doctype旨在作为一套规则的链接HTML页面必须遵循这些规则才能认为是好的HTML。过去的doctype看起来像!DOCTYPEhtmlPUBLIC-//W3C//DTD XHTML 1.0 Transitional//ENhttp:://www.w3.org/TR/xhtml1/DTDxhmtl1-transitional.dtd最近doctype成为了一个历史遗留物为了让其他一切正常工作而必须包含它。!doctype html是算作有效doctype的最短字符序列。2. html/htmlhtml元素。这个元素包裹了页面上的所有内容。它有时被称为根元素。3. head/headhead元素。这个元素充当一个容器用于存放你想包含在HTML页面中但不向页面浏览者显示的内容。这包括会出现在搜索结构中的关键字和页面描述、用于样式化内容的CSS、字符集声明等等。4. meta charset“utf-8”meta元素。这个元素代表了不能由其他HTML元相关元素表示的元数据。charset属性将你的文档的字符编码指定为UTF-8。它包含了绝大多数人类书面语言的字符。通过这个设置页面现在可以处理它可能包含的任何文本内容。没有理由不设置它而且它可以帮助避免以后的一些问题。5. title/titletitle元素。它设置了页面的标题这个标题会出现在加载该页面的浏览器标签页中。当页面被收藏为书签时页面标题也用于描述该页面。6. body/bodybody元素。它包含了在页面上显示的所有内容包括文本、图像、视频、游戏、可播放的音轨或其他任何东西。4.1 为HTML文档添加一些特性!doctypehtmlhtmllangzh-CNheadmetacharsetutf-8/title我的测试页面/title/headbodyp这是我的页面/p/body/html要求1. 在body元素的开始标签正下方为文档添加一个主标题。这应该被包裹在h1开始标签和/h1结束标签内。2. 编辑段落内容使其包含一些其他文本。3. 通过将重要的词语包裹在strong元素内使其以粗体突出显式。4. 在你的段落中添加两个链接。通过a元素实现。5. 在你的文档中添加一个图片。将其放在段落下方。如果图片太大看不清可以给它加一个width属性来缩小它。4.2 HTML中的空白代码中包含了很多空白。这是可选的。这两个代码片段是等效的pidnoWhitespace狗狗很 呆 萌。/ppidwhitespace狗狗很 呆 萌。/p无论你在HTML元素内容中使用了多少空白HTML解析器在渲染代码时都会将每个空白序列减少为单个空格。那么为什么要使用这么多空白呢答案是可读性。如果你的代码格式整齐就更容易理解代码中发生来了什么。在我们的HTML中每个嵌套的元素都比它所在的元素多缩进两个空格。选择什么样的格式化风格由你决定但你应该考虑格式化它。5. 字符引用在HTML中包含特殊字符在HTML中字符、、、和是特殊字符。它们是HTML语法本身的一部分。那么你如何在文本中包含这些特殊字符之一呢例如如果你想使用一个与号或小于号而不是让它被解释为代码。你需要使用字符引用。这些是代表字符的特殊代码用于在这些确切的情况下使用。每字符引用都以一个与号开始并以一个分号;结束。一部分字符引用字面字符字符引用等效项lt;gt;quot;’apos;amp;字符引用的例子pHTML中用p来定义段落元素。/ppHTML中用lt;pgt;来定义段落元素。/p第一个段落出错了。浏览器将第二个p实例解释为开始一个新段落。第二段看起来很好因为它用字符引用替换了尖括号。6. HTML注释HTML有一种在代码中写注释的机制。浏览器会忽略注释实际上使用户看不到注释。注释的目的是让你在代码中包含注释以解释你的逻辑或编码。如果你在离开很长时间后回到一个代码库以至于你不能完全记住它这就非常有用。同样当不同的人在进行修改和更新时注释也是非常宝贵的。要编写HTML注释请将其包裹在特殊标记!–和–中p我不在注释里/p!-- p但我在注释里/p --参考1、HTML基本语法待了解1、字符参考