Getting the basic structure of the front end HTML5

basic structure

HTML file suffix .html, the following is a basic structure of an HTML document.

<!DOCTYPE html> <!-- 用于声明、告诉浏览器当前是一个 HTML 文档 --> <html lang="zh-cn"> <!-- HTML 文档开始 | 中文声明 --> <head> </head> <!-- 头部区域 --> <body> </body> <!-- 主体区域 --> </html> <!-- HTML 文档结束 -->

Head area

HTML head area headis used to define some pages initialization, such as the title page, the document encoding, load JavaScript, CSS files, etc. ...

<head>  <meta charset="utf-8"> <!-- 文档编码 -->  <meta name="description" content="简明教程是一个有趣的知识库 :) "> <!-- 网页描述 -->  <title>简明教程</title> <!-- 网页标题 --> </head>

Where the titlelabel is defined page title tag appears in the top bar of the browser window, and meta ~ descriptionweb definitions describe is not visible, it is used to tell the search engine 爬虫机器人, the main contents of the current page, when appropriate search engine will give you related words search rankings, similar to the label as well meta ~ keyword, meta ~ author.


Subject area

HTML is the main area bodyis the area of the browser window, anything written in this area, will be displayed in the browser.

<body>  <p>当前是一个内容段落 ~</p> </body>

Label form

In each of the <>element symbols becomes an HTML tags, wherein the divided 单标签and 双标签.

<!-- 双标签 --> <html> <!-- <> 标签开始 -->  <head></head> <body></body>  ... <!-- 双标签内部可以包含下级标签 --> </html> <!-- </> 标签结束 --> <!-- 单标签 --> <hr /> <!-- 自闭合 -->

Tag attributes

In addition to single and double forms of tag, but also it includes attributes, typically added as tag function.

<html lang="zh-cn"> <!-- lang="" 就是标签的属性 | 而 zh-cn 称为属性值 --> <!-- 一个标签可以包含多属性 --> <a href="简明教程</a>

Strict type

HTML is not strictly typed language, has certain fault tolerance, when we put the wrong tag, the browser does not display an error and not directly, but rather to resolve the error content according to their own understanding.

<hr /> <!-- 单标签的自闭合写成 <hr> 也能完成正确显示 --> <p </p> <!-- 忘记写了一个 > 号 可能也会解析正确,也可能段落的内容被错位显示 -->

Code comments

HTML tags are used to annotate <!-- -->

<!-- 这是一段注释内容 -->

Finally, I recommend a push in the front-end learning exchange group 685 910 553 Advanced ( front-end information-sharing ), no matter which direction you are on Earth,
whether you are welcome to work in a few years you settled in! (Within the group regularly offer free collection of some of the main group of free learning materials and books tidied face questions and answers document!)

If you have any objection to this article, then please write your comments in the article comments at.

If you find this article interesting, please share and forward, or you can look at, you acknowledge and encouragement of our articles.

Wish everyone in the programming this road, farther and farther.

Guess you like

Origin blog.csdn.net/fenghulun/article/details/92715327