HTML概述简介

最新推荐文章于 2021-12-13 00:57:18 发布

枳洛淮南✘

最新推荐文章于 2021-12-13 00:57:18 发布

阅读量311

点赞数 5

分类专栏： Java HTML 文章标签： java html css

本文链接：https://blog.csdn.net/weixin_43520256/article/details/116504989

版权

Java 同时被 2 个专栏收录

124 篇文章 1 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="">
    <!-- 注释 -->
    <em>
        斜体元素
    </em>
    <head>
        <meta charset="UTF-8">
        <title>个人名片</title>
    </head>

    <body>
        <div>
            <h1>枳洛淮南</h1>
            <p><strong>大</strong>学生</p>
        </div>

        <em>1</em><em>2</em><em>3</em>
        <p>4</p><p>5</p><p>6</p>

        <div>
            <!-- ol：有序列表  ul：无序列表 -->
            <h2>这货的爱好</h2>
            <ul>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115347612">写代码</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/109665028">打游戏</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/106148431">打篮球</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115961511">看电影</a></li>
            </ul>
        </div>

        <div>
            <h2>学习经历</h2>
            <ol>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115917383">小学</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115919317">初中</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115896139">高中</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115874951">大学</a></li>
                <li><a href='https://blog.csdn.net/weixin_43520256/article/details/115874951'>大学</a></li>
            </ol>
        </div>

        <img src="image/01.jpg"/>
    </body>
</html>

在这里插入图片描述

HTML概述简介

什么是HTML？
HTML元素的剖析
创建你的第一个HTML元素
嵌套元素
块与内联元素
空元素
向元素添加属性
单引号还是双引号？
HTML文档的剖析
HTML中的空白
实体引用：包括HTML中的特殊字符
HTML注释

什么是HTML？

HTML（超文本标记语言）不是编程语言。而是一种标记语言，可以告诉Web浏览器如何构造您即将访问的网页。它可以像Web开发人员希望的那样复杂或简单。HTML由一系列元素组成，您可以使用这些元素来包围，包装或标记内容的不同部分，以使其以某种方式显示或起作用。封闭标签可以使内容成为超链接，以连接到另一个页面，斜体化单词等。
例如，考虑下面的文本行：
大学生

如果我们希望文本独立存在，则可以通过将其放在段落（）元素中来指定它是一个段落：
大学生

TIPS：
HTML中的标签不区分大小写。这意味着它们可以大写或小写。例如，<title>标签可以写成<title>，<TITLE>，<Title>，<TiTlE>，等，它们都会工作。但是，最佳做法是将所有标签都写成小写，以保持一致性和可读性。

HTML元素的剖析

段落元素：
在这里插入图片描述

开始标记：它由元素的名称（在此示例中为p表示）组成，并包装在打开和关闭尖括号中。此开始标记标记元素开始或开始生效的位置。在此示例中，它位于段落文本的开头。
内容：这是元素的内容。在此示例中，它是段落文本。
结束标记：与开始标记相同，不同之处在于它在元素名称之前包含一个正斜杠。这标记了元素结束的位置。未能包含结束标记是一个常见的初学者错误，可能会产生特殊的结果。

元素是开始标签，后跟内容，然后是结束标签。

创建你的第一个HTML元素

在这里插入图片描述
将开始标签放在行的开头,中间放要倾斜的元素，将结束标记放在行尾。这样做应该使行斜体文本格式！

<!DOCTYPE html>
<html lang="">
    <!-- 注释 -->
    <em>
        斜体元素
    </em>
</html>

嵌套元素

元素可以放置在其他元素内。这称为嵌套。如果要声明大学生强调大，可以将单词非常包装在一个元素中，这意味着该文本（单词）应具有更强的文本格式：
在这里插入图片描述

<!DOCTYPE html>
<html lang="">
    <!-- 注释 -->
    <em>
        斜体元素
    </em>
    <head>
        <meta charset="UTF-8">
        <title>个人名片</title>
    </head>

    <body>
        <div>
            <h1>枳洛淮南</h1>
            <p><strong>大</strong>学生</p>
        </div>
</html>

块与内联元素

在HTML中，有两个重要的元素类别：块级元素和内联元素。

块级元素在页面上形成可见块。块级元素将在其前面的内容之后的新行中显示。块级元素之后的任何内容也会出现在新行中。块级元素通常是页面上的结构元素。例如，块级元素可能表示标题，段落，列表，导航菜单或页脚。块级元素不会嵌套在一个内联元素内，但它可能嵌套在另一个块级元素内。
内联元素包含在块级元素内，并且仅围绕文档内容的一小部分（而不是整个段落或内容分组）。内联元素不会导致新行出现在文档中。它通常与文本一起使用，例如，<a>元素创建超链接，而元素例如或创建强调。
在这里插入图片描述

		<em>1</em><em>2</em><em>3</em>
        <p>4</p><p>5</p><p>6</p>

是一个内联元素。如下所示，前三个元素位于同一行上，中间没有空格。另一方面， 是块级元素。每个p元素都显示在新行中，上方和下方都有空格。（该间距是由于浏览器适用于段落的默认CSS样式所致。）

空元素

并非所有元素都遵循开始标签，内容和结束标签的模式。有些元素由单个标签组成，通常用于在文档中插入/嵌入某些内容。例如，该<img>元素将图像文件嵌入到页面上：
在这里插入图片描述

        <img src="image/01.jpg"/>

注意： 空元素有时称为void元素。

向元素添加属性

元素也可以具有属性。
元素的另一个示例是<a>。这代表锚点。锚点可以使包含在其中的文本成为超链接。锚点可以采用多种属性，如下：

href：此属性的值指定链接的网址。例如：href=“https://www.mozilla.org/”。
title：该title属性指定有关链接的其他信息，例如，要链接到的页面的描述。例如，title=“The Mozilla homepage”。当光标悬停在元素上时，这将显示为工具提示。
target：该target属性指定用于显示链接的浏览上下文。例如，target="_blank"将在新选项卡中显示链接。如果要在当前选项卡中显示链接的内容，只需忽略此属性。

 <div>
            <!-- ol：有序列表  ul：无序列表 -->
            <h2>这货的爱好</h2>
            <ul>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115347612">写代码</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/109665028">打游戏</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/106148431">打篮球</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115961511">看电影</a></li>
            </ul>
        </div>

        <div>
            <h2>学习经历</h2>
            <ol>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115917383">小学</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115919317">初中</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115896139">高中</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115874951">大学</a></li>
            </ol>
        </div>

在这里插入图片描述

单引号还是双引号？

某些HTML代码中看到单引号。这是一个风格问题。您可以随意选择自己喜欢的一种。这两条线是等效的：

                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115874951">大学</a></li>
                <li><a href='https://blog.csdn.net/weixin_43520256/article/details/115874951'>大学</a></li>

但是不可以混用：
如：

<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115874951'>大学</a></li>

HTML文档的剖析

单独的HTML元素本身并不是很有用。接下来，让我们检查各个元素如何组合以形成整个HTML页面：

<!DOCTYPE html>
<html lang="">
    <!-- 注释 -->
    <em>
        斜体元素
    </em>
    <head>
        <meta charset="UTF-8">
        <title>个人名片</title>
    </head>

    <body>
        <div>
            <h1>枳洛淮南</h1>
            <p><strong>大</strong>学生</p>
        </div>

        <em>1</em><em>2</em><em>3</em>
        <p>4</p><p>5</p><p>6</p>

        <div>
            <!-- ol：有序列表  ul：无序列表 -->
            <h2>这货的爱好</h2>
            <ul>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115347612">写代码</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/109665028">打游戏</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/106148431">打篮球</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115961511">看电影</a></li>
            </ul>
        </div>

        <div>
            <h2>学习经历</h2>
            <ol>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115917383">小学</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115919317">初中</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115896139">高中</a></li>
                <li><a href="https://blog.csdn.net/weixin_43520256/article/details/115874951">大学</a></li>
                <li><a href='https://blog.csdn.net/weixin_43520256/article/details/115874951'>大学</a></li>
            </ol>
        </div>

        <img src="image/01.jpg"/>
    </body>
</html>

<!DOCTYPE html>：文档类型。在HTML刚成立时（1991年至1992年），doctype旨在充当指向一组规则的链接，HTML页面必须遵循这些规则才能被认为是好的HTML。
<html></html>：<html>元素。此元素包装页面上的所有内容。它有时被称为根元素。
<head></head>：<head>元素。此元素充当要包含在HTML页面上的所有内容的容器，而不是该页面将显示给查看者的内容。这包括将出现在搜索结果中的关键字和页面描述，用于样式内容的CSS，字符集声明等。
<meta charset=“utf-8”>：此元素将您的文档的字符集指定为UTF-8，其中包括来自绝大多数人类书面语言的大多数字符。使用此设置，页面现在可以处理它可能包含的任何文本内容。
<title></title>：<title>元素。这将设置页面的标题，即页面加载到的浏览器选项卡中显示的标题。页面标题还用于描述添加了书签的页面。
<body></body>：<body>元素。它包含页面上显示的所有内容，包括文本，图像，视频，游戏，可播放的音轨或其他内容。

HTML中的空白

不管您在HTML元素内容中使用了多少空格（可以包含一个或多个空格字符，还包括换行符），HTML解析器在呈现代码时都会将每个空格序列减少为一个空格。
那么为什么要使用那么多的空格呢？
答案是可读性。

如果格式正确，则可以更容易地理解代码中正在发生的事情。在我们的HTML中，每个嵌套元素的缩进量比它所位于的元素缩进了两个空格。

实体引用：包括HTML中的特殊字符

在HTML，**<，>，"，'和&**等特殊字符。它们是HTML语法本身的一部分。那么，如何在文本中包含这些特殊字符之一？例如，如果要使用大于号或小于号，并且不想将其解释为代码。

则可以使用字符引用进行此操作。这些是代表字符的特殊代码，将在这些确切的情况下使用。每个字符引用均以“＆”号开头，并以“;”号结束。
在这里插入图片描述

HTML注释

HTML具有在代码中编写注释的机制。浏览器会忽略注释，从而使注释对用户不可见。
注释的目的是允许您在代码中包含注释，以解释您的逻辑或编码。如果您离开足够长的时间以至于无法完全记住它，而又回到了代码库，这将非常有用。

要编写HTML注释，请将其包装在特殊标记。例如：

    <!-- 注释 -->
    <em>
        斜体元素
    </em>

实际代码只输出：
斜体元素

枳洛淮南✘

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML概述简介

<!DOCTYPE html><html lang="">  斜体元素 <head> <meta charset="UTF-8"> <title>个人名片</title> </head> <body> <div&g
复制链接

扫一扫