Today, let us take a look at the most basic things in HTML
HTML basis and code implementation
To be honest, these are not unfamiliar to HTML, because in the ccf exam in previous years, the third question of the real question often appears HTML-related knowledge, the world is round, how can you come back! Harmony in the world!
Basic components
HTML title
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
HTML paragraph
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
HTML link
The target attribute is set to "_blank", the link will open in a new window
<a href="https://www.baidu.com">这是一个链接</a>
<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
HTML image
<img src="/images/1.jpg" /><!--width="258" height="39" -->
HTML blank lines and horizontal lines
Blank line
<br>
Horizontal line
<hr>
HTML other tags (tag reference manual)
HTML Reference Manual (HTML5 standard)
Total code and running results
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<a href="https://www.baidu.com">这是一个链接</a>
<br>
<img src="/images/1.jpg" /><!--width="258" height="39" -->
</body>
</html>
Text formatting
See the code and effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
<br />
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<br>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>
</html>
Other label introduction
base
Use the default link destination address for all links in the definition page.
<base href="//www.runoob.com/images/" target="_blank">
<a href="//www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
head
The head> element contains all the head tag elements. In the head element you can insert scripts, style files (CSS), and various meta information.
The element tags that can be added in the head area are: title, style, meta, link, script, noscript and base.
link
The link tag defines the relationship between the document and external resources.
The link tag is usually used to link to a style sheet:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
style
The style tag defines the style file reference address of the HTML document.
In the style> element, you can also directly add styles to render HTML documents:
<head>
<style type="text/css">
body {
background-color:yellow}
p {
color:blue}
</style>
</head>
meta
The meta tag describes some basic metadata.
The meta tag provides metadata. Metadata is not displayed on the page, but will be parsed by the browser.
The META element is usually used to specify the description of the web page, keywords, the last modification time of the file, the author, and other metadata.
Metadata can be used in browsers (how to display content or reload pages), search engines (keywords), or other web services.
meta is generally placed in the head area
script
The script tag is used to load script files, such as JavaScript.
The script element will be described in detail in later chapters.
Previous summary table
| label | description |
|---|---|
| head | Defines the information of the document |
| title | The title of the document is defined |
| base | Defines the default link address of the page link label |
| link | Defines the relationship between a document and external resources |
| meta | Defines the metadata in the HTML document |
| script | Defines the script file of the client |
| style | Defines the style file of the HTML document |