-
Notifications
You must be signed in to change notification settings - Fork 190
/
Copy path001.html
160 lines (140 loc) · 5.84 KB
/
001.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & HTML-Forms</title>
<style>
header {
margin: 15px;
background-color: #d3d1d1;
}
section {
margin: 15px;
background-color: #EEEEEE;
}
div {
background-color: #DDFFDD;
margin: 15px;
}
p {
background-color: #DDFFDD;
margin: 15px;
}
p span {
font-size: 26px;
font-weight: bolder;
}
footer {
margin: 15px;
background-color: #72807cab;
}
</style>
</head>
<body>
<header>
<h1>
HEADER
</h1>
A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element),
but this is not required. The header element can also be used to wrap a section's table of contents, a search
form, or any relevant logos. <br>
<a href="https://html.spec.whatwg.org/multipage/sections.html#the-header-element" target="_blank">header</a>
</header>
<section>
<h1>SECTION</h1>
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered
sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and
contact information. <br>
<a href="https://html.spec.whatwg.org/multipage/sections.html#the-section-element" target="_blank">section</a>
</section>
<div>
<h1>DIV</h1>
The div element has no special meaning at all. It represents its children. It can be used with the class, lang,
and title attributes to mark up semantics common to a group of consecutive elements. It can also be used in a dl
element, wrapping groups of dt and dd elements. <br>
<a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element" target="_blank">div</a>
</div>
<p>
<span>Paragraph Tag</span><br>
While paragraphs are usually represented in visual media by blocks of text that are physically separated from
adjacent blocks through blank lines, a style sheet or user agent would be equally justified in presenting
paragraph breaks in a different manner, for instance using inline pilcrows (¶) <br>
<a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element" target="_blank">P Tag</a>
</p>
<hr>
<p>
<h1>FORM</h1>
A form is a component of a Web page that has form controls, such as text, buttons, checkboxes, range, or color
picker controls. A user can interact with such a form, providing data that can then be sent to the server for
further processing
</p>
<form autocomplete="off">
<label for="text">Text</label>
<input type="text" name="text" id="text" value="some text" placeholder="your text here" required
minlength="3"><br><br>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="[email protected]" autofocus autocomplete="on"><br><br>
<label for="number">number</label>
<input type="number" name="number" id="number" value="some number" placeholder="your number here"
disabled><br><br>
<label for="password">your password</label>
<input type="password" name="password" id="password" placeholder="your password here" maxlength="5"><br><br>
<label for="file">select file</label>
<input type="file" name="file" id="file" placeholder="your file here"><br><br>
<label for="file">select multiple file</label>
<input type="file" name="file" id="file" placeholder="your file here" multiple><br><br>
<label for="male">male</label>
<input type="radio" name="radio" id="male" value="Male">
<label for="female">female</label>
<input type="radio" name="radio" id="female" value="Female"><br><br>
<label for="checkbox">checkbox</label>
<input type="checkbox" name="checkbox" id="checkbox" value="check"><br><br>
<input type="image" src="https://www.freelogodesign.org/Content/img/logo-samples/flooop.png" name="img" id="img"
height="30" width="50">
<input type="button" name="button" id="button" value="sample button">
<input type="submit" name="submit" id="submit" value="some submit">
<input type="reset" name="reset" id="reset" value="some reset"><br><br>
<button type="submit">Submit</button>
<button>button</button>
<button type="reset">reset</button>
<a href="http://particletree.com/features/rediscovering-the-button-element/" target="_blank">read about
button</a>
</form>
<hr>
<h1>UL & OL tags</h1>
<ul>
<li>JavaScript</li>
<li>Python</li>
<li>MySQL</li>
<li>MongoDB</li>
</ul>
<ol type="1">
<li>JavaScript</li>
<li>Python</li>
<li>MySQL</li>
<li>MongoDB</li>
</ol>
<ol type="A">
<li>JavaScript</li>
<li>Python</li>
<li>MySQL</li>
<li>MongoDB</li>
</ol>
<ol type="I">
<li>JavaScript</li>
<li>Python</li>
<li>MySQL</li>
<li>MongoDB</li>
</ol>
<hr>
<footer>
<h1>
FOOTER
</h1>
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A
footer typically contains information about its section such as who wrote it, links to related documents,
copyright data, and the like. <br>
<a href="https://html.spec.whatwg.org/multipage/sections.html#the-footer-element" target="_blank">footer</a>
</footer>
</body>
</html>