最初の週の要約
2021.1.11
- Web標準の3層構造：フレーム（HTMLフレーム）、パフォーマンス（cssの外観スタイル）、動作（javascriptの相互作用）。
- ヘッダーコードの意味：
<!DOCTYPE html >
<!-- 按照html 5 版本规范解析 -->
<html lang="en">
<!-- 语言英文 -->
<head>
<meta charset="UTF-8">
<!-- 字符集编码的存储解析方式 -->
<title>Document</title>
- ラベル：ダブルラベル、シングルラベル;
- 並べ替えタグ：h1〜h6見出しタグ、p段落タグ、divブロックタグ、スパンインラインタグ、hr（単一）分割行タグ、br（単一）改行タグ。
- テキスト形式のラベル：太字の強い、取り消し線のデル、斜体のem、下線付きのイン。
- 画像タグ：
<h1>科比·布莱恩特</h1>
<img src="科比.jpg"/>
<h1>带有alt替换文本</h1>
<img src="科比1.jpg" alt="科比湖人黄色球衣"/>
<h1>带有title提示文本</h1>
<img src="科比.jpg" title="科比斯台普斯中心"/>
<h1>修改图片大小，宽度width,高度height，边框border</h1>
<img src="科比.jpg" title="科比斯台普斯中心" width="1000" border="10"/>
- リンクラベル：
<h1>外部链接：</h1>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.bilibili.com">哔哩哔哩</a>
<h1>内部链接：</h1>
<a href="demo.html" target="_blank">科比比</a>
<h1>空链接：</h1>
<a href="#">2021</a>
<h1>图像链接：</h1>
<a href="http://www.baidu.com" target="_blank"><img src="baidu.jpg"/></a>
- パス：相対パス（上位レベル、同じレベル、下位レベルの画像の参照）、絶対パス
<img src="詹姆斯.jpg"/>
<!-- 上一级路径用../ ,有几个上级用几个../-->
<img src="../詹姆斯.jpg"/>
<!-- 绝对的网络地址 -->
<img src="https://i0.hdslb.com/bfs/archive/63377ed8bdd05ce5d305cef8d3ec77bc5c7cf617.png"/>
- 拡張コンテンツ：
（1）ベースの単一のラベルを設定することができ、全体的なラベルの開いた状態を頭の中でそれを書くために、有料の注意を<base target="_blank">
（2）照準点の位置：<a href="#1">居民供热换热站运行全部正常</a><br />するために注意を払うを＃追加し、<h2 style="color: blue" id="1">居民供热换热站运行全部正常</h2>に注意を払うをするために、ID有効です
（ 3）特殊ラベルpre：preテキストコンテンツのフォーマットはWebページに直接表示されます。つまり、preの改行が効果的です。 - 特殊文字：スペース-＆nbsp; <-＆lt;>-＆gt;
2021.1.12
- テーブルとその属性：行trと各行のセル置換に注意してください。特にtdはテーブルの最初の列です。キャプションはテーブルのタイトルを設定できます。cellspacingはセルとセルの境界線の間の間隔を指します。 ;セルパディングは、セルの内容とセルの境界線の間の距離を指します。
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="30">
<caption>小说排行榜</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
</tr>
- テーブル構造：thead、tbody、tfootを使用してテーブル構造を設定し、右クリックしてページを確認します。
- セルの結合：3つのステップ
（1）最初に、結合する最初のセルを見つけます;
（2）行または列のどちらで結合するかを指定しますcolspan（row）/ rowspan（column）= "結合するセルの数";
（ 3）マージされた冗長セルを削除します。
<table border="1" cellspacing="0" width="500" height="100">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td rowspan="2">30</td>
</tr>
<tr>
<td colspan="2">李四</td>
<!-- <td>男</td> -->
<!-- <td>25</td> -->
</tr>
- リスト：順序付きリストol、順序なしリストul、カスタムリストdl;
- フォーム：
入力：
（1）タイプ値：テキストボックステキスト、パスワードボックスパスワード、ラジオボタンridio、チェックボックスチェックボックス、共通ボタンボタン、送信ボタン送信、リセットボタンリセット、画像ボタン：img（src付き）、ファイルドメイン：ファイル（ローカルファイルボタンを選択）
（2）値値：テキストボックスはデフォルトの表示コンテンツを示し、ボタンはボタンコンテンツを示します
（3）名前値：バックエンドとのドッキング、入力データの分類が容易
（4）チェック済み= "checked"は、デフォルトで選択されていることを意味します
<p>用户名：
<input type="text" value="请输入用户名" name="username"><br/>
密码：<input type="password" name="password"/></p>
<p>性别：
男<input type="radio" name="sex"/>
女<input type="radio" name="sex" checked="checked"/>
爱好：
打篮球<input type="checkbox" name="hobby"/>
跑步<input type="checkbox" name="hobby"/>
敲代码<input type="checkbox" name="hobby"/></p>
<!-- button必须有value值才能显示 -->
<p><input type="button" value="获取短信验证码" name="sex"/>
<input type="button" />
<input type="submit" value="获取短信验证码" />
<input type="reset" value="重置所填" />
<input type="image" src="images/微信登录.png" />
ラベル：
<h2>label标签用法：</h2>
<h2>1.label直接包含表单</h2>
<label>用户名：<input type="text" /></label>
<h2>2.通过for和id来控制</h2>
<label for="nc">昵称：</label><input type="text" id="nc" />
textarea：テキスト領域、ユーザーメッセージ、ボックスサイズは可変
<p>用户留言：
<textarea></textarea>
</p>
選択：複数のオプションを含むドロップダウンリスト
<select>
<option>--请选择省份--</option>
<option selected="selected">北京</option>
<option>山西</option>
<option>河南</option>
フォームフィールド：フォームをフレーム化するための大きなフレーム
<!-- 表单域 -->
<!-- get可换做post -->
<form action="" method="get">
用户名：<input type="text" name="username" /><br />
密码：<input type="password" name="pass" /><br />
<input type="submit">
<input type="reset">
</form>
2021.1.13
- cssタグセレクター：div {}
- クラスセレクター：
<div class="hellow">喜欢男生还是女生</div>
.hellow {
width: 100px;
height: 100px;
background-color: red;
- 複数のクラス名セレクター：
<div class="box hellow">貂蝉</div>
.box {
width: 150px;
height: 100px;
font-size: 30px;
}
.red {
color: grey;
}
- IDセレクター：
<div id="pink">科比·布莱恩特</div>
#pink {
color: yellow;
background-color: purple;
}
- ワイルドカードセレクター：
* {
font-size: 50px;
}
- フォント属性：
font:font-style font-weight font-size font-family;フォント：傾斜スタイル、フォントの太さ（数字を直接）、フォントサイズ（ピクセル）、フォント（複合属性、順序を逆にすることはできません）font: italic 700 30px "Microsoft yahei"; - テキスト属性：
color: rgb(255,0,0);色色：事前定義された色値deeppink、skyblue; 16進表記＃d617c6（2つのペア、赤、緑、青）; RGBコード赤（255、0、0）。
text-align: center;对齐文本；/* center,left,right*/
text-decoration: underline;装饰文本/* line-through，overline，none*/
text-indent:2em;
line-height: 50px;/* 行间距：文本高度，上间距和下间距*/
- スタイルシート：インラインスタイルシート、内部スタイルシート、外部スタイルシート
<!-- 内部样式表：<style></style>中放样式，结构与样式相分离，适用于样式较少的情况-->
<!-- 行内样式表：直接在<div></div>中放简单样式，只能控制该标签-->
<!-- 外部样式表：适用于样式较多的情况，完全实现结构与样式相分离，另建一个单独的CSS样式文件 -->
<!-- 外部样式表 样式文件的引入-->
<link rel="stylesheet" href="style.css">
2021.1.14
- emmet構文：
`<!-- div*10+tab键 -->`
`<!-- ul>li+tab键 包含关系 -->`
<!-- div+p+tab键 兄弟关系 -->
<!-- .类名/#id名，可为div直接加类名（默认为div） -->
<!-- p.a/li#grey,可为其他类型的标签加类名 -->
<!-- .demo$*3表示同时添加多个按序递增的类名 $表示自增符号-->
<!-- div{
}表示默认在标签中添加文字 -->
<!-- div{
}*2表示添加多个相同标签内容 -->
<!-- div{
$}*3 -->
- Emmetはすぐにcssスタイルを生成します：w100、h200;
- 複合セレクター：
/* 后代选择器 空格隔开，选择所有被包含的子选择器（儿子、孙子、干儿子（同名选择器的子集） */
ol li {
color: pink;
/* 用类名区分 */
.nav li a {
color: green;
}
/* 子元素选择器，用>隔开，只能选择亲儿子 */
.choose>li {
color: #6868;
}
}
- ユニオンセレクター：
/* 并集选择器，用逗号隔开，适用于所有类型的选择器（后代、子元素） */
div,p,.she li {
text-align: center;
}
- 疑似クラスセレクター：
/* 链接伪类选择器,用冒号隔开,注意LVHA的顺序不能颠倒*/
/* a:link选择所有未被访问的链接 */
/* a:visited选择所有已被访问的链接 */
/* a:hover选择鼠标位于其上的链接 */
/* a:active选择鼠标点击还未弹起的链接 */
/* focus伪类选择器，为选中的表单加样式 */
- css表示スタイル：ブロック要素;インライン要素;インラインブロック要素;
<!-- html标签可分为块元素，行内元素 -->
<!-- 块元素，常见块元素有h1~h6,p,div(最典型),ul,ol,li等 -->
<!-- 特点：
1.独占一行
2.高度宽度外边距内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可放行内元素或块级元素 -->
<!-- 注意：
1.文字类元素内不能放块级元素
2.p h标签（文字类标签）里面不放块级元素 -->
<!-- 行内元素，常见行内元素a,strong,b,i,del,s,ins,u,span等 -->
<!-- 特点：
1.相邻元素一行显示
2.宽和高直接设置是无效的
3.默认宽度为它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素 -->
<!-- 注意：
1.链接中不能再放链接
2.a中可以放块级元素 -->
<!-- 行内块元素：常见的img,input,td同时具有块元素和行内元素的特点 -->
<!-- 特点：
1.同一行显示，中间有间隙
2.默认为其本身内容的宽度和高度
3.高度、宽度、外边距及内边距都可以控制 -->
- 表示モード変換：
display: block; display: inline; display: inline-block;
2021.1.15
- cssの背景：
div {
width: 1000px;
height: 2000px;
/* 背景颜色不设置相当于默认transparent(透明) */
background-color: pink;
/* 背景图片，网页中logo或者超大的图片或者小的装饰图片 */
/* 注意图片如果太大，与盒子宽高比例不符合的话是不会显示的 */
background-image: url(images/zhu.jpg);
/* 背景平铺 默认平铺*/
/* background-repeat: repeat; */
background-repeat: no-repeat;
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
/* 背景颜色和背景图片可以同时添加，但图片会压盖图片 */
/* 背景图片的位置 */
/* 1.如果是方位名词与顺序无关 */
/*
/* 垂直top,center,bottom
水平right,center,left */
/* background-position: center right; */
/* background-position: right center; */
/* 如果只指定一个参数，那么另一个参数你默认垂直居中 */
/* background-position: top; */
/* 2.如果是精确单位 第一个一定是x,第二个一定是y */
/* background-position: 10px 20px; */
/* 只指定一个值，一定是x坐标 y默认垂直居中*/
/* background-position: 10px; */
/* 3.混合单位，精确单位和方位名词混合使用，第一个一定是x */
background-position: 40px center;
}
- 修正された背景：
/* 背景固定：scroll（滚动）/fixed（固定） 默认是随文字滚动*/
background-attachment: fixed;
- 半透明の背景：
/* 背景颜色半透明写法 */
background: rgba(0, 0, 0, 0.3);
- 背景属性の複合書き込み：
/* 背景属性的复合写法 */
background: pink url(images/rongyao1.jpg) no-repeat center top 14px fixed;
2021.1.17
- cssの3つの特性：カスケード、継承、優先度。
- カスケード：近接性の原理、前者は属性が競合すると上書きされ、使用条件：同じセレクター属性が競合します
- 継承：親業界から継承され、テキスト関連のスタイルのみを継承できます。これにより、コードが簡素化されます。
- 行の高さの継承：
body {
font: 12px/1.5 'Microsoft yahei';
}
div {
/* 子元素继承了body的行高1.5 即当前文字大小的1.5倍 1.5*20=30*/
font-size: 20px;
}
- 優先度：！important>インラインスタイルstyle = ""> IDセレクター>クラスセレクター、疑似クラスセレクター>要素セレクター>継承または*注：親に！importantがありますが、継承の優先度は0です。独自の色
- 複合セレクターの優先順位：
/* 复合选择器会有权重叠加的效果 */
ul li {
/* 权重为0,0,0,0,1+0,0,0,0,1=0,0,0,0,2 */
color: purple;
}
li {
/* 权重为0,0,0,1 */
color: orange;
}