快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

[前端笔记——HTML介绍]2.开始学习HTML-创新互联

[前端笔记——HTML介绍] 2.开始学习HTML
  • 1什么是HTML?
  • 2剖析一个HTML元素
  • 3块级元素和内联元素
  • 4空元素
  • 5属性
  • 6为一个元素添加属性
  • 7布尔属性
  • 8省略包围属性值的引号
  • 9单引号或双引号?
  • 10剖析HTML文档
  • 11实体引用:在 HTML 中包含特殊字符

成都创新互联公司于2013年开始,是专业互联网技术服务公司,拥有项目网站制作、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元龙城做网站,已为上家服务,为龙城各地企业和个人服务,联系电话:189820811081什么是HTML?

HTML (HyperText Markup Language) 不是一门编程语言,而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单,一切取决于开发者。它由一系列的元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。一对标签( tags)可以为一段文字或者一张图片添加超链接,将文字设置为斜体,改变字号,等等。
例如下面一行内容:

My cat is very grumpy

可以将这行文字封装成一个段落(Paragraph)

元素来使其在单独一行呈现:

My cat is very grumpy

HTML 标签不区分大小写。也就是说,输入标签时既可以使用大写字母也可以使用小写字母。例如,标签写作<title>、<TITLE>、<Title>、<TiTlE></code>,等等都可以正常工作。不过,从一致性、可读性来说,最好仅使用小写字母。</p>2剖析一个HTML元素<p><img src="/upload/otherpic40/8a9028985e1b4d36b8c2c690208675e5.jpg" alt="在这里插入图片描述" /><br />这个元素的主要部分有:</p><p>1.开始标签(Opening tag):包含元素的名称(本例为 p),被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。<br />2.结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。<br />3.内容(Content):元素的内容,本例中就是所输入的文本本身。<br />4.元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。</p><p>通过使用标签<code><em>和</em></code>——这使得行内容变成斜体强调:</p><pre><code><em>刀枪剑戟 斧钺钩叉</em></code></pre><p>也可以把元素放到其它元素之中——这被称作嵌套:</p><pre><code><p>My cat is very grumpy.</p></code></pre>3块级元素和内联元素<p>在HTML中有两种重要的元素类别——块级元素和内联元素。</p><p>块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容,例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中。</p><p>内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。内联元素不会导致文本换行:它通常出现在一堆文字之间,例如超链接元素<code></code>或者强调元素:<code><em></code>和<code></code>。<br />比如:</p><pre><code><em>第一</em><em>第二</em><em>第三</em><p>第四</p><p>第五</p><p>第六</p></code></pre>4空元素<p>不是所有元素都拥有开始标签,内容,结束标签。一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。例如:元素是用来在元素所在位置插入一张指定的图片。比如:</p><pre><code><img src="/upload/otherpic40/firefox-icon.jpg"></code></pre><p>空元素(Empty elements)有时也被叫作 void elements.</p>5属性<p>元素也可以拥有属性,如下:<br /><img src="/upload/otherpic40/b87e66ae4268487db4f42d059edc6b6a.jpg" alt="在这里插入图片描述" /><br />属性包含元素的额外信息,这些信息不会出现在实际的内容中。在上述例子中,这个 class 属性给元素赋了一个识别的名字(id),这个名字此后可以被用来识别此元素的样式信息和其他信息。<br />一个属性必须包含如下内容:</p><ol><li>一个空格,在属性和元素名称之间(如果已经有一个或多个属性,就与前一个属性之间有一个空格)。</li><li>属性名称,后面跟着一个等于号。</li><li>一个属性值,由一对引号 (“”) 引起来。</li></ol>6为一个元素添加属性<p>元素<code></code>是锚,它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性,其中几个如下:</p><ol><li>href<br />这个属性声明超链接的 web 地址,当这个链接被点击浏览器会跳转至 href 声明的 web 地址。例如:<br />href=“https://www.mozilla.org/”。</li><li>title<br />标题title属性为超链接声明额外的信息,比如你将链接至的那个页面。例如:<br />title=“The Mozilla homepage”。<br />当鼠标悬停在超链接上面时,这部分信息将以工具提示的形式显示。</li><li>target<br />目标target属性用于指定链接如何呈现出来。例如,target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接,忽略这个属性即可。<br />比如:</li></ol><pre><code><p>欲练<a href="https://zh.wikipedia.org/zh-hans/葵花宝典" title="葵花宝典简介" target="_blank">葵花宝典</a>,需引刀自宫</p></code></pre>7布尔属性<p>有时会看到没有值的属性,它是合法的。这些属性被称为布尔属性,它们只能有跟它的属性名一样的属性值。例如disabled 属性,他们可以标记表单输入使之变为不可用 (变灰色),此时用户不能向他们它入任何数据。</p><pre><code><input type="text" disabled="disabled"></code></pre><p>方便起见,完全可以将其写成以下形式:</p><pre><code><input type="text"></code></pre>8省略包围属性值的引号<p>有时,不给属性值添加引号是合法的。比如:</p><pre><code><a href=https://www.mozilla.org/>收藏页面</a></code></pre><p>但是如果再添加一个属性时就会报错。</p>9单引号或双引号?<p>都可以用,但是注意单引号和双引号不能在一个属性值里面混用,否则会报错。</p>10剖析HTML文档<pre><code><!DOCTYPE html><html><head><meta charset="utf-8"><title>我的测试站点

这是我的页面

分析如下:

  1. : 声明文档类型。很久以前,早期的 HTML(大约 1991 年 2 月),文档类型声明类似于链接,规定了 HTML 页面必须遵从的良好规则,能自动检测错误和其他有用的东西。使用如下:

这种写法已经过时了。

  1. 元素。这个元素包裹了整个完整的页面,是一个根元素。
  2. 元素。这个元素是一个容器,它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS 样式,字符集声明等等。
  3. :这个元素设置文档使用 utf-8 字符集编码,utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题。
  4. :设置页面标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面。
  5. 元素。包含了你访问页面时所有显示在页面上的内容,文本,图片,音频,游戏等等。
    自己完成一个例子,比如:
经典回忆

相思无用,惟别而已。别期若有定,千般煎熬又何如?莫道黯然销魂,何处柳暗花明?
——《神雕侠侣

11实体引用:在 HTML 中包含特殊字符

在 HTML 中,字符<、>、"、’ 和 & 是特殊字符。它们是 HTML 语法自身的一部分,必须使用字符引用 —— 表示字符的特殊编码,它们可以在那些情况下使用。每个字符引用以符号&开始,以分号 (😉 结束。

原义字符等价字符引用
<<
>>
""
'
&&
比如:

HTML 中用 > 来定义段落元素

为了将一段 HTML 中的内容置为注释,需要将其用特殊的记号包括起来,比如:

我在注释外!

你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧


当前标题:[前端笔记——HTML介绍]2.开始学习HTML-创新互联
分享网址:http://6mz.cn/article/hsphs.html

其他资讯