selenium初学者指南_2020年面向初学者的终极HTML指南。

最新推荐文章于 2024-04-25 19:29:18 发布

weixin_26737625

最新推荐文章于 2024-04-25 19:29:18 发布

阅读量279

点赞数

文章标签： python

原文链接：https://levelup.gitconnected.com/the-ultimate-html-guide-for-beginners-in-2020-eff2ab94bf13

版权

selenium初学者指南

If you want to create a visually attractive website, HTML is one of the fundamentals. In this guide, I will teach you HTML.

如果您想创建一个视觉上吸引人的网站，则HTML是基础之一。在本指南中，我将教您HTML。

结构 (The structure)

We see all kinds of documents all day, and those could vary from Newspaper to shop catalogs. A web page, in its essence, is just a web variant of a document, but with web pages, there comes some ‘coding’ structure to build a web page. This is done in HTML (HyperText Markup Language).

我们整天都能看到各种文件，从报纸到商店目录，这些文件可能会有所不同。网页本质上只是文档的网页变体，但是随着网页的发展，提供了一些“编码”结构来构建网页。这是用HTML(超文本标记语言)完成的。

<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Up here, you can see a piece of HTML. The HTML code is inside the angled brackets, so-called HTML elements. Each tag has an opening and a closing tag. A closing tag needs to be done like this.

在这里，您可以看到一段HTML。 HTML代码位于尖括号内，即所谓HTML元素。每个标签都有一个开始和结束标签。结束标记需要像这样完成。

</ TAG >

Tags are like containers. They tell you something about the information between the opening and the closing tag.

标签就像容器。它们告诉您有关开始和结束标记之间的信息。

Attributes

属性

Attributes tell us even more about the information between the tags. For example:

属性告诉我们有关标签之间信息的更多信息。例如：

<p lang="en-us">This is a paragraph in English</p>

The ‘Lang’ is the attribute name, and the ‘en-us’ is the value.

“ Lang”是属性名称，“ en-us”是值。

Body, head and title tag

身体，头部和标题标签

You saw we used the body tag in our first example:

您已经看到我们在第一个示例中使用了body标签：

<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

But what does it do? Everything that’s put in here will be displayed in the browser. But where’s the head for? Well, the head is the element that contains information about your page, for example, the title tag.

但是它是做什么的呢？此处放置的所有内容都将显示在浏览器中。但是去哪里呢？好吧，head是包含有关页面信息的元素，例如title标签。

<title>This will be your title</title>

文本 (Text)

This paragraph will contain everything that has to do with texts. When you’re creating a web page, you probably will be using headings, paragraphs, and links!

本段将包含与文本有关的所有内容。在创建网页时，您可能会使用标题，段落和链接！

Headings

标题

In HTML, there are six headings:

在HTML中，有六个标题：

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Each heading has its own properties like font-size. H1 is mainly used for titles and H2 for subtitles. Any further text below those headings will be from H3 — H6.

每个标题都有其自己的属性，例如font-size。 H1主要用于标题，H2主要用于字幕。这些标题下的任何其他文字将来自H3-H6。

Paragraphs

段落

To create a paragraph, you need to use the (<p>) tag with your content between the tags.

要创建段落，您需要在标签之间使用(<p>)标签。

<p>Paragraph content</p>

The browser will automatically show each paragraph on a new line.

浏览器将自动在新行上显示每个段落。

Breaks

休息时间

If you want to add a line break inside the middle of a paragraph, you need to use the (<br/>) tag.

如果要在段落中间添加换行符，则需要使用(<br/>)标记。

<p> Text content in a paragraph <br/> This will be on line 2 </p>

清单 (Lists)

On a lot of websites, you need to use lists. There are three different kinds of lists: ordered lists, unordered lists, and definition lists.

在许多网站上，您需要使用列表。有三种不同的列表：有序列表，无序列表和定义列表。

Ordered lists

有序列表

The ordered list is created as follows:

创建的有序列表如下：

<ol><li> Item 1 </li>
<li> Item 2 </li></ol>

Each list item will be placed between (<li>) tags. An ordered list will display a numeric list.

每个列表项将放置在(<li>)标记之间。有序列表将显示数字列表。

Unordered lists

无序列表

The unordered list is created as follows:

如下创建无序列表：

<ul><li> Item 1 </li>
<li> Item 2 </li></ul>

Definition lists

定义清单

A definition list is usually created when explaining a word or term. It is created with the (<dl>) tag.

通常在解释单词或术语时会创建一个定义列表。它是使用(<dl>)标签创建的。

<dl>
<dt> Word </dt>
<dd> Explaination </dd>
</dl>

The (<dt>) tag will contain the term, and the (<dd>) tag contains the definition.

(<dt>)标记将包含术语，(<dd>)标记将包含定义。

链接 (Links)

Links are defining for the web since they allow you to go from one page on the web to another one. This is called ‘surfing.’

链接是为Web定义的，因为它们使您可以从Web上的一页转到另一页。这就是所谓的“冲浪”。

How to create a link

如何建立连结

You can create a link using the (<a>) tag.

您可以使用(<a>)标签创建链接。

<a href="https://medium.com">Medium</a>

The “href” attribute contains the web address, and the text between the (<a>) tags will be displayed in this case: “Medium.”

“ href”属性包含网址，在这种情况下，将显示(<a>)标记之间的文本：“中”。

Mailing link

邮寄链接

To create a direct link to an email address, you use the “mailto:” prefix in the (<a>) tag.

要创建指向电子邮件地址的直接链接，请在(<a>)标记中使用“ mailto：”前缀。

<a href="mailto:example@example.com">Mail!</a>

Linking to a part on the page

链接到页面的一部分

To link to a specific part on a page, you need to do two things:

要链接到页面上的特定部分，您需要做两件事：

First, you need to add an id to a tag. For example, we are going to add the id name to this heading.

首先，您需要向标签添加ID。例如，我们将id名称添加到此标题中。

<h1 id="name">Bryan Dijkhuizen</h1>

When we now want to link from the footer of the page to the name, we can create a (<a>) tag like this:

现在，当我们想从页面的页脚链接到名称时，我们可以创建一个(<a>)标签，如下所示：

<a href="#name">Go to name</a>

图片 (Images)

On a good looking web page, images can’t be missing, of course. You might want to add your logo, header image, or a chart. When you want to style an image for size or border, you can use CSS.

当然，在外观漂亮的网页上，图像不能丢失。您可能要添加徽标，标题图像或图表。如果要为图像设置大小或边框样式，可以使用CSS。

An image in HTML is created as follows:

HTML中的图像创建如下：

<img src="image.jpg"/>

That will add the image to your site. You can change the size of the image by adding some attributes (height or width).

这会将图像添加到您的站点。您可以通过添加一些属性(高度或宽度)来更改图像的大小。

<img src="image.jpg" height="500" width="1500"/>

桌子 (Tables)

A table is nothing more than a grid displaying some data. Below you see the basic structure of a table.

表格不过是显示某些数据的网格而已。在下面，您可以看到表格的基本结构。

<table><tr><td>1/9</td>
<td>2/9</td>
<td>3/9</td></tr><tr><td>4/9</td>
<td>5/9</td>
<td>6/9</td></tr><tr><td>7/9</td>
<td>8/9</td>
<td>9/9</td></tr></table>

The (<table>) element creates the table, the (<tr>) starts a row and the (<td>) starts a cell with (</td>) closing it. You can also add headings with (<th>).

(<table>)元素创建表，(<tr>)开始一行，(<td>)开始一个带有(</ td>)关闭它的单元格。您也可以使用(<th>)添加标题。

If you want to learn about styling your HTML page you should check out my CSS guide for beginners.

如果您想了解HTML页面的样式，则应查阅我的CSS入门指南。

翻译自: https://levelup.gitconnected.com/the-ultimate-html-guide-for-beginners-in-2020-eff2ab94bf13

selenium初学者指南

weixin_26737625

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
selenium初学者指南_2020年面向初学者的终极HTML指南。

selenium初学者指南If you want to create a visually attractive website, HTML is one of the fundamentals. In this guide, I will teach you HTML. 如果您想创建一个视觉上吸引人的网站，则HTML是基础之一。在本指南中，我将教您HTML。结构 (The structu...
复制链接

扫一扫