HTML学习笔记3->基础语法进阶

最新推荐文章于 2022-03-18 17:42:52 发布
最新推荐文章于 2022-03-18 17:42:52 发布
阅读量358 收藏
点赞数
分类专栏： HTML学习笔记 文章标签： HTML 文本格式化 引用 计算机代码 CSS简介
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45379724/article/details/102531819
版权

格式化 引用 计算机代码 注释 css 链接 图像 表格

文本格式化实例

**标签总结

格式化标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用。使用 <del> 代替。
<strike> 不赞成使用。使用 <del> 代替。
<u> 不赞成使用。使用样式（style）代替。
计算机输入标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> 不赞成使用。使用 <pre> 代替。
<plaintext> 不赞成使用。使用 <pre> 代替。
<xmp> 不赞成使用。使用 <pre> 代替。
引用标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。

文本格式化

<html>

<body>

<b>This text is bold</b>

<br />

<strong>This text is strong</strong>

<br />

<big>This text is big</big>

<br />

<em>This text is emphasized</em>

<br />

<i>This text is italic</i>

<br />

<small>This text is small</small>

<br />

This text contains
<sub>subscript</sub>

<br />

This text contains
<sup>superscript</sup>

</body>
</html>

效果
在这里插入图片描述

预格式文本

<html>

<body>

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

<p>pre 标签很适合显示计算机代码：</p>

<pre>
for i = 1 to 10
     print i
next i
</pre>

</body>
</html>

效果

计算机标签

<html>

<body>

<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

</body>
</html>

计算机标签

地址

<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

地址

缩写和首字母缩写

<html>

<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>

缩写

文字方向

<html>

<body>

<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

</body>
</html>

显示效果:
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；

Here is some Hebrew text

块引用

<html>

<body>

这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用：
<q>
这是短的引用。
</q>

<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>

</body>
</html>

块引用

删除字效果和插入字效果

<html>

<body>

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

</body>
</html>

删除字和插入字

引用(Quotation)

**标签总结

标签 描述
<abbr> 定义缩写或首字母缩略语。
<address> 定义文档作者或拥有者的联系信息。
<bdo> 定义文本方向。
<blockquote> 定义从其他来源引用的节。
<dfn> 定义项目或缩略词的定义。
<q> 定义短的行内引用。
<cite> 定义著作的标题。

< q > 短的引用

浏览器通常会在 q 元素周围包围引号。

< blockquote >长的引用

浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

< abbr >缩略词

下面依次是他们的实例

<!DOCTYPE html>
<html>
<body>

<p><abbr title="HyperText Markup Language">HTML</abbr> 是超文本标记语言。</p>

<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>

</body>
</html>

在这里插入图片描述

< dfn >定义项目或缩写的定义

  1. 如果设置了 <dfn> 元素的 title 属性，则定义项目
  2. 如果 <dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目
  3. 否则，<dfn> 文本内容即是项目，并且父元素包含定义
    备注:如果希望简化，使用第一条，或使用 代替。
<!DOCTYPE html>
<html>
<body>

<p>The <dfn title="World Trade Organization">WTO</dfn> was founded in 1995.</p>

<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<p>The
<dfn><abbr title="World Trade Organization">WTO</abbr></dfn>
was founded in 1948.
</p>

<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<p>The
<dfn>WTO</dfn> World Trade Organization was founded in 1995.
</p>

<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>

</body>
</html>

在这里插入图片描述

< address >定义文档或文章的联系信息（作者/拥有者）

此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

<!DOCTYPE html>
<html>
<body>

<p>HTML address 元素定义文档或文章的联系信息（作者/拥有者）。</p>

<address>
Written by Jon Doe.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

&
最低0.47元/天 解锁文章
oasis1500
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5知识点整理
IT小书童
08-26 4487
HTML5的简述: HTML5 是下一代 HTML 标准。 HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 HTML5有哪些改进呢? 新元素，新属性，完全支持 CSS3，Video 和 Audio，2D/3D 制图，
第18章 超文本标记链接语言(HTML)
热门推荐
yjyb的专栏
09-18 1万+
第18章 超文本标记链接语言(HTML) 　　HTML是组织多媒体文档的重要语言，它不仅用来编写Web网页，而且也越来越多地使用HTML来制作光盘上的多媒体节目。HTML可用来编排文档、创建列表、建立链接、插入声音和影视片断。目前市场上已有很多很好的HTML编辑器可以用来编写多媒体文档。虽然编写多媒体文档不一定要直接使用HTML语言，但为了更好地理解和使用HTML编辑器，添加一些你遇到的编辑器
HTML5：Canvas
山水子农
06-11 4683
canvas画图已经在JavaScript中介绍了http://blog.csdn.net/qq_27626333/article/details/51595138。此处再进行补充。1、颜色的指定方法  颜色指定有3种：第一种是以[#RRGGBB]这种与HTML中相同的颜色指定方法指定颜色。第二种方法为在rgb()中指定三个0~255范围的值；第三种方法是除了指定三个0~255范围的数值外，同时指...
HTML初学者入门自学笔记（1）
m0_56214509的博客
08-31 205
1. 其标签由尖括号包围，且成对出现，分为开始标签和结束标签如<b>和</b> HTML文档描述网页包括HTML标签和纯文本 最典型案例： <html>#之间的文本描述网页 <body>#之间的文本是可见的页面内容 <h1>我的第一个标题</h1>#之间的文本被显示为标题 <p>我的第一个段落</p>#之间的文本被显示为段落 </body> </html> 通过<h1&gt
HTML笔记
我的博客
12-23 5367
<!--HTML简介 • HTML 是用来描述网页的一种语言。 • HTML 指的是超文本标记语言: HyperText Markup Language • HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag) • HTML 使用标记标签来描述网页 • HTML 文档包含了HTML 标签及文本内容 • HTML文档也叫做 web 页面HTML 标签 • HT
Linux学习笔记-渗透大神的进阶之路
01-11
Linux个人学习笔记
MySQL学习笔记-基础到进阶
05-28
内容概要：MySQL学习笔记，内容包括SQL基本语法、MySQL基础知识，包括存储引擎、索引、视图、锁、优化、存储结构等MySQL主要的内容。 适用人群：适合自学MySQL的同学使用。 能学到什么：MySQL从基础到进阶的全部内容...
【前端学习】HTML学习笔记-JS进阶
01-08
JS里面的对象 全局对象window 浏览器上是window window 有以下浏览器私有属性常用： alert（弹窗） prompt（用户填写） comfirm（确认） document(文档 DOM) console（开发者） history（浏览器 BOM） ...
动手入门深度学习笔记-CNN模型以及进阶模型
01-20
CNN模型 code实现 ## 二维互相关 import torch import torch.nn as nn def corr2d(X, K): H, W = X.shape h, w = K.shape Y = torch.zeros(H - h + 1, W - w + 1) for i in range(Y.shape[0]): ...
学习笔记HTML-css-JS.zip
03-17
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
前端学习html篇
TomCruisePro的博客
03-18 371
1.块级会以新行出现h1、p、ul、table、div内联函数通常不会以新行出现b、td、img、a、span 2.计算机代码kbd>, samp>, 以及 code> 元素全都支持固定的字母尺寸和间距 code元素不保留多余的空行和折行，为解决该问题，必须借用pre来包围代码 3.var元素中定义数学变量 4.html5语义元素 span和div是非语义元素，from\table\img是语义元素 header元素被用作为介绍性内容的容器，一个文档中可以有多个header元素，可作页眉
计算机一级格式为html,HTML 计算机代码元素
weixin_33678821的博客
06-03 222
计算机代码varperson={firstName:"Bill",lastName:"Gates",age:50,eyeColor:"blue"}HTML 计算机代码格式通常，HTML 使用可变的字母尺寸，以及可变的字母间距。在显示计算机代码示例时，并不需要如此。, , 以及 元素全都支持固定的字母尺寸和间距。HTML 键盘格式HTML 元素定义键盘输入：实例Toopenafile...
html 如何制作图片链接
weixin_52844244的博客
10-12 5354
用<a> </a>标签来实现 1、代码： <a href="链接的地址"> <img src="图片的URL" width="图片的宽度" height="图片的高度" border="边框"> </a> 2、定义<a> 标签定义超链接，用于从一张页面链接到另一张页面。 3、用法：<a> 元素最重要的属性是 href 属性，它指示链接的目标。 ...
网页语言HTML之五：css文件的建设、样式（背景颜色、字体大小等）
我壮着胆子再问一遍冬雪枫花
02-28 1746
HTML学习笔记之五 博主推荐的学习网站，速成见下文。 本节主要内容：HTML中css文件的建设、HTML样式（背景颜色、字体大小等）、 CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的，可以通过style或者引用外部css文件来实现渲染 粒子6：HTML样式 HTML样式：背景颜色、字体大小、字体对齐等。 &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt...
html：图像链接和图像映射
xiazdong
09-23 1万+
图像 分为： (1)位图：      GIF  采用查找表存储颜色，最多存储256种颜色，如果一个图像有大量单调颜色，则只存储一个即可。适用于颜色单调的图片。 JPEG  能够存储无限种颜色，因此适用于颜色很多的图像。  PNG  不是
学写网页 #04# w3school
bangtuo9862的博客
03-26 235
索引： HTML 输入类型 XHTML HTML5 HTML5 样式指南和代码约定 WHO 成立于 1948 年。 对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。 code 元素不保留多余的空格和折行： 如需解决该问题，您必须在 pre 元素中包围代码： var person = { firstName:"Bill", ...
配置SAP GUI FOR HTML（通过WEB方式登录）
weixin_34072159的博客
11-06 432
SAP系统可以通过安装 SAP GUI、SAP GUI FOR JAVA、SAP GUI WEB FOR JAVA、SAP GUI FOR HTML多种方式登录 其中后两种方式都是通过IE浏览器的方式来登录的 今天有空配置了最后一种方式SAP GUI FOR HTML 首先通过 SAP GUI登录SAP系统 执行SMICM来检查ICM Montior是否运行 运...
protobuf-3.15.7-cp38-cp38-macosx_10_9_x86_64.whl
最新发布
06-17
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
基于STM32微控制器的简单超声波液位控制器
06-17
基于STM32微控制器的简单超声波液位控制器
note->title[strcspn(note->title, "\n")] = 0;
06-01
这行代码的作用是将笔记标题（`note->title`）中第一个换行符（`\n`）之前的所有字符截取下来，然后将其赋值给 `note->title`。换句话说，这行代码的作用是去掉笔记标题中的换行符。 具体来说，`strcspn` 函数可以用来查找一个字符串中第一个与指定字符集合中任意一个字符匹配的位置。在这里，我们使用 `"\n"` 作为指定字符集合，表示要查找字符串中第一个换行符的位置。然后将该位置之前的所有字符截取下来，即可得到去掉换行符后的笔记标题。 最后，将截取后的笔记标题赋值给 `note->title`，即可完成去掉换行符的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值