HTML - Basic Tags

Sanmuqi 2022-05-14 14:36:57 阅读数:892

htmlbasictags

Preface : This article briefly summarizes HTML Often used in HTML label


The automatically generated directory is a little strange , A mind map is made here


HTML—— h label

h Element is usually used to represent creating a title

Be careful : Create title only <h1> - <h6>, No, h7,h8 Of .

that <h1>~<h6> What's the difference between them ?

from <h1>~<h6> Their fonts are reduced in turn .

for instance ——<h> label

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1> Create titles with different font sizes 1</h1>
<h2> Create titles with different font sizes 2</h2>
<h3> Create titles with different font sizes 3</h3>
<h4> Create titles with different font sizes 4</h4>
<h5> Create titles with different font sizes 5</h5>
<h6> Create titles with different font sizes 6</h6>
</body>
</html>

The results are as follows : 

 

HTML—— p label  

 p Element is usually used to represent a paragraph

Create a p label :

<p> p A label represents a paragraph .</p>

for instance ——<p> label

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p> I'm a paragraph </p>
</body>
</html>

  The results are as follows :

HTML—— a label

a Tags are often used to define a link .href The value of the attribute is the address of the link .

  Create a a label :

<a href="http://www.baidu.com"> Baidu </a>

  for instance ——<a> label

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ********* Begin ********* -->
<a href="http://www.baidu.com"> Baidu </a>
<!-- ********* End ********* -->
</body>
</html>

give the result as follows :

HTML—— img label

img Tags are usually used to represent an image .src The value of the property is the address of the picture ,alt The value of the property is the text prompted when the picture is not displayed .  

Create a img  label :

<img src=" Picture address " alt=" Landscape painting "/>

  for instance —— img label

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ********* Begin ********* -->
<img src="https://www.educoder.net/attachments/download/207801" alt=" The dog walks "/>
<!-- ********* End ********* -->
</body>
</html>

  The effect is as shown in the picture :

  When the picture is not shown , Or the picture address is wrong , The prompt text will be displayed .

HTML—— div  label  

 div Tags can separate documents into separate 、 Different parts . It has no practical significance , It just means that a block level element is created .

Create a div  label :

 <div> establish div label </div>

for instance —— div label  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2> I am a h2 label </h2>
<p> I am a p label </p>
<!-- ********* Begin ********* -->
<div> I am a div label </div>
<!-- ********* End ********* -->
</body>
</html>

The effect is as follows :

 

  You can find : It and <h1>-<h6>,<p> The creation of tags is the same , It just doesn't have practical significance .

HTML—— notes

  Notes are explanatory text , When running a program , Will be skipped by the program , Don't deal with it .

  Add notes :

<!-- Indicates the beginning of the comment , --> Indicates the end of the comment

<!-- here p label -->

<!--<p> This is a paragraph </p>-->


  Self summary :


Come on together !

版权声明:本文为[Sanmuqi]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/134/202205141431542012.html