Simply learn what HTML

Simply re-set about HTML.

1、HTML

What is HTML? HTML is short for Hyper Text Markup Language, translated into Chinese is " HTML ."

As the name suggests, hypertext, is more than just text, video, audio, pictures, etc. can be, in the final analysis is a kind of special documents. Construction of the basic skeleton of a HTML page, TA is a language used to describe the page.

2, HTML how simple?

HTML simple to just be able to write a notepad. Msunh.txt create a new document, type "I am Jiu qi" After the save, the extension to .html, open the browser will be able to directly see the left side of the content, F12 to enter the Elements seen as the right of content:

file

Red box of html, head, body tags are automatically added browser, right view the source code or editing msunh.html document, you will find that in addition to "I am the Jiu Qi" and no other than these five words content.

Of course, this is not recommended for development use Notepad, which is to consider the safety of your life (life is short). We recommend using Visual Studio Code, comfortable number.

3, the basic components of HTML

A simple web is composed as follows:

<!Doctype html>
<html>
  <head>
      <title>我是玖柒后</title>
  </head>
  <body>
    「我是玖柒后」
  </body>
</html>

4, a variety of parts

The above said html, head, title, body called HTML elements , that is, a variety of parts, organs.

In addition <br/> 、<hr/>、<img/>、<input/>, and a small self-closing tag portion, the start and end tags must be paired elements, for example: <html></html>.

These elements can be nested within each other, this "man" all parts are nested together, in order to look good, first setting up the shelves.

More about HTML presentation, you can take a look online documentation. Here to introduce a website: MDN. Does not blow beat, I looked you know.

MDN Portal:

HTML (HTML)

5, head tag

Label was seen as the head of the page.

TA which usually have title, meta, style, link, script these types of tags, title is relatively simple, is the name of the page is displayed at the window.

file

meta is more important to a secondary label, somewhat similar profile, we will not see normal browsing the web page, look at meta tags common forms together:

// 定义页面的编码方式，国内通常都是用 UTF-8
<meta charset="UTF-8">
// 向搜索引擎说明网页的关键词
<meta name="keywords" content="我是玖柒后">
// 向搜索引擎说明站点的主要内容
<meta name="description" content="我是玖柒后">
// 表示页面的可见区域
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
// 说明主页制作所使用的文字以及语言
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
还有一些其他的属性，这里就不一一赘述了。

style and link, are the introduction of CSS styles on the page, the detailed follow-up will write CSS, here simply in passing.

// 引入外部的 css 文件
<link href="style.css">
// 直接在网页中定义
<style>
    body {
        color: red;
    }
</style>

script is a way to introduce JavaScript, and CSS, as can be introduced, can also be defined directly in a Web page, then the introduction of the suffix .js, but whether or directly definitions are used to introduce <script>the label.

// 引入外部 js 文件
<script src="index.js"></script>
// 直接定义
<script>
  console.log("我是玖柒后");
</script>

6, other labels

In addition to these tags in the head, HTML, there are many other tags, such as div, span, img, table, a, p and the like.

These tags can be used to display text, images, tables, etc., between TA can also be nested within each other, for example:

<a class="title"><img src="photo.jpg" /></a>

Wherein a pair of the tag is present, it is While the img tag is autistic and, at the end spend / can not write no more than shattering, just more standardized point. class is a CSS selector, the back say, src represents the image path referenced.

Some labels are self-style, on top of those tags may not tell to h1 ~ h6 example. (Indicate title)

file

You will find TA's size is different, this can be seen as "natural", like to use the same effort than spanking and her face, feel the pain is not the same (it seems a bit far-fetched so described), anyway many say the label is a "semantic" of.

7, H5 semantic tags

In HTML5 which added a lot of semantic tags, such as: header, footer, nav, article, address, etc., it is not probably know at a glance what is used to describe the part?

HTMl semantic tags, simply, is to make labels have meaning, like to tell you that this is what the organ, what parts, but do not go put together with other labels.

A piece of content to spend an appropriate appropriate label, the page can be well structured and easier to understand what this is, and conducive to search engines.

After the page design, slowly develop the habit of using semantic tags, for yourself and for others.

8, summary

After reading this article certainly can not master HTML, but it should be no problem to understand HTML, HTML, CSS and JavaScript for comparison is relatively simple.

Want further study HTML, look at the document, it is important to also write much, and this is somewhat similar Transcription, copied more, stomach naturally be a little more or less ink.

Finally is the practice, and practice is one of the best ways to learn, but also to better understand the use of the knowledge learned.

This article is the personal recovery disk, any errors or imperfections, criticism and comments are welcome!

file