HTML Document
<!DOCTYPE html>
<html>
<head>
<!-- HTML head -->
</head>
<body>
<!-- HTML body -->
</body>
</html>
Comment
<!--
-->
Line feed
<br/>
Header and Paragraph
<h3></h3>
<p>
</p>
Show and Hide Details
<details>
<summary></summary>
<p>
</p>
</details>
Preformated Text
<pre>
</pre>
List
<ul>
<li>∙</li>
<li>∙</li>
</ul>
<ol>
<li>∙</li>
<li>∙</li>
</ol>
Directory List
<dl>
<dt></dt>
<dd></dd>
</dl>
Hyperlink
<a href=""></a>
<a href="" target=""></a>
<a href="" target="" title=""></a>
<a href="?Category=&Page=" target=""></a>
<a href="?Category=&Page=" target="" title=""></a>
<a href="/User/?Category=&Page=" target=""></a>
Image
<img src="" width="" height="">
Audio
<audio id="myAudio" style="max-width:100%" controls autoplay>
<source src="" type="audio/mp3">
</audio>
Video
<video id="myVideo" style="max-width:100%" controls autoplay>
<source src="">
</video>
Table
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table border="0" width="100%">
<colgroup>
<col width="4*">
<col width="2*">
<col width="1*">
</colgroup>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Flex Box
<style type="text/css">
.flex-container {
display: -webkit-flex;
display: flex;
/* float: left; */
}
.flex-item {
/* padding:2px; */
padding-left: 16px;
padding-right: 16px;
/*margin: 16px 0px 0px 0px;
margin: 1em; margin-left: 0px; margin-right: 0px;
margin: */
/* border-radius: 0.5em; */
box-shadow: inset -2px -2px 10px #ccc;
border: 1px solid #999;
}
.flex1 {
/* margin-right: 10px; */
-webkit-flex: 1 1 25em;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 70%;
background: white;
}
.flex2 {
margin-left: 10px;
-webkit-flex: 2 2 25em;
flex-grow: 1;
flex-shrink: 2;
flex-basis: 30%;
background: white;
}
</style>
<div class="flex-container">
<div class="flex-item flex1">
<h4></h4>
<pre>
</pre>
</div>
</div>
<div class="flex-container">
<div class="flex-item flex1">
<h4></h4>
<pre>
</pre>
</div>
<div class="flex-item flex2">
<h3></h3>
<pre>
</pre>
</div>
</div>
Box 3.1 Head
Box 3.1 body.
|
