html基础标签和文本标签小结

阅读: 评论:0

html基础标签和文本标签小结

html基础标签和文本标签小结

web应用课 html基础标签小结

目录

  • web应用课 html基础标签小结
    • html 基础标签
      • html 基本结构
      • <html>标签
      • <title>标签
      • <meta>标签
      • <link>标签
      • 注释
    • 文本标签
      • <div>标签
      • <span>标签
      • <h1> ~ <h6> 标签
      • <p> 标签
      • <pre> 标签
      • <br> 标签
      • <hr> 标签
      • <i> 标签
      • <b> 标签
      • <del> 标签
      • <ins> 标签
    • 相关题解小结:
      • 1. [Web应用课 html图片、视频音频和超链接标签小结](/)
      • 2. [Web应用课 表单、列表、表格、语义标签,特殊符号标签小结](/)

html 基础标签

html 基本结构

html 结构为树形结构,以<html> 为根节点,<head><body> 为 孩子

基本结构如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

<html>标签

HTML <html> 元素表示一个 HTML 文档的根(顶级元素),所以它也被称为根元素。所有其他元素必须是此元素的后代。

一些属性:

  • lang : <html> 元素上提供一个带有有效语言标记的 lang 属性,将有助于屏幕阅读技术确定要发布的适当语言。标识语言标签应描述页面大部分内容所使用的语言。如果没有它,屏幕阅读器通常会默认使用操作系统设置的语言,这可能会导致发音错误

lang 属性的值是使用 ISO 639-1 语言代码来表示不同的语言。以下是一些常见的语言代码及其对应的字符串示例:

  • 英语(English):en
  • 中文(简体):zh-CN
  • 中文(繁体):zh-TW
  • 西班牙语(Español):es
  • 法语(Français):fr
  • 德语(Deutsch):de
  • 日语(日本語):ja
  • 俄语(Русский):ru
  • 阿拉伯语(العربية):ar
  • 葡萄牙语(Português):pt
  • 参考这个文档: 全局属性

<title>标签

HTML <title> 元素 定义文档的标题,显示在浏览器的标题栏或标签页上。它只应该包含文本,若是包含有标签,则它包含的任何标签都将被忽略。

<title>元素始终在页面的 <head> 块内使用。

注意:一个 <head> 元素只能包含一个 <title> 元素

<meta>标签

HTML <meta> 元素用于表示那些不能由其他HTML元素(如<base><link><script><style><title>等)表示的元数据信息

<meta> 元素位于HTML文档的头部,提供关于文档的元数据信息,如字符编码、网页描述、作者、关键词等。这些元数据信息对于搜索引擎优化(SEO)和浏览器解析非常重要。

以下是一些常用的<meta>元素及其属性:

  • charset:指定文档的字符编码。
  • viewport:指定移动设备上网页的可视区域。
  • description:描述网页的内容。
  • keywords:指定网页的关键词。
  • author:指定网页的作者。
  • robots:控制搜索引擎的爬虫程序对网页的索引和抓取行为。

示例:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="这是一个示例网页"><meta name="keywords" content="HTML, CSS, JavaScript"><meta name="author" content="John Doe"><meta name="robots" content="index, follow"><title>示例网页</title>
</head>
<body><!-- 网页内容 -->
</body>
</html>

通过使用<meta>元素,可以提供有关网页的重要元数据信息,以便搜索引擎和浏览器正确解析和显示网页内容。

补充: <meta>常用属性viewport 方法,更好的理解该属性的使用 viewport meta 标记

<link>标签

HTML 外部资源链接元素 (<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表,此外也可以被用来创建站点图标 (比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

要链接一个外部的样式表,你需要像这样在你的<head>中包含一个<link>元素:

<link href="main.css" rel="stylesheet" />

这里有一些你经常遇到的其他类型。例如,这里是一个网站图标的链接:

以下是<link>元素的一些常用属性:

  • href:指定外部资源的URL。
  • rel:指定当前文档与外部资源之间的关系。
  • type:指定外部资源的MIME类型。
  • sizes:指定图标的尺寸(仅用于站点图标)。

注释

HTML注释是一种在HTML代码中用于添加注释或备注的特殊语法。注释的内容不会在浏览器中显示,而是被视为对开发者的说明或提醒。

HTML注释使用以下语法

<!-- 这是一个HTML注释 -->

注释以<!--开始,以-->结束。在这两个标记之间的任何内容都被视为注释,并且不会在浏览器中显示。

HTML注释可以用于多种目的,包括:

  • 解释代码的功能或用途。
  • 暂时删除或禁用部分代码,以便调试或测试。
  • 提醒自己或其他开发者有关特定部分的信息。

文本标签

<div>标签

<div>是HTML中最常用的块级元素之一,用于创建一个通用的容器或分区。它没有特定的语义含义,主要用于组织和包裹其他HTML元素,以便应用样式或布局。

<div>元素没有预定义的样式或行为,它在默认情况下不会对内容或布局产生任何影响。它的作用类似于一个容器,用于将一组相关的元素包裹在一起,形成一个独立的区块。

通过为<div>元素添加类名或ID属性,可以为其应用CSS样式或JavaScript操作,从而实现自定义的外观和行为。<div>通常与CSS一起使用,用于创建网页布局、构建网页结构和组织内容。

示例:

<div class="container"><h1>Welcome to My Website</h1><p>This is the content of my website.</p><img src="image.jpg" alt="Image">
</div>

在上述示例中,<div>元素用类名"container"进行了标识,并包裹了标题、段落和图像等元素。通过CSS,可以为"container"类添加样式,例如设置背景颜色、边框样式或内外边距等,以实现自定义的外观效果。

总结来说,<div>是一个通用的容器元素,用于组织和分组其他HTML元素,没有特定的语义含义,但在网页开发中具有重要的作用,用于构建布局和组织内容。

<span>标签

<span> 元素是一个通用的内联容器,用于包裹短语内容,没有特定的语义含义。它的作用类似于 <div>,但 <span> 是一个行内元素,而不是块级元素。

<span> 元素通常用于编组一小段文本或内联元素,以便应用样式或标识共同属性。可以为 <span> 添加类名或ID属性,并通过CSS样式或JavaScript操作来对其进行样式化或操作

<div> 不同,<span> 适用于包裹短语或内联内容,例如单词、短语、字符等。它可以用于设置特定文本的样式,如字体颜色、背景颜色、字体大小等。

请注意,应该在没有其他合适的语义元素时才使用 <span>。如果有更具语义的元素可用于表示特定类型的内容(如标题、段落、列表等),应优先使用那些元素。

示例:

<p>This is an example <span class="highlight">sentence</span> with a highlighted word.
</p><p>Contact us at <span class="email">example@example</span> for further information.
</p>

在上述示例中,<span> 元素被用于包裹需要突出显示的单词和电子邮件地址。通过为 highlightemail 类添加样式,可以对这些文本进行特殊样式化,如高亮或添加链接样式。

总结来说,<span> 是一个通用的行内容器元素,用于编组短语内容或内联元素,以便应用样式或标识共同属性。它在没有其他合适的语义元素时使用,并与CSS一起使用,以实现文本样式化或操作。

<h1> ~ <h6> 标签

HTML <h1>~<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题<h1> 级别最高,而 <h6> 级别最低。

<p> 标签

<p> 元素是HTML中常用的块级元素之一,用于表示段落或文本块。它用于将一段文本内容组织为一个独立的块级元素,并在默认情况下在上下文中创建一些间距。

<p> 元素在HTML中具有语义含义,表示一个自包含的段落。它通常用于包裹一段连续的文本,例如文章、段落、故事、描述等。浏览器会对 <p> 元素应用默认的样式,如段落之间的空行。

<pre> 标签

<pre> 元素是HTML中的一个块级元素,用于表示预格式化文本(Preformatted Text)。它用于展示需要保留源文件中的空白符(如空格、制表符)和换行符的文本内容

<pre> 元素在默认情况下会保留文本中的空白符,并以等宽字体的形式显示文本。这使得它适合用于显示源代码、计算机输出、ASCII艺术等需要保持精确格式的文本内容。

示例:

<pre>function sayHello() {console.log("Hello, world!");}
</pre><pre>+---+---+|   |   |+---+---+
</pre>

在上述示例中,第一个 <pre> 元素展示了一段JavaScript代码,其中的缩进和空格都会被保留。第二个 <pre> 元素展示了一个简单的ASCII艺术图形,保留了图形的精确格式。

请注意,<pre> 元素通常不会自动进行换行,而是根据预定义的宽度水平滚动。如果要自动换行文本内容,可以结合使用CSS属性 white-space: pre-wrap

总结来说,<pre> 元素用于表示预格式化文本,保留源文件中的空白符和换行符。它适用于展示源代码、计算机输出、ASCII艺术等需要保持精确格式的文本内容。

<br> 标签

<br> 元素是HTML中的一个行内元素,用于插入换行符(Line Break)。它用于在文本中创建一个显式的换行,即使在HTML中使用普通的空格或回车,浏览器也会将它们合并为一个空格或忽略掉。

<br> 元素是一个空元素,没有闭合标签。它只需在需要插入换行的位置使用即可。在HTML中,可以在段落、标题、文本块或文本行的任何位置使用 <br> 元素。

请注意, <br> 元素主要用于在文本中插入简单的换行,例如在地址或诗歌中的换行。对于更复杂的布局需求,应该使用CSS和块级元素来实现更灵活的控制。

总结来说,<br> 元素用于在HTML文本中插入换行符,创建显式的换行。它是一个空元素,可以在段落、标题、文本块或文本行的任何位置使用。

<hr> 标签

<hr> 元素是HTML中的一个空元素,用于在文档中插入水平分隔线(Horizontal Rule)。

<hr> 元素用于在内容中创建一个水平线,用于分隔不同的段落、主题或区块。它通常以水平线的形式显示,可以在页面中创建视觉上的分隔效果。

<hr> 元素是一个空元素,没有闭合标签,因此它不需要在结束标签处进行闭合。

可以通过CSS来自定义 <hr> 元素的样式,例如设置颜色、宽度、样式等。

总结来说,<hr> 元素用于在HTML文档中插入水平分隔线,用于在内容中创建视觉上的分隔效果。它是一个空元素,不需要闭合标签。

<i> 标签

<i> 元素用于将文本呈现为斜体样式,但并没有特定的语义含义。在HTML5中,推荐使用更具语义的元素 <em> 来表示强调文本,而不是仅仅使用 <i> 来表示斜体。

请注意,使用 <i> 进行斜体样式化的文本,没有明确的语义含义。如果要表示强调或重点文本,推荐使用 <em> 元素,它不仅会将文本呈现为斜体,还具有语义上的强调作用。

总结来说,<i> 元素用于将文本呈现为斜体样式,但在HTML5中推荐使用 <em> 元素来表示强调文本。

<b> 标签

<b> 元素是HTML中的一个行内元素,用于表示粗体文本(Bold Text)。

<b> 元素用于将文本呈现为粗体样式,但并没有特定的语义含义。在HTML5中,推荐使用更具语义的元素 <strong> 来表示重要或强调文本,而不是仅仅使用 <b> 来表示粗体。

请注意,使用 <b> 进行粗体样式化的文本,没有明确的语义含义。如果要表示重要或强调文本,推荐使用 <strong> 元素,它不仅会将文本呈现为粗体,还具有语义上的强调作用。

总结来说,<b> 元素用于将文本呈现为粗体样式,但在HTML5中推荐使用 <strong> 元素来表示重要或强调文本。

<del> 标签

<del> 元素是HTML中的一个行内元素,用于表示被删除的文本(Deleted Text)。

<del> 元素用于在文本中标记被删除的部分,通常以删除线的形式显示。它在语义上表示某些内容已被删除或不再有效,可以用于展示修订文档、版本控制历史等情况下的变动。

请注意,<del> 元素仅表示文本被删除,而不提供具体删除的原因或替代内容。如果需要提供替代内容,可以使用 <ins> 元素表示插入的文本。

总结来说,<del> 元素用于表示被删除的文本,通常以删除线的形式显示。它在语义上表示某些内容已被删除或不再有效。

<ins> 标签

<ins> 元素是HTML中的一个行内元素,用于表示插入的文本(Inserted Text)。

<ins> 元素用于在文本中标记插入的部分,通常以下划线的形式显示。它在语义上表示某些内容的插入或添加,可以用于展示修订文档、版本控制历史等情况下的变动。

请注意,<ins> 元素仅表示文本的插入,而不提供具体插入的原因或替代内容。如果需要提供替代内容,可以结合使用 <del> 元素表示被删除的文本。

总结来说,<ins> 元素用于表示插入的文本,通常以下划线的形式显示。它在语义上表示某些内容的插入或添加。

相关题解小结:

1. Web应用课 html图片、视频音频和超链接标签小结

2. Web应用课 表单、列表、表格、语义标签,特殊符号标签小结

本文发布于:2024-01-29 06:14:01,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170648004613279.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:标签   小结   文本   基础   html
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23