table of Contents
Important H label
Main label
The h series tags are mainly used as titles. h1 to h6 are reduced in order.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>1</h1>
<h2>1</h2>
<h3>1</h3>
<h4>1</h4>
<h5>1</h5>
<h6>1</h6>
</body>
</html>
operation result
p tag: paragraph.
The p element will automatically create some white space (paragraph spacing) before and after it. The browser will automatically add these spaces, or you can specify them in the style sheet.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
<p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
<p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
<p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
<p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
</body>
</html>
div tag: represents a large container.
Tags can divide a document into independent, different parts. It can be used as a strict organization tool and does not use any format associated with it.
If you use id or class to mark, then the role of the label will become more effective.
Note: The
two tags of Div span have no special functions. They are only used as a content container, but they are used very frequently and are mainly used in conjunction with CSS.
Div: block label (it will occupy a line on its own, mainly used for layout)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="ooo">
周杰伦的情歌不只有R&B，《彩虹》就是证明。
</div>
<div id="ooo">
周杰伦的情歌不只有R&B，《彩虹》就是证明。
</div>
<div id="ooo">
周杰伦的情歌不只有R&B，《彩虹》就是证明。
</div>
<div id="ooo">
周杰伦的情歌不只有R&B，《彩虹》就是证明。
</div>
</body>
</html>
operation result
span: put some text.
Span: Inline tags (do not occupy a line alone)
tags are used to combine inline elements in the document.
Note: span has no fixed format. When a style is applied to it, it will have a visual change.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span> 哪里有彩虹告诉我
能不能把我的愿望还给我
为什么天这么安静
所有的云都跑到我这里
有没有口罩一个给我
释怀说了太多就成真不了
也许时间是一种解药
</span>
<span> 也是我现在正服下的毒药
看不见你的笑 我怎么睡得着
你的声音这么近我却抱不到
没有地球太阳还是会绕
没有理由我也能自己走
你要离开 我知道很简单
你说依赖 是我们的阻碍
</span>
<span>
就算放开 但能不能别没收我的爱
当作我最后才明白
有没有口罩一个给我
释怀说了太多就成真不了
也许时间是一种解药
也是我现在正服下的毒药
看不见你的笑 我怎么睡得着
</span>
</body>
</html>
operation result
a label: Hyperlink.
- Page switching: A website generally consists of many pages, and the switching between these pages is done through hyperlinks.
- Hyperlinks can link to pages inside the site or to pages on external sites.
- If you want to link to a file in a subdirectory under the site, you need to add the path name.
- If you want to link from the current page to the page in the upper level directory, you need to use .../ to return to the upper level directory, if there is another level.../.../
- To open the page in a new tab, you need to add a target attribute to the a tag. _blank: A new tab opens. _parent: Open in the parent window. _self: means to open in the current window (default). _top: Open in the top window.
- Add an anchor to the web page, give the anchor a name attribute, you can add an anchor link elsewhere, click on the link to open the specified anchor of a page.
Note: There must be a distance between the front and back of the anchor point. - mailto: followed by an email address, when you click the link, it will automatically open the mail development software (provided that your computer has installed the mailing software).
- <a href="javascript:void(0);">click me</a>: This way of writing blocks the default behavior (link) of the a tag. It is equivalent to an independent button.
E.g
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.qq.com">腾讯(外部站点)</a>
<a href="index.html">首页(内部站点)</a> <!--我在同级目录中有index.html-->
<a href="admin/login.html">登录</a><!--某个文件夹下的子目录-->
<a href="http://www.qq.com" target="_blank">打开新的页签访问腾讯(外部站点)</a> <!--在新标签页打开外部站点-->
<a href="#aa">去购买住房</a> <!--链接到其他的锚点-->
<a href="mailto:[email protected]">[email protected]</a><!--自动打开发邮件的软件-->
<a href="javascript:void(0);">点击我</a> <!--独立按钮-->
<div style="height: 2600px; background-color: seagreen;"></div>
<a name="aa">住房层</a>
<div style="height: 2600px; background-color: red;"></div>
</body>
</html>
This is not a good demonstration, just go and run it!
img tag: add background image
For example, I added a picture under the directory img at the same level
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/dog.jpg" alt="这是alt内容" title="这是一张背景图片"/>
<!--
通过img标签在网页中加入一张图片。
title：当鼠标移动到图片上的时候，显示title里面的文字内容。
alt：当图片加载失败的时候，显示alt属性中的内容。
table / form
-->
</body>
</html>
Running effect
When the picture is loaded incorrectly, a prompt will be returned
Block label and inline label
Any label is equivalent to a container. Regardless of whether it is block-level or in-line, it can be set through the display property.
Block-level element: Occupy a line alone, div p ul block-level element can set its width and height.
In-line elements: all line up in one line, after one line is full, start from the second line. The width and height of the element in the span a line cannot be set, and setting the width and height has no effect. Note : If the inline element is set to float, you can also set its width and height.
In-line elements and block-level elements are interchangeable.
display: inline; This element is the inline element.
display: block; This element is a block-level element.
For example, look at the following code to understand
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 100px;
background-color: red;
display: inline;
}
#box2{
width: 200px;
height: 150px;
background-color: salmon;
display: inline;
}
span{
display: block;
}
</style>
</head>
<body>
<div id="box1">
我是
</div>
<div id="box2">
周杰伦
</div>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
</body>
</html>
operation result
