HTML基础

最新推荐文章于 2022-07-22 08:45:47 发布

wyzhang0214

最新推荐文章于 2022-07-22 08:45:47 发布

阅读量142

点赞数

文章标签： html

本文链接：https://blog.csdn.net/wyzhang0214/article/details/115027238

版权

什么是HTML

HTML(HyperText Markup Language, 超文本标记语言)不是一门编程语言，是一种用来告知浏览器如何组织页面的标记语言。由一系列的元素组成，一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

下面对一个HTML元素进行剖析：
剖析html元素
这个元素的主要部分有：

开始标签(Opening tag)：包含元素的名称(上面的例子是p),被左右圆括号所包围。表示元素从这里开始或者开始起作用——在本例中表示段落由此开始。
结束标签(Closing tag): 与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾——在本例中即段落在此结束。
内容(Content):元素的开始，本例中就是所输入的文本本身。
元素(Element)：开始标签，结束标签与内容相结合的内容就是一个完整的元素。

嵌套元素

可以把一个元素放在另一个元素中，这叫做元素嵌套。

<p>这篇文章的内容都来自<strong>MDN</strong></p>

这篇文章的内容都来自MDN

块级元素和内联元素

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

栗子：

<em>第一</em><em>第二</em><em>第三</em>
<p>第四</p><p>第五</p><p>第六</p>

第一第二第三

第四

第五

第六

是一个内联元素，所以就像你在下方可以看到的，第一行代码中的三个元素都没有间隙的展示在了同一行。而是一个块级元素，所以第二行代码中的每个元素分别都另起了新的一行展现，并且每个段落间都有一些间隔（这是因为默认的浏览器有着默认的展示元素的CSS styling）。

注：HTML5重新定义了元素的类别：见元素内容分类。尽管这些新的定义更精确，但却比上述的 “块级元素” 和 “内联元素” 更难理解，因此在之后的讨论中仍使用旧的定义。

注：在这篇文章中提到的“块”和“内联”，不应该与 the types of CSS boxes 中的同名术语相混淆. 尽管他们默认是相关的，但改变CSS显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是HTML5摒弃这些术语的原因之一。

注: 你可以查阅包含了块级元素和内联元素列表的参考页面—see Block-level elements and Inline elements.

空元素

不是所有元素都拥有开始标签，内容，结束标签。没有内容的HTML元素被称为空元素。如 以及<img>,通常表示嵌入一些东西。

注：使用 以及<img />更安全

属性

元素也可以拥有属性。如：
在这里插入图片描述
属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个class属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。

一个属性必须包含如下内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个等于号。
一个属性值，由一对引号“ ”引起来。

为一个元素添加属性

另一个例子是关于元素<a>的——元素<a>是锚，它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性，其中几个如下：

href: 这个属性声明超链接的web地址，当这个链接被点击浏览器会跳转至href声明的web地址。例如：href="https://www.mozilla.org/"。
title: 标题title属性为超链接声明额外的信息，比如你将链接至的那个页面。例如：title="The Mozilla homepage"。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。
target: 目标target属性用于指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。

<a href="https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML/Getting_started" title="MDN" target="_blank">example</a>

example

布尔属性

实例：

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled />

<!-- 下面这个输入框没有disabled属性，所以用户可以向其中输入 -->
<input type="text" />

引号

如果想把引号当做元素内容显示在页面中，就需要实体引用。

<p>HTML 中用 <p> 来定义段落元素。</p>

<p>HTML 中用 &lt;p&gt; 来定义&quot;段落元素&quot;</p>

HTML 中用

来定义段落元素。

HTML 中用 来定义"段落元素"

剖析HTML文档

学习了一些HTML元素的基础知识，这些元素单独一个是没有意义的。现在我们来学习这些特定元素是怎么被结合起来，从而形成一个完整的HTML页面的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

<!DOCTYPE html>: 声明文档类型。很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，规定了HTML页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
然而这种写法已经过时了，这些内容已成为历史。只需要知道 <!DOCTYPE html>是最短有效的文档声明。
<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。
<head></head>: <head>元素. 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

实体引用

在HTML中包含特殊字符。

在HTML中，字符 <， >，"，' 和 & 是特殊字符。它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢，比如说如果你真的想要在文本中使用符号&或者小于号，而不想让它们被浏览器视为代码并被解释？

我们必须使用字符引用 —— 表示字符的特殊编码，它们可以在那些情况下使用。每个字符引用以符号&开始, 以分号(;)结束。

原义字符	等价字符引用
`<`	`<`
`>`	`>`
`"`	`"`
`'`	`'`
`&`	`&`

HTML注释

wyzhang0214

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

什么是HTMLHTML(HyperText Markup Language, 超文本标记语言)不是一门编程语言，是一种用来告知浏览器如何组织页面的标记语言。由一系列的元素组成，一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。下面对一个HTML元素进行剖析：这个元素的主要部分有：开始标签(Opening tag)：包含元素的名称(上面的例子是p),被左右圆括号所包围。表示元素从这里开始或者开始起作用——在本例中表示段落由此开始。结束标签(Closing tag):
复制链接

扫一扫