メインフレーム
<!doctype html>
<html>
<head>
<title>**网页描述**</title>
</head>
<body>
**网页主体部分**
<?body>
</html>
1.リスト
（1）注文リスト：ol
<!doctype html>
<html>
<head>
<title>有序列表</title>
</head>
<body>
<ol>
<li></li>
</ol>
<?body>
</html>
（2）順不同リスト：ul
<!doctype html>
<html>
<head>
<title>有序列表</title>
</head>
<body>
<ul>
<li></li>
</ul>
<?body>
</html>
（3）定義リスト：dl
<!doctype html>
<html>
<head>
<title>有序列表</title>
</head>
<body>
<dl>
<dt> </dt>
<dd> </dd>
<dd> </dd>
<dd> </dd>
</dl>
<?body>
</html>
（4）マルチレベルリスト
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多级列表</title> <!--证明li中可以由ul，ul中也可以有li-->
</head>
<body>
<h1>物品清单</h1>
<ul>
<li>
<h2>蔬菜</h2>
<ul style="circle">
<li>白菜</li>
<li>萝卜</li>
<li>黄瓜</li>
</ul>
</li>
<li>
<h2>水果</h2>
<ul>
<li>苹果</li>
<li>桃子</li>
<li>香蕉</li>
</ul>
</li>
</ul>
<!--快速编写列表ul>li*2>h2+ul>li*3(按下tab键)即可-->
</body>
</html>
2.リスト+アンカー：テーブル
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签案例</title>
</head>
<body>
<table bgcolor="#000000" cellspacing="1px" width="800px" align="center" border="1px">
<caption><h2 align="center">今日小说排行榜</h2></caption> <!--只能写在table标签中-->
<tr align="center" bgcolor="white" >
<th>排名</th> <!--标题单元格th是标题单元格，会自动居中加粗（td是数据单元格）-->
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近7天</th>
<th>相关链接</th>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>*</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>*</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>*</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td >暴走大事件</td>
<td>*</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>*</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>*</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
</body>
</html>
アンカー：ハイパーリンク、またはページ内をクリックして、現在のページの他の位置にジャンプします（IDが必要です）
<a href="网页链接" target=_blank(表示新开一个页面跳转到目标页面)>
链接名称</a>
<a href="# +id">(id是当前要调到的地方的id)链接名称</a>
eg:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锚点（用a标签跳转到本页面相关位置）</title>
</head>
<body>
<a href="锚点测试界面.html#bottom" >锚点测试界面</a>
<h2 id="#">我是顶部</h2>
<a href="#center">跳转到中部</a> <!--必须告诉a标签一个独一无二的身份证号码让他去寻找，在HTML中每个标签都有一个ID属性，唯一标识它们自己-->
<!--a标签有个特点就是是直接跳转并非滚动跳转，要根据需要来选择标签-->
<!--a标签还可以调到指定页面的指定位置-->
<h2 id="center">我是中部</h2>
<a href="#low">跳转到底部</a>
<h2 id="low">我是底部</h2>
<a href="#">回到顶部</a>
</body>
</html>
実行結果の図：
標準のテーブル形式：
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<table>
補足：簡単にするために、table> caption + thead> tr> th 3 + tbody> tr 3> td * 3を直接入力してテーブルを作成できます。
3.フォーム：フォームは重要です！！！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>总体练习</title>
</head>
<body>
<form action="https://baike.so.com/doc/5415216-24186322.html">
姓名： <input type="text" name="姓名" >
<br>
密码： <input type="password" name="密码" >
<br>
性别： <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女 <!--注意，单选框默认不会互斥，需要你加name ,并且name属性取值相同 ,还可以设置默认选中某个框子，设置checked=checked-->
<br>
爱好： <input type="checkbox">打篮球 <input type="checkbox">踢足球
<input type="checkbox">看小说 <input type="checkbox">看电影
<br>
文件： <input type="file">
<br>
<input type="submit" value="Submit"> <!--有提交的功能-->
<input type="button" value="按钮"> <!--没有提交的功能-->
<input type="reset">
<br>
<label>出生日期：</label><input type="date">
<br>
<label>输入时间：</label><input type="time">
<br>
<label>具体时间：</label><input type="datetime">
<!--填的所有内容均清空-->
<br>
<label>分数：</label><input type="range" max="100" min="0" >
<br>
<label>数目：</label><input type="number" max="100" min="0">
<br>
<label>手机号码：</label><input type="tel">
<br>
<br>
<input type="image" src="007fzS16ly1gje86iv2jsj33qj23lhdy.jpg" width="200px">
</form>
</body>
</html>
演算結果：
補足：
- imgタグ、画像を挿入
<img src="图片位置" >
- brタグ、改行機能（shift + enter）
- 時間ラベル、ライン機能
4.入力タグの詳細な紹介：
フォームの役割は、ユーザー情報を収集し、それをCSSおよびJSで使用して、ユーザーの操作に応答し、バックエンドを操作することであることを知っておく必要があります。
*タイプ=テキスト/パスワード
姓名：<input type="text" >
<br>
密码：<input type="password">
演算結果：
* type = button /
<button>
* type =チェックボックス（複数選択ボックス）
兴趣爱好：<input type ="checkbox" checked="checked"> 踢足球
<!--checked="checked"表示默认选中，对于多选框可以有多个input具有，对于单选框如果也有多个，则默认最后出现的那个是默认值！-->
<input type ="checkbox" > 打篮球
<input type ="checkbox" > 你（^ ^）
* type = radio（単一の選択ボックス）
注：ラジオボタンについて注意すべき点があります。相互に排他的ではありません。名前を追加する必要があります。すべてのラジオボタンは、相互に排他的であるために同じ名前を持っています。つまり、単一の選択です。
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex" checked="checked">保密
* type = time / date / number / datetime / file等等等
<input type="date">
<br>
<input type="file">
*画像ボタン
<input type="image" src="图片位置">
*リセット（フォームのデータを空にします。デフォルトの名前があります：リセット、自分で変更することもできます、値属性を追加します）
<input type="reset" >
*送信フォームデータの送信、tデータをリモートサーバーに送信
送信するフォームのデータ、送信先、フォームのアクション属性を使用するように指示します
<form action="远程服务器网址">
<input type="text" name="aa">
<!--在这里input中加了name表示这里填写的数据将来要提交到action中指定的远程服务器中-->
<input type="submit">
</form>
*非表示
<input type="hidden"> 用于悄咪咪的搜集数据
5.ラベル
テキストと入力ボックスを関連させる方法、つまり、テキストをクリックすると、入力ボックスがフォーカスされ、ユーザーエクスペリエンスが向上します。
<form action="">
<label for="account">账号：</label><input type="text" id="account">
<br>
<label for="psw">密码：</label><input type="passwo" id="psw">
<br>
</form>
第二种写法：直接用label标签将文字和输入框input包裹起来即可
<form action="">
<label>
账号<input type="text" id="account">
<\label>
</form>
6.HTML5サプリメント
（1）オプションを入力ボックスにバインドします。
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>奥迪</option>
<option>路虎</option>
<option>宾利</option>
</datalist>
<label for="type">请输入你的车型：</label> <input type="text" id="type" list="cars">
（2）type =メールメールボックス/ url（ウェブアドレス）
チェック機能付き！！！、送信をクリックするとメールアドレスとURLがチェックされますが、番号以外の番号タイプは一切入力できません。
<form>
电子邮箱：<input type="email">
<input type="submit"><br>
网址：<input type="url">
<input type="submit"><br>
<input type="submit"><br>
电话号码：<input type="number">
</form>
（3）タグとtextareaタグを選択します
* selectは、ドロップダウンリストを定義します。
入力できず、リストから直接コンテンツを選択し、グループ化にoptgroupを使用する
<form>
<select>
<optgroup label="北京">
<option>朝阳区</option>
<option>昌平区</option>
<option>通州区</option>
</optgroup>
<optgroup label="广州">
<option>天河区</option>
<option>越秀区</option>
<option>黄浦区</option>
</optgroup>
</select>
</form>
* textarea：通常、手動で伸ばすことができます
<textarea rows="3" cols="10">
</textarea>
フォーム演習
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单练习</title>
</head>
<body>
<form action="">
<p>
<label for="account"> 账号：</label> <input type="text" id="account">
</p>
<p>
<label for="psw"> 密码：</label> <input type="password" id="psw">
</p>
<p>
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex" checked>保密
</p>
<p>
爱好：<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox" checked>我<br>
</p>
<p>
个人简介：<textarea></textarea>
</p>
<p>生日：<input type="date"></p>
<p>邮箱：<input type="email"></p>
<p>手机：<input type="tel" max="11" min="11"></p>
<p>
<input type="button" value="注册"> <input type="reset" value="清空">
</p>
</form>
</body>
</html>