HTML学习笔记：（一）基础方法

news2024/11/25 1:27:20

Html格式

里面文件使用平台为：w3school

1、基础功能：

<html>

<head>
<title>这是我的第一个html页面,会显示在浏览器的标题栏中</title>
</head>
<!--修改背景颜色 -->
<body  bgcolor="yellow">
<!-- 注释：标题的使用 -->
<h1>标题最多有6个（h1-h6）级别依次降低</h1>
<h2 align="center">居中显示的标题</h2>
<h3 align="right">居右显示的标题</h2>


<p>春晓1</p>
<p>
  春眠不觉晓，
      处处闻啼鸟，
          夜来风雨声，
              花落知多少。
</p>
<p>* 浏览器忽略了源代码中的空格、换行</p>
<p>* 段落元素由p标签决定，内容显示在浏览器中</p>
<!-- 注释：换行符的使用 -->
<p>*换行符使用</p>
<p>春晓2</p>
<p>春眠不觉晓<br />处处闻啼鸟<br />夜来风雨声<br />花落知多少</p>

<!-- 注释：水平线的使用 -->
<p>接下来是水平线</p>
<hr >
<!-- 文本样式设置-->
<p>文字加粗1：</p>
<b>this text is bold</b>
<p>文字加粗2：</p>
<strong>this text is strog</strong>
<p>文字着重：-斜体展示，语法上着重内容</p>
<em>this text is em</em>
<p>斜体展示：-斜体展示，语法上着重斜体</p>
<i>this text is i</i>
<p>设置大文字：</p>
<big>this  text is big</big>
<p>设置小文字：</p>
<small>this text is small</small>
<p>文字缩小居下显示：</p>
this text contains<sub> sub</sub>
<p>文字缩小居上显示</p>
this text contains <sup>sup</sup>
<!--预格式文本 -->
<p>预格式文本（保留了换行及空格，常用于计算机代码）：</p>
<pre>
int a=0
if(b>c){
   a=c
}
</pre>
<!--地址的使用：-->
<p>地址的使用：</p>
<address>详情请了解<a href="https://www.baidu.com">度娘</a><br />
作者：文阿花<br />
地址：河南
</address>
<hr >
<!--缩写和首字母缩写 -->
<p>首字母缩写：--鼠标放上去会展示出全称</p>
<abbr title="wonderful">won</abbr>
<p>名称缩写：--鼠标放上去会展示出全称</p>
<acronym title="Welcome  TO  China">WTC</acronym>
<hr >
<!--文字方向 -->
<p>文字方向：如果您的浏览器支持 bi-directional override (bdo)，下一行文字会从右向左排列 (rtl)</p>
<bdo dir="rtl">
这行文字将从右往左出现
</bdo>
<hr >
<!--块引用 -->
<p>长引用：-浏览器会自动插入换行和外边距</p>
<blockquote>这个是长链接，长链接长链接长链接长链接长链接长链接长链接</blockquote>

<p>短引用：-样式上不会有任何不同的呈现</p>
<q>这是短引用</q>
<hr >
<!--插入文字和删除文字（下划线和中划线） -->
<p>插入文字和删除文字：-大多数浏览器（一些老浏览器除外）会改写为删除文本和下划线文本</p>
<del>中划线</del><br />
<ins>下划线</ins>
<hr >
<!-- 超链接的使用-->
<p>超链接的使用1-在当前窗口打开</p>
<a href="https://www.baidu.com" >点击跳转百度</a>
<p>超链接的使用2--在新窗口打开</p>
<a href="https://www.baidu.com" target="_blank">点击跳转百度</a>
<p>超链接的使用2</p>
<a href="/index.html">跳转W3school本地（https://www.w3school.com.cn/tiy/t.asp?f=html_links）网站的一个页面</a>
<!--以图片作为超链接 -->
<p>可以使用图片作为超链接  border设置边框的宽度，以像素为单位。
<a href="/index.html">
<image  border="0"  src="http://www.baidu.com/img/baidu_logo.gif"/>
</a>
</p>
<!-- 跳转到本页面的指定位置-->
<p>跳转到本页指定位置
<a href="#C12">点击跳转至C12</a>
</p>
<h3><a name="C12"></a></h3>
<p>这是第12段</p>
<!--发送邮件 -->
<p>发送邮件:</p>
<p>1、要有反应的前提是你的电脑要安装有:foxmail或outlook等电子邮件发送软件,并设置为默认为首选.</p>
<p>2、应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了.</p>
<p>3、本例在安装邮件客户端程序后才能工作。</p>
<a href="mailto:18339995540@163.com">发送邮件</a>
</body>
</html>

运行效果：
效果运行

1.1 标题和段落的背景色

<!--标题和段落的背景 -->
<html>
<body>
<h1 style="background-color:yellow">标题</h1>
<p style="background-color:blue">这是一个段落</p>
</body>
</html>

运行效果：
在这里插入图片描述

1.2 引用

1.2.1 短引用（即加引号）

  • q标签实现短引用即""

<html>
<body>
<!--引用 （加引号）-->
<p>WWF的目标是<q>构建人与自然和谐相处的世界</q></p>
</body>
</html>

运行效果：
在这里插入图片描述

1.2.2 长引用（即引用块儿，有自己的缩进空间）

  • blockquote 标签实现长引用 （引用块儿 有自己的空间）
<!--长引用 自动缩进处理 -->
<html>
<body>
<p>浏览器通常会对 blockquote 元素进行缩进处理</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
</body>
</html>

运行效果：
在这里插入图片描述

1.2.2（1）关于blockquote标签中的cite属性（即引用来源）

  • cite属规定引用的来源
  • 主流浏览器不支持cite,但是搜索引擎可能会使用该属性获得更多的引用信息
  • 语法：
<blockquote cite="URL">
  • URL:
    （1）绝对 URL - 指向另一个站点（比如 href=“http://www.example.com/song.ogg”）
    （2）相对 URL - 指向网站内的文件（比如 href=“song.ogg”）

1.2.3 abbr缩略引用（鼠标放置上面可显示全称 缩写底部加…）

  • 使用abbr标签设置缩写 其中title设置全称
<!--缩略 -->
<html>
<body>
<p><abbr title="World Health Organization">WHO</abbr>成立于1984年</p>
<p>对缩写进行标记能够为浏览器和搜索引擎提供有用的信息</p>
</body>
</html>

运行效果：
在这里插入图片描述

1.2.4 dfn缩写引用（鼠标放置上面可显示全称 斜体显示）

  • 使用abbr标签设置缩写 其中title设置全称
<!--dfn斜体缩写 -->
<html>
<body>
<p><dfn title="World Health Organization">WHO</dfn>成立于1984年</p>
</body>
</html>

运行效果：
在这里插入图片描述

1.2.5 abbr+dfn缩写引用（鼠标放置上面可显示全称 斜体+底部…显示 ）

  • dfn包含abbr使用
<!--abbr+dfn合并缩写 -->
<html>
<body>
<h4>缩写底部加..斜体显示</h4>
<p>The<dfn><abbr title="World Health Organization">WHO</abbr></dfn>
was founded in 1948
</p>
</body>
</html>

运行效果：
在这里插入图片描述

1.2.6 address引用(斜体展示)

  • address元素定义文档或文章的联系信息（作者/拥有者）
<!--address引用 -->
<html>
<body>
<p>HTML中address元素定义文档或文章的联系信息（作者/拥有者）</p>
<address>
文阿花<br >
2021/3/19<br >
深圳
</address>
</body>
</html>

运行效果：
在这里插入图片描述

1.2.7 HTML cite定义著作的标题(斜体显示)

<!--cite 元素定义著作的标题 -->
<html>
<body>
<h4>cite元素定义著作的标题  斜体显示</h4>
<img src="img.png" alt="奶酪"></img>
<p><cite>谁动了我的奶酪</cite>这本书出版于1998年</p>
</body>
</html>

运行效果：
在这里插入图片描述
其中的img.png为人为的不存在的图片 alt属性可在图片无法显示的时候对图片内容进行解释 alt的具体用法请参考HTML学习笔记之基础（三）

1.2.8 双向重写

  • 使用bdo标签实现文字排序重写，其中 dir属性决定重写方式，rtl(right to left)从右往左方式，ltr(left to right):从左往右-默认
<!--双向重写 -->
<html>
<body>
<h4>双重重写  效果即为文字从右到左显示  ltr(默认 从左往右)  rtl 从右往左</h4>
<bdo dir="rtl">这句话讲会从右往左显示</bdo>
</body>
</html>

1.3 链接

1.3.1 链接种类

  • 可以跳转文本即F:\Html\MyHtmls1\image\html_action.html
  • 也可跳转网页即：https://www.baidu.com
<!--链接 -->
<html>
<body>
<h4>在当前页面跳转的链接</h4>
<p>
这是一个指向文本的链接：
<a href="F:\Html\MyHtmls1\image\html_action.html">文本链接</a>
</p>
<p>
这是一个指向网页的链接：
<a href="https://www.baidu.com">网址链接</a>
</p>
</body>
</html>

1.3.2 a标签中的target属性

  • 其中四种特定属性_black、_self、_top、_parent
<html>
<body>
<p>这是个链接target=_black
<a href="F:\Html\MyHtmls1\image\html_action.html" target="_black">target=_black</a>
</p>
<p>这是个链接target=_self
<a href="F:\Html\MyHtmls1\image\html_action.html" target="_self">target=_self</a>
</p>
<p>这是个链接target=_top
<a href="F:\Html\MyHtmls1\image\html_action.html" target="_top">target=_top</a>
</p>
<p>这是个链接target=_parent
<a href="F:\Html\MyHtmls1\image\html_action.html" target="_parent">target=_parent</a>
</p>
</body>
</html>

关于四种属性的运行效果和特点请出门左转至HTML学习之链接target属性

1.3.3 a标签中name(锚)的使用

  • 关于锚的使用有两种方式 一种是本页面内跳转，一种是跳转到别的页面
    （1）首先是本页面跳转：
    frame_list.html:
<html>
<body>
<p><a href="#C10">跳转到第10条</a></p>
<h1>Chapter 1</h1>
<p>这是一句话</p>
<h1>Chapter 2</h1>
<p>这是一句话</p>
<h1>Chapter 3</h1>
<p>这是一句话</p>
<h1>Chapter 4</h1>
<p>这是一句话</p>
<h1>Chapter 5</h1>
<p>这是一句话</p>
<h1>Chapter 6</h1>
<p>这是一句话</p>
<h1>Chapter 7</h1>
<p>这是一句话</p>
<h1>Chapter 8</h1>
<p>这是一句话</p>
<h1>Chapter 9</h1>
<p>这是一句话</p>

<h1 ><a name="C10">Chapter 10</a></h1>
<p>这是一句话</p>
<h1>Chapter 11</h1>
<p>这是一句话</p>
<h1>Chapter 12</h1>
<p>这是一句话</p>
<h1>Chapter 13</h1>
<p>这是一句话</p>
<h1>Chapter 14</h1>
<p>这是一句话</p>
<h1>Chapter 15</h1>
<p>这是一句话</p>
<h1>Chapter 16</h1>
<p>这是一句话</p>
<h1>Chapter 17</h1>
<p>这是一句话</p>
<h1>Chapter 18</h1>
<p>这是一句话</p>
<h1>Chapter 19</h1>
<p>这是一句话</p>
<h1>Chapter 20</h1>
<p>这是一句话</p>
</body>
</html>

点击前效果：
在这里插入图片描述
点击链接跳转后：
在这里插入图片描述
（2）跳转到别的页面：
html_style.html:

<!--锚的使用 -->
<p><a href="F:\Html\MyHtmls1\normal\frame_list.html#C10">点击跳转至其他页面</a></p>

点击跳转后直接跳转到F:\Html\MyHtmls1\normal\frame_list.html页面中 并默认滚动到name=C10的位置

1.4 头部元素

head元素 包含title、base、link、meta、script 以及 style标签

1.4.1 title元素

  • title在所有的HTML和XHTML文档中都是必须的
  • title的作用：
    （1）定义浏览器工具栏中的标题
    （2）提供页面被收藏到收藏夹中时显示的标题
    （3）显示在搜索引擎中展示的标题
<html>
<head>
<title>这是一个我的网页</title>
</head>
</html>

运行效果：
在这里插入图片描述

1.4.2 base元素

  • 为页面上所有链接提供默认的地址或默认的target
<html>
<head>
<title>这是一个我的网页</title>

<base href="F:\Html\MyHtmls1\image\"/>
<base target="_blank"/>

</head>
<body>
<img src="aa.gif" width="100px" height="200px"/><br >
<p>注意：我们已经在base中为图片提供了一个相对地址路径，浏览器将在如下地址中寻找图片：
</p>
<p>F:\Html\MyHtmls1\image\aa.gif</p>


<p><a href="https://www.baidu.com">跳转至百度</a></p>
<p>注意：链接会在新窗口打开，因为我们已经在base中提供了连接默认打开方式即_black</p>
<body/>
</html>

运行效果：

在这里插入图片描述

1.4.3 link元素（引用外部样式 例如CSS样式）

  • link标签定义文档与外部资源之间的关系。
  • link标签最常用于连接样式表
<html>

<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>

</html>

运行效果：
在这里插入图片描述

1.4.4 style元素

  • type=type=“text/css” 后面必须带css 不然不出效果
<html>
<head>
<title>这是一个我的网页</title>

<style type="text/css">
body{ background-color:yellow}
p{ color:red}
</style>
</head>
<body>
<p>这是一个段落</p>

</body>

</html>

运行效果：
在这里插入图片描述

1.4.5 meta、script

HTML头部元素

1.5 实体

1.5.1 字体

HTML 字符实体

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1606335.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何合理利用多个中国大陆小带宽服务器？

如何合理利用多个中国大陆小带宽服务器？

我们知道在中国大陆带宽单价非常昂贵&#xff0c;一个1Mbps 带宽的机子一年就得卖好几百人民币&#xff0c;这是不值当的&#xff0c;当然我们可以去低价漂阿里云、腾讯云的轻量服务器&#xff0c;99包年&#xff0c;但是带宽太小很难崩。 所以&#xff0c;我们必须构建一个能够…
阅读更多...
钉钉直播回放怎么下载到本地

钉钉直播回放怎么下载到本地

钉钉直播回放如何下载到本地,本文就给大家解密如何下载到本地 工具我已经给大家打包好了 钉钉直播回放下载软件链接&#xff1a;https://pan.baidu.com/s/1_4NZLfENDxswI2ANsQVvpw?pwd1234 提取码&#xff1a;1234 --来自百度网盘超级会员V10的分享 1.首先解压好我给大家…
阅读更多...
使用脚本启动和关闭微服务

使用脚本启动和关闭微服务

使用脚本启动和关闭微服务 一、前言二、启动1、处理每个服务2、编写启动脚本3、其他启动脚本&#xff08;无效&#xff0c;有兴趣可以看看&#xff09;4、启动 三、关闭1、测试拿服务进程id的命令是否正确2、编写关闭脚本3、关闭 一、前言 假如在服务器中部署微服务不使用 doc…
阅读更多...
ElasticSearch：基础操作

ElasticSearch：基础操作

一、ES的概念及使用场景 ElasticSearch是一个分布式&#xff0c;高性能、高可用、可伸缩、RESTful 风格的搜索和数据分析引擎。通常作为Elastic Stack的核心来使用 我们通过将ES 和 mysql对比来更好的理解 ES&#xff0c;ES和mysql相关的基本概念的对比表格如下&#xff1a; …
阅读更多...
从Linux角度具体理解程序翻译过程-----预处理、编译、汇编、链接

从Linux角度具体理解程序翻译过程-----预处理、编译、汇编、链接

前言&#xff1a; 在C语言中&#xff0c;我们知道程序从我们所写的代码到可执行执行的过程中经历了以下过程 1.预处理 2.编译 3.汇编 4.链接 可以通过下图来理解 翻译过程 1.预处理 该过程主要进行以下操作&#xff1a; (1)头文件的包含 (2)define定义符号的替换&#xff…
阅读更多...
稀碎从零算法笔记Day52-LeetCode:从双倍数组中还原原数组

稀碎从零算法笔记Day52-LeetCode:从双倍数组中还原原数组

题型&#xff1a;数组、贪心 链接&#xff1a;2007. 从双倍数组中还原原数组 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 一个整数数组 original 可以转变成一个 双倍 数组 changed &#xff0c;转变方式为将 original 中每个元素 值乘以 …
阅读更多...
EFK架构部署

EFK架构部署

7.17版本 准备工作 配置域名 cat >> /etc/hosts <<EOF 192.168.199.149 elk149daidaiedu.com 192.168.199.150 elk150daidaiedu.com 192.168.199.155 elk155daidaiedu.com EOF 修改主机名 hostnamectl set-hostname elk155.daidaiedu.com 免密登录 ssh-keyge…
阅读更多...
# 从浅入深 学习 SpringCloud 微服务架构（一）基础知识

# 从浅入深 学习 SpringCloud 微服务架构（一）基础知识

从浅入深 学习 SpringCloud 微服务架构&#xff08;一&#xff09;基础知识 1、系统架构演变&#xff1a; 1&#xff09;单体应用架构。如电商项目。 用户管理、商品管理、订单管理&#xff0c;在一个模块里。 优点&#xff1a;开发简单&#xff0c;快速&#xff0c;适用于…
阅读更多...
VScode远程连接虚拟机提示: 无法建立连接：XHR failed.问题解决方案

VScode远程连接虚拟机提示: 无法建立连接：XHR failed.问题解决方案

一问题描述 在vscode下载插件Remote-SSH远程连接虚拟机时提示无法建立连接 二.最大嫌疑原因&#xff1a; 我也是在网上找了许久&#xff0c;发现就是网络原因&#xff0c;具体不知&#xff0c;明明访问别的网页没问题&#xff0c;就是连不上&#xff0c;然后发现下载vscode的…
阅读更多...
前端CSS基础4（像素，颜色，字体属性大小复合属性）

前端CSS基础4（像素，颜色，字体属性大小复合属性）

前端CSS基础4&#xff08;像素&#xff0c;颜色&#xff0c;字体属性大小复合属性&#xff09; CSS代码编写位置CSS像素CSS颜色CSS常用字体属性和大小字体的复合属性 CSS代码编写位置 在HTML文件的头部使用 <head><style>/* 在这里编写CSS代码 */</style> …
阅读更多...
Meta Llama 3强势来袭：迄今最强开源大模型，性能媲美GPT-4

Meta Llama 3强势来袭：迄今最强开源大模型，性能媲美GPT-4

前言 Meta的最新语言模型Llama 3已经发布&#xff0c;标志着在大型语言模型&#xff08;LLM&#xff09;领域的一次重大突破&#xff0c;其性能在行业内与GPT-4相媲美。此次更新不仅提升了模型的处理能力和精确性&#xff0c;还将开源模型的性能推向了一个新的高度。 Huggingf…
阅读更多...
从0开始学人工智能测试节选：Spark -- 结构化数据领域中测试人员的万金油技术（二）

从0开始学人工智能测试节选：Spark -- 结构化数据领域中测试人员的万金油技术（二）

Dataframe dataframe 是spark中参考pandas设计出的一套高级API&#xff0c;用户可以像操作pandas一样方便的操作结构化数据。毕竟纯的RDD操作是十分原始且麻烦的。而dataframe的出现可以让熟悉pandas的从业人员能用非常少的成本完成分布式的数据分析工作&#xff0c; 毕竟跟数据…
阅读更多...
数仓建模—数仓架构发展史

数仓建模—数仓架构发展史

数仓建模—数仓架构发展史 时代的变迁&#xff0c;生死的轮回&#xff0c;历史长河滔滔&#xff0c;没有什么是永恒的&#xff0c;只有变化才是不变的&#xff0c;技术亦是如此&#xff0c;当你选择互联网的那一刻&#xff0c;你就相当于乘坐了一个滚滚向前的时代列车&#xf…
阅读更多...
电视音频中应用的音频放大器

电视音频中应用的音频放大器

电视机声音的产生原理是将电视信号转化为声音&#xff0c;然后通过扬声器将声音播放出来。当我们打开电视并选择频道时&#xff0c;电视机首先从天线或有线电视信号中获取声音信号。声音信号经过放大器放大之后&#xff0c;就能够通过扬声器发出声音。电视机声音的产生原理和音…
阅读更多...
Ubuntu20.04 ISAAC SIM仿真下载使用流程（4.16笔记补充）

Ubuntu20.04 ISAAC SIM仿真下载使用流程（4.16笔记补充）

机器&#xff1a;华硕天选X2024 显卡&#xff1a;4060Ti ubuntu20.04 安装显卡驱动版本&#xff1a;525.85.05 参考&#xff1a; What Is Isaac Sim? — Omniverse IsaacSim latest documentationIsaac sim Cache 2023.2.3 did not work_isaac cache stopped-CSDN博客 Is…
阅读更多...
2024蓝桥杯每日一题（最短路径）

2024蓝桥杯每日一题（最短路径）

备战2024年蓝桥杯 -- 每日一题 Python大学A组 试题一&#xff1a;奶牛回家 试题二&#xff1a;Dijkstra求最短路 II 试题三&#xff1a;spfa求最短路 试题四&#xff1a;作物杂交 试题一&#xff1a;奶牛回家 【题目描述】 晚餐时间马上就到了&#x…
阅读更多...
【JavaEE多线程】Thread类及其常见方法（上）

【JavaEE多线程】Thread类及其常见方法（上）

系列文章目录 &#x1f308;座右铭&#x1f308;&#xff1a;人的一生这么长、你凭什么用短短的几年去衡量自己的一生&#xff01; &#x1f495;个人主页:清灵白羽 漾情天殇_计算机底层原理,深度解析C,自顶向下看Java-CSDN博客 ❤️相关文章❤️&#xff1a;清灵白羽 漾情天…
阅读更多...
【opencv】dnn示例-segmentation.cpp 通过深度学习模型对图像进行实时语义分割

【opencv】dnn示例-segmentation.cpp 通过深度学习模型对图像进行实时语义分割

模型下载地址&#xff1a; http://dl.caffe.berkeleyvision.org/ 配置文件下载&#xff1a; https://github.com/opencv/opencv_extra/tree/4.x/testdata/dnn 该段代码是一个利用深度学习进行语义分割的OpenCV应用实例。下面将详细解释代码的功能和方法。 引入库 引入了一些必要…
阅读更多...
蓝桥杯2024年第十五届省赛真题-宝石组合

蓝桥杯2024年第十五届省赛真题-宝石组合

思路&#xff1a;参考博客&#xff0c;对Ha,Hb,Hc分别进行质因数分解会发现&#xff0c;S其实就等于Ha&#xff0c;Hb&#xff0c;Hc的最大公约数&#xff0c;不严谨推导过程如下&#xff08;字丑勿喷&#xff09;&#xff1a; 找到此规律后&#xff0c;也不能枚举Ha&#xff…
阅读更多...
Go 单元测试之mock接口测试

Go 单元测试之mock接口测试

文章目录 一、gomock 工具介绍二、安装三、使用3.1 指定三个参数3.2 使用命令为接口生成 mock 实现3.3 使用make 命令封装处理mock 四、接口单元测试步骤三、小黄书Service层单元测试四、flags五、打桩&#xff08;stub&#xff09;参数 六、总结6.1 测试用例定义6.2 设计测试用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023