【HTML教程】跟着菜鸟学语言—HTML5个人笔记经验(二)

HTML学习第二天!

HTML基础

HTML 标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。

实例一👍

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

思考❓

那么我们怎么验证它只有<h1> - <h6>六个六级标题呢?如果继续往下写那标题还是标题吗?

实例二

<h1>这是标题一</h1>
<h2>这是标题二</h2>
<h3>这是标题三</h3>
<h4>这是标题四</h4>
<h5>这是标题五</h5>
<h6>这是标题六</h6>
<h7>这是标题七</h7>
<h8>这是标题八</h8>

通过这段代码,我们可以发现从标题七开始与标题八合并为一行,显示为文本。

HTML 段落

HTML 段落是通过标签 <p> 来定义的。

实例一👍

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

思考❓

如果我们<p> </p>中间不输入内容呢?他会显示什么?如果我们在其中加入换行呢?显示页面是否也会空出一个段落来呢?

实例二

<p>这是一个段落。</p>
<p>这是另外一个段落。</p><p>        </p>
<p>段落3</p>
<p>段落4</p>

HTML 链接

HTML 链接是通过标签<a>来定义的。

实例一👍

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

<a href="https://blog.csdn.net/qq_47493625?type=blog">这是一个链接</a>

思考❓

当我们换行再敲一遍这串代码的时候,他们会怎么显示?是换行还是显示在同一行?我们能不能根据上面学的两个标题段落来对它进行区分

实列二

<a href="https://blog.csdn.net/qq_47493625?type=blog">这是一个链接</a>
<a href="https://blog.csdn.net/qq_47493625?type=blog">这是一个链接</a>
<p>
<a href="https://blog.csdn.net/qq_47493625?type=blog">这是一个链接</a>
</p>
<h1><a href="https://blog.csdn.net/qq_47493625?type=blog">这是一个链接</a>
</h1>

HTML 图像

HTML 图像是通过标签<img>来定义的.

实例一👍

注意: 图像的名称和尺寸是以属性的形式提供的。如果需要,我们可以修改widthheight两个属性来修改图片的宽和高。

路径可以修改成自己本地图片路径。

<img src="D:\learning info\Language learning\HTML5\tuxiang\ABC.jpeg" width="500" height="600" />

思考❓

如果将我们上面学的三个属性给到图片的话,那这个图片又会以什么样子的形式显示?

<img src="D:\learning info\Language learning\HTML5\tuxiang\ABC.jpeg" width="500" height="600" />
<p><img src="D:\learning info\Language learning\HTML5\tuxiang\ABC.jpeg" width="500" height="600" />
</p>
<a><img src="D:\learning info\Language learning\HTML5\tuxiang\ABC.jpeg" width="500" height="600" />
</a>

HTML 元素

HTML 文档由 HTML 元素定义。


HTML 元素

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

开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)*。

HTML 元素语法

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

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。

HTML 文档由相互嵌套的 HTML 元素构成。

HTML 文档实例

<!DOCTYPE html>
<html><body>
<p>这是第一个段落。</p>
</body></html>

以上实例包含了三个 HTML 元素。

HTML 实例解析

<p>元素

<p>这是第一个段落。</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签<p>以及一个结束标签 </p>.
元素内容是: 这是第一个段落。

<body> 元素:

<body>
<p>这是第一个段落。</p>
</body>

<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是 另一个 HTML 元素(p 元素)。

<html> 元素:

<html><body>
<p>这是第一个段落。</p>
</body></html>

<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>.
元素内容是 另一个 HTML 元素(body 元素)。

不要忘记结束标签

即使忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

<p>这是一个段落
<p>这是一个段落

以上实例在浏览器中也能正常显示,因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

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

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

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

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

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


.md文档中,会自动识别并使用<br>换行,这就是我不得不将他加上代码块的原因(标红的部分)

HTML 提示:使用小写标签

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

教程使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

HTML 属性

属性是 HTML 元素提供的附加信息。


HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name=“value”

属性实例

HTML 链接由<a>标签定义。链接的地址在 href 属性中指定:

实例一👍

<a href="https://blog.csdn.net/qq_47493625/article/details/135818729">许牛牛的笔记</a>

HTML 属性常用引用属性值

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

双引号是最常用的,不过使用单引号也没有问题。

**💡提示:**在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

name='John "ShotGun" Nelson'

HTML 提示:使用小写属性

属性和属性值对大小写不敏感。

不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

HTML 属性参考手册

查看完整的HTML属性列表: HTML 标签参考手册。

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

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

HTML 标题

在 HTML 文档中,标题很重要。


HTML 标题

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

<h1> 定义最大的标题。 <h6> 定义最小的标题。

实例一👍

<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

注: 浏览器会自动地在标题的前后添加空行。

标题很重要

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

实例一👍

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

HTML 注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。(我们在vscode中运行这串代码是看不见的)

注释写法如下:

<!-- 这是一个注释 -->

注释: 开始括号之后(左边的括号)需要紧跟一个叹号 ! (英文标点符号),结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。

HTML 提示 - 如何查看源代码

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

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

HTML 标签参考手册

标签描述
<html>定义 HTML 文档
<body>定义文档的主体
<h1> - <h6>定义 HTML 标题
<hr>定义水平线
<!--...-->定义注释

HTML 段落

HTML 可以将文档分割为若干段落。

HTML 段落

段落是通过<p>标签定义的。

实例一👍

<p>这是一个段落 </p>
<p>这是另一个段落</p>

**注意:**浏览器会自动地在段落的前后添加空行。(</p> 是块级元素)

不要忘记结束标签

即使忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来:

实例二👍

<p>这是一个段落
<p>这是另一个段落

上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注释: 在未来的 HTML 版本中,不允许省略结束标签。

HTML 折行

如果希望在不产生一个新段落的情况下进行换行(新行),使用 <br> 标签:

<p>这个<br>段落<br>演示了分行的效果</p>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

HTML 输出- 使用提醒

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

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

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

实例三👍

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跟着菜鸟学语言</title>
</head><body><h1>春晓</h1><p>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。
</p><p>注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。</p></body></html>

(这个例子演示了一些 HTML 格式化方面的问题)

HTML 文本格式化

实例一👍

尝试一下

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一定要自己手敲哦</title> 
</head> 
<body><b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub><sup> 上标</sup></body>
</html>

HTML 格式化标签

HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如:粗体 or 斜体

这些HTML标签被称为格式化标签(请查看下面完整标签参考手册)。

💡

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而,这些标签的含义是不同的:<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。

实例集🎁(有条件一定要自己实验一下!!!)

文本格式化

此例演示如何在一个 HTML 文件中对文本进行格式化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>稍微偷下懒复制进去看看</title>
</head><body><b>这个文本是加粗的</b><br /><strong>这个文本是加粗的</strong><br /><big>这个文本字体放大</big><br /><em>这个文本是斜体的</em><br /><i>这个文本是斜体的</i><br /><small>这个文本是缩小的</small><br />这个文本包含
<sub>下标</sub><br />这个文本包含
<sup>上标</sup></body>
</html>

预格式化文本

此例演示如何使用 pre 标签对空行和空格进行控制。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>不许偷懒一定要自己敲</title> 
</head>
<body><pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre></body>
</html>

"计算机输出"标签

此例演示不同的"计算机输出"标签的显示效果。

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"> 
<title>不许偷懒!一定要自己敲</title> 
</head>
<body><code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br /><p>
<b>注释:</b>这些标签常用于显示计算机/编程代码。
</p></body>
</html>

地址

此例演示如何在 HTML 文件中写地址。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>不许偷懒!一定要自己敲</title> 
</head>
<body><address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address></body>
</html>

缩写和首字母缩写

此例演示如何实现缩写或首字母缩写。

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"> 
<title>不许偷懒!一定要自己敲</title> 
</head>
<body><abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym><p>在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。</p><p>仅对于 IE 5 中的 acronym 元素有效。</p><p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p></body>
</html>

文字方向

此例演示如何改变文字的方向。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>不许偷懒!一定要自己敲</title> 
</head> 
<body><p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  </body>
</html>

块引用

此例演示如何实现长短不一的引用语。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>悄咪咪复制一下应该没人知道吧</title> 
</head>
<body><p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p></body>
</html>

删除字效果和插入字效果

此例演示如何标记删除文本和插入文本。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>悄咪咪复制一下吧</title> 
</head>
<body><p>My favorite color is <del>blue</del> <ins>red</ins>!</p></body>
</html>

HTML 文本格式化标签

标签描述
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<suq>定义上标字
<ins>定义插入字
<del>定义删除字

HTML “计算机输出” 标签

标签描述
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本

HTML 引文, 引用, 及标签定义

标签描述
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。

PS:牛牛学习的语言没几个,语言领悟能力也不算强,所以大部分都是借鉴别人的。但是只要学过来的就是自己的。所以还请各位看官手下留情,多多包涵。牛牛也欢迎给位看官指正、讨论交流!

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

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

相关文章

蓝桥杯---立方变自身

观察下面的现象,某个数字的立方,按位累加仍然等于自身. 1^31 8^3 512 17^3 4913 5128 491317 请你计算包括1,8,17在内,符合这个性质的正整数一共有多少个? 请填写该数字,不要填写任何多余的内容或说明性的文字. 代码 public class _02立方变自身 {private static int ans…

[极客大挑战 2019]LoveSQL1

万能密码测试&#xff0c;发现注入点 注意这里#要使用url编码才能正常注入 测试列数&#xff0c;得三列 查看table&#xff0c;一个是geekuser另一个是l0ve1ysq1 查看column&#xff0c;有id&#xff0c;username&#xff0c;password&#xff0c;全部打印出来&#xff0c;…

Golang内置类型和函数及接口、Init函数和main函数

1. 内置类型 1.1. 值类型&#xff1a; boolint(32 or 64), int8, int16, int32, int64uint(32 or 64), uint8(byte), uint16, uint32, uint64float32, float64stringcomplex64, complex128array -- 固定长度的数组1.2. 引用类型&#xff1a;(指针类型) slice -- 序列数组…

微信小程序呼叫设备

一、业务说明 微信最近推出了手机微信呼叫设备的VOIP插件 和 Linux SDK内部体验版本&#xff0c;之前公司小程序开发过设备呼叫微信的功能&#xff0c;设备如何呼叫微信可以看之前的博客&#xff1a;微信小程序音视频通话&#xff08;for硬件&#xff09;组件的使用-CSDN博客。…

【医学图像数据增强】切割-拼接(CS-DA)

切割-拼接CS-DA CS-DA 核心思想自然图像和医学图像之间的关键差异CS-DA 步骤确定增强后的数据数量 代码复现 CS-DA 核心思想 论文链接&#xff1a;https://arxiv.org/ftp/arxiv/papers/2210/2210.09099.pdf 大多数用于医学分割的数据增强技术最初是在自然图像上开发的&#x…

flink中的重启策略

背景 在flink宣布作业失败的时候往往会进行重试&#xff0c;本文就来记录下flink中的几种重启策略 flink失败重启策略 1.固定延时重启 这种重启策略会重启固定的次数&#xff0c;每两次重启之间会间隔固定的时间间隔&#xff0c;如果失败次数达到了配置的次数限制&#xff0…

如何实现动态代理(俩种方式)

文章目录 基于接口的动态代理&#xff1a;基于类的动态代理&#xff1a; 基于接口的动态代理&#xff1a; 通过Java的反射机制来动态创建代理对象&#xff0c;代理对象实现了一个或多个接口。 Java提供了java.lang.reflect包中的Proxy类和InvocationHandler接口来实现基于接口…

数据类型(中)

数据类型&#xff08;中&#xff09; 1.列表&#xff08;list&#xff09;1.1 定义1.2 独有功能1.3 公共功能1.4 转换1.5. 其他1.5.1 嵌套 1.6 列表阶段作业 2.元组2.1 定义2.2 独有功能2.3 公共功能2.4 转换2.5 其他2.5.1 嵌套 总结作业 各位小伙伴想要博客相关资料的话关注公…

常见算法思想:回溯法

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 学习必须往深处挖&…

E - Rainbow Strings

如果字符串中的每个字母都不同&#xff0c;则将字符串定义为彩虹字符串。空字符串也被认为是彩虹字符串。 给定一个小写字母字符串&#xff0c;计算彩虹字符串的不同子序列的数量。如果一个子序列中包含索引&#xff0c;但另一个子序列不包含索引&#xff0c;则即使生成的字符串…

ORM-06-jooq 入门介绍

拓展阅读 The jdbc pool for java.(java 手写 jdbc 数据库连接池实现) The simple mybatis.&#xff08;手写简易版 mybatis&#xff09; JOOQ JOOQ 可以通过数据库直接生成 java 代码&#xff0c;通过 flent-api 进行数据库操作。 SQL builder JOOQ 非常的灵活和强大。你可…

【XR806开发板试用】编译中的几个问题以及hello跑起来

首先我们先看https://xr806.docs.aw-ol.com/ 该文档部分不适应 当前最新gitee 如果没有repo工具&#xff0c;可通过下面的git命令获取repo。 git clone https://gerrit-googlesource.lug.ustc.edu.cn/git-repo下载代码 没有使用ssh://方式 过于麻烦 mkdir xr806_openharmony…

加载服务端发送的模型文件_unity开发进阶

加载服务端发送的模型文件 前言一、服务端搭建二、unity请求文件三、加载模型结语 前言 之前我们学习制作的都是离线状态下的东西&#xff0c;今天我们学习制作一个小demo。 内容就是我们用unity请求后台&#xff0c;接受后台发送过来的模型&#xff0c;然后将模型加载到场景中…

0125-2-Vue深入学习1—mustache模板引擎原理

[mustache] 是 “胡子”的意思&#xff0c;因为它的嵌入标记 {{ }} 旋转过来很像[胡子]&#xff0c;Vue中的 {{ }} 语法也引用了mustache&#xff0c;这也是我深入学习的目的。 1、原始js方式使 数据 变为视图 <ul id"list"></ul><script>var arr …

k8s---安全机制

k8s的安全机制&#xff0c;分布式集群管理工具&#xff0c;就是容器编排。安全机制的核心&#xff1a;APIserver。为整个集群内部通信的中介&#xff0c;也是外控控制的入口。所有的机制都是围绕apiserver来进行设计&#xff1a; 请求api资源&#xff1a; 1、认证 2、鉴权 …

快速上手的AI工具-文心一言绘本创作

前言 大家好晚上好&#xff0c;现在AI技术的发展&#xff0c;它已经渗透到我们生活的各个层面。对于普通人来说&#xff0c;理解并有效利用AI技术不仅能增强个人竞争力&#xff0c;还能在日常生活中带来便利。无论是提高工作效率&#xff0c;还是优化日常任务&#xff0c;AI工具…

js计算皮尔逊相关系数

代码如下; let XGX {correlationCoefficient(pA, pB) {let covXY -pA * pBlet varX pA * (1-pA) let varY (1-pB)* pBlet res covXY / (Math.sqrt(varX*varY, 2))return res},correlation(x,y){x[0.3,50.2,99.5,199.3,299,398];y[0.1,50,99.9,200,300,400];// 计算均值con…

Linux操作系统概念

绪论​&#xff1a; “心灵纯洁的人&#xff0c;生活充满甜蜜和喜悦。——列夫托尔斯泰”&#xff0c;本章的主要内容是介绍了硬件的组成结构冯诺依曼体系结构以及操作系统的概念和操作系统的作用&#xff0c;本章的内容主要是理论他起到承上启下的作用只有理解了操作系统的运行…

rs3568芯片,hdmi输出 无声音

rs3568芯片&#xff0c;hdmi in输入 hdmi输出 无声音&#xff0c;如果高手请联系。谢谢&#xff01;

【硅谷甄选】stylelint

配置 stylelint stylelint 为 css 的 lint 工具。可格式化 css 代码&#xff0c;检查 css 语法错误与不合理的写法&#xff0c;指定 css 书写顺序等。 以下使用 scss 作为预处理器为例&#xff0c;安装以下依赖&#xff1a; pnpm add sass sass-loader stylelint postcss po…