html frame ----- label (on)

Table of contents

Foreword:

Label introduction

1. The basic structure of HTML

4. Text formatting tags

Foreword:

Nowadays, it is difficult for front-end engineers to find a job, and they understand everything, because learning the front-end usually does those page visualizations, and learning the back-end not only needs to understand the front-end related knowledge, but also needs to understand the back-end server and operations. The system is playing smoothly, maybe the front end may be incorporated into a part of the back end in the future. Of course, you can't say that you don't learn the front end at all because you say that the front end has no money. If you can learn it very well, you might be able to find a very good job. Today we will start to learn some basic front-end knowledge together. After you learn it, you can basically make some personal web pages.

Label introduction

I have been on the Internet for so many years. The structure of the webpage is basically a label language. The common ones are html files. If you want to view the code frame of the webpage, you can right-click and check it, and then the displayed page is your webpage. The code skeleton is as shown in the figure:

Learning html is actually learning tags. Tags are a kind of hypertext tag language (html). These texts include .html files, pictures, videos, text, etc. We can use these tag languages to achieve the effect we want to form , to make the visual interface we want.

The composition of the label

Single label: <keyword>

Double tags: <keyword> ... </keyword> (start tag tag body (text) end tag)

Generally speaking, when compiling software, I personally suggest that it is better to use VScode. In fact, you can use a txt file to write the code. After writing, just change the suffix to .html. It depends on personal preference.

1. The basic structure of HTML

(1) HTML tags

Structure: <html> </html>

Description: This is a root tag and the largest web page structure

(2) head tag

Structure: <head> </head>

Description: This is a header tag, which is used to set related information, or import some resources, etc. (invisible part)

(3) body tag

Structure: <body> </body>

Explanation: This is a label of the visible part, in which we can write some codes for visual processing or import file resources, etc.

<!-- 告诉浏览器 按照html5的文档规范去解析  -->
<!DOCTYPE html>
<!-- 所有网页最大的结构 网页中所有的标签存放在html标签中 -->
<html lang="en">
<!-- 头部  不可视部分 存放页面相关的关键配置 或者 引入资源-->
<head>  
	<!-- meta标签：提供有关页面的元信息，用来设置网页的基本信息 -->
    <!-- charset：表示网页编码格式浏览器打开网页的时候会使用charset指定的编码读取整个HTML文档 -->
    <meta charset="UTF-8">
    <!-- 网页的标题信息，它会显示在浏览器标签页的标题栏中。主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。-->
    <title>Document</title>
</head>
    
<!-- 可视部分的标签内容 全部放到body标签内 -->
<body>  
    
</body>
</html>

The above is the basic tag framework of an html web page, which is actually similar to writing an essay, with the beginning, the theme and the end.

2. Title tags

The webpage is divided into 6 title tags here, namely h1~h6

<h1>1级标题（主标题）</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

It is best to have one and only one h1 tag in a web page , and other h tags can appear multiple times as needed. A theme used to represent a piece of content on a page.

The h1 tag can greatly promote the ranking of keywords, but you can’t greedily put many keywords in the h1 tag. This will disperse the weight, not only can’t improve the ranking, but will affect the ranking of the main word.

Example:

<html>
    <head>
        <meta charset="UTF-8">
        <title>myhtml</title>
    </head>
    <body>
        <h1>一级标题   </h1>
        <h2>二级标题   </h2>
        <h3>三级标题   </h3>
        <h4>四级标题   </h4>
        <h5>五级标题   </h5>
        <h6>六级标题   </h6>
    </body>
</html>

Effect:

3. Paragraph tags

Structure:  

Note: A paragraph tag consists of a start tag and an end tag , and the content between the start tag and the end tag will be regarded as a paragraph. There are gaps between paragraphs, and the user experience is better. Paragraph tags will occupy an entire line, and we can use the p tag for a single line of text displayed on a web page.

Example:

<html>
    <head>
        <meta charset="UTF-8">
        <title>myhtml</title>
    </head>
    <body>
        <p>人生得意须尽欢，莫使金樽空对月。</p>
        <p>天生我材必有用，千金散尽还复来。</p>
    </body>
</html>

Effect:

4. Text formatting tags

Through the text tag we can format the text (add style to the text), such as making the text bold, italic, or underlining.

Label	illustrate
`<b>...</b>`and`<strong>...</strong>`	bold
`<u>...</u>`and`<ins>...</ins>`	underline
`<i>...</i>`and`<em>...</em>`	tilt
`<s>...</s>`and`<del>...</del>`	strikethrough

By default, both and tags can make the text in bold to show the text in the tag, but the semantics of the tag is that the content in the tag has high importance , and the semantics of the tag is only to bold the text to attract the user's attention, There is no special meaning.

Of course, these tags can also be nested. For example, if I want a piece of text to be both bold and underlined, I can nest and tags to achieve

Example:

<html>
    <head>
        <meta charset="UTF-8">
        <title>myhtml</title>
    </head>
    <body>
        <p><b>这是加粗标签</b></p>
        <p><u>这是下划线标签</u></p>
        <p><i>这是倾斜标签</i></p>
        <p><del>这是删除线标签</del></p>
        <p><b><u>这是既加粗又有下划线嵌套</u></b></p>
    </body>
</html>

Effect:

Well, the above is the whole content of today, do you think it is a bit interesting?

Share a wallpaper: