Table of contents
5. Jump up and down, page jump
7. Ordered list, unordered list
10.Multiple selection box radio button
1.HTML
Concept: HTML (Hypertext Markup Language) Hypertext Markup Language.
HTML is not a programming language, but a markup language.
Html is mainly used to describe the components required in web pages, such as text boxes, tables, pictures, videos, etc., and also to typeset web pages.
The source file of HTML is called a "web page" and usually ends with .html or .htm.
It can be edited using any text editor and needs to be executed using a browser.
Visit: https://www.w3school.com.cn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- write your code -->
</body>
</html>2. Label
1. head tag
<head>
Header tag...
</head>
1.Icon
<link rel="icon" href="icon.png" type="image/x-icon"> <!-- 图标 -->
For example
2. Center the style
<link href="style01.css" rel="stylesheet"> requires additional .css code to be written
or
<body style="text-align: center"> <!-- Also the style is centered--> write code... </body>
2. body tag
<body>
body tag...
</body>
1. Notes :
<!-- Comment content· -->
2. Load images
<img width="303" src="image.png" alt="Display this paragraph when it cannot be loaded"> <!-- Load image-->
3. Load the video
<iframe src=""> </iframe>例如 <iframe src="//player.bilibili.com/player.html?aid=873301164&bvid=BV1YN4y1Q7L7&cid=1261762527&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
<link rel="icon" href="icon.png" type="image/x-icon">
</head>
<body>
<!-- 注释 -->
<img width="303" src="image.png" alt="asddd"> <!-- 加载图片 -->
<!-- 加载视频 -->
<iframe src="//player.bilibili.com/player.html?aid=873301164&bvid=BV1YN4y1Q7L7&cid=1261762527&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>Effect
4.Region
<div></div> partition
<span></span> How many parts are there in each area?
<p></p> Article segmentation
<br> Line break
<hr> dividing line
<h1>I am a first-level title</h1>
<h2>I am a secondary title</h2>
<h3>I am a third-level title<h3>
...
<p>I am the text</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- write your code -->
<div>
我是第一个区域
</div>
<div>
<span>我是第二个区域的第一部分</span>
<span>我是第二个区域的第二部分</span>
</div>
<p>
我是第一段文字
</p>
<p>
我是第二段文字
</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>我是正文</p>
</body>
</html>Effect
5. Jump up and down, page jump
<a href="https://www.bilibili.com/">Click on Xiaopo Station</a>
<a href="#test">Click to get to the bottom</a>
<div id="test">底部</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- write your code -->
<a href="#test">点击到达底部</a>
<br>
<a href="https://www.bilibili.com/">点击小破站</a>
<br>
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<div id="test">底部</div>
</body>
</html>Effect
6.Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- write your code -->
<!-- 表格 -->
<table border>
<thead> <!-- 表头 -->
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody> <!-- 表体 -->
<tr>
<td>0001</td>
<td>张伟</td>
<td>男</td>
</tr>
<tr>
<td>0001</td>
<td>张伟</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>Effect
7. Ordered list, unordered list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- ul无序列表 -->
<ul>
<li>一号</li>
<li>二号</li>
<li>三号</li>
<li>四号</li>
<li>五号</li>
</ul>
<!-- ol有序列表 -->
<ol>
<li>一号</li>
<li>二号</li>
<li>三号</li>
<li>四号</li>
<li>五号</li>
</ol>
</body>
</html>Effect
8.Login
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="text-align: center"> <!-- 居中 -->
<h2>登录网站</h2> <!-- 二号标题 -->
<div>
<label>
账号：
<input type="text" placeholder="Username...">
</label>
</div>
<div>
<label>
密码：
<input type="password" placeholder="password...">
</label>
</div>
<div>
<label>
<input type="checkbox">
我同意...
</label>
</div>
<div>
<br> <!-- 换行-->
<button> 取消 </button>
<button> 登录 </button>
</div>
<div>
<a href="https://www.bilibili.com/">忘记密码</a> <!-- 跳转到改密码页面 -->
</div>
<div>
<label>
日期：
<input type="date" placeholder="Username...">
</label>
</div>
<div>
<label>
日期：
<input type="datetime-local">
</label>
</div>
<div>
<label>
文件:
<input type="file">
</label>
</div>
</body>
</html>Effect
9.Button
<div>
<br>
<button> 取消 </button>
<button> 登录 </button>
</div>
10.Multiple selection box radio button
<label>
<!-- Radio button-->
<input type="checkbox">
I agree to the privacy policy of this website
</label>
<label>
<br> <br>
<!-- Multiple check box-- >
<input type="radio" name="role">
Student
</label>
<label>
<input type="radio" name="role">
Teacher
</label>
Effect
11.Text box
<div>
<label>
<h2>Text box</h2>
<textarea placeholder="Say something..." cols="60"
rows="10"></textarea>
</label>
</div>
Effect
12. Drop-down list
<!-- Create a drop-down list-->
<label>
Login identity:
<select>
<option>Teacher</option>
<option>Student</option>
<option>Administrator</option>
</select>
< /label>
Effect
