Web开发笔记2：HTML——HTML介绍

最新推荐文章于 2024-07-21 12:12:15 发布

少年骇客QAQ

最新推荐文章于 2024-07-21 12:12:15 发布

阅读量222

点赞数 2

分类专栏： Web开发前端文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_41005443/article/details/113104095

版权

Web开发前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. HTML概述

HTML 是一种相当简单的、由不同元素组成的标记语言，它可以应用于文本片段，使文本在文档中具有不同的含义（它是一个段落吗？它是一个项目列表吗？它是一个表格吗？），将文档结构化为逻辑块（文档是否有头部？有三列内容？有一个导航菜单？），并且可以将图片，影像等内容嵌入到页面中。本模块将介绍前两个，并且介绍一些理解HTML所需的基本概念和语法。

2. HTML入门

2.1 什么是HTML?

HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。
#3 剖析一个HTML元素
段落元素：
在这里插入图片描述
这个元素的主要部分有：

1、开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。
2、结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。
3、内容（Content）：元素的内容，本例中就是所输入的文本本身。
4、元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

3.1 创建第一个HTML元素

斜体：使用元素

3.2 嵌套元素

我的猫咪脾气爆:)
确保元素被正确的嵌套：先打开元素，然后才打开元素，因此必须先将元素关闭，然后再去关闭元素。

3.3 块级元素和内联元素

块级元素和内联元素。

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

例如：内联元素 块级元素
在这里插入图片描述

3.4 空元素

不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素是用来在元素所在位置插入一张指定的图片。例子如下：

<img src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png">

4. 属性

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

一个属性必须包含如下内容：
1、一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
2、属性名称，后面跟着一个等于号。
3、一个属性值，由一对引号“ ”引起来。

4.1 为元素添加属性

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

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

在这里插入图片描述

4.2 布尔属性

有时会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如disabled 属性，他们可以标记表单输入使之变为不可用(变灰色)，此时用户不能向他们输入任何数据。

<input type="text" disabled="disabled">

方便起见，我们完全可以将其写成以下形式：

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

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

在这里插入图片描述

4.3 单引号or双引号？

都可以
想将引号当作文本显示在html中，就必须使用实体引用（一些符号）

5. 剖析HTML文档

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

在这里插入图片描述

5.1 学习实践：为HTML文档添加一些特征

编写index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的测试站点</title>
        <body>
            <h1>经典回忆</h1>
            <p>相思无用，惟别而已。别期若有定，千般煎熬又何如？莫道黯然销魂，何处<strong>柳暗花明</strong>？
                ——《<a href="http://zh.wikipedia.org/zh-hans/神鵰俠侶/">神雕侠侣</a>》
            </p>
            <img src="https://roy-tian.github.io/learning-area/extras/tools/playable-code/images/sdxl.jfif" alt="神雕侠侣图">
        </body>
    </head>
</html>

5.2 HTML中的空白

了在代码中包含了很多的空格——这是没有必要的；下面的两个代码片段是等价的：

<p>狗 狗 很 呆 萌。</p>

<p>狗 狗        很
         呆 萌。</p>

无论在HTML元素的内容中使用多少空格(包括空白字符，包括换行)，当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。

为了代码的可读性——更多留白

6. 实体引用：在HTML中包含特殊字符

在HTML中，字符 <, >,",’ 和 & 是特殊字符. 它们是HTML语法自身的一部分, 直接在文本里运用这些字符html解释器会将其处理为代码而不是文本，要将这些字符包含进文本里要通过字符引用。

使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束.
在这里插入图片描述
参考：XML和HTML字符实体引用列表

7. HTML注释

注释用特殊的记号<!–和-->包括起来，

<p>我在注释外！</p>

<!-- <p>我在注释内！</p> -->

少年骇客QAQ

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web开发笔记2：HTML——HTML介绍

1. HTML概述HTML 是一种相当简单的、由不同元素组成的标记语言，它可以应用于文本片段，使文本在文档中具有不同的含义（它是一个段落吗？它是一个项目列表吗？它是一个表格吗？），将文档结构化为逻辑块（文档是否有头部？有三列内容？有一个导航菜单？），并且可以将图片，影像等内容嵌入到页面中。本模块将介绍前两个，并且介绍一些理解HTML所需的基本概念和语法。...
复制链接

扫一扫