記事ディレクトリ
序文
提示：本篇文章介绍HTML部分基础知识，其中包括HTML列表、表格、表单：
Webページ開発の発展に伴い、Webフロントエンドの技術を学ぶことがますます重要になってきており、多くの人がHTMLを学び始めています.この記事では、HTMLの基本的な内容を紹介します.
提示：以下是本篇文章正文内容，下面案例可供参考
1. HTML リスト
1. HTML3 リスト
HTML リストには、順序付きリスト、順序なしリスト、定義リストの 3 種類があります。
順序付きリストと順序なしリストがよく使われ、定義リストはあまり使われませんが、実際の応用では順序なしリストが最も多く使われますので、それらをマスターすることに集中してください。
- 順序付きリストの
基本的な構文:
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
実行結果:
-
順不同リスト
順序なしリストは、3 つのリストの中で最も重要です
基本的な構文:
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
実行結果:
- 定義リスト
基本構文:
<dl>
<dt>食谱</dt>
<dd>我喜欢吃酸辣土豆丝</dd>
<dd>她喜欢吃酸菜鱼</dd>
<dd>你喜欢吃什么呢</dd>
</dl>
実行結果:
2. リスト演習
小演習: 以下は、ブラウザに表示された Web ページの効果です。同一の都市規約を作成してください。
2.HTMLフォーム
1. 表意味ラベル
テーブルタグを意味的に覚える:
フォームの基本タブ
| ラベル | セマンティクス | 例証する |
|---|---|---|
| テーブル | テーブル（テーブル） | シート |
| トレ | テーブル行（テーブル行） | OK |
| td | テーブル データ セル | リスト |
| テーブル構造タグ | ||
| ラベル | セマンティクス | 例証する |
| – | – | – |
| 宣伝 | テーブルヘッド | ヘッダ |
| 本体 | テーブル本体 | 時計本体 |
| tfoot | テーブルの足 | テーブルの足 |
| 番目 | テーブル ヘッダー | ヘッダーセル |
2. テーブルの基本構造
<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签可以没有，但是这3者必须要有。
コードは次のとおりです (例)。
<table border="1" />
<tr>
<td>表格1</td>
</tr>
<tr>
<td>表格2</td>
</tr>
<tr>
<td>表格2</td>
</tr>
</table>
実行結果:
<table>和</table>标记着表格的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行，在表格中包含几组<td>和</td>就表示该表格为几列。
3. 帳票の総合利用
コードは次のとおりです (例)。
<table border="1" cellpadding="1" cellspacing="1" bordercolor="red" width="500"/>
<tr>
<td width="300" align="center">1</td>
<td bgcolor="red">2</td>
</tr>
<tr bgcolor="red">
<td>3</td>
<td>4</td>
</tr>
<tr>
<td bgcolor="yellow">5</td>
<td height="450">6</td>
</tr>
</table>
実行結果:
-
表の基本タブと使用できるタブ
table：定义表格 tr：代表每一行 td：代表行里面的每一格 border：边框宽度，默认是 bordercolor：边框颜色 bgcolor：背景颜色，可以加在table、td、tr上 width和height：宽和高 align:水平方向 center：水平居中 right：右对齐 left：左对齐 valign:垂直方向 middle：垂直居中 bottom：向下 top：向上 cellspacing：边框距离表格的间距 cellpadding：表格里的内容距离四周边框的边距
4.行と列をまたいでテーブルを結合する
コードは次のとおりです (例)。
<table border="1" width="500" height="400">
<tr>
<td rowspan="3" valign="top">表格1</td>
<td colspan="2">表格2</td>
</tr>
<tr>
<td>表格2</td>
<td rowspan="2" align="right">表格3</td>
</tr>
<tr>
<td align="right">表格2</td>
</tr>
</table>
実行結果:
- 結合された行は td タグの rowspan 属性を使用し、結合された列は td タグの colspan 属性を使用します。
- rowspan: テーブルは複数の行にまたがります (垂直方向にマージされます)
- colspan: テーブルは複数の列にまたがっています (水平結合)
5. テーブルエクササイズ
トラフィック調査フォーム: Web ページがブラウザに与える影響は次のとおりです。トラフィック調査 Web ページを作成してください。
必須：
大标题使用<h1>标签
表头使用<th>标签
行列使用<tr>、<td>标签
3. HTML フォーム
1.フォームの基本構造
フォームは、フォーム ラベル、フォーム フィールド、およびボタンの 3 つの部分で構成されます。
-
フォーム ラベル
action：表单提交给后端的url地址，不写内容是提交到本网页 method：提交方式 get：参数会出现地址中 post：参数不会出现在地址中，更安全 -
フォームフィールド
type：type值有多种，所呈现的表单效果不一样，比如文本框、复选框、下拉框、单选框 name：代表表单的名称，后端通过name值获取用户所填写的内容 value：用来接收用户填写的内容，也可以设置默认值
コードは次のとおりです (例)。
<form action="" method="get">
<p>用户名：<input type="test" name="111" value=""/></p>
<p>密 码：<input type="password" name="1112" value=""/></p>
<p>     <input type="submit" value="登录"/> </p>
</form>
実行結果:
2.フォームボタンタイプ
-
タイプ：
image和submit：提交按钮，会自己将表单数据提交给后端 button：普通按钮，必须配合事件使用 rest：重置，回到表单最初状态 -
textarea: 複数行のテキスト フィールド
rows：代表文本初始容纳的行数，超过会自己显示滚动条 cols：规定每一行显示的字符数，比如10，汉字对应5个，英文对应10个
コードは次のとおりです (例)。
<form action="" method="get">
用户名：<input type="text" name="username" value="张三" /><br>
密 码: <input type="text" name="pwd" id="" value="" /><br>
留 言: <textarea rows="2" cols="6"></textarea><br>
<input type="submit" value="登录" /><br>
<input type="image" src="submit.jpg"/><br>
<input type="button" value="删除" onclick="alert('删除成功)'"/><br>
<input type="reset" value="重置" />
</form>
実行結果:
3. フォームのラベル付け - ラベル ラベル
-
ラベル：
增强鼠标的可用性 自动将焦点转移到与该标注相关的表单元素上
コードは次のとおりです (例)。
<form action="" method="post">
<input type="radio" name="gender" id="a" value="male" />
<label for="a">男</label>
<input type="radio" name="gender" id="b" value="female" />
<label for="b">女</label>
</form>
実行結果:
4. ラジオ ボタン、ドロップダウン ボックス、およびチェック ボックスを形成する
type:text（文本框）；password（密码框）
radio：单选按钮，name值必须保持一致，后端根据name获取到的是value值
checkbox：复选框按钮，name值必须保持一致，后端根据name可以获取到多个value值
checked：默认选中
select：下拉框
option：指下拉框的每一项
selected：下拉框默认选项，不设置默认第一条
multiple：下拉框多选
后端根据name获取到value值
コードは次のとおりです (例)。
<form action="" method="post">
性别：<input type="radio" name="xingbie" value="boy"/>男孩
<input type="radio" name="xingbie" value="girl"checked />女孩
爱好：<input type="checkbox" name="aihao" value="zhaogirl" checked />旅行
<input type="checkbox" name="aihao" value="gao money" checked />运动
<input type="checkbox" name="aihao" value="xuexi" checked/>学习
<input type="checkbox" name="aihao" value="shuijiao" />购物<br>
出生年月：
<select name="yesr">
<option value="">请选择</option>
<option value="2000">2000</option>
<option value="2001" selected>2001</option>
<option value="2002">2002</option>
</select>年
<select name="month" multiple >
<option value="">请选择</option>
<option value="9">9</option>
<option value="10" selected>10</option>
<option value="11">12</option>
</select>月<br><br>
<input type="submit" value="注册"/>
</form>
実行結果:
5.フォームボタン
buttom和type=“buttom”都是普通按钮，同样不能提交表单数据
但是buttom是双标签内容可以放置图片或者其他，比type=“buttom”更灵活
placeholder：预期提示
required：必填
readonly：只读，用户无法编辑，数据会随表单正常提交
disabled：禁用，相当于作废，数据不会随表单提交到后端
hidden：隐藏域，当有些数据需要提交给后端，但是又不希望用户看到
コードは次のとおりです (例)。
<form action="" method="get">
用户名：<input type="text" name="username" value="" placeholder="请输入6位字母数字组合" required /><br>
密码：<input type="text" name="pwd" value="13456" readonly /><br>
邮箱：<input type="text" name="email" value="[email protected]" disabled /><br>
id:<input type="hidden" name="id" value="5965" /><br>
<input type="submit" value="提交" /><br>
<button type="button" disabled>点击</button><br>
<button type="button" name="bth" value="123">
<img src="submit.jpg">
</button><br>
</form>
実行結果:
6.入力属性
size：初始宽度，代表字符数
maxlength：可输入的最大字符长度
style：设置样式
语法:style="属性名：属性值；属性名：属性值..."
background-color：设置背景颜色
width：设置宽度
heigth：设置高度
color：设置字体颜色
コードは次のとおりです (例)。
<form action="" method="get">
<input type="text" size="20" maxlength="20" value="212" /><br>
<input type="password" maxlength="6" value="221" /><br>
<input style="background-color: aqua; color: red;width: 80px;" type="submit" value="提交" />
</form>
実行結果:
7. ファイルのアップロード
-
ファイルのアップロード:
提交类型必须是post enctype：告诉后端这是一个带有文件的表单 需要按照文件上传获取相应的数据 type： file，代表文件上传 multiple：多文件上传
コードは次のとおりです (例)。
<form action="" method="post" enctype="multipart/form-data">
用户名：<input type="text" name="username" value="" /><br>
照 片： <input type="file" name="file" value="" /><br>
多文件上传： <input type="file" name="file" multiple value="" /><br>
<input type="submit" value="上传" />
</form>
実行結果:
