記事ディレクトリ
HTMLタグ
注釈タグ
コメントの始まり< !--コメントの終わり-- >
タイトルタグ:
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
段落タグ
<p></p>
改行（終了タグ）
<br/>最後に / を付けても問題ありませんし、改行タグを使用すると行間が狭くなりますが、段落タグを使用すると短い段落と段落の間隔が大きくなります。
横線ラベル（クローズドラベル）
<hr/>/ を付けても付けなくても構いませんが、習慣化してコードの可読性を高めるために / を追加することにします。
太字のラベル
<strong></strong>
斜体のラベル
<em></em>,上記2つのタグは併用可能です。<b><em> </b></em>
特殊記号
- 空間：
- 大なり記号:
>(大なり) - 小なり記号:
<(小なり) - 著作権著作権記号:
©
画像タグ
<img src="../xxx.jpg" alt="oops!图像不见了" title="123" width="600" height="300">
このうち、src はアドレスを表し、絶対アドレスでも相対アドレスでも構いません。相対アドレスを使用すると、../前のディレクトリに戻ることを意味します。相対アドレスの使用を推奨します。altはファイル名を表します。画像を読み込めない場合は、「」が表示されます。画像の代わりに、タイトルは画像のホバー テキストを表します。幅高さは画像の高さと幅を表します。スペースを使用したその他の効果があり、エディターはすべての画像タグを要求できます。
リンクタグ
-
ハイパーリンク タグ:
<a href="https://www.baidu.com" target="_blank" title="123">你xxxx不会百度吗</a>、a タグ内のテキスト: 表示されるテキスト、a タグに画像を挿入できます。画像をクリックすると Web ページにジャンプします。target: 新しい Web ページを開く場所を示します。_self: 現在のラベルはopen_blank: 新しいページが開きます。タイトルのホバー テキストが表示されます。 -
アンカー リンク タグ (ページ上の指定した場所にジャンプします):
-
<a id="top">这里可以填文字</a>//这个是顶部的标记 <a href="#top">回到顶部</a>//这个是在底部的功能主体 此功能也可以跳转到另一个页面的某个位置： <a id="down"></a> <a href="https://www.baidu.com#down">百度底部</a> 这个标签的功能可以实现 点击链接就跳转到目标页面的指定位置 的功能 -
機能リンク:
- 電子メールリンク (mailto):
<a href="mailto:xxxxxxqq.com">点击联系我</a> - QQリンク：QQプロモーション公式ウェブサイトは、写真付きのQQ友達リンクを自動的に生成できます
- 電子メールリンク (mailto):
リストタグ
-
順序付きリスト
-
<ol>//order list <li>1</li> //list <li>2</li> <li>3</li> </ol> -
順序なしリスト:
<ul> //unorder list
<li>123
<ul> //镶嵌二级无序列表
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>2</li> //此处依旧是一级列表
<li>3</li>
</ul>
- 定義リスト
dl：标签
dt：列表名称
dd：列表内容
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
<dt>语言</dt>
<dd>中文</dd>
<dd>英语</dd>
<dd>日语</dd>
</dl>
↓预览内容
カスタム リストは、企業 Web サイトの下部などの場所でよく使用されます。
テーブルラベル
<table border="1px">//table表格标签，border表格的最外边边界宽度，由此连带的加上border才能把表格间隙显示清楚
<tr> //table row 表格的行
<td colspan="3">1-1</td> // td ：table data 表格行数据，即列；colspan（column栏 span跨度）关键词，表示合并栏，“3”表示包括本行的往下数总共三行的单位格；”1-1“代表格内的填的文字 ；在合并栏的时候要删除多余的栏
</tr>
<tr>
<td rowspan="2">2-1</td> //合并行单位格，“2”表示合并 包括自身往右数总共2格的单元格
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
メディアレーベル
视频元素
src 资源路径
controls 控制面板
autoplay 自动播放
<video src="xxx/xxx/xxx" controls autoplay></video>
controls提醒浏览器启用播放器，显示播放器界面；autoplay可以使视频自动播放
音频元素
<audio src="xxx/xxx/xxx" controls autoplay></audio
iframe インラインタグ
<iframe src="path" name="mainFrame" ></iframe>
フォームの構文（要点）
-
ラベル 説明する 入力タグ ほとんどのフォーム要素に対応するラベルには、テキスト、パスワード、チェックボックス、ラジオ、送信、リセット、ファイル、非表示、イメージ、ボタンが含まれます。デフォルトは text で、ユーザー名、パスワードなどを送信できます。 タグを選択 ドロップダウン選択ボックス テキストエリアタグ テキストフィールド -
割り当てのプロパティ 説明する タイプ 要素のタイプを指定します。テキスト、パスワード、チェックボックス、ラジオ、送信、リセット、ファイル、非表示、画像、ボタン、デフォルトはテキストです 名前 フォーム要素の名前（送信に対応するキー）を指定します 価値 要素の初期値、ラジオは提供する必要があります サイズ フォーム要素の初期幅を指定します。タイプがテキストまたはパスワードの場合、単位は文字です。その他のタイプの場合、単位はピクセルです。 最大長 タイプがテキストまたはパスワードの場合、入力できる最大文字数 チェック済み タイプがラジオまたはチェックボックスの場合、ボタンが選択されているかどうかを指定します。 -
割り当てられていない属性 説明する 読み取り専用 読み取り専用、変更不可 無効にする 無効、オプションはグレー表示されています 隠れた 非表示、表示されませんが送信されます ID 識別子を label の for 属性とともに使用すると、マウスの使いやすさが向上します。 プレースホルダー text テキストフィールドなどの入力ボックスのプロンプト情報 必須 空にすることはできません パタン 正規表現の検証 フォームの全体構造
<h1>注册</h1>
< !--from（表单）
action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
method：post get请求方式
name:表单提交的 键值对中的”键“
value:表单提交的 键值对中的“值”
get效率高，但在url中可以看到提交的内容，不安全，不能提交大文件；
post比较安全，且可以提交大文件，不过也只是相对安全，仍然可以通过network监控捕获到账号密码的传输，所以需要深入的加密
-- >
<form action="xxx/xxx" method="get">
< !--文本输入框：input type="text"-- >
<p>用户名：<input type="text" name="username" value（此方格内的默认初始值）="请输入用户名" maxlength="10" size="20"></p>
//placeholder:占位符，不可选中,maxlength:输入的字符最大个数，size：用户名输入框的长度
<p>密 码：<input type="password" name="password" placeholder（占位符，不可选中）="请输入密码" required="required"></p>
< !-- submit提交表单，reset清空-- >
<p><input type="submit"> <input type="reset">
</p>
</form>
ラジオボタンラベル、複数選択ボックスラベル
radio单选框标签 checkbox多选框标签 value即单选框的值，在提交时对应value
//radio来由:因为老式的收音机上有一种开关,多个按键排在一起,但每次只能按下一个,换句话说,按下任意一个键,其他按键全部弹起,所以GUI的单选按键也就被形象地称作收音机按键。
name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key
checked:默认被选中
<p>性别：<input type="radio" value="boy" name="sex"/>男 //value表示默认值；name是实际的代表唯一id的名称；单选框标签中，name不同时，可以同时选中不同的选项，name相同时只可以选择其中一个，
<input type="radio" value="girl" name="sex"/>女
</p>
<p>爱好：
<input type="checkbox" value="b" name="hobby">打篮球 //多选框标签时，同一类选项name需要相同，并且此时可以选中多个选项
<input type="checkbox" value="s" name="hobby">唱rap
<input type="checkbox" value="d" name="hobby">跳舞
</p>
ボタンラベル
<p><input type="button" name="btn1" value="按钮上文字"> //button 方格按钮标签，value默认按钮上的要显示字
</p>
画像タグ
<input type="image" src="xxx/xxx"> //图片按钮默认是提交：和submit类似,点击按钮就会提交
ドロップダウンボックスのラベル
<p> //下拉框：selected:默认选项
你来自：
<select name="location"> //name："下拉框的id"
<option value="china">中国</option> //option：下拉框的选项
<option value="us" selected>美国</option>
<option value="japan">日本</option>
</select>
</p>
テキストフィールドのラベル
<textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea> //id相当于value，cols代表文本域的列宽度，rows行高度，在网页中可以手动更改宽度高度
ファイルフィールドラベル
<input type="file" name="files"> //file上传的文件
<input type="button" name="upload" value="上传">//一个“上传”按钮
宛名ラベル
邮件：会简单验证是否是邮箱地址
url：会简单验证是否是网络地址
number：数字验证
邮件标签一般需要正则表达式自动判别邮箱地址正误
<p>邮箱：<input type="email" name="email"> //浏览器只进行了最基本的格式正误判断
</p>
URLタグ
<p>
url：<input type="url">
</p>
デジタル認証
max最大数量
min 最小数量
step 每次点击增加或减少的数量
<p>商品数量<input type="number" name="num" max="100" min="1" step="1"></p>
<p>音量：<input type="range" min="0" max="100" name="voice" step="2"></p> //滑块
検索ボックスのラベル
运用场景可以拓展到譬如 输入昵称，密码等情况
<p>搜索：<input type="search"></p>
マウスの使いやすさを向上
<p>
<label for="mark">你点我试试</label> //当点击“你点我试试”时，”for“指向了后边的mark，光标移动到了mark文本框里；for指向哪个id光标之后就会处于对应的框框里
<input type="text" id="mark">
</p>
インライン要素とブロック要素 (概念):
-
inline 要素は、ラベルが 1 行のみを占め、ラベルの終わりに復帰が存在しないことを意味します。block 要素は、ラベルが 1 行を占め、ラベルの終わりに復帰が存在することを意味します。ラベル。
-
インライン要素には、a、strong、em…が含まれます。
-
ブロック要素には、p、h1 ～ h6…が含まれます。
ページ構造分析
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
header footer section nav常用
