一, HTML介绍
HTML（ハイパーテキストマークアップ言語）HTMLは、ウェブ学習プログラムは、最も重要で最も基本的な部分です。
HTML言語は、自動的にブラウザが解釈することができます。
最新バージョンのHTML5.0、一般的に使用されるバージョンXHTML1.0は、ブラウザの実行、プレーンテキストファイルによって解釈しました。
xhtml（拡張HTML）XHTML1.0は、HTMLよりも厳格HTML4.01アップグレード版である、表現型のラベルを削除しました。
二、HTMLの基本構造
HTML5の基本的な構造：
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>网页标题</ TITLE>
</ HEAD>
<BODY>
</ BODY>
</ HTML>
XHTML1.0基本構造（推奨フレームワークはHTML5を使用しているが、しかし、古いブラウザが広まっているので、マスターXHTML1.0フレームワークに必要）：
<！DOCTYPE HTML PUBLIC " - // W3C // DTD XHTML 1.0過渡// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTMLのxmlns = "HTTP ：//www.w3.org/1999/xhtml」XML：LANG = "EN">
<HEAD>
<META HTTP-当量= "Content-Typeの"コンテンツ= "text / htmlの;のcharset = UTF-8">
<タイトル>ドキュメント</ TITLE>
</ HEAD>
<BODY>
</ BODY>
</ HTML>
XHTML1.0宣言文書構造、3がありtransitional、（移行） strict（厳格な）、 frameset（フレーム タイプ）、ブラウザはDTDの種類を解決するためにインストールされます。
DTD、略して文書型定義は、文法マークアップ言語、または（X）HTMLでのタイプを定義するために使用されるXML文書のルールのセットです。
ブラウザは、文法規則は、文書の解析に使用するかを決定、文書DTD仕様の種類に応じて判断されます。
第三に、コーディング標準
1.すべてのタグは、単一のマーカー/最後の直接の使用を、対応する終了タグを持っている必要があります。
2.すべてのタグの要素と属性の名前は小文字でなければなりません。
3.すべての属性は引用符「」引用符で囲む必要があります。
HTML5が、ノルムはリラックスしてきましたが、厳格な良い習慣を開発するために、標準化されたXHTML書き込みコードを使用することをお勧めします。
四、HTMLタグの構文解析されました
1、ヘッドマークhead
title：ページタイトル
meta次のように補助情報フラグは、一般的に使用され、ブラウザにいくつかの情報を渡します。
ページの文字コードを指定します。
<メタ文字セット= "UTF-8">
リフレッシュのページ：
<META HTTP-当量= "リフレッシュ" コンテンツ= "5は、http：//www.163.com" />
キーワードページ：
<メタ名=「キーワード」コンテンツ=「コンピュータ、ロボット、スマート」/>
ウェブサイトの説明：
<メタ名=「説明」コンテンツ=「ネットワーク上のページ」/>
そして、モバイル開発に関連します：
<メタ名=「ビューポート」コンテンツ=「幅=デバイス幅、初期スケール= 1、最大スケール= 1、ユーザスケーラブル= NO」/>
2、文書マークのボディbody
htmlタグは、選択原则も知られている皮膚を、セマンティック選択の観点からではなく：html的语义化。
3 、文書構造タグ
1）タイトルタグ
<h1>到<h6>以下の点に注意して使用するキーワード（タイトル）を表します！
<h1>これは、最も重要な表し<h6>比較的少なく、そのため、この減少に応じて、適切な配置がキーワードの代表を。
2）改行と段落
<p>：段落
<br />：ラップ
<br>タグ元の行と現在のラインと強制的に中断され、別の行が、新しい行は、同じ特性を残るように、すなわち、元の段落の同じ行に属する新しい行、<p>マーカーときに新しい段落から別のラインフィード。
3）divとspan
divこれは、箱やコンテナを表し、
spanいかなる特定の意味は、一般的なスタイルを適用するために使用されていません
<hr />4） ： 分割線
4、ワードマーク
<b>：太字
<strong>：ストレス
bそして、strongの違いは、前者は、物理的な要素である表しのみ太字、論理要素強調手段である、ということである<b>だけで、XHTML、HTMLタグであり<strong>、後者はより良い互換性。
<i>：斜体
<em>：セカンダリが強調しました
私たちは、限り、我々は、例えば、参考のために、我々はの大部分を使用することができ、に従ってセマンティックタグを使用すると、次の表に、テキストマーク部分を見ることができる<blockquote>コードで、ラベルを<code>ラベル、略語の<abbr>ラベルなど。
| ワードマーク | セマンティック |
| <BLOCKQUOTE> | ロング引用しました |
| <Q> | 短い引用 |
| <略称> | 略語 |
| <アドレス> | 著者の連絡先情報 |
| <前> | 整形済みテキスト、およびプログラムコードを使用 |
| <コード> | コンピュータコードテキストの定義 |
| <デル> | 削除テキスト |
| <サブ> | 上つき |
| <SUP> | 添字 |
5<a> ：ハイパーリンクタグ
<ahref="链接位置"title="链接描述"target="目标">リンクテキスト</a>の
1）使用する電子メールのリンク：
<a href="mailto:[email protected]">メール送信する</a>
2）ページには、アンカーをリンク：
上部の<a href="#top">このページの先頭へ</a>の<divのid = "トップ">リンク</ div>
3）リンクマウスのヒントを高めるために：
<atitle="点击查看胡悦的详细信息">を表示する</a>
4）理解したリンクは、さまざまな方法を開きます。
<a href="" target="_top/_self/_blank">する</a>
図6に示すように、絶対パス、相対パス
相対パス：ファイルの現在位置から開始して、絶対パス：サイトのルートディレクトリからのパスは、先頭に「/」を開始しました。
。現在のディレクトリを表します 。。の代わりにAディレクトリ
7img ：イメージタグ
<IMG SRC = "画像位置" ALT = "画像の説明" 幅= "幅" 高さ= "高さ" />
8、データリストマーク
1）UL、OL、李
<OL>
<LI> A </ LI> 1.A
<LI> B / LI> 2.B
<LI> C </ LI> 3.C
</ OL>
<ul>
<li>A</li> ● A
<li>B</li> ● B
<li>C</li> ● C
</ul>
2）dl、dt、dd
<dl>
<dt>计算机</dt> 计算机
<dd>用来计算的仪器 ... ...</dd> 用来计算的仪器... ...
<dt>显示器</dt> 显示器
<dd>以视觉方式显示信息的装置 ... ...</dd> 以视觉方式显示信息的装置 ... ...
</dl>
9、表格标记
<table width="200" border="1">
<caption>表格标题</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>12010101</td>
<td>胡悦</td>
<td>女</td>
</tr>
</tbody>
</table>
合并单元格演示：
水平合并(colspan=合并单元格数)
<table border="1">
<tr>
<td colspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
垂直合并（rowspan=合并的单元格数）
<table border="1">
<tr>
<td rowspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
ul：无序列表，li子元素显示为默认的黑色圆点，也可通过参数自定义列表的符号，常用于新闻列表展示。
ol：有序列表，可以在列表前增加序号，如1，2，3，4；适用于排行榜。
dl：自定义列表，可以包括标题及内容，可适合用制作风箱结构。
table：表格，适合于超过两行以上的数据呈现。
10、转义字符
| 文本字符 | html字符 |
| 空格 | |
| < | < |
| > | > |
| " | " |
| & | & |
11、注释
<!-- 注释内容 -->
12、表单
1）表单标记
<form action="表单提交的处理程序地址" method="表单提交方式(post/get)" name="表单名称"></form>
form元素将所有的表单包含起来，也相应于表单的作用域。
get和post提交方式的区别：get请求把表单的数据显式地放在URL中,并且对长度和数据值编码有所限制.post请求把表单数据放在HTTP请求体中,并且没有长度限制。
2）文本框
<input type="text" name="控件名称" value="文本框输入值" placeholder="提示信息" disabled readonly required auotfocus />
3）密码框
<input type="password" name="控件名称" placeholder="提示信息"/>
4）单选按钮：同一组单选按钮使用同一命名
<input type="radio" name="控件名称" value="控件值" checked />
5）复选按钮
<input type="checkbox" name="控件名称" value="控件值" checked />
6）下拉列表
<select name="控件名称" multiple="multiple" size="数值">
<option value="控件值" selected>选项</option>
</select>
7）多行文本框
<textarea name="控件名称" cols="列数" rows="行数"></textarea>
8）隐藏控件
<input type="hidden" name="控件名称" value="控件值" />
9）普通按钮
<input type="button" value="按钮文字" /> <button type="button">按钮文字</button>
10）发送按钮
<input type="submit" value="按钮文字" /> <button type="submit">按钮文字</button>
11）重置按钮
<input type="reset" value="按钮文字"> <button type="reset">按钮文字</button>
表单实例：
<form action="" method="post">
<fieldset>
<legend>表单演示</legend>
<p>
<label for="username">姓名：</label><input type="text" name="username" id="username" placeholder="姓名" required="required" />
</p>
<p>
<label for="pwd">密码：</label><input type="password" name="pwd" id="pwd" placeholder="密码" />
</p>
<p>
性别：
<label><input type="radio" name="sex" value="1" checked="checked"/>男</label>
<label><input type="radio" name="sex" value="0" />女</label>
</p>
<p>
爱好：
<label><input type="checkbox" name="basketball" value="basketball" />篮球</label>
<label><input type="checkbox" name="football" value="football" />足球</label>
</p>
<p>
<label for="bloodtype">血型：</label>
<select name="bloodtype" id="bloodtype">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="AB">AB型</option>
<option value="O">O型</option>
</select>
</p>
<p>
<label for="intro">介绍</label>
<textarea name="intro" cols="30" rows="3" id="intro"></textarea>
</p>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="button" value="自定义按钮" />
</fieldset>
</form>
13、框架网页：将浏览器窗口分解为多个小窗口，每个小窗口均可以显示各自的网页
<frameset rows="" cols="">：框架网页集，rows为横向分隔，cols为纵向分隔，值可以是具体数值也可以是百分比，注意frameset标记是和body标记同级的标记，不能将frameset标记包含在body标记中，否则将无法看到框架网页的效果。
<frame name="" scr="" />：指定每一个小窗口的名称和链接的网页，窗口的名称可以用于超级链接的target属性。
水平分隔两个窗口，每个窗口各占50%
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>框架窗口</title>
</head>
<frameset rows="50%,*">
<frame src="http://www.baidu.com" />
<frame src="http://www.bing.com" />
</frameset>
</html>
复杂框架网页的制作，复杂的框架网页实际上就是frameset标记的嵌套，主要是要搞清楚，是先横向分割还是纵向分隔，然后在子窗口中再次分隔。
框架网页中，超级链接的指定窗口打开。
如果有如下的框架网页：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>框架窗口</title>
</head>
<frameset rows="100,*">
<frame src="nav.html" name="nav" />
<frame src="a.html" name="content" />
</frameset>
</html>
我们希望上面的窗口是导航，下面的窗口来显示内容，那么上面导航窗口的超级链接就应该这样写（nav.html）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
</head>
<body>
<ul>
<li><a href="a.html" target="content">a文件</a></li>
<li><a href="b.html" target="content">b文件</a></li>
<li><a href="c.html" target="content">c文件</a></li>
</ul>
</body>
</html>
内嵌框架<iframe>：可以在一个浏览器窗口种同时显式多个页面文档。
<iframe src="url" width="宽度" height="高度"></iframe>
提示：可以把说明的文本放置在<iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
以上内容为我很厉害的老师的总结。