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.mzph.cn/web/720.shtml

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

相关文章

浅浅了解一下 LibTorch

浅浅了解一下 LibTorch

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ LibTorch 是 PyTorch 提供的一个二进制发行版&#xff0c;包含了所有必要的头文件、库和 CMake 配置文件&#xff0c;便于开发者依赖 PyTorch 开发应用。用户可以从 PyTorch 官网下载包含最新 LibTorch…
阅读更多...
Vitis HLS 学习笔记--scal 函数-探究

Vitis HLS 学习笔记--scal 函数-探究

目录 1. Vitis HLS重器-Vitis_Libraries 2. 初识scal() 3. 函数具体实现 3.1 变量命名规则 3.2 t_ParEntries解释 3.3 流类型详解 3.4 双重循环 4. 总结 1. Vitis HLS重器-Vitis_Libraries 在深入探索Vitis HLS&#xff08;High-Level Synthesis&#xff09;的旅程中&…
阅读更多...
【Leetcode】代码随想录Day16｜二叉树3.0

【Leetcode】代码随想录Day16｜二叉树3.0

文章目录 104 二叉树的最大深度559 n叉树的最大深度111 二叉树的最小深度222 完全二叉树的节点个数 104 二叉树的最大深度 递归法&#xff1a;无论是哪一种顺序&#xff0c;标记最大深度 class Solution(object):def depthHelper(self, root, depth):if root:depth 1left_de…
阅读更多...
HWOD：合并整型数组

HWOD：合并整型数组

一、知识点 合并整型数组目前有两种方法 合并数组并不一定需要真正的合并 1、下意识的方法 对两个整型数组分别排序&#xff0c;然后合并 2、不排序的方法 遍历两个数组&#xff0c;找出最小值&#xff0c;输出最小值。将两个数组中与最小值相等的位置置为超大值 重复以…
阅读更多...
VBA_MF系列技术资料1-510

VBA_MF系列技术资料1-510

MF系列VBA技术资料1-510 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-0…
阅读更多...
go限流、计数器固定窗口算法/计数器滑动窗口算法

go限流、计数器固定窗口算法/计数器滑动窗口算法

go限流、计数器固定窗口算法/计数器滑动窗口算法 一、问题 问题1&#xff1a;后端接口只能支撑每10秒1w个请求&#xff0c;要怎么来保护它呢&#xff1f; 问题2&#xff1a;发短信的接口&#xff0c;不超过100次/时&#xff0c;1000次/24小时&#xff0c;要怎么实现&#xff…
阅读更多...
豆瓣影评信息爬取 （爬虫）

豆瓣影评信息爬取 （爬虫）

代码块&#xff1a; from lxml import etree import requestsheaders{User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36 Edg/123.0.0.0 }url_list[] for i in range(0,5):i*20urlsf"https:…
阅读更多...
链表带环问题——leetcode环形链表1 2

链表带环问题——leetcode环形链表1 2

证明链表带环 链表的带环问题指的是本该指向NULL的最后一个节点指向了之前的节点&#xff0c;导致链表成环&#xff0c;找不到尾结点的情况&#xff0c;那么我们该如何证明链表带环呢&#xff1f; 我们可以类比物理中的追及问题&#xff0c;让快慢指针同时走&#xff0c;两者相…
阅读更多...
企微知识库是如何搭建的？这篇文章来解答

企微知识库是如何搭建的？这篇文章来解答

知识库在企业中发挥着至关重要的作用&#xff0c;它不仅能够存储和整理重要的工作资料&#xff0c;还能提高员工的工作效率&#xff0c;加强团队之间的协作。对于使用微信企业版&#xff08;企业微信&#xff09;的企业来说&#xff0c;搭建一个专门的知识库是极有必要的。本文…
阅读更多...
ceph osd分组

ceph osd分组

一、前言 使用分组可以更好的管理osd&#xff0c;将不同类型的磁盘&#xff0c;分到不同的组中&#xff0c;例如hhd类型的osd分配到hhd组&#xff0c;ssd类型的osd分配到ssd组&#xff0c;将io要求不高的分配到hhd组做存储&#xff0c;io要求高的分配到ssd组做存储 二、配置 查…
阅读更多...
ubuntu23.10.1 php8.2安装

ubuntu23.10.1 php8.2安装

1、更新镜像源 apt update2、安装php apt install php php-fpm php-mysql其他扩展包&#xff0c;在后面加个-可以查看&#xff0c;选择安装,我这里是php8.2版本 apt-get install php8.2- 2.1php与nginx结合 PHP-FPM的配置文件位于/etc/php/{PHP版本}/fpm/pool.d/www.conf;…
阅读更多...
字体反爬知识积累2

字体反爬知识积累2

一、os模块中函数的应用 如何获取当前文件中所有文件的路径方法 这段代码使用 os.walk()函数来遍历指定目录 imgs 下的所有子目录和文件。具体来说&#xff0c;os.walk()函数返回一个生成器&#xff0c;可以在每次迭代中获取目录树中的一个元组&#xff0c;元组包含当前目录的…
阅读更多...
【Linux C | 多线程编程】线程同步 | 条件变量(万字详解)

【Linux C | 多线程编程】线程同步 | 条件变量(万字详解)

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a;2024-04-15 0…
阅读更多...
电大搜题微信公众号：重庆开放大学学子的学习利器

电大搜题微信公众号：重庆开放大学学子的学习利器

在当今信息化时代&#xff0c;学习已经成为每个人不可或缺的一部分。然而&#xff0c;对于重庆开放大学的学子们来说&#xff0c;由于远程教育的特殊性&#xff0c;他们面临着更大的学习挑战。幸运的是&#xff0c;他们现在可以依靠一款强大的学习利器——电大搜题微信公众号&a…
阅读更多...
单片机基础知识 07

单片机基础知识 07

一. 键盘检测 键盘分为编码键盘和非编码键盘。 编码键盘 &#xff1a;键盘上闭合键的识别由专用的硬件编码器实现&#xff0c;并产生键编码号或者键值&#xff0c;如计算机键盘。 非编码键盘&#xff1a;靠软件编程来识别。 在单片机组成的各种系统中&#xff0c;用的较多的…
阅读更多...
Darknet框架优化介绍

Darknet框架优化介绍

一、DarkNet框架简介 1.DarkNet的简介 Darknet是一个完全使用C语言编写的人工智能框架&#xff0c;可以使用CUDA的开源框架。主要应用于图像识别领域。 它具有可移植性好&#xff0c;安装间接&#xff0c;查看源码方便等优势&#xff0c;提供了OpenCV等附加选项&#xff0c;还…
阅读更多...
（七）Pandas时序数据 学习简要笔记 #Python #CDA学习打卡

（七）Pandas时序数据 学习简要笔记 #Python #CDA学习打卡

一. 时序数据简介 1&#xff09;定义 时间序列&#xff08;time series&#xff09;&#xff0c;就是由时间构成的序列&#xff0c;它指的是在一定时间内按照时间顺序测量的某个变量的取值序列&#xff0c;比如一天内的温度会随时间而发生变化&#xff0c;或者股票的价格会随…
阅读更多...
c语言题目之求最大公约数

c语言题目之求最大公约数

题目内容&#xff1a;求最大公约数 给定两个数&#xff0c;求这两个数的最大公约数 例如&#xff1a; 输入&#xff1a;20 40 输出&#xff1a;20 什么叫最大公约数&#xff1f; 方法分析&#xff1a; 提示&#xff1a;这里我们用辗转相除法&#xff1a; 例如&#xff1a;输…
阅读更多...
腾讯云APP备案指南：一站式完成备案手续，助您顺利上线

腾讯云APP备案指南：一站式完成备案手续，助您顺利上线

工信部最新通知要求所有互联网信息服务提供者完成移动互联网应用程序备案手续。腾讯云为开发者提供了简单易行的备案流程&#xff0c;本文详细解答如何在腾讯云平台完成备案&#xff0c;帮助开发者快速上线自己的APP。从验证备案域名到腾讯云审核&#xff0c;一步步指导您完成备…
阅读更多...
vue 一键更换主题颜色

vue 一键更换主题颜色

这里提供简单的实现步骤&#xff0c;具体看自己怎么加到项目中 我展示的是vue2 vue3同理 在 App.vue 添加 入口处直接修改 #app { // 定义的全局修改颜色变量--themeColor:#008cff; } // 组件某些背景颜色需要跟着一起改变&#xff0c;其他也是同理 /deep/ .ant-btn-primar…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023