html HTML备忘单

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html HTML备忘单相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en-US">
<!-- THIS is a comment -->
<head>
<!-- Page title and meta (i.e. charset) definitions -->
	<title>HTML cheat sheet</title>
	<meta charset="utf-8">
	<meta name="description" content="Free Web tutorials">
	<meta name="keywords" content="HTML, CSS, XML, JavaScript">
	<meta name="author" content="John Doe">
	<!-- <meta http-equiv="refresh" content="10"> -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Below there is a conditional comment -->
	<!--[if IE 9]>
	    .... some HTML here ....
	<![endif]-->

	<!--[if lt IE 9]>
  	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<![endif]-->

<!--Internal CSS Example - NOT RECOMMENDED-->
	<style>
		body {background-color: powderblue;}
		h1   {color: green;}
		h2	 {color: black;}
		h3	 {color: pink;}
		h4	 {color: blue;}
		h5	 {color: red;}
		h6	 {color: cyan;}
		p    {color: purple;}
		#p01 {color: yellow;}
		.specialpara {color: white;
			background-color: black;}
	</style>
</head>

<!-- External CSS Example -  RECOMMENDED-->
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

<!-- Body tag with a style attribute (inline CSS)-->
<body style="background-color: powderblue">
	<h1>HTML CHEAT SHEET</h1>
	<hr>
<!-- HEADINGS -->
	<h2>HEADINGS:</h2>
	These are various headings:
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
	Browsers automatically add some white space (a margin) before and after a heading.
	<hr>
<!-- LINE BREAKS -->
	<h2>LINE BREAKS:</h2>
	<br> 
	Three line breaks, one before and two after this sentence.
	<br><br>
<!-- HORIZONTAL RULE-->
	<h2>HORIZONTAL RULES:</h2>
	<hr>
	A horizontal rule.
	<hr>
<!-- PARAGRAPHS, quotations and text formatting-->
	<h2>PARAGRAPHS:</h2>
	
	<p>This is a paragraph. And below is another one with some text formatting showcased:</p>
	
	<p title="Lorem Ipsum"><strong>Lorem ipsum</strong> dolor sit amet, <sup>consectetur</sup>adipisicing <sub>elit</sub>, sed do eiusmod
	<b> tempor incididunt ut labore </b> et dolore magna aliqua. <ins>Ut enim ad</ins> minim veniam,
	quis nostrud exercitation <i> ullamco laboris </i> nisi ut aliquip ex ea commodo
	consequat. <em>Duis aute</em> irure dolor in reprehenderit in <small>voluptate velit esse</small>
	cillum dolore eu fugiat <mark>nulla pariatur</mark>. <del> Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</del></p>
	<hr>

	<p id="p01">Below is a paragraph that demonstrates short quotations and block quotes:</p>

	<p class="specialpara">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. <q>Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</q></p>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. <blockquote> Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote></p>
	<hr>
	<p>Adresses:</p>
		<address>
		Written by John Doe.<br>
		Visit us at:<br>
		Example.com<br>
		Box 564, Disneyland<br>
		USA
		</address> 
		<hr>
	<p>Abbreviations:</p>
		<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> 
		<hr>
	<p class="specialpara">Work title (cite):</p>
		<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p> 
		<hr>
	<p>Bi-Directional Override (bdo):</p>
		<bdo dir="rtl">This text will be written from right to left</bdo>
	<hr> 
<!-- PREFORMATTED TEXT TAG - Keeps Whitespace and line breaks -->
	<h2>PREFORMATED TEXT:</h2>
	<pre>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. 

	Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. 

	Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

	</pre>
<hr>
<!-- THIS IS A LINK tag with one attribute-->
	<h2>LINKS:</h2>
	<a href="https://www.w3schools.com" title="I am a link!">This is a link!</a>
	<br>
	<hr>
<!-- THIS IS AN IMAGE with multiple attributes-->
	<h2>IMAGES:</h2>
	<img src="https://cdn.vox-cdn.com/thumbor/ctiPxvlo9-2ESl0EDAUoCh6x8CQ=/0x0:1024x429/1200x800/filters:focal(505x159:667x321)/cdn.vox-cdn.com/uploads/chorus_image/image/58001321/Star_Wars_Porg_Gift_Ideas.0.jpg" alt="This is an image of a Porg from the latest Star Wars Movie" height="20%" width="20%" title="I am a Porg!">
	<hr>
<!-- EXAMPLE TABLE -->
	<h2>EXAMPLE TABLE:</h2>
	<table style="border: 1px solid black;">
	  <tr>
	    <th>Firstname</th>
	    <th>Lastname</th>
	    <th>Age</th>
	  </tr>
	  <tr>
	    <td>Jill</td>
	    <td>Smith</td>
	    <td>50</td>
	  </tr>
	  <tr>
	    <td>Eve</td>
	    <td>Jackson</td>
	    <td>94</td>
	  </tr>
	</table> 
	<hr>
<!-- LIST EXAMPLES -->
	<h2>EXAMPLE LISTS:</h2>
	<p>Unordered List</p>
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ul>
	<p>Ordered List</p>
		<ol>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ol>
	<hr>
<!-- DIV EXAMPLE - Defines a section in a document (block-level)-->
	<h2>DIV EXAMPLE:</h2>
	<div style="background-color:black;color:white;padding:20px;">
	  <h2 style="color: white;">London</h2>
	  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
	</div> 
	<hr>
<!-- SPAN EXAMPLE - Defines a section in a document (inline) -->
	<h2>SPAN EXAMPLE:</h2>
	<h1>My <span style="color:red">Important</span> Heading</h1>
	<hr>
<!-- IFRAME EXAMPLE -->
	<h2>IFRAME EXAMPLE:</h2>
	<iframe src="https://lp.gametwist.com" width="100%" height="200px"></iframe> 
	<hr>
<!-- JS EXAMPLE -->
	<h2>JS EXAMPLE:</h2>
	<p id="jstest"></p>
	<script>
		document.getElementById("jstest").innerHTML = "Hello World by JS!";
	</script>
	<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>

以上是关于html HTML备忘单的主要内容，如果未能解决你的问题，请参考以下文章

html JavaScript备忘单

html JSON备忘单

html 服务器规范和rspec的备忘单

HTML5 XSS安全备忘单

为您的前端开发需求收集备忘单（HTML、CSS、JS、Git、Gulp等）；参考

html HTML5备忘单来自：https：//www.youtube.com/watch？v = kDyJN7qQETA