HTMLの研究ノート
本文章根据B站pink老师的视频内容进行整理，供复习参考
本文内容：
一、Web标准
1、为什么需要Web标准
2、Web标准的构成
二、HTML标签
1、语法规范
2、HTML基本结构标签
3、HTML常用标签
3.1 标签语义
3.2 标题标签
3.3 段落和换行标签
3.4 文本格式化标签
3.5 div和span标签
3.6 图像标签img和路径
3.7 超链接标签
3.8 表格标签
3.9 列表标签
3.9.1 无序列表
3.9.2 有序列表
3.9.3 自定义列表
3.10 表单标签
input 表单标签
label 标签
select 下拉列表标签
textarea表单元素
三、HTML中的注释和特殊字符
四、查阅文档
、Web標準
1.なぜ、Web標準？
別のブラウザでは、彼らは、ページレイアウトを表示する、またはわずかに異なるので、彼らは規制する標準のセットが必要になります。
2、Web標準を構成します
構造（構造）、パフォーマンス（プレゼンテーション）と行動（行動）3を含みます。
| 標準 | 説明 |
|---|---|
| 構造 | メインステージをソートし、分類するためのページ要素のための構造は、HTMLを学ぶことです |
| ショー | タイポグラフィ、色、サイズやページ要素を設定するために、他の外部スタイル性能、主にCSSを参照 |
| 行動 | 行動を意味し、この段階でインタラクティブなWebモデルではJavaScriptを学ぶために主にある定義を書きます |
構造、スタイル、相分離挙動：Web標準は最高の体験プログラムを発表しました。
二、HTMLタグ
1、構文仕様
1.1基本的な構文の概要
- HTMLタグは、次のような角括弧で囲まれたキーワードを、以下のとおりです。
<html> - ：HTMLのようなペア、通常である
<html></html>ジタグと呼ばれます - 一部の特殊は、次のような単一のラベル、次のとおりです。
<br />
2、HTMLタグの基本的な構造
| ラベル名 | 定義 | 説明 |
|---|---|---|
<html></html> |
HTMLタグ | ルートタグ |
<head></head> |
文書の先頭 | 頭の中でノート・レーベル、我々はタイトルタグを設定する必要があります |
<title></title> |
ドキュメントのタイトル | ページを作成し、自分のページのタイトルを持っています |
<body></body> |
文書の本体 | ページコンテンツが含まれている文書のすべての内容は、基本的には、本体の内側に配置されています |
<!DOCTYPE html> //文档类型声明标签，当前页面是HTML5版本，必须位于第一行，它不是THML标签
<html lang="en"> //lang语言种类，zh-CN为中文文档
<head>
<meta charset="UTF-8"> //字符集
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
3、HTMLタグが使用します
3.1セマンティックタグ
単純に、ラベルを行うために使用されるラベルを意味するものと理解？適切なラベルで適切な場所では、あなたがより明確にページ構造を作ることができます。
3.2タイトルタグ
HTMLは、つまり、見出しタグの6つのレベルを提供します <h1> ~ <h6>
<h1>这是一级标题</h1>
段落3.3およびラップラベル
タグ<p>セグメントを定義するために使用されます
<p>我是一个段落标签</p>
<br /> 用于强制换行
3.4テキスト書式タグ
| セマンティック | タグ | 説明 |
|---|---|---|
| 大胆な | <strong></strong>若しくは<b></b> |
推奨<strong>強く、セマンティック |
| チルト | <em></em>若しくは<i></i> |
推奨<em>強く、セマンティック |
| 取り消し線 | <del></del>若しくは<s></s> |
推奨<del>強く、セマンティック |
| アンダーライン | <ins></ins>若しくは<u></u> |
推奨<ins>強く、セマンティック |
3.5のdivとspanタグ
divそして、spanラベルは、コンテンツを含むため、ボックスで何の意味的な、ではありません。
<div>这是头部</div>
<span>今天天气真好</span>
DIVは、パーティション分割を表す略語の一部門です。これは、スパンスパンスパンを意味しています。
機能
- それは大きなボックス内の別の行にあるようdivのレイアウトのタグが、今の彼の党が唯一のdivを置くことができますが、理解することができます。
- スパンはまた、レイアウトに使用されるが、ラインスパンが複数存在してもよいです。これは、小さな箱として理解することができます。
3.6 imgタグとパス
1、それは単一のラベル、画像略語です。
<img src = "图像的URL" />
ラベル画像のsrc属性は、画像ファイルのパスとファイル名のために必要とされます。
imgタグのその他の属性：
| プロパティ | プロパティ値 | 説明 |
|---|---|---|
src |
画像のパス | 必要な属性 |
alt |
テキスト | テキストを交換し、テキスト画像は表示できません |
title |
テキスト | プロンプトテキスト、画像の表示テキストの上にマウス |
width |
ピクセル | 画像の幅の設定 |
height |
ピクセル | 画像の高さを設定します。 |
border |
ピクセル | 画像の境界線の太さを設定します。 |
注意事項画像タグの属性：
- プロパティは、背ラベル名を記述する必要があります。
- かかわらず、プロパティ、タグ名と属性間の順序の、プロパティとプロパティとの間の空間によって分離されます。
- 属性値のペアの形式をとる：属性名=「属性値を。」
2、経路
-
相対パス：参照塩基としてファイルの基準位置が確立されたディレクトリへのパス。
単純に、HTMLページへの画像の相対を置きます。
-
絶対パス
それが直接のターゲットの場所に、ディレクトリへの絶対パスを意味し、通常の文字からのパスを始めました。
例えば：
"D:\***\123.jpg"
| 相対パスの分類 | シンボル | 説明 |
|---|---|---|
| パス付き | 画像ファイルはHTMLファイルと同じレベルに位置しています | |
| パスの下に | / |
画像ファイルはHTMLファイル内に位置しています |
| パス上 | ../ |
画像ファイルは、HTMLファイルに位置しています |
3.7ハイパーリンクのラベル
<a>タグ役割が別のページからのリンクで、ハイパーリンクを定義します。
-
構文
<a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>プロパティ 効果 href（必須の属性）リンク先のURLアドレス targetポップは、ターゲット・ページを指定するために、_selfがデフォルト値_blankに新しいウィンドウで開きます -
リンクカテゴリー
-
外部リンク：アドレスなければなりません
http://で始まります。 -
内部リンク：サイトの内部ページ間の相互リンク、内部ページ名への直接リンク。
-
空のリンク：リンク先を決定することなく、
<a href = "#">还没想好链接到哪儿</a> -
ダウンロードリンク：アドレスは、ファイルまたはアーカイブ内にある場合は、ファイルをクリックhrefがダウンロードされます。
-
ページ要素がリンクされています、そのようなので、テキスト、画像、表、オーディオおよびなど、さまざまなページ要素は、ハイパーリンクを追加することができます。
<a href = "http://www.baidu.com"><img src = "img.jpg"></a> -
アンカーリンク：すぐにページ上の場所に移動するためのリンクをクリックしてください。
-
設定は、href属性にテキストをリンク＃名など、形式：
<a href ="#job"> 任职经历 </a> -
ターゲットの場所タグを検索し、そのように、idは上記の名前=属性名を追加します。
<h3 id = "job"> 任职经历简介 </h3>
-
-
表3.8ラベル
-
テーブルの主な役割
表示、データの表示、データの読みやすくするために。
-
基本的な構文テーブル
<table> <tr> <td>这是一个单元格</td> ... </tr> ... </table>- テーブルは、テーブルを定義するために使用されます。
- テーブルの行を定義するためのTRは、テーブルは、ネストされなければなりません。
- セル定義テーブルをtdの、あなたはTRで入れ子にする必要があります。
- TDは、テーブルデータテーブルのデータは、細胞内、すなわち、データコンテンツを指します。
-
タグのヘッダーセル
通常テキスト内の最初の行またはテーブルの最初の列が配置されているが、太字の中央に配置されます。
第タグは、HTMLフォーム（表頭）のヘッダ部分を示しています
<table> <tr> <th>姓名</th> ... </tr> ... </table> -
表のプロパティ
多くの場合、後にCSSで設定され、実際の開発で使用されていません。
| プロパティ名 | プロパティ値 | 説明 |
|---|---|---|
align |
左、中央、右 | 周囲の要素にテーブルの所定の配向相対 |
border |
1または「」 | テーブルセルの規定は、境界線を持っているかどうか、デフォルト値は「」何の国境ではありません |
cellpadding |
ピクセル値 | セルの内容とフレームとの間の所定のギャップ距離、デフォルトのピクセル |
cellspacing |
ピクセル値 | セル間に所定の隙間、デフォルトのピクセル2 |
width |
ピクセルまたはパーセンテージ | 所定の用紙の幅 |
- テーブルの構造タグ
表が非常に長い場合、より良好な細胞の意味を表現するために、テーブルは、テーブル本体とに分割し、ヘッドは二つの部分を形成することができます。THEADで表される頭部領域、TBODYは、ボディ領域を表します。
-
セルの結合
特殊なケースでは、複数のセルがセルに結合され
-
マージされたセルの方法
- 銀行間組み合わせ：ROWSPANは=「マージされたセルの数。」
- =「マージされたセルの数を。」COLSPAN：クロス列をマージ
-
標的細胞
- 銀行間：標的細胞のための最上側
- 一番左の標的細胞用：列にわたって
-
マージされたセルをステップ
-
インターバンクを決定または列にわたって
-
書き込み、標的細胞を探す：次のような結合されたセルの合併=数、
<td colspan = "3"></td>- 余分なセルを削除します
-
-
3.9リスト]タブ
フォームは、データリストを表示するために使用されることが最大の特徴は、整然とであるので、レイアウトに使用されています。順不同リストを分け、リスト、およびカスタムリストを命じました。
3.9.1順不同リスト
（做导航栏什么的一般用无序列表）
<ul></ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，列表项用<li>标签定义。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注意：
- 无序列表各个表项之间没有顺序级别之分。
<ul></ul>中只能嵌套<li></li>，但是<li></li>中可以容纳所有元素。- 无序列表会带有自己的样式属性，但在实际使用时，通过CSS来设置。
3.9.2 有序列表
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
...
</ol>
注意事项和无序列表基本一致，在实际开发中使用并不多。
3.9.3 自定义列表
使用场景：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>
<dt>联系方式</dt>
<dd>微信</dd>
<dd>QQ</dd>
</dl>
注意：
<dl></dl>里面只能包含<dt></dt>和<dd></dd>- dt 和 dd 没有个数限制
3.10 表单标签
表单的目的是为了收集用户信息。
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
-
表单域
包含表单元素的区域，在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递。<form>会把它范围内的表单元素提交给服务器。<form action = "url地址" method = "提交方式" name = "表单名称"> 各种表单元素控件 </form>常用属性：
属性 属性值 作用 action url地址 用于指定接收并处理表单数据的服务器程序的url地址。 method get/post 用于设置表单数据的提交方式。 name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域。
-
表单控件（表单元素）
<input>表单元素
-
type属性值：
属性值 描述 button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） checkbox 复选框 file 定义输入字段和"浏览"按钮，供文件上传 hidden 定义隐藏的输入字段 image 图像形式的提交按钮 password 密码字段，该字段中的字符被掩码 radio 单选按钮 reset 重置按钮，会清除表单中的所有数据 submit 提交按钮，会把表单数据发送到服务器 text 单行的输入字段，可在其中输入文本，默认宽度为20个字符 -
除 type 属性外，
<input>标签还有其他很多属性，常用属性如下：属性 属性值 描述 name 自定义 定义input元素的名称 value 自定义 规定input元素的值 checked checked 规定此input元素首次加载时应当被选中 maxlength 正整数 规定输入字段中的字符的最大长度 注意：
- name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。
- name 表单元素的名字，要求 单选按钮和复选框都要有想同的 name 值
<label>标签
为 input 元素定义标签，用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点（光标）转到或者选择到对应的表单元素上，用来增加用户体验。
<label for = "sex">男</label>
<input type = "radio" name = "sex" id = "sex" />
核心：<label>标签的 for 属性要与相关元素的 id 属性相同。
<select>下拉表单元素
**使用场景：**有多个选择项并且想要节约页面空间。
<form>
籍贯：
<select name = "jiguan">
<option>广东</option>
<option selected = "selected">湖南</option>
<option>浙江</option>
...
</select>
</form>
注意：
<select>中至少包含一对<option>- 在
<option>中定义 selected = “selected” 时，选项变为默认选项
<textarea>表单元素
**使用场景：**当输入内容较多的情况下，可以使用<textarea>标签，常见于留言板、评论。
<textarea rows = "3" cols = "20" name = "pinglun">
文本内容
</textarea>
- 通过
<textarea>标签可以轻松地创建多行文本输入框 - cols = “每行中的字符数” ，rows = “显示的行数”，但在实际开发中不会使用，都是用CSS来改变大小
三、HTML中的注释和特殊字符
- 注释
<!--注释语句-->
-
特殊字符
记住三个，其余的自行查阅：
特殊字符 描述 字符的代码 空格符 < 小于号 <> 大于号 >
四、查阅文档
www.w3school.com.cn
https://developer.mozilla.org/zh-CN