当前位置：网站首页>Common text labels

Common text labels

2022-07-03 19:14:00 【Calabichu manifold】

One 、html The comments in

1.1 Comment tags

Shortcut keys for adding comments in the development environment ：

windows System ： ctrl + /
Apple system ：cmd + /

1.2 General format of notes

<!-- This is a comment . Comments don't appear in the browser .-->

1.3 conditional comments

<!--[if IE 8]> .... some HTML here .... <![endif]-->

Two 、 head Commonly used labels in

2.1 meta label

2.1.1 meta The role of labels

<meta> Element provides meta information about the page （meta-information）, Description and keywords for search engine and update frequency .
<meta> The tag is at the head of the document , It doesn't contain anything .
<meta> The information provided is invisible to the user

2.1.2 meta Two attributes of a tag

name attribute : It is mainly used to describe Web pages . Property value content It is mainly used for search engines to find and classify information .

<meta name="keywords" content=" Pets ,pet, Pet cat , pet dog "> <!--  Specify the keywords of the web page , For search engines  -->
<meta name="description" content=" This is a pet website ">	<!--  Specify the description of the web page , For search engines  -->

http-equiv attribute ： In order to display the web content correctly , Information for browsers . Property value content Including various parameters Variable value .

<meta http-equiv = "Refresh" content="2;URL=https://www.itsishu.cn">
<!--( Be careful 2 The following quotation marks ：2 Refresh after second , Jump to the specified page )-->
<meta http-equiv = "content-Type" charset=UTF8">
<!-- Set page parsing character set  -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--  When browsing web pages on mobile devices , Page not zoomed  -->
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE8" >
<!--  stay ie When a browser browses a web page , Use ie Of IE8 edition  -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	<!-- Set browser rendering -->

Icon download site ：https://www.iconfont.cn/
Document making website ：https://tool.lu/favicon/

2.2 Not meta label

<title> Webpage title </title>
<link rel="shortcut icon" href="http://www.itsishu.cn/favicon.ico">
<!-- Set up website icons , Favorite icons -->
<link rel="stylesheet" href="base.css">	<!-- Import style file -->
<script src="login.js"></script>	<!-- Import script file -->

3、 ... and 、body Commonly used labels in

3.1 Title Tag

Insert picture description here

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1> title 1</h1>
		<h2> title 2</h2>
		<h3> title 3</h3>
		<h4> title 4</h4>
		<h5> title 5</h5>
		<h6> title 6</h6>
	</body>
</html>

Insert picture description here

3.2 Paragraph and line feed labels

Insert picture description here

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- Monopolize a paragraph , There will be some space before and after the paragraph -->
		<p> Paragraph Tags </p>
		<!-- Line break -->
		<br>
		<!-- Level \ Split line -->
		<hr>
		<!-- pre label   Output in the original format of the text -->
		<pre>
		 Work overtime 、 party 、 On a business trip 、 travel , When there is no one at home to take care of pets , One click order to walk the dog / Look at the cat 、 Door to door foster care ,
		 Help you take care of your pet who has been waiting for a long time at home , Including going out for a walk 、 having dinner 、 Shovel excrement and other services .
		</pre>
	</body>
</html>

Insert picture description here

3.3 Text formatting labels

Insert picture description here

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<b> In bold </b>
		<i> Italics </i>
		<u> Underline </u>
		<s> Delete </s>
	</body>
</html>

Insert picture description here

3.4 Image tag

Insert picture description here

<img src="dog.jpg" alt=" Pictures of dogs " title=" pet dog " width="500px" height="500px">

Attributes are in the form of key value pairs ：key = “value”

3.4.1 Image tag properties

src: Path to display picture .
alt: Prompt when the picture is not loaded successfully .
title: Tips for mouse hovering .
width: Picture width , It can also be set as a percentage of the browser width
height: Picture height ( Width and height two attributes only one will automatically scale equally .)

3.4.2 Path of image label

3.4.2.1 Relative paths

Based on the location of the referenced file , And the directory path created
Same level path ： be located HTML The file is at the same level
Next level path ： /
Up path ： ../

<!--  Relative path mode 1 --> 
<img src="./images/logo.png"> 
<!--  Relative path mode 2 --> 
<img src="images/logo.png">

3.4.2.2 Absolute path

The absolute location in the directory , Direct to target , Usually the path starts from the drive letter
Or the absolute path address on the network

<!--  Absolute path mode 1 --> 
<img src="D:/itsishu/images/logo.png"> 
<!--  Absolute path mode 2 --> 
<img src="http://www.itsishu.cn/images/logo.png">

No copyright image , You can search “ No copyright image ”、“CC0” Keywords such as material
Reference resources ：15 Copyright free material website points https://www.sohu.com/a/407399386_719286
15 A high-quality copyright free image website https://zhuanlan.zhihu.com/p/67544709
Insert picture description here

Four 、 Special characters are often used

Insert picture description here

5、 ... and 、 Comprehensive application

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> Two lovesickness </title>
		<!--  Generate favorite small icons  -->
		<link rel="icon" href="favicon.ico"/>
	</head>
	<body>
		<!--  Align the first level title in the center  -->
		<h1 align="center">
			<img src="images/ love .png"> Two lovesickness </h1>
		<p align="center">【 The song dynasty 】 Li &nbsp; Yu  <br/></p>
		<!--  Center the paragraph  -->
		<p align="center">
			 Poetry of missing your wife <b>【 Sequential reading 】</b><!--  In bold  --><br/>
		 The withered eyes look at the remote mountain and separate the water , I've seen you for a few times, and I know ？<br/><!--  Line break  -->
		 I'm afraid to drink a glass of wine when the pot is empty , It is difficult to write rhymes .<br/>
		 The road blocks people and they leave for a long time , The message was sent back late .<br/>
		 The night watchman is lonely , Husband remembers wife, father remembers son .
		</p>
		
		<pre align="center">
 Poetry of missing husband <u><i>【 Read backwards 】</i></u><!--  Italic underline  -->
 My son remembers my father, my wife remembers my husband , The lonely night light is lonely .
 There is no news from the late return geese , A long absence blocks the way .
 Poetic charm and Cheng Nan write , A glass of wine is afraid of empty pot .
 I've seen you for a few times and have been in contact , The water looks away from the mountain, and my eyes are dry .
		</pre>
		
		<p align="center">
			<!--  Insert a picture  -->
		<img src="images/1.jfif" width="500px" title=" Two lovesickness " alt=" Mountain and sea ">
		</p>
		
		<hr/>
		<p align="center">
		&copy; Liu Xu &amp; Xu Liu <br>
		&lt; China  &#8226; haikou &gt;<!--  Use of special characters  -->
		</p>
	</body>
</html>