html p标签文字加粗_文字HTML标签-CSDN博客

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 tag
mark标签
the ins tag
ins标签
the del tag
del标签
the sup tag
sup标签
the sub tag
sub标签
the small tag
small标签
the i tag
i标签
the b tag
b标签

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.

还有许多其他与文本相关的较少使用的标签。我刚刚提到了使用最多的那些。