directory
HTML Default elements
Basic HTML Elements
HTML table elements
HTML list element
HTML form elements
HTML Default elements
<! DOCTYPEhtml><! Tell the browser to process an HTML document -->
<html lang="en"><! -- the start of the HTML in the document, where lang is a language attribute of HTML, where en is the default meaning of English -->
<head><! The header element, below the HTML, provides information about the document's content and annotations.
<meta charset="UTF-8"><! -- Charset attribute of meta tag
<title>The default element</title><! -- The title element means the title -->
<! <title> is a tag, while the default </title> element is an element.
</head><! This is the end of the head element -->
<body><! The contents of the body element can be printed directly on the web page. Of course, there are many elements in the body element.
<h1>hello world</h1>
hello world
</body><! -- End of body element -->
</html><! -- End of HTML element -->
Copy the codeThe results
Basic HTML Elements
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The basic elements</title>
</head>
<body>
hello world1
<br><! -- This is what a line break means -->
<a href="https://blog.csdn.net/HeZhiYing_">hello world2</a><! -- Hyperlink TAB, click is directly in the local refresh window unchanged --><br>
<a href="https://blog.csdn.net/HeZhiYing_" target="_self">hello world2</a><! --_self is the default, equivalent to the above --><br>
<a href="https://blog.csdn.net/HeZhiYing_" target="_blank">hello world3</a><! -- This TAB creates a new window --><br>
<b>hello world4</b><! -- That's what bold means --><br>
<em>hello world5</em><! -- This is italic --><br>
<u>hello world6</u><! -- This is underline --><br>
<s>hello world7</s><! -- This is the delete line -->
</body>
</html>
Copy the codeRunning results:
HTML table elements
Create table:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create a table</title>
</head>
<body>
<table border="1px"><! -- This is the table label, the border property is the size of the border, and set to 1px, px means pixel -->
<thead><! -- This is the header tag -->
<tr><! -- This is the line tag -->
<th>account</th><! -- This is the header column element with bold -->
<th>The name</th>
<th>password</th>
</tr>
</thead>
<tbody><! -- This is the body tag -->
<tr>
<td>123</td><! This is the column element -->
<td>aaa</td>
<td>123</td>
</tr>
<tr>
<td>456</td>
<td>bbb</td>
<td>456</td>
</tr>
<tr>
<td>789</td>
<td>ccc</td>
<td>789</td>
</tr>
</tbody>
<tfoot><! -- This is the footer tag -->
<tr><! -- This is the line tag -->
<td>account</td><! -- This is the header column element with bold -->
<td>The name</td>
<td>password</td>
</tr>
</tfoot>
</table>
</body>
</html>
Copy the codeRunning results:
Combined Form:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Combined form</title>
</head>
<body>
<table border="1px">
<tr>
<th rowspan="2">Merge rows</th><! -- Merge row cell, change row and the following position also occupy -->
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
</tr>
<tr>
<td colspan="2">chopper</td><! -- Merge a column cell, meaning that the element in the column occupies two positions, i.e. the following position is occupied as well -->
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</table>
</body>
</html>
Copy the codeRunning results:
HTML list element
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List elements</title>
</head>
<body>
<ol><! -- This tag is an ordered list -->
<li>aaa</li><! -- This element represents an item in the list -->
<li>bbb</li>
<li>ccc</li>
</ol>
<ol reversed><! The reversed element of this tag means descending order -->
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ol type="a"><! -- this label is an ordered list, default is 1,2,3 ascending order, here set to a,b,c- >
<li>aaa</li><! -- This element represents an item in the list -->
<li>bbb</li>
<li>ccc</li>
</ol>
<ol>
<li>Ol of nesting</li>
<ol type="a">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</ol>
<ul><! -- This is an unordered tag -->
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
</html>
Copy the codeRunning results:
HTML form elements
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The form elements</title>
</head>
<body>
<form><! This tag is used to create an HTML form for user input -->
<input><! -- Single line textbox -->
<br><br>
<input type="text"><! -- default is text attribute, do not write -->
<br><br>
<input type="text" value="hello"><! --value is an initial assignment -->
<input type="text" placeholder="Please enter your account number"><! --placeholder attributes, hints -->
<input type="text" placeholder="Please enter your account number" maxlength="8"><! --maxlength is the maximum input length -->
<br><br>
<input type="text" placeholder="Please enter your account number" size="50"><! The size attribute is the size of the text box -->
<input type="text" value="hello" readonly><! -- The readonly property is read-only and the contents of the text box cannot be edited -->
<br><br>
<input type="password" placeholder="Please enter your password"><! -- Here is the password, not in the text box to display the details, but ******-->
<br><br>
<textarea rows="3" cols="15">helloworldgfffffffffffffffffffffffffhgfhghdgfgjoiiiiiiiiypoipyoiypoiuy
ohfgjhjhgjhgd</textarea><! Textarea is a multi-line text box,rows is a row,cols is a column.
</form>
</body>
</html>
Copy the codeRunning results:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The form elements</title>
</head>
<body>
<form>
<button>button</button><! -- This can be used in conjunction with js to bind events -->
<input type="button" value="Button"><! -- This is a button element, which stands for button, but does not work with JS -->
<input type="submit" value="Button"><! Just submit the form -->
<br>
<input type="range" min="100" max="100" step="100" value="100">
<! -- This is a slide table that defaults to 0,min is the minimum, Max is the maximum, step is the value of each slide, and value is the initial value -->
<br>
<input type="number" min="100" max="100" value="0"><! -- Can be adjusted up or down -->
<br>
<input type="checkbox">Option 1<! -- This is a check box that can be unchecked if selected -->
<input type="radio">Option 2<! -- This check box cannot be unselected after it is selected -->
<br>
<input type="radio" name="a" checked>a<! Checked = name; checked = 1;
<input type="radio" name="a">b
<input type="radio" name="a">c
<br>What do you like to do<select><! -- Select box, can only select the following things -->
<option>Write the code</option>
<option>Reading a book</option>
<option>Play a game</option>
</select>
<br>
<input type="text" list="123">
<datalist id="123"><! -- Select box, the following items will be prompted first, you can also type other -->
<option>Write the code</option>
<option>Reading a book</option>
<option>Play a game</option>
</datalist>
</form>
</body>
</html>
Copy the codeRunning results:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The form elements</title>
</head>
<body>
<form>
<input type="email"><! Select * from email address;
<input type="tel"><! -- Here to identify tel-->
<input type="url"><! -->
<br>
<input type="date"><! -- This is the date -->
<br>
<input type="color"><! -- This is the color -->
<br>
<input type="search"><! -- Search text box -->
<br>
<input type="hidden" value="123"><! -- This is hidden, but it is still there when transmitting -->
<input type="image" src="Internet avatar.JPG" width="120px"><! -- Embed image button and set size, height will default -->
<br>
<input type="file" multiple><! The multiple attribute allows you to upload multiple files -->
</form>
</body>
</html>
Copy the codeRunning results:
