HTML5+CSS——Day2

最新推荐文章于 2024-08-28 17:54:22 发布

一头小企鹅

最新推荐文章于 2024-08-28 17:54:22 发布

阅读量232

点赞数 3

文章标签： html5 css 前端

本文链接：https://blog.csdn.net/weixin_51273795/article/details/131711333

版权

HTML5+CSS——Day2

HTML注释
- HTML快捷语法
标签及属性语法
- 标签语法规则
- 属性语法规则
HTML标签元素
绝对路径和相对路径解析

HTML注释

可以用于解释逻辑和关键点,提高可读性，容易被人理解

在HTML中，使用注释可以向代码中添加注解或提供说明，这些注释在浏览器渲染页面时不会显示给用户。

HTML注释以结尾。注释可以在代码的任何位置添加，可以是单行注释也可以是多行注释。

以下是HTML中单行和多行注释的示例：

<!DOCTYPE html>
<html>
<body>
  <!-- 这是单行注释 -->
  
  <h1>标题</h1>
  
  <!--
    这是多行注释
    可以跨越多行
  -->
  
  <p>这是一段文本。</p>
  
  <!-- 
  <p>这段注释中的代码不会被浏览器解析显示。</p>
  -->
</body>
</html>

在上述示例中，使用包裹的内容被视为注释，不会在浏览器显示。每个注释可以包含任何文字，用于提供代码的解释、调试信息或记录注释的作用等。

HTML注释对于开发者来说是非常有用的工具，可以帮助他们理解和维护代码。在需要修改或调试代码时，注释可以提供重要的上下文和提示信息。

需要注意的是，HTML注释应该被正确使用，不应使用注释来隐藏或临时删除代码。注释应该是有意义的，并且不会影响到页面的结构和功能。

快捷键ctrl+/

HTML快捷语法

写出指定规则，按住tab键可以快速创建HTML文档

初始结构：！=>Tab

重复指令：*

更多快捷语法：https://blog.csdn.net/qq_33744228/article/details/80910377

标签及属性语法

标签语法规则

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

属性语法规则

属性是 HTML 元素提供的附加信息。

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性

HTML标签元素

HTML文档结构相关标签

标签	描述
html	此元素告知浏览器其自身是一个HTML文档
head	定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
body	定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）
base	定义页面中所有链接的默认地址或默认目标。
meta	定义关于 HTML 文档的元信息。
link	定义文档与外部资源的关系。
script	定义客户端脚本。
style	定义文档的样式信息。
title	定义文档的标题。

HTML基础块标签

标题标签

在HTML中，我们可以使用h1到h6这几个标签来定义标题的级别，从最高级的标题h1到最低级的标题h6。这些标签用于在网页中创建标题，有助于组织和结构化页面内容。

下面是一个示例，展示了如何使用h1到h6标签来创建不同级别的标题：

<!DOCTYPE html>
<html>
<body>
  <h1>这是h1级别的标题</h1>
  <h2>这是h2级别的标题</h2>
  <h3>这是h3级别的标题</h3>
  <h4>这是h4级别的标题</h4>
  <h5>这是h5级别的标题</h5>
  <h6>这是h6级别的标题</h6>
</body>
</html>

在上述示例中，每个标签所定义的标题级别依次减小。浏览器会根据标题级别的不同，使用不同的样式和字体大小来呈现标题内容。h1通常用于页面最重要的标题，而h6则用于最不重要的标题。

请注意，使用标题标签应该符合内容的逻辑结构，不要仅仅为了修改样式而滥用标题标签。正确使用标题标签有助于提高网页的可访问性和语义化。

h1-h6只应用于标题，标题很重要，请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为网页的结构和内容编制索引。

段落标签

段落标签是用于在HTML中划分段落的元素。在HTML中，常用的段落标签是<p>标签。使用<p>标签可以将文本内容划分为段落，并为每个段落添加适当的样式和格式。例如，以下HTML代码演示了如何使用<p>标签创建两个段落：

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>

在浏览器中渲染时，每个<p>标签将被解析为一个独立的段落，并在段落之间添加一定的间距。这有助于提高文本的可读性和组织结构。除了<p>标签外，还有其他一些用于划分段落的标签，如<div>、<h1>到<h6>等，具体使用取决于文档的结构和需求。

水平线标签

在HTML中，可以使用<hr>标签创建水平线（horizontal line），用于在网页中插入水平分隔线。

<hr>标签是一个自闭合标签，没有闭合标签，因此不需要在标签之间添加内容或子元素。以下是一个示例：

<!DOCTYPE html>
<html>
<body>
  <p>这是一段文字。</p>
  <hr>
  <p>这是另一段文字。</p>
</body>
</html>

在上述示例中，<hr>标签用来插入一个水平线，将两段文字内容隔开。

需要注意的是，<hr>标签通常会带有默认的样式，包括水平线的宽度、颜色和样式。你可以使用CSS来进一步自定义水平线的样式，如设置宽度、高度、样式和颜色等。

HTML基础布局标签

div标签

<div>是HTML中最常用的容器标签之一，用于在网页中创建一个块级元素。它没有特定的语义含义，主要用于将其他元素组合在一起或者为它们提供样式和布局。

下面是一个简单的示例，展示如何使用<div>标签：

<!DOCTYPE html>
<html>
<body>
  <div>
    <h1>这是标题</h1>
    <p>这是段落文本。</p>
    <img src="image.jpg" alt="图片">
  </div>
</body>
</html>

在上述示例中，<div>标签被用作一个容器，内部包含了<h1>、<p>和<img>等元素。可以给<div>标签添加CSS样式，为其中的元素定义特定的布局、外观和行为。

<div>标签常常与CSS一起使用，为其添加类名或ID，以便通过CSS选择器对其进行样式设置或操作。例如：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      background-color: lightblue;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>这是标题</h1>
    <p>这是段落文本。</p>
    <img src="image.jpg" alt="图片">
  </div>
</body>
</html>

在上述示例中，<div>标签具有container类名，通过CSS选择器.container来为它设置背景颜色和内边距。

通过使用<div>标签，可以更好地组织和管理网页内容，并为其提供样式和布局。

HTML

元素是 块级元素，它可用于组合其他 HTML 元素的容器。本身不具备任何央视效果，可以后期通过CSS来为其设置样式，div元素常用于大块元素的布局。

可以对同一个

元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是， class 用于元素组（类似的元素，或者可以理解为某一类元素）， 而 id 用于标识单独的唯一的元素。

HTML基础行内标签

范围标签span

span标签被用来组合文档中的行内元素，本身不具备任何特殊样式，可以后期通过CSS为其设置样式

以下是一个示例，展示如何使用标签

<!DOCTYPE html>
<html>
<body>

  <p>这是一段普通的文本内容，<span style="color: red;">这是一段特殊的文本内容。</span> 这又是一段普通的文本内容。</p>

</body>
</html>

div和span的区别：

1、div标签是块级元素，每个div标签都会从新行开始显示，占据一行；2、div标签内可以添加其他的标签元素；3、span标签是行内元素，会在一行显示；4、span标签内只能添加行内元素的标签或文本。

换行标签

在HTML中，用于在文本中插入换行的标签是<br>标签。

<br>标签是一个空标签，没有闭合标签。它表示一个显式的换行符，并在文本中创建一个换行的断点。

以下是一个使用<br>标签的示例：

<!DOCTYPE html>
<html>
<body>
  <p>这是一行文本。<br>
  这是另一行文本。</p>
</body>
</html>

在上述示例中，<br>标签被插入到文本中间，用于在两行文本之间创建一个换行断点。这将导致第一行文本和第二行文本在页面上显示为不同的行。

还可以在其他标签中使用<br>标签来插入换行，例如：

<!DOCTYPE html>
<html>
<body>
  <h1>标题</h1>
  <p>这是一段文本。<br>
  这是另一行文本。</p>
  
  <div>
    这是一个<div>容器。</div><br>
    这是容器中的另一行文本。
  </div>
</body>
</html>

在上述示例中，<br>标签被用于在<p>标签和<div>标签中分别插入换行符。

需要注意的是，使用过多的<br>标签会导致代码可读性降低，不推荐过度使用。通常应该使用合适的HTML语义和CSS样式来控制文本的换行和布局。

超链接

HTML超链接使用<a>标签来创建，它用于在网页中创建可以点击的链接，将用户导航到其他页面、文档或其他资源。

以下是一个基本的HTML超链接的示例：

<!DOCTYPE html>
<html>
<body>
  <h1>我的网页</h1>
  <p>这是一个超链接到<a href="https://www.example.com">示例网站</a>的文字。</p>
</body>
</html>

在上述示例中，<a>标签定义了一个超链接，href属性指定了链接的目标 URL，即"https://www.example.com"。<a>标签的内容是用户可以点击的文本，这里是"示例网站"。

一旦用户点击了超链接，浏览器将执行以下操作之一：

如果指定了href属性，浏览器将导航到指定 URL 的页面。
如果指定了href属性且值为空（即href=""），则被称为"空链接"，将重新加载当前页面。
如果没有指定href属性，而是在<a>标签中嵌套了其他内容，那么它将作为一个锚点，依据name或者id属性进行页面内导航。

此外，还可以使用其他属性来改变链接的行为或样式，如：

target属性用于指定链接的打开方式，如在当前窗口中打开"_self"，在新窗口或选项卡中打开"_blank"。
title属性用于提供链接的标题或描述，将在鼠标悬停在链接上时显示。

超链接是网页设计中的重要组成部分，可以用于导航、引用资源、创建内部链接等多种用途。

绝对路径和相对路径解析

在HTML5中，绝对路径和相对路径的概念与之前描述的一样。绝对路径和相对路径用于在HTML文档中引用其他文件（如图像、样式表或JavaScript文件）的位置。

绝对路径：在HTML5中，可以使用绝对路径来指定文件的完整位置。绝对路径可能包括协议（如http://或https://），域名，端口号和文件路径。例如：
- https://example.com/images/pic.jpg 是指向位于 example.com 网站上的 pic.jpg 图像的绝对路径。
相对路径：HTML5中的相对路径与之前的描述相同。相对路径是相对于当前HTML文件所在目录或当前URL的路径。相对路径可以是简短的文件名，或者包括多层目录结构。例如：
- images/pic.jpg 表示位于当前HTML文件目录下的 images 目录中的 pic.jpg 图像。