1.ウェブサイトの情報ページ
1.1要件分析：
当社は、ウェブサイトのアウトリーチの導入を必要とするなど、同社の主な事業は、同社の開発の歴史は、同社のスローガンとを説明します
1.2技術的な分析：
HTMLの概要：
HTML：ハイパーテキストマークアップ言語HTML
ハイパー：通常のテキスト機能よりも強力な、あなたは様々なスタイルを追加することができます
マークアップ言語：タグ<キーワード>のセットで記述されるコンテンツは、解釈するブラウザによって行われます。
<h1>静夜诗</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>地上鞋两双,</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>なぜHTMLを学びます：
生命力、今日のレッスン、ビートの妹は家に帰るしません。
HTML主な役割：
基本的なページデザイン、HTML5
HTML構文仕様
<!--
1. 上面是一个文档声明
2. 根标签 html
3. html文件主要包含两部分. 头部分和体部分
头部分 : 主要是用来放置一些页面信息
体部分 : 主要来放置我们的HTML页面内容
4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成
5. 标签不区分大小写, 官方建议使用小写
-->
分析ステップ1.3：
- タイトルを要求
- 水平分割ライン
- 四の段落
- 最初の段落は、赤いフォントが必要です
達成するために、1.4のコード：
<html>
<head>
<meta charset="UTF-8">
<title>网站信息页面</title>
</head>
<body>
<!--
1. 公司简介 需要标题
2. 水平分割线
3. 四个段落
4. 第一个段落字体需要红色
-->
<h3>公司简介</h3>
<p>
一直以来，腾讯科技以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
</body>
</html>
1.5拡張コンテンツ
B：太字
I：イタリック
強い：大胆な、意味タグ付き
em: 斜体, 带语义
2.サイトのイメージ
2.1要件分析：
通常、当社のウェブサイトでは、以下のことを示す、ロゴ画像を表示する必要があります
2.2テクニカル分析
IMGタグ：
共通の属性;
幅：幅
高さ：高さ
SRC：指定したファイル・パス
ALT：プロンプト故障の映像コンテンツをロードするために
ステップの2.3分析
2.4コードの実装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
常用属性:
src : 指定图片路径
width : 指定图片宽度
height : 图片高度
alt : 文件加载失败时的提示信息
-->
<img src="../img/美女22.jpg" width="500px" alt="这张图片可能加载问题" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--在网页中显示图片-->
<img src="../img/logo2.png" width="30%"/>
<img src="../image/header.jpg" width="30%" />
</body>
</html>2.5拡張 - ファイルパス
- 相対パス
./ 代表的是当前路径
../ 代表的上一级路径
../../ 上上一级路径3.ウェブサイトのリンクページ
3.1要求分析
当社のウェブサイトでは、リンクは、通常、会社のウェブサイトの友だちが表示されます
- Baiduの
- 新浪微博
- プログラマのダーク馬
3.2テクニカル分析
タグリスト：
順不同リスト：UL
タイプ：小さな円、ドット、小さな立方体
順序付きリスト：オール
タイプ：1、A、I、
開始：指定開始インデックスがあります
ステップ3.3分析
3.4コードの実装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
1.使用无序列表
百合网
世纪家园
珍爱网
非诚勿扰
-->
<body>
<ul>
<li><a href="http://www.baihe.com" target="_blank">百合网</a></li>
<li><a href="http://www.jiayuan.com">世纪家园</a></li>
<li>珍爱网</li>
<li>非诚勿扰</li>
</ul>
</body>
</html>3.5拡張コンテンツ
指定されたWebサイトにジャンプするリンクをクリックし
たハイパーリンクタグの
共通属性：
HREF：指定にアドレスにジャンプするためのリンク
は、ネットワークアドレスを追加する必要がある場合に、HTTPプロトコル、
このウェブサイトにアクセスする際、HTMLファイルは、ファイル・パスに直接書き込むことができます
対象：どのようにオープン
_self：デフォルト開き、現在のウィンドウで開きます
_blank：ページから新しいタブを開くには
朝の要約：
-
サイト情報ケース
-
フォント、フォントタグ
- 色：色
- サイズ：サイズ1〜7
- 顔：フォントを変更します
- p個の段落タグ
- タイトルタグ時間：1-6
- ラップBR
- 時間の地平線
- 太字B
- 私はイタリック
- 強い：セマンティックを含む太字
- EM：斜体のセマンティックを含みます
-
-
ウェブサイトのフォトケース
-
imgタグ
- SRC：指定した画像のパス
- 幅：幅
- 高さ：高さ
- ALT：画像ロードエラーメッセージ
-
相対パス：
- ./電流パスを表します
- パスの代わりに../
- 上のパスの代わりに../../
-
-
リンク：
-
UL：順不同リスト
- タイプ：
-
オール：順序付きリスト
- タイプ：スタイル
- 開始：開始インデックスを
- 李：リスト項目
-
ハイパーリンクタグ
- HREF：リンクアドレスにアクセスするには
- ターゲット：オープン
-
-
家
-
表ラベル
- ボーダー：境界線を指定します
- 幅：幅
- 高さ：高さ
- BGCOLOR：背景色
- ALIGN：アラインメント
- TRタグ
-
TDタグ
- COLSPAN：クロス列操作
- ROWSPAN：銀行間の操作
- マージテーブルセル
- ネストテーブル
-
4.ホーム
4.1要求分析：
示すように、製品マニュアル、完全なモールのホームページ、ディスプレイによると：
4.2技術的な分析：
表タグテーブル
タグテーブル：
共通属性：
BGCOLOR：背景色
幅：幅
高さ：高さを
揃える：のアラインメント
TRタグ
、TDタグ
セルの結合：
COLSPAN：クロス列操作
ROWSPAN：銀行間の操作は
注意してください：銀行間または列間の操作の後、削除される格子縞の必要性から占有しました
ネストされたテーブル：
TDでテーブルに入れ子にすることができます
ステップの4.3分析
- 8行の表を作成します
- パートI：ロゴ部分：の3つのネストした表の行
- パートII：ナビゲーション部：5つのハイパーリンクを置きます
- パートIII：図回転
- パートIV：ネストされたリストグリッド3列7
- パートV：直接絵を置きます
- パートVI：パートIVのコピー
- パートVII：画像を配置します
- パートVIIIは：ハイパーリンクの束を置きます
4.4コードの実装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1. 创建一个8行一列的表格
2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图
5. 第四部分: 嵌套一个三行7列表格
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接
-->
<table width="100%" >
<!--第一部份: LOGO部分: 嵌套一个一行三列的表格-->
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="../img/logo2.png" />
</td>
<td>
<img src="../image/header.jpg" />
</td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--第二部分: 导航栏部分 : 放置5个超链接-->
<tr bgcolor="black">
<td height="50px">
<a href="#"><font color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">香烟酒水</font></a>
</td>
</tr>
<!--第三部分: 轮播图 -->
<tr>
<td>
<img src="../img/1.jpg" width="100%" />
</td>
</tr>
<!--第四部分: 嵌套一个三行7列表格-->
<tr>
<td>
<table width="100%" height="500px">
<tr>
<td colspan="7">
<h3>最新商品<img src="../img/title2.jpg"></h3>
</td>
</tr>
<tr align="center">
<!--左边大图的-->
<td rowspan="2" width="206px" height="480px">
<img src="../products/hao/big01.jpg" />
</td>
<td colspan="3" height="240px">
<img src="../products/hao/middle01.jpg" width="100%" height="100%" />
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
</tr>
<tr align="center">
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第五部分: 直接放一张图片-->
<tr>
<td>
<img src="../products/hao/ad.jpg" width="100%" />
</td>
</tr>
<!--第六部分: 抄第四部分的-->
<tr>
<td>
<table width="100%" height="500px">
<tr>
<td colspan="7">
<h3>热门商品<img src="../img/title2.jpg"></h3>
</td>
</tr>
<tr align="center">
<!--左边大图的-->
<td rowspan="2" width="206px" height="480px">
<img src="../products/hao/big01.jpg" />
</td>
<td colspan="3" height="240px">
<img src="../products/hao/middle01.jpg" width="100%" height="100%" />
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
</tr>
<tr align="center">
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$998</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第七部分: 放置一张图片-->
<tr>
<td>
<img src="../image/footer.jpg" width="100%" />
</td>
</tr>
<!--第八部分: 放一堆超链接-->
<tr>
<td align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br />
Copyright © 2005-2016 传智商城 版权所有
</td>
</tr>
</table>
</body>
</html>
ウェブサイトの登録ページ：
5.1要件分析：
HTMLページ、図に示す表示を準備します。
5.2技術的な分析：
-
FORMタグ
表单标签 action : 直接提交的地址 method : get 方式 默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k post 方式 会将参数封装在请求体中, 没有这样的限制 input : type: 指定输入项的类型 text : 文本 password : 密码框 radio : 单选按钮 checkbox : 复选框 file : 上传文件 submit : 提交按钮 button : 普通按钮 reset : 重置按钮 hidden : 隐藏域 date : 日期类型 tel : 手机号 number : 只允许输入数字 placeholder : 指定默认的提示信息 name : 在表单提交的时候,当作参数的名称 id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它 textarea : 文本域, 可以输入一段文本 cols : 指定宽度 rows : 指定的是高度 select : 下拉列表 option : 选择项ステップ分析：
- ロゴ部分
- ナビゲーションバー
- 登録部
- フッターイメージ
- 免責事項について
達成するために、5.3のコード：
<form action="注册入门案例.html">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="5">会员注册</font> USER REGISTER</td>
</tr>
<tr>
<td>用户名:</td>
<td>
<input type="text" placeholder="请输入用户名"/>
</td>
</tr>
<tr>
<td>密 码:</td>
<td>
<input type="password" placeholder="请输入密码"/>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" placeholder="请再次输入密码"/>
</td>
</tr>
<tr>
<td>email:</td>
<td>
<input type="text" placeholder="请输入邮箱"/>
</td>
</tr>
<tr>
<td>姓名:</td>
<td>
<input type="text" placeholder="请输入真实姓名"/>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女
<input type="radio" name="sex" /> 妖
</td>
</tr>
<tr>
<td>出生日期:</td>
<td>
<input type="date" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>6.ウェブサイトの背景ページ表示
6.1要件分析：
我々はすでに我々は、ユーザーが購入した後、私たちの製品情報だけでなく、商品分類を編集するためのページを必要とするだけでなく、ページ順の管理、その後、家庭用商品陳列を行っています
6.2テクニカル分析
フレームタグ：
フレームセット
注：使用フレームセット本体を削除する必要がありますが、それ以外の問題のページがあるでしょう
フレーム
常用属性:SRC：HTMLファイルのパスの導入
フレームワークを指定した名前：名前
ステップ6.3分析
6.4コードの実装
スプレッド
ジャンプのフレームをクリック
一般的に使用されるキーボードショートカット
Ctrl + D 删除光标当前所在的行
Ctrl + Shift + R 复制当前行到下一行
Ctrl + Enter 将光标移动到下一行
Ctrl + Shift + Enter 将光标定位在上一行
Ctrl + Shift + / 注释当前行
Ctrl + R 运行当前网页/刷新当前网页