W3C 標準: Web ページは主に 3 つの部分で構成されます
構造: HTML
プレゼンテーション: CSS
動作: JavaScript
HTML
HTML: ハイパーテキスト マークアップ言語
- ハイパーテキスト: テキストの制限を超え、通常のテキストよりも強力です。テキスト情報に加えて、画像、音声、ビデオ、その他のコンテンツも定義できます
- マークアップ言語: タグで構成される言語
HTML は言語であり、すべての Web ページは HTML 言語で記述され、ブラウザ上で実行され、HTML タグはブラウザによって解析されます。
タグの使用
フォームタブ
テーブル: テーブルを定義します
- border: テーブルの境界線の幅を指定します。
- width : テーブルの幅を指定します
- セル間隔: セル間のスペースを指定します。
tr: 行を定義します
- align: テーブル行のコンテンツの配置を定義します。
- th: ヘッダーのタイトルを定義します
- td: セルを定義します
- rowspan: セルがまたがることができる行数を指定します。
- Colspan: セルがまたがることができる列の数を指定します。
例 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签运用</title>
</head>
<body>
<font face="宋体">
<center>
<table border="1" cellspacing="0">
<tr> <th colspan="7" ><i>河马小学</i></th> </tr>
<tr align="center">
<th colspan="2"></th>
<th width="8%">星期一</th>
<th width="8%">星期二</th>
<th width="8%">星期三</th>
<th width="8%">星期四</th>
<th width="8%">星期五</th>
</tr>
<tr align="center">
<td rowspan="4" width="10%">上午</td>
<td width="8%">早自习</td>
<td>英语</td>
<td>语文</td>
<td >数学</td>
<td>生物</td>
<td>生物</td>
</tr>
<tr align="center">
<td>第一节</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>生物</td>
<td>生物</td>
</tr>
<tr align="center">
<td>第二节</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>生物</td>
<td>生物</td>
</tr>
<tr align="center">
<td>第三节</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr align="center">
<th colspan="7">午休</th>
</tr>
<tr align="center">
<td rowspan="3">下午</td>
<td>第四节</td>
<td>政治</td>
<td>地理</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr align="center">
<td>第五节</td>
<td>政治</td>
<td>地理</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr align="center">
<td>第六节</td>
<td>政治</td>
<td>地理</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
</table>
</center>
</font>
</body>
</html>
例 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body >
<center>
<table border="1" cellspacing="0" width="500">
<tr>
<th>序号</th>
<th>logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/三只松鼠.png" width="60" height="50"></td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/优衣库.png"width="60" height="50"></td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/小米.png"width="60" height="50"></td>
<td>小米</td>
<td>小米科技有限公司</td>
</tr>
</table>
</center>
</body>
</html>
ハイパーリンク
< a > は、別のリソースへのリンクに使用されるハイパーリンクを定義します。
href: リソースにアクセスするための URL を指定します
target: リソースを開く方法を指定します
- _self: デフォルト値、現在のページで開きます
- _blank: 空白のページで開きます
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>河马去搬砖</title>
</head>
<body background="d.jpg">
<center>
<a href="https://www.csdn.net/" target="_self">
<font size="7" color="lightpink" face="bradley hand itc"> 河马去搬砖</font>
</a>
</center>
</body>
</html>
自分でパッケージ化するとデスクトップに表示されるのでcsdn学習に入りやすくなります
リストラベル
- OL 順序付きリスト
- UL 順序なしリスト
- li はリスト項目を定義します
- タイプ: 箇条書きを設定します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol type="">
<li>咖啡</li>
<li>牛奶</li>
<li>奶茶</li>
</ol>
<br>
<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>奶茶</li>
</ul>
</body>
</html>
フォームラベル
フォーム: Web ページでは、主にデータ収集機能を担当します。 < form > タグを使用してフォームを定義します。
form: フォームを定義します。
-
アクション: フォーム送信時のフォームデータの送信先、URLを指定します。
-
method : フォームデータの送信に使用されるメソッドを指定します
-
- get: ブラウザはフォームのアクション URL の直後にデータを添付します。サイズは 4KB に制限されます。
-
- -post: ブラウザはデータを HTTP リクエスト メッセージ本文に挿入します。無制限のサイズ
フォーム項目 (要素): さまざまなタイプの入力要素、ドロップダウン リスト、テキスト フィールドなど。
入力フォーム項目は、type 属性を通じて入力タイプを制御します。
- チェックボックス チェックボックス
- ラジオはラジオボタンを定義します
- パスワードはパスワードを定義します
- リセット リセット
- 送信する 送信する
- ボタン ボタン
- 隠れた
- ドロップダウン リストの選択オプションはリスト項目を定義します
- textarea テキストフィールド
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单项</title>
</head>
<body>
<!--
action 指明表单数据提交的url
表单数据要想被提交 必须指定其属性
method 表单提交的方式
get 默认值
请求的参数会拼接在url后面
url长度有限制 4KB 请求参数有限
post
请求的参数会在http协议的请求体中
请求参数无限制
-->
<!-- #代表 将数据提交到当前页面-->
<form action="#" method="post">
<!-- name表示提交内容的名字
value用来设置默认值-->
<label for="username">用户名:</label>
<input type="text" name="username" id="username"/> <br/>
<label for="phone">手机号:</label>
<input type="text" name="phone" id="phone"/><br/>
<label for="password"> 密 码:</label>
<input type="password" name="password" id="password"/><br/>
<label for="yanZhen">验证码:</label>
<input type="text" name="yanZhen" id="yanZhen"/><br/>
<label for="login">注册:</label>
<input type="submit" value="注册" id="login"/><br/>
<!--单选按钮 不加属性 数据都一样的 必须加属性 把value的值提交到服务端-->
性别：
<!--name 属性的值必须相同，才会有单选的效果-->
<input type="radio" name="gender" value="1" id="male"/>
<label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"/>
<label for="female">女</label>
<br/>
爱好：
<input type="checkbox" name="hobby" value="1" id="11"/> <label for="11">旅游</label>
<input type="checkbox" name="hobby" value="2" id="22"/> <label for="22">电影</label>
<input type="checkbox" name="hobby" value="3" id="33"/> <label for="33">游戏</label>
<br/>
头像:
<input type="file" value="选择文件" />
<br/>
<input type="reset" value="重置"/>
<input type="button" value="一个普通的按钮"/>
<br/>
当前城市：
<input type=""/>
<select name="city">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<br>
<br>
个人描述：
<textarea cols="20" rows="5"></textarea>
</form>
</body>
</html>
レイアウトタブ
< div > : HTML ドキュメント内の領域を定義します。Web ページをレイアウトするために CSS とともによく使用されます。
<span>: インライン要素の結合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局</title>
</head>
<body background="d.jpg">
<div>王大傻</div>
<div>李小聪</div>
<span>王大傻</span>
<span>李小聪</span>
</body>
</html>
div タグが 1 行ではなく、span タグが同じ行にあることがわかります。
CSS
css (カスケード スタイル シート) は Web ページのパフォーマンスを制御する言語です
インポート方法
CSS を HTML にインポートするには、次の 3 つの方法があります。
インライン スタイル:
インライン スタイルでは、プレゼンテーションとコンテンツが混在するため、スタイル シートの利点の多くが失われます。たとえば、要素にスタイルを 1 回だけ適用する必要がある場合など、このアプローチは慎重に使用してください。
インライン スタイルを使用するには、関連するタグで style (style) 属性を使用する必要があります。Style 属性には、任意の CSS プロパティを含めることができます。
<div style="color: red">Hello CSS~</div>
内部スタイル:
個々のドキュメントで特定のスタイルが必要な場合は、内部スタイル シートを使用する必要があります。次のように <style> タグを使用して、ドキュメントのヘッダーで内部スタイル シートを定義できます。
<style type="text/css">
div{
color: red;
}
</style>
外部スタイル:
外部スタイル シートは、多くのページにスタイルを適用する必要がある場合に最適です。外部スタイルシートの場合、1つのファイルを変更するだけでサイト全体の見た目を変えることができます。各ページは、<link> タグを使用してスタイルシートにリンクします。<link> タグは <head> ヘッダー内にあります。
<!-- stylesheet:定义一个外部加载的样式表-->
<link rel="stylesheet" href="demo.css">
demo.css:
ブラウザは、demo.css ファイルからスタイル宣言を読み取り、それに応じてドキュメントをフォーマットします。
外部スタイル シートは、任意のテキスト エディタで編集できます。ファイルには HTML タグを含めることはできません。スタイル シートは .css 拡張子を付けて保存する必要があります。以下はスタイルシート ファイルの例です。
div{
color: red;
}
コードの練習:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导入方式</title>
<!-- css代码和html代码结合 -->
<!-- 内部样式： -->
<style>
p{
color: red;
}
</style>
<!-- 外部样式 stylesheet:定义一个外部加载的样式表 -->
<link href="../css/css导入.css" rel="stylesheet">
</head>
<body>
<!-- 方式一 内联样式 -->
<div style="color: red;">hello</div>
<!-- 内部样式： -->
<p>hello css</p>
<!-- 外部样式 -->
<span>hello css css</span>
</body>
</html>
外部からインポートされた CSS ファイル:
span{
color: red;
}
セレクタ
セレクターはスタイルを設定する要素 (タグ) を選択するもので、
各ステートメントは属性と値で構成されます。
分類：
- 要素セレクター
-
- 要素名 {色: 赤;}
- IDセレクター
-
- #id 属性値 {color: red;}
- クラスセレクター
-
- .class 属性値 {color: red;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 选择器是选择需要选取设置样式的元素 -->
<style>
/* 元素选择器*/
div{
color: #006400;
font-size:35px;
}
/* id选择器*/
#name{
color: black;
}
/* 类选择器*/
.cls{
color: aquamarine;
}
</style>
</head>
<body>
<div>css1</div>
<div id="name">css2</div>
<span class="cls">span</span>
</body>
</html>
