对HTML基础详细拓展

1.什么是HMTL?

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

1.1HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
格式：<标签>内容</标签>

1.2 HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
格式：<p>这是一个段落。

1.3Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

1.4<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>

\<!DOCTYPE HTML>

\<!doctype html>

\<!Doctype Html>
  
  通用声明
HTML5
\<!DOCTYPE html>
HTML 4.01
\<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
\<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1.5基本网页结构及其解析

   <!DOCTYPE html>  
  <html lang="en">
  
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    
    <body>
        <h1>这里的h1是第一标题哦</h1>
        <p>p表示的是段落</p>
        <p>p表示的是另一个段落</p>
    </body>
  </html>
  
  <!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

​

2.HTML编辑器

HTML 编辑器推荐
VS Code：https://code.visualstudio.com/

Sublime Text：http://www.sublimetext.com/

在线编辑器：https://www.jyshare.com/front-end/61/

​

3.HTML基础

3.1HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
<h1>这里的h1是第1标题哦</h1>
<h2>这里的h2是第2标题哦</h2>
<h3>这里的h3是第3标题哦</h3>

3.2HTML 段落

HTML 段落是通过标签 <p> 来定义的。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

3.3HTML 链接

HTML 链接是通过标签 <a> 来定义的。
\<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web">这是个超链接</a>

提示:在 href 属性中指定链接的地址。

3.4 HTML 图像

HTML 图像是通过标签 <img> 来定义的.
<img src="/1.jpeg" width="258" height="300"/>
<img src="2.jpeg"  width="258" height="333"/>

4.HTML 元素

HTML 文档由 HTML 元素定义。
开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素

开始标签 元素内容 结束标签
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br> 换行

4.1HTML 元素语法

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

4.2嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
HTML 文档由相互嵌套的 HTML 元素构成。
  
  HTML 文档实例
    <!DOCTYPE html>
    <html>
    
    <body>
    <p>这是第一个段落。</p>
    </body>
    
    </html>
    以上实例包含了三个 HTML 元素。

4.3HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

5 HTML属性

5.1 HTML属性

属性是 HTML 元素提供的附加信息。
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。
  
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
\<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web">这是个超链接</a>

5.2 HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。
  Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

  name='John "ShotGun" Nelson'

5.3HTML 属性参考手册

查看完整的HTML属性列表: HTML 标签参考手册(https://www.runoob.com/tags/tag-doctype.html)。

下面列出了适用于大多数 HTML 元素的属性：

属性	    描述
class	    为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	      定义元素的唯一id
style	    规定元素的行内样式（inline style）
title	    描述了元素的额外信息 (作为工具条使用)

6.HTM标题（重点）

  标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

  <h1> 定义最大的标题。 <h6> 定义最小的标题。
      <h1>这里的h1是第1标题哦</h1>
      <h2>这里的h2是第2标题哦</h2>

  标题很重要
    请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
    
    搜索引擎使用标题为您的网页的结构和内容编制索引。
    
    因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
    
    应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

6.1HTML 水平线

  <hr> 标签在 HTML 页面中创建水平线。
  
  hr 元素可用于分隔内容。
  <h1>这里的h1是第1标题哦</h1>
      <hr>
      <h2>这里的h2是第2标题哦</h2>
      <hr>
      <h3>这里的h3是第3标题哦</h3>

6.2HTML 注释

  可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
  
  注释写法如下:
  
  实例
  <!-- 这是一个注释 -->

6.3 HTML 提示 - 如何查看源代码

你是否看过一些网页然后惊叹它是如何实现的。

如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

7.HTML段落

HTML 段落
段落是通过 <p> 标签定义的。
  <p>这是一个段落 </p>
  <p>这是另一个段落</p>

不要忘记结束标签
即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来
  <p>这是另一个段落
  但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误

7.1HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
<p>演示<br>段落<br>分行的效果</p>

7.2HTML 输出- 使用提醒

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

8.HTML 文本格式化

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
 这是<sub>下标</sub>和<sup>上标</sup>

8.1HTML 格式化标签

  HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体
  
  这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。
  
  Remark	通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
  
  然而，这些标签的含义是不同的：
  
  <b> 与<i> 定义粗体或斜体文本。

9 HTML链接

HTML 使用超级链接与网络上的另一个文档相连。

HTML中的链接是一种用于在不同网页之间导航的元素。

链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。

链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。
  
本地连接：  <a href="win常用命令.txt">本地链接</a><br><br>

外部链接：<a href="https://www.runoob.com/html/html-links.html">这是个外部链接</a>

9.1 HTML 超链接（链接）

  HTML使用标签 <a> 来设置超文本链接。
  
  超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
  
  当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
  
  在标签 <a> 中使用了 href 属性来描述链接的地址。
  
  默认情况下，链接将以以下形式出现在浏览器中：
  
  一个未访问过的链接显示为蓝色字体并带有下划线。
  访问过的链接显示为紫色并带有下划线。
  点击链接时，链接显示为红色并带有下划线。
  注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

9.2HTML 链接语法

    以下是 HTML 中创建链接的基本语法和属性：<a> 元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：
  
      href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
      target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
      title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
      rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
      
    链接的 HTML 代码很简单，它类似这样：
    
      <a href="url">链接文本</a>
    href 属性描述了链接的目标。
  
    提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
  
   文本链接：最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：
   <a href="https://www.runoob.com/html/html-links.html">这是个文本链接</a>
  
   图像链接：您还可以使用图像作为链接。在这种情况下，<a> 元素包围着 <img> 元素。例如：
  
   锚点链接：除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。例如：
  <a href="#section2">跳转到第二部分</a>
  <!-- 在页面中的某个位置 -->
  <a name="section2"></a>

​
​ 下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：
​
​ 下载文档

9.3 HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

9.4HTML 链接- id 属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

实例
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

基本的注意事项 - 有用的提示
注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。

10.HTML头部

10.1HTML 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

10.2HTML <title> 元素

`html
标签定义了不同文档的标题。<br> <title> 在 HTML/XHTML 文档中是必需的。<br> <title> 元素:<br> 定义了浏览器工具栏的标题<br> 当网页添加到收藏夹时，显示在收藏夹中的标题<br> 显示在搜索引擎结果页面的标题<br> 一个简单的 HTML 文档:<br> 案例<br> <!DOCTYPE html><br> <html lang="en"><br> <head><br> <meta charset="UTF-8"><br> <title>文档标题在顶部


文档内容在正文

  </body>
  </html>`

10.3HTML <base> 元素

  <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
    <head>
        <meta charset="UTF-8">
        <title>文档标题在顶部</title>
        <base href="https://www.runoob.com/html/html-head.html" target="_blank">
    </head>

  <link> 标签定义了文档与外部资源之间的关系。
  
  <link> 标签通常用于链接到样式表:
  <head>
      <link rel="stylesheet" type="text/css" href="win常用命令.txt">
  </head>

10.5 HTML

posted @   yu-ye  阅读(33)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示