What is HTML?
The full name of HTML is Hyper Text Markup Language, translated into [Hyper Text Markup Language].
The web page is the most important part of the World Wide Web. All the resources of the World Wide Web are displayed on it. HTML is not a programming language, but a markup language, which is necessary for web page production. That is to say, the Baidu and Taobao you see are all based on HTML.
"Hypertext" means that the page can contain pictures, links, and even non-text elements such as music and programs.
The structure of the hypertext markup language includes a "head" part and a "body" part, where the "head" part provides information about the webpage, and the "body" part provides the specific content of the webpage.
In the end, HTML is used to create pages on the World Wide Web.
Who invented HTML
The father of HTML was invented by the British Tim Berners-Lee and was born around 1990,
In the midsummer night of 1989, Tim successfully developed the world ’s first Web server and the first Web client,
In December 1989, Tim officially named his invention World Wide Web, which is the familiar WWW; in May 1991, WWW made its first appearance on the Internet, immediately caused a sensation, and achieved great success and was widely promoted and applied.
In 2004, the Queen of England awarded him the Order of the Commander-in-Chief of the British Empire. People call him Sir Lee.
What did Sir Lee do? in conclusion:
自己写了第一个浏览器
自己写了第一个服务器
用自己写的浏览器访问了自己写的服务器
发明了WWW，同时发明了HTML 、HTTP和URL
In 2017, Sir Lee was awarded the 2016 Turing Award in recognition of his contribution to humanity in computer science.
HTML start
Let's take a look at the standard HTML starting template writing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" >
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
The above code is the basic writing of an HTML page, let's parse each line
1. <!DOCTYPE html> 文档类型,代表这是一个html文档。
2. <html lang="en"> html标签，正规的写法，所有的html标签都要被包裹在这里，lang是语言的意思，可以把en改为 zh-CN，代表中文的意思。
3. <head> 头部标签，用于写一些，定义文档属性，引入css、js 等等的标签。
4. <meta charset="UTF-8"> 指定文档的字符编码是UTF-8。
5. <meta name="viewport" content="width=device-width,initial-scale=1.0" > 指定文档禁用缩放，兼容移动端手机。
6. <meta http-equiv="X-UA-Compatible" content="ie=edge"> 告诉IE浏览器如果支持edge版本的话，将版本内核提升到edge版本。
7. <title>Document</title> 文档的标题。
8. <body> 文档的内容，所有和内容相关的标签和文字都在这里编写。
Common chapter labels
1. 标题 h1 ~ h6
2. 章节 section
3. 文章 article
4. 段落 P
5. 头部 header
6. 脚部 footer
7. 主要内容 main
8. 旁支内容 aside
9. 内容块划分 div
Code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<article>
<header>
顶部广告
</header>
<div>
<main>
<h1>文章标题</h1>
<section>
<h2>第一章</h2>
<p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>
</section>
<section>
<h3>1.1节</h3>
<p>一段话</p>
</section>
<section>
<h3>1.2节</h3>
<p>一段话</p>
</section>
</main>
<aside>
参考资料 1 2 3
</aside>
</div>
<footer>© xxx版权所有</footer>
</article>
</body>
</html>
running result
Global attribute
Global attributes are the attributes that all tags have
-
class Class style name, see the picture below, lift chestnuts.
CSS can match the element's class name and decorate the element.
-
contenteditable allows to modify the content of the element, see the picture below, and lift chestnuts.
After this attribute is added to the element, the user can directly modify the content of the element in the content of the page displayed by the browser.
-
hidden hidden elements, see the picture below, lift chestnuts.
The element disappears directly after adding this attribute.
-
id element ID, see the picture below, lift chestnuts.
Similar to class, except that id is a globally unique identifier. Although this is the case, writing the same id on two elements can still both be selected for rendering, so try not to use id, use class.
-
style element inline style, see the picture below, lift chestnuts.
Through the style attribute, you can write styles directly in the element, and this priority is very high, which will override the style written in the style sheet.
-
tabindex The index of the tab key, see the picture below, lift chestnuts.
You can select the element through the Tab key on the keyboard. The frame indicated by the arrow in the figure is the effect selected with the tab key.
Tabindex starts from 0, but if it is set to 0, then it is the last one accessed with the tab key. 1 ~ more positive integers are in order. If set to -1, it means that the element will always be It cannot be selected by the tab.
-
title What is displayed when the mouse is hovered, see the picture below, and lift chestnuts.
It is mostly used to display some texts that are too long to display all, add a title, and display all the content after hovering the mouse.
Common content tags
- ol + li is an ordered list. You can understand it by looking at the picture. It is an ordered list of contents.
2. ul + li unordered list
3. dl + dt + dd dl (list) dt (title) dd (content item)
4. pre You can display the spaces and line breaks you type with the keyboard.
- The hr divider is a block-level element that occupies a single line, so that a dividing line appears between the two elements.
- br line break, because text or inline elements are from left to right, sometimes you need to line break this element.
- a Webpage link label, add this label to a section of text, so that he can jump to other locations or webpage links.
- em emphasizes content
- strong important content
- code contains code, the fonts inside are all of equal width
- quote Quote content is inline style by default
- blockquote Block-level quoted content, except for this element, the above are all inline elements.
