1.ブラウザとカーネル（レンダリングエンジン）
| 主流のブラウザ | カーネル |
|---|---|
| サファリサファリ | webkit |
| クロムグーグルブラウザ | webkit->点滅 |
| オペラ | presto-> webkit->点滅 |
| Firefox | ヤモリ |
| IE Microsoft Internet Explorer | トライデント |
- 国内ブラウザ
QQ、360、UC、猎豹浏览器...
无自主研发内核，基本都是使用webkit、trident 内核改造
2.Webページの構成
结构层 -- HTML
表现层 -- CSS
行为层 -- Javascript
- W3C組織：Web標準を開発するWorld WideWebコンソーシアム
- Web標準（W3C標準）では、Webページの3層構造を分離する必要があります
3、HTMLの最初の知人
1.HTMLの概念
ハイパーテキストマークアップ言語ハイパーテキストマークアップ言語
- ハイパーテキスト：テキストだけでなく、画像、アニメーション、オーディオ、ビデオも運ぶことができます...
- Webページの説明に使用される言語
- プログラミング言語ではなく、マークアップ言語
2.HTMLの基本構文
- 要素タグ全体とタグ間のコンテンツは要素とも呼ばれます
3.HTMLの基本構造
<!DOCTYPE html> -告诉浏览器以html5的标准去解析网页,网页根标签代表网页开始和结束
<head> - 网页头部：通常放页面的元信息
<meta charset="utf-8"> -设置网页的编码方式（字符集）
utf-8: 国际编码（万国码）
gb2312 : 国标，简体中文
gbk : 国标扩，简体+繁体
<title> - 网页标题
4つの一般的に使用されるラベル
1.ラベル分類
| ブロックラベル | インラインラベル |
|---|---|
| 上から下へ、1行だけで | 左から右に水平に並べます |
| デフォルトの幅は親レベルを占め、高さはコンテンツによって引き伸ばされます | デフォルトの幅と高さは両方ともコンテンツでサポートされています |
| 幅と高さを設定でき、すべてのボックスモデル属性を設定できます | 幅と高さは設定できません。水平ボックスモデルの属性（パディング、ボーダー、マージン）は正常に設定でき、垂直ボックスモデルは設定できません。 |
| text-align：centerは有効です | text-align：centerが無効です |
完全な親とは、ボックスコンテンツの実際のコンテンツの幅+左右のパディング+左右の境界線+左右のマージンマージン=親の幅100％を意味します
块级标签
hr 分割线
div 区块、盒子
p 段落
h1-h6 标题
ol 有序列表 type="1/A/a/I/i"
ul 无序列表 type="desc/circle/square"
li 无序列表和有序列表的项目
dl 定义列表
dt 放名词或术语
dd 放描述或者说明
form 表单域
行内标签
span 无语义标签，给一段文字中的指定文本设置特殊样式
i 样式斜体
em 斜体，并且强调
b 样式加粗
strong 加粗并且强调
sub 下标
sup 上标
del 删除文本
| インラインブロックレベルタグ（img、フォーム要素input / textarea / select） |
|---|
| 左から右に、複数のインラインブロックレベルラベルが1行に水平に配置されます |
| 幅と高さを設定でき、すべてのボックスモデル属性を設定できます |
| text-align：centerが無効です |
中央揃え効果1.ブロック要素のインライン要素またはインラインブロックが中央揃えになり、外部ブロック要素がtext-align：centerに設定されます
。2。ブロック要素が親要素の水平方向に中央揃えになり、margin：0autoがブロック要素に設定します。
2.画像imgタグ
<img src="图片路径../ : 返回上一级目录
../../: 返回上两级目录" alt="替换文本" >
3.インライン要素をリンクします
本网站中的页面跳转
<a href="相对路径/目标页面的网址" target="_blank在新窗口中打开/_self : 默认值，当前窗口打开" title="提示文字"> 链接文本 </a>
锚点（锚记）链接 ：跳转到当前页面的指定位置
<h3 id="f1"> ... </h3>
<a href="#f1"> ... </a>
跳转页面同时指定位置：
<a href="./4、链接.html#floor2"> 跳转到链接页面的第2层</a>
5、リスト
1.注文リスト
'1 / A / a / I /i'ol和li属于固定父子标签，ol的直接子标签只能是li
<ol type="A">
<li>张三</li>
<li>
<h3> ... </h3>
<p> ... </p>
</li>
</ol>
2.順不同リスト
'desc (实心圆点)/cricle(空心圆圈)/square(正方形)'
<ul type="circle">
<li>Tom</li>
<li>Jack</li>
<li>Rose</li>
</ul>
3.定義リスト
一般用于解释一些专有名词或者术语说明
<dl>
<dt>放名词或者术语</dt>
<dd>放解释说明</dd>
</dl>
列表符换成图像
list-style-type:none;//去掉圆点
list-style-image: url(images/icon.gif);
6、ウェブページの特別なシンボル
空格
> 大于符号 >
< 小于符号 <
& &符本身 &
© 版权符 ©
® 注册商标 ®
セマンティックセマンティック
セマンティクスとは何ですか？
タイトルのhタグ、段落のpタグ、重要な画像のalt属性など、適切なタグを使用してドキュメントのコンテンツをフォーマットし、置換テキストを追加します-
- 利益？
- cssなしで良好な構造を示すことができます
- チームの開発と保守に役立つ読みやすさを備えています
- ユーザーエクスペリエンスを促進する
- 検索エンジン最適化に最適
8.フォーム
1.フォーム関連のラベル
- table 定义整个表格
- tr 定义一行
- td 定义表格的单元格（标准单元格）
- th 定义表头单元格 （加粗居中）
- caption 定义表格标题
- thead 表格的头
- tbody 表格的主体
- tfoot 表格的底部
> thead\tbody\tfoot 这些标签可以增强表格的语义化，对布局没有影响
<table>
<caption>学生成绩表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>分数</th>
</tr>
<tr>
<td>01</td>
<td>张三</td>
<td>90</td>
</tr>
</table>
2.テーブル関連の属性
<table border="1" cellspacing="0" style="width: 300px;border-collapse:collapse;">
</table>
- borderテーブル全体に境界線を追加します（テーブルとセルには境界線があります）
- border-collapse：collapse;セル間の空白スペースを削除し、隣接する境界線を1つにマージします
- cellspacing = "0"：セル間の空白スペースを削除します
3.セルをマージします
- マージされた列（水平マージ）colspan = "2"
<td colspan="2"> ... </td>
- マージされた行（垂直マージ）rowspan = "2"
<td rowspan="2"> ... </td>
4.テーブルの特徴
- テーブル幅が設定されていない場合、実際の幅はコンテンツによって引き伸ばされます
- テーブルの幅を設定すると、テーブルの列幅は、各列のコンテンツが最も多いセルの比率に従って分散され、行の高さは同じになります。
- セルの幅と高さを設定して、行または列全体の幅と高さを調整することもできます
<tr>
<td width="80">4444</td>
<td width="80">5</td>
<td width="140">6</td>
</tr>
<tr>
<td width="33.33%">4444</td>
<td width="33.33%">5</td>
<td width="33.33%">6</td>
</tr>
ナイン、CSS
カスケードスタイルシート-Webページのスタイルを指定するために使用される言語です
1. 3つのcss導入方法（インライン/インライン/リンク外部導入）
行内样式 ：
<div style="width:100px;height:100px;background-color:red;"></div>
内嵌式 :
<head>
<style>
p{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
link外部引入：
<link rel="stylesheet" href="./style.css" type="text/css">
- rel : 表示目标文件和当前文件的关系 stylesheet 表示样式表
- href : 目标文件的相对路径
- type : "text/css"标记文件类型为 css
- CSSのリンクと@importのインポートスタイルの違い
<style>
<!--该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。-->
@import url("global.css");
@import url(global.css);
@import "global.css";
p{
color:red;}
</style>
| リンク | @インポート |
|---|---|
| リンクはXHTMLタグであり、CSSの読み込みに加えて、RSSなどの他の事項を定義することもできます | CSSカテゴリに属し、CSSのみをロードできます |
| リンクがCSSを参照している場合、ページの読み込みと同時に読み込まれます | ページが完全に読み込まれた後にページを読み込む必要があります |
| リンクはXHTMLタグであり、互換性の問題はありません | CSS2.1で提案されている、下位バージョンのブラウザはサポートしていません |
| Javascriptを使用してDOMを制御し、スタイルを変更することをサポート | サポートしません |
2.セレクター
タグのスタイルを設定するために使用され、セレクターには多くの種類があります（タグ名、ID、クラス、*）
div,p{ ... }
#box{ ... }
.red{ ... }
*{
margin: 0;
padding: 0;
}
3.複合セレクター（子孫、子、並列クラスターグループ、交差セレクター）
.box div{ /* 选择.box标签后代当中所有div标签*/
}
.box>div{ /* 选择.box标签直接子代中所有div标签 */
}
#box,.red,h3,#box p{ /*把以下几个选择器匹配的元素同时选中*/
#box
.red
h3
#box p
}
div.red{ ... } /*选择标签名为div并且类名中包含red这个单词的标签，精准定位 */
10.テキスト関連の属性
1.テキストシリーズ
text-align : left/right/center--文本对齐方式
text-indent : 2em --首行缩进，em : 代表一个字的大小
text-decoration ：none/underline/overline/lint-through--文字修饰
color : 文本颜色
2.フォントシリーズ
フォントの省略属性。順序は自由に変更できません
。設定する必要のない属性は省略できます。少なくともfont-sizeとfont-familyは保持してください。
- フォント省略形のプロパティ
font: font-style font-weight font-size/line-height font-family;
font: italic bold 20px/2 "宋体";
至少要大小、字体
- フォントフォント属性（サイズ、太さ、スタイル、ファミリ）
font-size 字体大小 16px
font-weight 字体加粗
100-300 细
400-500 正常
600-900 加粗
normal 正常
bold 加粗
font-style --字体风格
normal 正常
italic 斜体
font-family --字体系列（族类）
可以设置一个字体或多个字体
多个字体用逗号分隔，浏览器会显示第一个能够识别的字体
font-family: Helvetica Neue,Helvetica,Arial,"宋体",Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
- フォント行の高さ
line-height 字体行高-由上间距、文本高度、下间距组成
取值可以为具体的长度 30px
也可以为font-size的倍数 比如2 代表font-size的两倍
单行文本垂直居中可以设置line-height为盒子的高度
3.その他
设置字符间距：英文字母、中文汉字
letter-spacing:10px; "1 2 3 a b c 汉 字"
设置单词的间距
word-spacing:10px; "world hello ujiuye 汉字 "
鼠标变小手cursor:pointer
4.長さの単位と色の表現
- 単位
px 像素
em 相对单位，代表的是当前元素的font-size值
% 百分比
rem 1rem 等于页面的根元素的font-size值，也就是html标签的font-size
- 色表現
red --英文单词
#000000 --十六进制
rgb(0-255,0-255,0-255) --rgb()模式
rgba(0-255,0-255,0-255,0-1); --rgba()模式-alpha 透明度
11.HTMLフォーム
フォームは、ユーザー情報を収集するためにWebサイトで使用されます
1.フォームフィールド（ブロックレベル）
フォームを指定するために使用される領域を表します。これは、さまざまなフォーム要素を配置するために使用されます。
- フォームフィールドのプロパティ
action: 用来规定表单的提交地址(与后台对接)
method:用来规定表单的提交方式
get : 默认提交方式, 会把表单数据以键值对形式，多组用&拼接在一起，通过地址栏进行传递，安全性不好，因为地址栏可容纳的数据大小有限制的，所以可能造成数据丢失
post : 推荐使用的方法，安全性更好，理论上没有大小限制
<form action="" method="" >
...
</form>
2.フォーム要素（インラインブロック）
- 入力タグ（名前はバックグラウンドで受信され、書き込みます）
<input type="text" name="username"> 普通文本框
<input type="password" name="psd"> 密码框
<input type="radio" name="gender" value="male">单选按钮(name要设置相同才能互斥单选)
<input type="checkbox" name="hobby" value="coding">复选框
<input type="file" name="file"> 文件域
<input type="submit" value="注册"> 提交按钮
<input type="reset" value="清空表单"> 重置按钮
<input type="button" value="普通按钮"> 普通按钮
<input type="image" src="图片路径"> 图片提交按钮，显示图标，变成小手
<input type="hidden" name="hid" value="传数据"> 隐藏域,页面不显示但是可以携带数据
- ドロップダウンリスト
<select name="city">
<option value="aa">AA</option>
<option value="bb">BB</option>
<option value="cc">CC</option>
</select>
- テキストフィールド（複数行のテキスト）
<textarea name="des" cols="30" rows="20"
style="width:100px; height:200px;">
我就是文本域初始显示的值
</textarea>
- cols ： 规定输入文本列数
- rows ： 规定输入文本的行数
3.フォーム要素の属性の説明
1.type用来定义输入框的不同类型
2.name属性用来规定表单字段名，如果不设置这个输入框的内容无法随表单一起提交到后台
- 多个单选按钮想要有互斥效果，name属性值必须相同
3.value用来给表单元素定义值
- 单选按钮(radio)、复选框(checkbox)、下拉列表的选项(option)必须要设置value属性，表示选项所代表的值
- 提交按钮(submit)、重置按钮(reset)、普通按钮(button)设置value属性表示修改按钮上的文字
- 文本框(text)、密码框(password)、隐藏域(hidden)，用value设置默认值
- 文件域flie和textarea不能设置value
4.maxlength="10" 用于规定输入框允许输入的最大字符个数
5.disabled="disabled" 设置表单元素为禁用状态, 不能编辑，也不能被提交
6.readonly="readonly" 设置表单元素为只读状态, 不能编辑，可以被提交
7.checked="checked" 设置单选按钮和复选框默认选中
8.selected="selected" 设置下拉列表的选项默认选中
9.size="2" 规定下拉表默认显示项目的个数