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

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.mfbz.cn/a/553711.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

QtQuick 学习笔记（二）按钮组件

QtQuick 学习笔记（二）按钮组件

1. QPushButton 功能 按压按钮&#xff0c;用于接受用户点击事件&#xff0c;可显示设定的字符串提示信息&#xff0c;但需要父组件作为容器&#xff0c;多用以执行命令或触发事件 常用函数 QPushButton&#xff1a;&#xff1a;QPushButton&#xff08;const QString &…
阅读更多...
RHCE1

RHCE1

unit1.定时任务和延迟任务项目 1.在系统中设定延迟任务要求如下: 在系统中建立easylee用户&#xff0c;设定其密码为easylee 延迟任务由root用户建立 要求在5小时后备份系统中的用户信息文件到/backup中确保延迟任务是使用非交互模式建立 再使用chmod修改权限&#xff1a; 确保…
阅读更多...
HarmonyOS真机调试页面运行卡顿/黑屏解决方法，亲测有效

HarmonyOS真机调试页面运行卡顿/黑屏解决方法，亲测有效

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 用mate40等发行时间相对较早但系统是HarmonyOS4.0的真机调试 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 程序点击容易卡顿或黑屏 原因分析&#xff1a; CPU兼容问题导致屏幕…
阅读更多...
Text2sql的一些技巧

Text2sql的一些技巧

最近看到了一篇关于text2sql的文章&#xff0c;以及一些论文。对使用模型做text2sql给了一些不错的建议。 参考文章&#xff1a;24年大模型潜力方向&#xff1a;大浪淘沙后的Text-to-SQL和Agent - 知乎 论文&#xff1a;https://arxiv.org/pdf/2403.09732.pdf 关于模型的建议 …
阅读更多...
STM32H7定时器TIM1-TIM17中断、PWM实现

STM32H7定时器TIM1-TIM17中断、PWM实现

STM32H7定时器TIM1-TIM17中断、PWM实现 高级定时器硬件框图定时器模式时基输出PWM定时器输入捕获 TIM1-TIM17的中断配置TIM1-TIM17的PWM输出 STM32H7 支持的定时器有点多&#xff0c;要简单的区分下。STM32H7 支持 TIM1-TIM8&#xff0c;TIM12-TIM17 共14 个定时器&#xff0c;…
阅读更多...
使用API有效率地管理Dynadot域名，锁定账户中的域名

使用API有效率地管理Dynadot域名，锁定账户中的域名

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…
阅读更多...
Zynq7000系列中的时钟管理

Zynq7000系列中的时钟管理

PS&#xff08;处理系统&#xff09;时钟子系统生成的所有时钟都源自三个可编程PLL&#xff08;锁相环&#xff09;中的一个&#xff1a;CPU、DDR和I/O。时钟子系统的主要组件如图25-1所示。 在正常工作期间&#xff0c;PLL被启用&#xff0c;并由PS_CLK时钟引脚驱动。在启用P…
阅读更多...
6.6Python之集合的基本语法和特性

6.6Python之集合的基本语法和特性

集合&#xff08;Set&#xff09;是Python中的一种无序、不重复的数据结构。集合是由一组元素组成的&#xff0c;这些元素必须是不可变数据类型&#xff0c;但在集合中每个元素都是唯一的&#xff0c;即集合中不存在重复的元素。 集合的基本语法&#xff1a; 1、元素值必须是…
阅读更多...
24卫生高级职称报名时间汇总⏰报名全流程

24卫生高级职称报名时间汇总⏰报名全流程

⏰卫生高级职称&#xff08;网上报名&#xff09;时间汇总 ✔️陕西&#xff1a;4月23日-5月24日 ✔️上海&#xff1a;4月23日-5月24日 ✔️重庆&#xff1a;4月23日—5月24日 ✔️黑龙江&#xff1a;4月23日-5月24日 ✔️浙江&#xff1a;4月23日-5月24日 ✔️云南&#xff1…
阅读更多...
面试自救指南：女生如何巧答私密问题

面试自救指南：女生如何巧答私密问题

在面试过程中&#xff0c;女性应聘者可能会遇到一些私人问题&#xff0c;这些问题可能涉及婚姻、家庭、生育等方面。面对这些问题&#xff0c;如何回答才能既保持真实又不失礼节呢&#xff1f; 当遇到关于婚姻状况的问题时&#xff0c;您可以选择回答&#xff1a;“我目前的婚姻…
阅读更多...
【Python深度学习系列】网格搜索神经网络超参数：权重初始化方法（案例+源码）

【Python深度学习系列】网格搜索神经网络超参数：权重初始化方法（案例+源码）

这是我的第262篇原创文章。 一、引言 在深度学习中&#xff0c;超参数是指在训练模型时需要手动设置的参数&#xff0c;它们通常不能通过训练数据自动学习得到。超参数的选择对于模型的性能至关重要&#xff0c;因此在进行深度学习实验时&#xff0c;超参数调优通常是一个重要的…
阅读更多...
2024全新快递平台系统独立版小程序源码|带cps推广营销流量主+前端

2024全新快递平台系统独立版小程序源码|带cps推广营销流量主+前端

本文来自&#xff1a;2024全新快递平台系统独立版小程序源码|带cps推广营销流量主前端 - 源码1688​​​​​ 应用介绍 快递代发快递代寄寄件小程序可以对接易达云洋一级总代快递小程序&#xff0c;接入云洋/易达物流接口&#xff0c;支持选择快递公司&#xff0c;三通一达&am…
阅读更多...
【leetcode面试经典150题】57. 环形链表（C++）

【leetcode面试经典150题】57. 环形链表（C++）

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…
阅读更多...
电动车违停智能监测摄像机

电动车违停智能监测摄像机

电动车的普及带来了便利&#xff0c;但也衍生了一些问题&#xff0c;其中最常见的之一就是电动车的违停。电动车的违停不仅会影响交通秩序&#xff0c;还可能对周围环境和行人安全造成影响。为了监测和管理电动车的违停情况&#xff0c;可以使用电动车违停智能监测摄像机。这种…
阅读更多...
退市危机袭来，环保行业能否逆境崛起？|中联环保圈

退市危机袭来，环保行业能否逆境崛起？|中联环保圈

近年来&#xff0c;环保行业风波持续不断&#xff0c;众多环保大公司风险频出。博天环境的退市危机令人感慨&#xff0c;深圳星源因涉嫌信息披露违法违规而被警告退市&#xff0c;更是引发业界震动。 最近三年&#xff0c;证监会办理的上市公司信息披露违法案件多达 397 件&…
阅读更多...
Linux内核之virt_to_page实现与用法实例(五十)

Linux内核之virt_to_page实现与用法实例(五十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
Python 使用 pip 安装 matplotlib 模块（精华版）

Python 使用 pip 安装 matplotlib 模块（精华版）

pip 安装 matplotlib 模块 1.使用pip安装matplotlib(五步实现):2.使用下载的matplotlib画图: 1.使用pip安装matplotlib(五步实现): 长话短说&#xff1a;本人下载 matplotlib 花了大概三个半小时屡屡碰壁&#xff0c;险些暴走。为了不让新来的小伙伴走我的弯路&#xff0c;特意…
阅读更多...
IPAguard--iOS代码混淆工具(免费)

IPAguard--iOS代码混淆工具(免费)

IPAguard是一款为iOS开发者设计的代码混淆工具&#xff0c;旨在为开发者提供方便制作和分析马甲包的解决方案。通过高效的匹配算法&#xff0c;IPAguard可以在保证代码混淆的同时&#xff0c;保证编译后的代码质量&#xff0c;减少了因混淆引起的bug&#xff0c;使得开发者能够…
阅读更多...
写后端项目的分页查询时，解决分页不更新

写后端项目的分页查询时，解决分页不更新

写基于VueSpringBoot项目&#xff0c;实现分页查询功能时&#xff0c;改完代码后&#xff0c;发现页数不更新&#xff1a; 更改处如下&#xff1a; 显示如图&#xff1a; 发现页数没有变化&#xff0c;两条数据还是显示在同一页&#xff0c;而且每页都10条。且重启项目也没有更…
阅读更多...
代码随想录算法训练营第一天 | 704. 二分查找 | 27. 移除元素

代码随想录算法训练营第一天 | 704. 二分查找 | 27. 移除元素

704. 二分查找 int search(int* nums, int numsSize, int target) {int left 0, right numsSize, mid;while (left < right) {mid left (right -left) / 2;if (nums[mid] < target) {left mid 1;} else if (nums[mid] > target) {right mid;} else {return mid…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站