フロントエンドコンテンツ:
HTML5:ページアーキテクチャ
CSS3:ページレイアウト
JavaScriptの(フォーカス):ページの相互作用
さらに:
jqueryの(キット):JSツールキット
ブートストラップ(フレームワーク):構築するための高速ページフレームワーク
HTML5
1.html:HTML、テキスト、画像、オーディオ、ビデオ、ハイパーリンクを含みます
キャンバス(マイクロチャネルの小さなゲーム開発プログラム)
2.組成:エスケープ文字、説明書、ラベル
3.目的:構築するためのページフレームワークを完成するために、完全な入れ子の関係をラベルラベルの種類
エスケープ文字
そして、&であり、特殊な文字や数字のパッケージ内容
1.空格:
2.":"
3.&:&
4.<:<
5.>:>
6.版权:©
命令
である<>に包まれました!特殊記号の始まりは、命令と呼ばれます。
1.文档类型:<!doctype html>
2.注释:<!-- -->
タグ
<>文字、数字で始まる、ラップされ、マイナス含んでいてもよいです -
1.系统标签:h1~h6、p、sapn、div、i、p、a、img、hr、br、table、form、input
2.自定义标签:满足合法命名的所有标签
一般的に使用されるタグ
財団
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签</title>
</head>
<body>
<!-- 1、标题:加粗 -->
<!--重点:h1标签的语义:是该页面的主标题-->
<h1 title="这是标题">一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
正文文本 <br>
正文文本
<!--2、段落: 自带换行,有段落间距-->
<p>这是一个段落这是一个段落这是一个段落这是一个段落</p>
<p>这是一个段落这是一个段落这是一个段落这是一个段落</p>
<!--3、换行标签-->
正文文本 <br>
正文文本 <br>
<!--自带换行的文本标签:h1~h6 p -->
<!--4、文本类型标签:不自带换行的文本标签 - span i b -->
<span>span</span>
<span>span</span>
<b>加粗标签</b>
<b>加粗标签</b>
<strong>以加粗作为强调的强调标签</strong>
<strong>以加粗作为强调的强调标签</strong>
<i>斜体标签</i>
<i>斜体标签</i>
<em>以斜体作为强调的强调标签</em>
<em>以斜体作为强调的强调标签</em>
<br>
<span>一般用来嵌套其它文本类标签 上<sup>角标</sup> 下<sub>角标</sub> </span>
<!--5、超链接标签-->
<a href="https://www.baidu.com" target="_blank">前往百度</a>
<br>
<!--6、图片标签-->
<!--title:鼠标悬浮的文本提示-->
<!--alt:img标签资源加载失败-->
<img title="这是二哈" alt="二哈" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2969644141,2516639069&fm=26&gp=0.jpg">
<!--7、列表标签: 无序ul>li 有序ol>li -->
<!--ul>li{第$列}*5-->
<ul>
<li>第1列</li>
<li>第2列</li>
<li>第3列</li>
<li>第4列</li>
<li>第5列</li>
</ul>
<!--8、表格标签 table>tr>th|td -->
<!--tr:行 th:标题单元格 td:普通单元格 -->
<!--border:边框-->
<!--cellspacing:单元格的间距,最小为0,
但是单元格之间是两条线,可以用rules="all" 处理成一条线 -->
<!--cellpadding:单元格的内边距(文本与标签的间距)-->
<table border="1" width="500" height="300" rules="all" cellspacing="0" cellpadding="10">
<caption>表格标题</caption>
<thead>
<tr>
<!--th{标题}*3-->
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<!--(tr>td{单元格}*3)*2-->
<!--rowspan:合并行-->
<!--colspan:合并列-->
<tr>
<td rowspan="2">单元格</td>
<td colspan="2">单元格</td>
</tr>
<tr>
<!--<td>单元格</td>-->
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾表尾</td>
<td>表尾表尾</td>
<td>表尾表尾</td>
</tr>
</tfoot>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
フォーム
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!--1、form的作用:完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->
<form action="">
<p>
<!--label作为input的文本解释标签,for绑定id-->
<!--value属性是表单标签的内容,就是提交给后台的-->
<!--name是提交给后台的key,value是值-->
<!--placeholder是文本占位符-->
<!--type是决定标签的类型本质(input|button)-->
<!--multiple,checked布尔类型属性,不需要写值,multiple多选 checked默认激活-->
<label for="username">账号:</label>
<input id="username" type="text" value="Owen" name="usr">
</p>
<p>
<label for="password">密码:</label>
<input id="password" type="password" placeholder="请输入密码" name="pwd">
</p>
<p>
<input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
</p>
<p>
<input type="file" name="file" multiple>
</p>
<p>
男<input type="radio" value="male" name="sex" checked>
女<input type="radio" value="female" name="sex">
</p>
<p>
男<input type="checkbox" value="male" name="hobby" checked>
女<input type="checkbox" value="female" name="hobby" checked>
哇塞<input type="checkbox" value="other" name="hobby">
</p>
<p>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
</p>
<p>
<textarea cols="30" rows="10"></textarea>
</p>
<p>
<input type="button" value="按钮" />
<input type="reset" value="重置" />
<input type="submit" value="登录" />
</p>
</form>
</body>
</html>
分類および表示
1.ラップですが付属しています:
テープラップ:H1、P、DIV、テーブル、フォーム、TR、UL、李;
ラップなし:SAPN、I、B、IMG、入力、ボタン、ラベル、テキストエリア
2.モノタグ:
単一ラベル(メイン関数):BR、時間、入力、IMG、リンク。
ダイタグ(主コンテンツ):HTML、頭、体、H1、P、スパン、DIV、ラベル、ボタン
エンド/ラベルの代表が、単一のラベルを省略してもよいです
3.タグの組み合わせは:
组合:UL>李、テーブル> TR> TD |目、フォーム>入力
CSS3
何のロジックが存在しない、マークアップ言語である、カスケーディングスタイルシート:CSSとは何ですか
CSSスタイルは、ページのレイアウトを完了しました
コンテンツの学習:htmlタグを制御するためにどのようにCSS
CSSは、さまざまな方法の3種類を紹介しました
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入</title>
<!--2、内联式-->
<!--书写位置:在head标签中的style标签内-->
<!--css语法:css选择器 { 样式1; 样式2; } -->
<!--优缺点: 可读性强,有复用性,样式被html页面绑定了,不能提供给其它html页面使用-->
<style>
h2 {
color: red;
font-size: 100px;
text-align: center;
}
</style>
<!--3、外联式-->
<!--书写位置:在外部css文件中,在html文件中通过link标签引入css文件-->
<!--css语法:css选择器 { 样式1; 样式2; } -->
<!--优缺点: 可读性强,有复用性,适合团队开发(文件级别的复用性)-->
<link rel="stylesheet" href="css/样式引入.css">
</head>
<body>
<!--1、行间式-->
<!--书写位置:在标签的style属性中书写样式-->
<!--优缺点: 可读性差,没有复用性,书写直接-->
<h1 style="color: red; font-size: 100px; text-align: center;">css的引入</h1>
<h1>h1标签</h1>
<h2>h2标签</h2>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h4>h4标签</h4>
</body>
</html>
外部CSSファイル
/* css/样式引入.css */
h3 {
color: green;
}
h4 {
font-size: 50px;
text-align: center;
}
CSSは直接、優先度の3種類を紹介しました
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入</title>\
<!--优先级:
1、内联与外联之间没有优先级区别,由于html属于解释性语言,书写在下方的会覆盖上方的样式
2、行间式的优先级要高于一切
-->
</head>
<body>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h4 style="font-size: 100px">h4标签</h4>
</body>
<style>
h4 {
color: #ff7800;
font-size: 20px;
}
</style>
<link rel="stylesheet" href="css/样式引入.css">
</html>
CSSの基礎セレクタ
優先:!重要>ライン> ID>クラス>タグ>ワイルドカードの間
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css基础选择器</title>
<style>
/*优先级:可以从作用范围来判断 - 作用范围越精确,优先级越高 */
/*1、统配选择器*/
* {
color: pink;
font-size: 12px;
}
/*2、标签选择器*/
h1 {
font-size: 20px;
}
/*3、类选择器*/
.h {
font-size: 30px!important;
}
.h2 {
font-size: 40px;
}
.h.h2 {
font-size: 50px;
}
/*4、id选择器*/
#hhh {
font-size: 100px;
}
/*优先级:!important > 行间式 > id > class > 标签 > 统配 */
</style>
</head>
<body>
<h1 class="h">1标题</h1>
<h2 id="hhh" class="h h2" style="font-size: 12px">2标题</h2>
</body>
</html>