html p标签文字加粗_文字HTML标签
html p标签文字加粗
p
标签 (The p
tag)
This tag defines a paragraph of text.
该标签定义了一段文本。
<p>Some text</p>
It’s a block element.
这是一个块元素。
Inside it, we can add any inline element we like, like span
or a
.
在其中,我们可以添加任何喜欢的内联元素,例如span
或a
。
We cannot add block elements.
我们不能添加块元素。
We cannot nest p
elements one into another.
我们不能将p
元素彼此嵌套。
By default browsers style a paragraph with a margin on top and at the bottom. 16px
in Chrome, but the exact value might vary between browsers.
默认情况下,浏览器为段落设置样式,在顶部和底部留有空白。 在Chrome中为16px
,但实际值可能因浏览器而异。
This causes two consecutive paragraphs to be spaced, replicating what we think of a “paragraph” in printed text.
这将导致两个连续的段落被隔开,从而复制了我们在印刷文本中所认为的“段落”。
span
标签 (The span
tag)
This is an inline tag that can be used to create a section in a paragraph that can be targeted using CSS:
这是一个内联标签,可用于在可使用CSS定位的段落中创建一个部分:
<p>A part of the text <span>and here another part</span></p>
br
标签 (The br
tag)
This tag represents a line break. It’s an inline element, and does not need a closing tag.
此标记表示换行符。 这是一个内联元素,不需要结束标记。
We use it to create a new line inside a p
tag, without creating a new paragraph.
我们使用它在p
标记内创建新行,而无需创建新段落。
And compared to creating a new paragraph, it does not add additional spacing.
与创建新段落相比,它不会增加额外的间距。
<p>Some text<br>A new line</p>
标题标签 (The heading tags)
HTML provides us 6 heading tags. From most important to least important, we have h1
, h2
, h3
, h4
, h5
, h6
.
HTML为我们提供了6个标题标签。 从最重要到最不重要,我们有h1
, h2
, h3
, h4
, h5
, h6
。
Typically a page will have one h1
element, which is the page title. Then you might have one or more h2
elements depending on the page content.
通常,页面将具有一个h1
元素,即页面标题。 然后,根据页面内容,您可能会有一个或多个h2
元素。
Headings, especially the heading organization, are also essential for SEO, and search engines use them in various ways.
标题,尤其是标题组织,对于SEO也是必不可少的,搜索引擎以各种方式使用它们。
The browser by default will render the h1
tag bigger, and will make the elements size smaller as the number near h
increases:
默认情况下,浏览器将使h1
标签更大,并且随着h
附近的数字增加,元素的大小将减小:
All headings are block elements. They cannot contain other elements, just text.
所有标题都是块元素。 它们不能包含其他元素,而只能是文本。
strong
标签 (The strong
tag)
This tag is used to mark the text inside it as strong. This is pretty important, it’s not a visual hint, but a semantic hint. Depending on the medium used, its interpretation will vary.
此标记用于将其中的文本标记为强 。 这非常重要,它不是视觉提示,而是语义提示。 根据使用的介质,其解释会有所不同。
Browsers by default make the text in this tag bold.
默认情况下,浏览器使此标记中的文本变为粗体 。
em
标签 (The em
tag)
This tag is used to mark the text inside it as emphasized. Like with strong
, it’s not a visual hint but a semantic hint.
此标记用于将其中的文本标记为强调 。 像strong
一样,它不是视觉提示,而是语义提示。
Browsers by default make the text in this italic.
默认情况下,浏览器使用斜体显示文本。
行情 (Quotes)
The blockquote
HTML tag is useful to insert citations in the text.
blockquote
HTML标记可用于在文本中插入引文。
Browsers by default apply a margin to the blockquote
element. Chrome applies a 40px left and right margin, and a 10px top and bottom margin.
默认情况下,浏览器对blockquote
元素应用边距。 Chrome会应用40px左右边距,以及10px上下边距。
The q
HTML tag is used for inline quotes.
q
HTML标记用于内联引号。
水平线 (Horizontal line)
Not really based on text, but the hr
tag is often used inside a page. It means horizontal rule
, and it adds an horizontal line in the page.
并非完全基于文本,但是hr
标签通常在页面内使用。 它表示horizontal rule
,并在页面中添加一条水平线。
Useful to separate sections in the page.
有助于分隔页面中的各个部分。
代码块 (Code blocks)
The code
tag is especially useful to show code, because browsers give it a monospaced font.
code
标签对于显示代码特别有用,因为浏览器为它提供了等宽字体。
That’s typically the only thing that browsers do. This is the CSS applied by Chrome:
这通常是浏览器唯一要做的。 这是Chrome应用CSS:
code {font-family: monospace;
}
This tag is typically wrapped in a pre
tag, because the code
element ignores whitespace and line breaks. Like the p
tag.
此标记通常包装在pre
标记中,因为code
元素会忽略空格和换行符。 像p
标签一样。
Chrome gives pre
this default styling:
Chrome会pre
此默认样式:
pre {display: block;font-family: monospace;white-space: pre;margin: 1em 0px;
}
which prevents white space collapsing and makes it a block element.
这样可以防止空格崩溃并使其成为块元素。
清单 (Lists)
We have 3 types of lists:
我们有3种类型的列表:
- unordered lists无序列表
- ordered lists有序列表
- definition lists定义清单
Unordered lists are created using the ul
tag. Each item in the list is created with the li
tag:
使用ul
标签创建无序列表。 列表中的每个项目都是使用li
标签创建的:
<ul><li>First</li><li>Second</li>
</ul>
Ordered lists are similar, just made with the ol
tag:
有序列表是相似的,只是用ol
标签制成:
<ol><li>First</li><li>Second</li>
</ol>
The difference between the two is that ordered lists have a number before each item:
两者之间的区别在于,有序列表在每个项目之前都有一个数字:
Definition lists are a bit different. You have a term, and its definition:
定义列表有些不同。 您有一个术语及其定义:
<dl><dt>Flavio</dt><dd>The name</dd><dt>Copes</dt><dd>The surname</dd>
</dl>
This is how browsers typically render them:
这是浏览器通常呈现它们的方式:
I must say you rarely see them in the wild, for sure not much as ul
and ol
, but sometimes they might be useful.
我必须说,您很少在野外看到它们,肯定不会像ul
和ol
那样多,但是有时它们可能有用。
其他文字标签 (Other text tags)
There is a number of tags with presentational purposes:
有许多具有演示目的的标签:
the
mark
tagmark
标签the
ins
tagins
标签the
del
tagdel
标签the
sup
tagsup
标签the
sub
tagsub
标签the
small
tagsmall
标签the
i
tagi
标签the
b
tagb
标签
This is an example of the visual rendering of them which is applied by default by browsers:
这是它们的视觉渲染的示例,默认情况下浏览器会应用它们:
You might wonder, how is b
different than strong
? And how i
is different than em
?
您可能想知道, b
与strong
什么不同? 怎么i
比不同的em
?
The difference lies in the semantic meaning. While b
and i
are a direct hint at the browser to make a piece of text bold or italic, strong
and em
give the text a special meaning, and it’s up to the browser to give the styling. Which happens to be exactly the same as b
and i
, by default. Although you can change that using CSS.
区别在于语义上。 尽管b
和i
是浏览器的直接提示,但要使一段文本变为粗体或斜体,而strong
和em
使该文本具有特殊含义,这取决于浏览器的样式。 默认情况下,它恰好与b
和i
完全相同。 尽管您可以使用CSS进行更改。
There are a number of other, less used tags related to text. I just mentioned the ones that I see used the most.
还有许多其他与文本相关的较少使用的标签。 我刚刚提到了使用最多的那些。
翻译自: https://flaviocopes.com/html-text-tags/
html p标签文字加粗
html p标签文字加粗_文字HTML标签相关推荐
- html 把文字显示控制,控制字体加粗显示的html标签是哪个
控制字体加粗显示的html标签是哪个 发布时间:2021-06-09 09:27:30 来源:亿速云 阅读:88 作者:小新 这篇文章主要介绍了控制字体加粗显示的html标签是哪个,具有一定借鉴价值, ...
- HTML文字加粗、下划线、倾斜、删除线:文本格式化标签
HTML 文本格式化标签 需求:让文字加粗.下划线.倾斜.删除线 等效果 代码: 标签 说明 b 加粗 u 下划线 i 倾斜 s 删除线 标签 说明 strong 加粗 ins 下划线 em 倾斜 d ...
- css div里引用em字体会变斜体_CSS文字加粗斜体[解决代码]
CSS如何给文字加粗,这是小白常见的问题,今天俺跟大家总结分享. 标签解决办法 一般老的浏览器可能会使用类似或来加粗文字用来设置斜体,例如以下代码: 加粗字体 加粗字体 斜体 但是此办法语义化不是很好 ...
- php如何把文字加粗,HTML中如何将字体加粗
在HTML中要将字体加粗我们有两种方法,一种是利用b标签:另一种是利用strong标签,本篇文章我们就来介绍一下HTML中b标签和strong标签的用法. b标签和strong标签虽然都是可以让字体加 ...
- TextView部分文字加粗
开发中经常遇到TextView中部分文字加粗或者颜色不同的场景 一般使用SpannableString就能解决.例如: private void testText1(String posName) { ...
- android 部分文字加粗,2013.04.08——— android 关于部分文字加粗的有关问题
2013.04.08--- android 关于部分文字加粗的问题 2013.04.08--- android 关于部分文字加粗的问题 参考:http://blog.csdn.net/garretl ...
- speedoffice(word)如何给文字加粗
首先,选中需要加粗的文字,如图: 然后,在"主页"菜单栏里面找到"加粗"工具,如图 最后,点击加粗,我们就可以看到被选中的文字字体已经加粗了
- 在php中如何打印粗体字,ps文字加粗在哪里
ps文字加粗的方法:1.可以选择浑厚和平滑加粗:2.仿粗体,点击"切换字符和段落面板",并点击第一个T:3.使用[图层样式-描边]来完成效果:4.使用滤镜来调整:5.使用编辑描边的 ...
- speedoffice(PPT)怎么给文字加粗
我们在制作PPT时,一些文字尤其是标题通常需要加粗,那么怎么给文字加粗呢?看看小编怎么操作的吧. 首先选择需要加粗的文字,如图: 然后选择"主页"里面的"加粗" ...
最新文章
- 评估报告有效期过期了怎么办_T4学生签证过期了,怎么申请Vignette Transfer?
- swift_033(Swift 必备和常用第三方库以及pod使用)
- SQL Server中count(*), count(col), count(1)的对比
- 鸿蒙系统手机用户体验,鸿蒙系统真的来了!用户体验流畅度远超安卓,任正非扳回一城!...
- zemax操作数_ZEMAX与像差理论:二级光谱的ZEMAX描述与详解
- redis服务的部署
- linux驱动模块命令大全insmod/rmmod/modprobe/depmod/lsmod
- 【php】 自带的过滤机制
- idea设置关键字颜色_IDEA字体颜色快速导入辅助工具设置
- AMD将于年内推出高端Polaris图形处理器
- encodeURIcomponent编码和ASP.NET之间编码转换
- H5学习从0到1-H5的新特性(1)
- Swift - 炫酷放射弹出按钮菜单(改造自AwesomeMenu)
- Qt学习之路之解决unable to find a qt build,to solve this problem specify a qt build
- ami编码设计流程图_AMI码型变换
- [转载]JFC vs. AFC
- 【自然语言处理】韩语基础与入门(语法篇)
- 一键生成数据库表结构文档认准:screw工具(超级好用^_^)
- 零基础最详细html和css
- 明日之后各个服务器的信息,明日之后三个字的和四个字的区什么不同 服务器区别详解...
热门文章
- 手写区块链java代码
- HAST多源融合精准定位,究竟有何神奇之处?
- 【Leetcode 剑指offer刷题】回溯算法-排列组合77216
- 需要用到焊接技术的行业有哪些
- 云和恩墨大讲堂·武汉站成功举办,嘉宾共论数据库国产化替代升级与企业数字化转型...
- Adobe Premiere Pro找不到任何具有视频播放功能的模块。请更新视频显示驱动程序并再次启动 这个问题 的最简单的解决方案
- 在微信公众平台上创建模版并获取模版 ID。 调用模版消息接口,发送模版消息。 代码如下:...
- 猪八戒才是运维界高手,你还不知道吧?
- 视频直播app源码,底部动画导航栏
- 仿华为手机管家“一键优化”Loading加载框