# HTML; **Published by:** [distracting-thoughts](https://paragraph.com/@distracting-thoughts/) **Published on:** 2023-12-14 **URL:** https://paragraph.com/@distracting-thoughts/html-3 ## Content <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我是菜鸟</title> </head> <body> <h1>菜鸟训练</h1> <h2>补12月06</h2> <p>昨天开始练习,然后卡在了如何在HTML上面添加图片,今天开始寻找各种视频和解说现在开始补上昨天的课程.</p> <p>这将是我的记录表,以后的记录都会出现在这里,坚持下去,现在先学会HTML,很多人问你学这个干啥,我也不知道啊,学就完事了</p> <p>现在开始正式</p> <h3>补充昨天的内容</h3> <h2>HTML 简介</h2> <img src="jianjie.jpg" width="800" height="400"/> <p>HTML 实例</p> <p>!DOCTYPE html 声明为 HTML5 文档</p> <p> html 元素是 HTML 页面的根元素</p> <p> head 元素包含了文档的元（meta）数据.</p> <p> meta charset="utf-8" ： 定义网页编码格式为 utf-8。</p> <p>title菜鸟教程(runoob.com)/title 元素描述了文档的标题</p> <p> body 元素包含了可见的页面内容</p> <p>h1 元素定义一个大标题</p> <p>注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。</p> <p>什么是HTML?</p> <p> HTML 是用来描述网页的一种语言。</p> <p> HTML 指的是超文本标记语言: HyperText Markup Language</p> <p> HTML 不是一种编程语言，而是一种标记语言</p> <p> 标记语言是一套标记标签 (markup tag)</p> <p> HTML 使用标记标签来描述网页</p> <p> HTML 文档包含了HTML 标签及文本内容</p> <p> HTML文档也叫做 web 页面</p> <h3>HTML 标签</h3> <p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 </p> <p>HTML 标签是由尖括号包围的关键词，比如 html </p> <p>HTML 标签通常是成对出现的，比如 b 和 /b </p> <p>标签对中的第一个标签是开始标签，第二个标签是结束标签 </p> <p>开始和结束标签也被称为开放标签和闭合标签 </p> <p>标签(内容)标签</p> <h2>HTML 元素 </h2> <p>"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思. </p> <p>但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例: </p> <p>p********/p</p> <h2>Web 浏览器 </h2> <p>Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。 </p> <p>浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户： </p> <img src="/html-first.png" alt="指示" width="600" height="400" /> <p>HTML 网页结构 </p> <img src="/HTML网页结构.jpg" alt="嘎嘎" width="600" height="400" /> <p>注意：这就是困了我一天的图片链接</p> <h2>!DOCTYPE 声明</h2> <p>!DOCTYPE 声明有助于浏览器中正确显示网页。</p> <p>网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。 </p> <p>doctype 声明是不区分大小写的</p> <p>通用声明</p> <p>HTML5</p> <p>!DOCTYPE html</p> <p>HTML 4.01 </p> <p>!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"</p> <p>XHTML 1.0 </p> <p>!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</p> <p>查看完整网页声明类型 DOCTYPE 参考手册。 </p> <h2>中文编码 </h2> <p>目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。</p> <h1>2 篇笔记</h1> <h2>1</h2> <p>1. doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。 在HTML 4.01 中，!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。 HTML 4.01 规定了三种不同的 !DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。 HTML5 不是基于 SGML，因此不要求引用 DTD。</p> <p>2. 对于中文网页需要使用 meta charset="utf-8" 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。 目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。</p> <h2>2</h2> <p>对于设置 meta charset="utf-8" / 后出现网页乱码问题，其实归根到底就是：你通过 meta 标签设置的编码和网页文件在保存时所使用的文档编码不相同造成的！</p> <p>至于有的人说什么 360 浏览器默认 GBK 会造成乱码，我只想说的是， 只要你在 html 文件里写了 !doctype hmtl 和 meta charset="utf-8" /，浏览器就绝对会按照 utf-8 编码解析网页，没有第二种可能！再次重点说明：保存 html 文件时，文档编码和 meta 设置的编码，一定要相同，只要不相同，就一定会出现乱码！</p> <p>之所以一定要写上 !doctype html ，就是为了防止浏览器的怪异模式，强制浏览器按照标准模式渲染网页！</p> </body> <body> <h1>补12月07</h1> <h2>HTML 编辑器</h2> <h3>HTML 编辑器推荐 </h3> <p>可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程为大家推荐几款常用的编辑器： </p> <p>VS Code： <a href="https://code.visualstudio.com/">https://code.visualstudio.com/</a></p> <p>Sublime Text：<a href="http://www.sublimetext.com/">http://www.sublimetext.com/</a></p> <p>在线编辑器：<a href="https://c.runoob.com/front-end/61/">https://c.runoob.com/front-end/61/</a></p> <p>你可以从以上软件的官网中下载对应的软件，按步骤安装即可。 </p> <p>接下来我们将为大家演示如何使用 VS Code 工具来创建 HTML 文件。 </p> <h3>VS Code </h3> <p>Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。</p> <p>VS Code 安装教程参考：<a href="https://www.runoob.com/w3cnote/vscode-tutorial.html">https://www.runoob.com/w3cnote/vscode-tutorial.html</a></p> <h4>步骤 1: 新建 HTML 文件 </h4> <p>!DOCTYPE html></p> <p>html></p> <p>head></p> <p>meta charset="utf-8"> </p> <img src="EAD13C0B-0BE9-411E-8E2A-23600B0BEF9B.jpg" width="800" height="400"/> <h3>步骤 2: 另存为 HTML 文件 </h3> <p>然后选择" 文件(F)->另存为(A) "，文件名为 runoob.html: </p> <img src="vscode-save.png" width="800" height="400"/> <p>当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好，我建议统一用 .html。 </p> <p>在一个容易记忆的文件夹中保存这个文件，比如 runoob </p> <h3>步骤 3: 在浏览器中运行这个 HTML 文件 </h3> <p>然后鼠标右击编辑器上的文件名，选择在默认浏览器打开（也可以其他的浏览器）: </p> <img src="1.jpg" width="800" height="400"/> <p>注：vscode 中使用浏览器打开 html 文件需要 安装 "open in browser" 扩展。 </p> <p>运行显示结果类似如下: </p> <img src="html-first.png" width="800" height="400"/> <p>VS Code 可以安装 Live Preview 插件来实时预览编写的代码： </p> <img src="3.png" width="800" height="400"/> <p>在编辑窗口右击鼠标，选择 Show Preview 选项： </p> <img src="vs-0923-2.png" width="800" height="400"/> <p>显示结果： </p> <img src="vs-0923-3.png" width="800" height="400"/> <p>这样我们就可以在编辑代码过程中实时预览到效果了。</p> <h1>2篇笔记</h1> <h2> 1 </h2> <p>每一种操作系统都带有简单的文本编辑器：</p> <p> Windows 用户可以使用记事本； </p> <p> Linux 用户可以选择几种不同的文本编辑器，如 vi、vim 或者 emacs ； </p> <p> Mac 用户可以使用 OS X 预装的 TextEdit。 </p> <h2>VS Code 怎样改成中文版？ </h2> <p>首先点击扩展（也就是四个小方格），在搜索栏内输入 Chinese。 </p> <p>点击 install ，下载安装简体中文，在右下方会出现 restart 点击就好。 </p> <p>再重启 vs 后就会变成简体中文。 </p> <img src="zhongwen.png" width="800" height="400"/> <h6>又补完了一篇</h6> <h1>HTML 基础- 4个实例 </h1> <h2>HTML 标题 </h2> <p>HTML 标题（Heading）是通过h1 - h6 标签来定义的。 </p> <img src="h1-h6.jpg" width="800" height="400"/> <h2>HTML 段落 </h2> <p>HTML 段落是通过标签 p 来定义的。 </p> <img src="p.jpg" width="800" height="400"/> <h1>重点：HTML 链接 </h1> <h2>HTML 链接是通过标签 a 来定义的。 </h2> <img src="HTML链接.jpg" width="800" height="400"/> <p>+88804251539:<a href="https://t.me/DistractingX ">https://t.me/DistractingX</a></p> <img src="+888.jpg" width="800" height="400"/> <p>提示:在 href 属性中指定链接的地址。 </p> <p>(您将在本教程稍后的章节中学习更多有关属性的知识)。 </p> <h2>重点：HTML 图像 </h2> <p>HTML 图像是通过标签 img 来定义的. </p> <img src="img.jpg" width="600" height="200"/> <p>注意： 图像的名称和尺寸是以属性的形式提供的。 </p> <h1>5篇笔记</h1> <h2>1</h2> <p>1、*.html 文件跟 *.jpg 文件(f盘)在不同目录下：</p> <p>img src="file:///f:/*.jpg" width="300" height="120"/</p> <img src="htnl-01.jpg" width="600" height="200"/> <p>2、*.html 文件跟 *.jpg 图片在相同目录下： </p> <img src="html-2.jpg" width="600" height="200"/> <p>img src="*.jpg" width="300" height="120"/</p> <p>3、*.html 文件跟 *.jpg 图片在不同目录下： </p> <p>a、图片 *.jpg 在 image 文件夹中，*.html 跟 image 在同一目录下： </p> <img src="html-3.jpg" width="600" height="200"/> <p>img src="image/*.jpg/"width="300" height="120"/</p> <p>b、图片 *.jpg 在 image 文件夹中，*.html 在 connage 文件夹中，image 跟 connage 在同一目录下：</p> <img src="html-4.jpg" width="600" height="200"/> <p>img src="../image/*.jpg/"width="300" height="120"/</p> <p>4、如果图片来源于网络，那么写绝对路径： </p> <img src="html-5.jpg" width="600" height="200"/> <p>img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/</p> <h2>HTML 中 href、src 区别</h2> <p>href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：</p> <p>link href="reset.css" rel=”stylesheet“/</p> <p>浏览器会识别该文档为 css 文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用 link，而不采用 @import 加载 css 的原因。 src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如:</p> <p>script src="script.js">/script</p> <p>当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。</p> <p>简而言之，src 用于替换当前元素；href 用于在当前文档和引用资源之间建立联系。 </p> <img src="biji2.jpg" width="600" height="200"/> <h2>HTML 中的 href 和 src 有什么区别 </h2> <p>href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。 </p> <p>src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。 </p> <h2>MacOS 如何加载图片以及文件目录有空格 </h2> <p>MacOS 是没有硬盘分区的，所以引用文件直接： </p> <p>img src="file:///Users/usrn/location" width="x" height="y"/</p> <p>假设文件目录有空格，直接将空格换成： </p> <p>%20</p> <p>如下:</p> <p>img src="file:///Users/usrn/Desktop/location/space%20space/Images/IMG.png" width="x" height="y"/</p> <img src="MacOS.jpg" width="600" height="200"/> <h2>记录一下 html 相对路径的写法： </h2> <p> ./：代表文件所在的目录（可以省略不写）如果写成image/background就相当于是在html文件下找image文件夹，当然是找不到的 </p> <p> ../：代表文件所在的父级目录 </p> <p> ../../：代表文件所在的父级目录的父级目录 </p> <p> /：代表文件所在的根目录 </p> <h1>12月8日</h1> <h2>HTML 元素 </h2> <p>HTML 文档由 HTML 元素定义。 </p> <p>开始标签 * 元素内容 结束标签 *</p> <p>p 这是一个段落 /p </p> <p>a href="default.htm" 这是一个链接 </a></p> <p>br 换行</p> <p>*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。 </p> <a href="https://www.runoob.com/html/html-elements.html">HTML 元素 </a> <h2>HTML 元素语法 </h2> <p>HTML 元素以开始标签起始 </p> <p>HTML 元素以结束标签终止 </p> <p>元素的内容是开始标签与结束标签之间的内容 </p> <p>某些 HTML 元素具有空内容（empty content） </p> <p>空元素在开始标签中进行关闭（以开始标签的结束而结束） </p> <p>大多数 HTML 元素可拥有属性 </p> <p>注释: 您将在本教程的下一章中学习更多有关属性的内容。 </p> <h2>嵌套的 HTML 元素 </h2> <p>大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。 </p> <p>HTML 文档由相互嵌套的 HTML 元素构成。 </p> <h2>HTML 文档实例 </h2> <p>!DOCTYPE html</p> <p>html</p> <p>body</p> <p>p 这是第一个段落。/p</p></p> <p>以上实例包含了三个 HTML 元素。</p> <p>1. 一些标签的使用，切记所有标签都需要闭合，不管是单体标签还是成对标签。（尽管目前浏览器是识别有些标签不闭合的情况，但是取的最好的保证兼容性，使用闭合）</p> <p>2. 标签写法要用小写字母（有些版本对大小写可认为相同，而xhtml中强制使用小写） </p> <h2>HTML 提示：使用小写标签 </h2> <p>HTML 标签对大小写不敏感：P 等同于 p。许多网站都使用大写的 HTML 标签。 </p> <p>菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。</p> <h2>HTML 空元素 </h2> <p>没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。 </p> <p> br 就是没有关闭标签的空元素（ br 标签定义换行）。 </p> <p>在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。 </p> <h1>HTML 属性</h1> <p>属性是 HTML 元素提供的附加信息。 </p> <h4>跟上了进程</h4> <h2>HTML 属性 </h2> <p>HTML 元素可以设置属性 </p> <p>属性可以在元素中添加附加信息 </p> <p>属性一般描述于开始标签 </p> <p>属性总是以名称/值对的形式出现，比如：name="value"。 </p> <h2>属性实例 </h2> <p>HTML 链接由 a 标签定义。链接的地址在 href 属性中指定： </p> <h2>HTML 属性常用引用属性值 </h2> <p>属性值应该始终被包括在引号内。 </p> <p>双引号是最常用的，不过使用单引号也没有问题。 </p> <p>Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如： </p> <p>name='John "ShotGun" Nelson'</p> <h2>HTML 提示：使用小写属性 </h2> <p>属性和属性值对大小写不敏感。 </p> <p>不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。 </p> <p>而新版本的 (X)HTML 要求使用小写属性。 </p> <h2>HTML 属性参考手册 </h2> <p>下面列出了适用于大多数 HTML 元素的属性： </p> <p>class 为html元素定义一个或多个类名（classname）(类名从样式文件引入) </p> <p>id 定义元素的唯一id </p> <p>style 规定元素的行内样式（inline style） </p> <p>title 描述了元素的额外信息 (作为工具条使用) </p> <p>属性和属性值，尽量小写，本来这样做也方便些。 </p> <p>class 属性可以多用 class=" " （引号里面可以填入多个class属性） </p> <p>id 属性只能单独设置 id=" "（只能填写一个，多个无效） </p> <br> <h1>第7节：HTML 标题 </h1> <a href="https://www.runoob.com/html/html-headings.html">HTML 标题 </a> <p>在 HTML 文档中，标题很重要。 </p> <h2>HTML 标题 </h2> <p>标题（Heading）是通过 h1 - h6 标签进行定义的。 </p> <p> h1 定义最大的标题。 h6 定义最小的标题。 </p> <p>注释: 浏览器会自动地在标题的前后添加空行。 </p> <h2>标题很重要 </h2> <p>请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。 </p> <p>搜索引擎使用标题为您的网页的结构和内容编制索引。 </p> <p>因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。 </p> <p>应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。 </p> <h2>HTML 水平线 </h2> <p> hr 标签在 HTML 页面中创建水平线。<br> hr 元素可用于分隔内容。 </p> <h2>HTML 注释 </h2> <p>可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。 </p> <p>注释写法如下: </p> <p><!-- 这是一个注释 --> </p> <p>注释: 开始括号之后（左边的括号）需要紧跟一个叹号 ! (英文标点符号)，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。 </p> <h2>HTML 提示 - 如何查看源代码 </h2> <p>你是否看过一些网页然后惊叹它是如何实现的。<br> 如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。 </p> <h2>本章实列</h2> <p>标题<br>如何在 HTML 文档中显示标题。 </p> <p>隐藏注释<br>如何在 HTML 源代码中插入注释。 </p> <p>(hr/)水平线<br>如何插入水平线。 </p> <hr/> <h2>HTML 标签参考手册 </h2> <hr/> <p>菜鸟教程的标签参考手册提供了有关这些标题及其属性的更多信息。 </p> <hr/> <p>您将在本教程下面的章节中学到更多有关 HTML 标签和属性的知识。 </p> <hr/> <p>html<br>定义 HTML 文档 </p> <hr/> <p>body<br>定义文档的主体 </p> <hr/> <p>h1 - h6 定义 HTML 标题 </p> <hr/> <p>hr<br>定义水平线 </p> <hr/> <p>!--...--<br>定义注释 </p> <hr/> <h1>第8节：HTML 段落 </h1> <p>非常的简单，我已经在提前使用了</p> <a href="https://www.runoob.com/html/html-paragraphs.html">HTML 段落 </a> <p>p/p是块级元素</p> <p>折行:br.元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。</p> <hr/> <h1>第8节：HTML 文本格式化 </h1> <a href="https://www.runoob.com/html/html-formatting.html">HTML 文本格式化 </a> <h2>HTML 文本格式化 </h2> <p> b <b>加粗文本</b><br><br></p> <p>i<i>斜体文本</p><br> <p> code <code>电脑自动输出</code><br><br></p> <p>这是 sub <sub> 下标</sub> 和 sup<sup> 上标</sup></p> <p>我喜欢的颜色是<del>蓝色</del> <ins>红色</ins>!</p> <p>del 定义删除字 <del>定义删除字</del> </p> <p>ins 定义插入字 <ins>定义插入字 </ins> </p> <h2>HTML "计算机输出" 标签 </h2> <p>code 定义计算机代码 <code>定义计算机代码 </code> </p> <p>kbd 定义键盘码 <kbd>定义键盘码</kbd></p> <p>samp 定义计算机代码样本 <samp>定义计算机代码样本</samp> </p> <p>var 定义变量 <var>定义变量 </var></p> <p>pre 定义预格式文本 <pre>定义预格式文本 </pre></p> <h2>HTML 引文, 引用, 及标签定义 </h2> <p>abbr 定义缩写<abbr>定义缩写</abbr></p> <hr> <h1>第九节：HTML 链接 </h1> <a href="https://www.runoob.com/html/html-links.html">HTML 链接</a> <p>HTML 使用超级链接与网络上的另一个文档相连。<br>HTML中的链接是一种用于在不同网页之间导航的元素。 <br>链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。 <br>链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。 <h2>尝试一下 - 实例 </h2> <p><a href="https://www.runoob.com/try/try.php?filename=tryhtml_links">本文本</a> 是一个指向本网站中的一个页面的链接。</p> </p> <h2>HTML 超链接（链接） </h2> <p>HTML使用标签 a 来设置超文本链接。<br>超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 <br>当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。<br>在标签 a 中使用了 href 属性来描述链接的地址。 <br>默认情况下，链接将以以下形式出现在浏览器中： <br>一个未访问过的链接显示为蓝色字体并带有下划线。 <br>访问过的链接显示为紫色并带有下划线。 <br>点击链接时，链接显示为红色并带有下划线。 </p> <p>注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。 </p> <h2>HTML 链接语法 </h2> <p>以下是 HTML 中创建链接的基本语法和属性：a 元素：创建链接的主要HTML元素是 a （锚）元素。a 元素具有以下属性： <br>href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。 <br>target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。 <br>title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。 <br>rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。 </p> <p>链接的 HTML 代码很简单，它类似这样： </p> <p>a href="url">链接文本 /a</p> <p>href 属性描述了链接的目标。 </p> <p>实例<br>a href="https://www.runoob.com/">访问菜鸟教程 /a</p> <p>上面这行代码显示为：访问菜鸟教程</p> <p>提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。 </p> <p>文本链接：最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如： </p> <p>a href="https://www.example.com">访问示例网站 /a</p> <p>图像链接：您还可以使用图像作为链接。在这种情况下，a 元素包围着 img 元素。例如：</p> <p>a href="https://www.example.com" img src="example.jpg" alt="示例图片" /a><br></p> <p>锚点链接：除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 a 元素定义一个标记，并使用#符号引用该标记。例如：</p> <p><a href="#section2">跳转到第二部分</a></p> <p><!-- 在页面中的某个位置 --> </p> <p><a name="section2"></a></p> <p>下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如： </p> <p>a href="document.pdf" download>下载文档 /a</p> <h2>HTML 链接 - target 属性 </h2> <p>使用 target 属性，你可以定义被链接的文档在何处显示。 </p> <p>下面的这行会在新窗口打开文档： </p> <p>a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程! /a </p> <h2>HTML 链接- id 属性 </h2> <p>id 属性可用于创建一个 HTML 文档书签。 </p> <p>提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。 </p> <p>在HTML文档中插入ID: </p> <a id="tips">有用的提示部分</a> <p>在HTML文档中创建一个链接到"有用的提示部分（id="tips"）"： </p> <a href="#tips">访问有用的提示部分</a> <p>或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"： </p> <a href="https://www.runoob.com/html/html-links.html#tips"> 访问有用的提示部分</a> <a href="https://www.okx.com/cn/markets/prices">okx</a> <H2>基本的注意事项 - 有用的提示 </H2> <P>注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。 </P> <H2>target属性问题 </H2> <P>target="_blank":在新窗口中浏览新的页面。 <br>target="_self":在同一个窗口打开新的页面。 <br>target="_parent":在父窗口中打开新的页面。（页面中使用框架才有用） <br>target="_top" :以整个浏览器作为窗口显示新页面。（突破了页面框架的限制） </P> </hr> <h1>第十节：HTML 头部 head </h1> <a href="https://www.runoob.com/html/html-head.html">HTML 头部</a> <P>使用 title 标签定义HTML文档的标题 </P> <P>base - 定义了所有链接的URL</P> <P>使用 meta 元素来描述HTML文档的描述，关键词，作者，字符集等。</P> <h2>HTML head 元素 </h2> <P> head 元素包含了所有的头部标签元素。在 head 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。</P> <P>可以添加在头部区域的元素标签为: title, style, meta, link, script, noscript 和 base。 </P> <h2>HTML title 元素</h2> <P>title 标签定义了不同文档的标题。<br>title 在 HTML/XHTML 文档中是必需的。<br>title 元素:<br>定义了浏览器工具栏的标题 <br>当网页添加到收藏夹时，显示在收藏夹中的标题 <br>显示在搜索引擎结果页面的标题 </P> <h2>HTML base 元素 </h2> <P> base 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接: </P> <P>head> base href="http://www.runoob.com/images/" target="_blank"> /head </P> <h2>HTML link 元素 </h2> <P>link 标签定义了文档与外部资源之间的关系。<br>link> 标签通常用于链接到样式表:</P> <P>head link rel="stylesheet" type="text/css" href="mystyle.css"> /head </P> <P>HTML style 元素 </P> <P>style> 标签定义了HTML文档的样式文件引用地址.<br></P> <P>在 style 元素中你也可以直接添加样式来渲染 HTML 文档:</P> <P><head> <style type="text/css"> body { background-color:rgba(255, 0, 0, 0) } p { color:rgba(255, 0, 0, 0.877) } </style> </head></P> <p> head style type="text/css"> body { background-color:yellow; } p { color:blue } /style> /head></p> <P>背景颜色和字体颜色</P> <h2>HTML meta 元素</h2> <P>meta标签描述了一些基本的元数据。<br>meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。<br>META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。 <br>元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。<by> meta 一般放置于 head 区域 </P> <h2>meta> 标签- 使用实例</h2> <P>为搜索引擎定义关键词: </P> <P> meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> </P> <P>为网页定义描述内容: </P> <P>meta name="description" content="免费 Web & 编程 教程"></P> <P>定义网页作者: </P> <P>meta name="author" content="Runoob"></P> <P>每30秒钟刷新当前页面: </P> <P>meta http-equiv="refresh" content="30"></P> <h2>HTML script 元素 </h2> <P>script>标签用于加载脚本文件，如： JavaScript。<br>script> 元素在以后的章节中会详细描述。</P> <P>HTML title 元素不仅可以显示文本，也可以在左侧显示logo等图片。 <br> 显示时，要将 link 标签放入 head 里。 <br> 举例：</P> <!doctype HTML> <html> <head> <link rel="shortcut icon" href="logo.jpg"> <title>这是一个带图片的标签</title> </head> <body> …… …… …… </body> </html> </hr> <P></P> </body> </hr> <body> <h1>12/09 HTML 样式- CSS </h1> <a href="https://www.runoob.com/html/html-css.html">HTML 样式- CSS</a> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div> <div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"> <div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div> <h3>Look! Styles and colors</h3> <div style="letter-spacing:12px;">Manipulate Text</div> <div style="color:#40B3DF;">Colors <span style="background-color:#B4009E;color:#ffffff;">Boxes</span> </div> <div style="color:#000000;">and more...</div> </div> </body> </html> <p> div 中文：分区<br>style 中文：风格<br>opacity :0.5; 中文：不透明度：0.5；<br>position:absolute; 中文：位置：绝对；<br>left: 中文：左边；<br>50px; 中文：50像素<br>width:300px; 中文：宽度：300px；<br>height:150px; 中文：高度：150px；<br>background-color:#40B3DF"> 中文：背景颜色：#40B3DF"> /div</p> <p>font-family: verdana;padding:20px;border-radius:10px;border:10px solid #EE872A; 中文：字体系列：verdana；填充：20px；边框半径：10px；边框：10px 实心#EE872A；</p> <p>opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007" 中文不透明度：0.3；位置：绝对；左：120px；宽度：100px；高度：200px；背景颜色：#8AC007" </p> <p>"letter-spacing:12px;" 中文：“字母间距：12px；”</p> <p>"color:#40B3DF;" 中文：“颜色：#40B3DF；”</p> <p>span style="background-color:#B4009E;color:#ffffff;" 中文：跨度 风格=“背景颜色：#B4009E;颜色：#ffffff;”</p> <p>"color:#000000;" 中文 ：“颜色：#000000；”</p> <h2>如何使用CSS </h2> <p>CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的. <br>CSS 可以通过以下方式添加到HTML中: <br>内联样式- 在HTML元素中使用"style" 属性 <br>内部样式表 -在HTML文档头部 head 区域使用 style 元素 来包含CSS <br>外部引用 - 使用外部 CSS 文件 <br>最好的方式是通过外部引用CSS文件. </p> <p>p style="color:blue;margin-left:20px;">这是一个段落。</p</p> <h2>内联样式 </h2> <p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。 </p> <h2>HTML样式实例 - 背景颜色 </h2> <p>背景色属性（background-color）定义一个元素的背景颜色： </p> <p>body style="background-color:yellow;"</p> <p>h2 style="background-color:red;"</p> <p>p style="background-color:green;"</p> <p>早期背景色属性（background-color）是使用 bgcolor 属性定义。 </p> <h2>HTML 样式实例 - 字体, 字体颜色 ，字体大小 </h2> <p>h1 style="font-family:verdana;"</p> <p>p style="font-family:arial;color:red;font-size:20px;"</p> <p style="font-family:arial;color:rgb(183, 0, 255);font-size:20px;">现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。 </p> <h2 style="text-align:center;">HTML 样式实例 - 文本对齐方式(居中对齐) </h2> <p style="font-family:arial;color:rgb(255, 72, 0);font-size:20px;">使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式： <br>文本对齐属性 text-align取代了旧标签 center 。 </p> <h2 style="font-family:verdana;">内部样式表 </h2> <p>当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head>部分通过 style>标签定义内部样式表: <head> <style type="text/css"> body {background-color:rgba(255, 102, 0, 0);} p {color:rgb(0, 183, 255);} </style> </head> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> </p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </body> </html> ## Publication Information - [distracting-thoughts](https://paragraph.com/@distracting-thoughts/): Publication homepage - [All Posts](https://paragraph.com/@distracting-thoughts/): More posts from this publication - [RSS Feed](https://api.paragraph.com/blogs/rss/@distracting-thoughts): Subscribe to updates - [Twitter](https://twitter.com/DistractingD): Follow on Twitter