フロントエンドの基礎

フロントエンドとは何ですか


所有用户能看到的界面:前端
广义上：
    网页、pc端的应用exe、移动端应用app、微信小程序、手环的时间界面
狭义上(我们将要学习的):
    html5为基础的前端：网页、app、微信小程序

フロントエンドの内容を知るには

# 前端三剑客(编程语言)
1、html5：页面结构框架
    标签 => 学会标签的嵌套结构
2、css3：页面布局与样式
3、javaScript：页面的交互逻辑

# 工具
jquery：js的工具包
bootstrap：快速搭建页面的框架

HTML5

HTML5（HTML）：HTML（ハイパーテキストマークアップ言語）、5はバージョン番号、以前のバージョンともHTML4、XHTMLであります
- ハイパー：私たちはHTMLにキャリアとして、あなたもそうで画像、オーディオ、ビデオを運ぶことができたときに、テキストを表示することができることに加えて。
- マークアップ言語：無文法、構文がないロジックは、上から下に説明していない、全く正しいか間違っているが存在しない、唯一の知識と分裂の影響かどうか、わかりません。
HTML言語の開発ファイルには、ブラウザでユーザに提示フロントエンドインタフェースを実行すること、.htmlの接尾辞です。
注意：.htmlのファイルはテキスト自体がスーパーを作る主効果、オーディオ、ビデオ、この解決機能を持つブラウザの表示のための理由、である（担体として、ブラウザで直接開くこともベースのブラウザをダブルクリックすることができますメッセージテキストを解消することができます）

HTML5の構成

文字をエスケープ（理解）
命令
ラベル（フォーカス）

目的

フレームワークが構築するための完了ページ、ラベルの種類、タグの完全な入れ子の関係の種類（難易度）

三のhtmlの知識


指令：<>包裹由!开头
    文档类型指令：<!doctype html> 说明他是h5(h4和xhtml更复杂一些，h5对他们兼容)
    注释：<!-- 注释 -->

转义字符：由 &与;包裹，可以是10进制数字组合，也可以是特殊单词缩写组合(不用记，面向搜索引擎编程)
    &gt; -->  '>'   greater than
    &lt; -->  '<'   less than
    &nbsp; --> ' '
    &copy; --> '©'  版权
    
    
标签：由<>包裹，字母开头，可以结合数字和合法字符的能被浏览器解析的标记  (字母 数字 '-')
    标签有语义：<br> 换行
    标签有作用范围(作用域)：<h1>中间就是标签的作用范围，由标签来控制，具有默认样式</h1>
    标签可以修改内容样式：<xyz style="color: red">000</xyz>

    
# 注意：html大小写不敏感

シングルレーベル：主な機能とコンテンツのない、ターミネータを省略することができます/
デュアルタグ：コンテンツベース、ミドルは、あなたがクリアすることはできません、スコープが含まれていますが、それは明確なラベルエンドでなければなりません

財団

<!--注释：doctype 必须出现在页面的最上方，规定该文档采用的html版本类型 -->
<!DOCTYPE html>

<!-- html：页面根标签,包含所有页面内容
lang：告诉浏览器页面的语言
"zh",中文
'en'是中文,但并不是不能识别中文了,而是告诉浏览器这个页面是英文的,那么有些浏览器就可以提供翻译功能 
'ch'是用来国际化的
默认会和系统同步，所以可以不用自己声明
-->
<html lang="zh">
<!-- head：头标签 - 页面编码、页面标签标题图标、页面样式、页面脚本 -->
<head>
    <!--页面编码-->
    <meta charset="utf-8">
    <!--页面标签标题-->
    <title>标签</title>
    <!--页面样式-->
    <style></style>
    <!--页面脚本-->
    <script></script>
</head>
<!-- body:体标签 - 页面内容、页面脚本、页面样式 -->
<body>
<!-- 用于内容显示的标签全部书写在body中 -->

スクリプト差のページで頭と体：

事前のロジックを完了するために、それは頭の中で記述することができ、スクリプトのボディに、ボディ（ほとんどすべてのボディに）に、ページ構造を依存しますが、ときにすべての論理ページを宣言する必要があり、頭の中にあります一度ロードされ、その後、スクリプト、それの一番下の体に直接記述する必要をロードします。

テキストラベル

<!-- 文本标签 -->
<!-- 标题：h1`h6 -->
<!-- 一般一个页面只出现一次，重点是语义：声明这是该页面的主标题 -->
<h1 id="top">一级标题</h1>  
<h2>二级标题</h2>   <!-- 随便用 -->

<!-- 段落：自带换行，有段落间距 -->
<p>段落</p>
    
<!-- 文本类型标签：不带有换行功能，一般会被p标签所嵌套-->
<!-- span一般用来嵌套其它文本类标签，然后再嵌套在p标签中，用来划分作用域 -->
<span>span标签</span>
<b>加粗标签</b> <!-- 已弃用，但是还是可以使用的 -->
<strong>以加粗方式强调的标签</strong>

<i>斜体标签</i>
<em>以斜体方式强调的标签</em>
<sup>上角标</sup>
<sub>下角标</sub>

[機能]タブ


<!-- 换行标签 浏览器只会把空格或者换行识别成一个四个像素的空白-->
<br>abc
<!-- 分割线标签 -->
<hr>
    
<!-- 超链接标签：target参数：_self当前页面打开  _blank新开空白页打开 _top是覆盖掉最早的历史记录 _parent 是覆盖掉上一个历史记录 -->
    <!-- 网页转跳 -->
<a href="https://www.baidu.com" target="_blank">前往百度</a>

    <!-- 如果不声明协议，则从站内跳转，如果站内没有这个就会报错404 -->
<a href="第一个页面.html" target="_self">第一个页面</a>

    <!-- 本页转跳 -->
<a href="#top">go top</a>   <!-- 需要在需要跳转到的地方也设定一个记号top,比如在顶端 -->

画像のタグ


<!-- 图片标签 -->
<!--src: 图片源-->
<!--alt: 图标加载失败时的文本提示-->
<!--title: 鼠标悬停时的文本提示,可以在所有标签中添加-->
<img title= "哈哈哈" src="https://graph.baidu.com/thumb/466383834,495932018.jpg" alt="美女">

リスト]タブ

<!-- 列表: 无序ul>li 有序ol>li -->
<!--ul>li{选择项}*3-->
<ul>
    <li>选择项</li>
    <li>选择项</li>
    <li>选择项</li>
</ul>
<!--ol>li{第$项}*3-->
<ol>
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</li>
</ol>

表タグ


<!-- 表格标签 -->
<!--border:边框-->
<!--cellpadding：单元格的内边距（文本与标签的间距）-->
<!--cellspacing:单元格的间距，最小为0，
    但是单元格之间是两条线，可以用rules="all" 处理成一条线 -->
<!-- tr: 行 td: 内容单元格 th: 标题单元格 -->
<!-- 在这里设置的是整个表格的数据，单位都是px，也就是像素点，最小是12-->
<table border="1" width="500" height="200" rules="all" cellpadding="10" cellspacing="0">
    <caption>表格标题</caption>
    <thead>
        <!-- 如果想要抢占高度，可以在tr中添加样式，head没有抢高度的能力 -->
        <tr style="height: 80px">
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
    </thead>
    <!-- body抢占高度的优先级最高，想要每一行都平分长度，可以把所有的内容都写到body下面-->
    <tbody>
        <!--(tr>td{单元格}*3)*2-->
        <!--rowspan:合并行-->
        <!--colspan:合并列-->
        <tr>
            <td rowspan="2">单元格</td>
            <td colspan="2">单元格</td>
            <!--<td>单元格</td>-->
        </tr>
        <tr>
            <!--<td>单元格</td>-->
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>表尾表尾</td>
            <td>表尾表尾</td>
            <td>表尾表尾</td>
        </tr>
    </tfoot>
</table>

<!-- 注：head，body，foot可以不写，会自动加上body然后把内容放到body中 -->

FORMタグ

<!-- 表单标签: 完成前后台交互的 - 将前台用户输入的内容或文件提交给后台 -->
<!-- from action: 提交后台的接口地址 method: 提交方式（get:不安全(udp) post:安全(tcp）-->
<form action="">
    <p>
        <!-- name明确才会往后台提交 -->
        <!-- name是键，value是值，当需要用户手动输入值时，就不用自己设定value -->
        <!--type是决定标签的类型本质(input|button)-->
        <!-- placeholder是用户没有输入时的一个提示信息 -->
        <!-- label作为input的文本结束标签，for绑定id -->

        <label for="username">帐号：</label>
        <input id="username" type="text" name="user" placeholder="请输入帐号"> 
    </p>
    <p>
        <label for="password">密码：</label>
        <input id="passwprd" type="password">
    </p>
    <p>
        <!-- hidden：隐藏按钮，但会上传值给后台 -->
        <input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
    </p>
    <p>
        <!--multiple:多选 是布尔类型，赋不赋值都一样，写了就是True -->
        <input type="file" multiple>
    </p>
    <p>
        <!--单选框 name建立联系，checked设定默认值，布尔类型-->
        男<input type="radio" name="gender" checked>
        女<input type="radio" name="gender">
    </p>
    <p>
        <!-- 复选框 可以多选 也可以多个默认值 不需要用户输入的时候，就给一个value交给后台-->
        男<input type="checkbox" name="like" value="male" >
        女<input type="checkbox" name="like" value="female" checked> 
    </p>
    <p>
        <!--选择列表 可以多项选择-->
        <select name="subject" multiple>
            <option value="python">python</option>
            <option value="html5">html5</option>
            <option value="go">go</option>
        </select>
    </p>
    <p>
        <!--文本域 可以通过CSS来控制尺寸大小-->
        <textarea cols="30" rows="10"></textarea>
    </p>
    <p>
        <!--三个按钮 用input的类型来写也是效果一样的-->
        <button type="button">按钮</button>
        <button type="reset">重置</button>
        <button type="submit">提交</button>
    </p>
    <p>
        <!--提交-->
        <input type="submit" value="登录">
    </p>
</form>

<!--页面脚本-->
<script></script>
</body>
</html>

機能分類ラベル

1、是否自带换行
带换行：h1 p div table form tr ul li 
不带换行：span i b a img input button label textarea

2、单双标签
单标签（主功能）：br hr input img link
双标签（主内容）：html head body h1 p span div a label button
 / 代表标签的结尾，但是单标签可以省略
    
3、简单和组合标签
    <!--组合：ul>li table>tr>td|th form>input

常用：
h1~h6
p
b
i
a
img
ul>li
table>tr>th|td
form>input|button|textarea|select>option

span：无语义，高度自定义，不带换行
div：无语义，高度自定义，自带换行

ネストされたルールタグ（キー）

あなたは、このような/ボディやHTMLで書かれた内容などの非標準を、書くとき、遺体は自動的にそうそして、あなたには、いくつかのコンテンツを持っているためのアプリケーションシナリオが下に実行する必要があり、使用中の最後尾の体に適応するのに役立ちますその保険
DIVは、フレーム、連結接合コードを構築するために使用される、各DIVは需要の大きなまたは小さな関数であり、

例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面架构</title>
</head>
<body>
    <!--
    html学习目的：

    1、什么时候用什么标签
        最内层：h1~h6、p、a、img、input
        外层：ul>li、form、table
        架构：div
    -->

    <!--页面头-->
    <div class="header">
        <h1>
            <a href=""></a>
        </h1>
        <form action="">
            <input type="text">
            <button></button>
        </form>
    </div>

    <!--导航栏-->
    <ul class="nav">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </ul>

    <!--页面主体-->
    <div class="main">
        <!--.main-left+.main-center+.main-right-->
        <div class="main-left"></div>
        <div class="main-center">
            <div class="main-box box1">
                <h2>领先的 Web 技术教程 - 全部免费</h2>
                <p>在 W3School，你可以找到你所需要的所有的网站建设教程。</p>
                <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
                <p>
                    <b>从左侧的菜单选择你需要的教程！</b>
                </p>
            </div>

            <div class="main-box box2">
                <img src="" alt="">
                <div>
                    <h2></h2>
                    <p></p>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="main-right"></div>
    </div>

    <!--页面尾部-->
    <div class="footer"></div>
</body>
</html>

CSS

CSSのREVIEW

CSSとは何ですか：カスケーディングスタイルシート（Cascadngスタイルシート）
CSSは、所属のマークアップ言語がないロジックを、
CSSは完全なページのスタイル（ように見える）とレイアウト（タグ位置）であります
学習内容：
- どのようにHTMLのCSSの制御のラベル-接触を確立するために- CSSセレクタ
- どのようなCSSスタイル（スタイルやレイアウト）を制御することができます
- どのようにHTML、CSSへ
目的の学習：
- ページのスタイルを完成さ（ラベルを描画します）
- ページのレイアウト（とそれが表示される場所）を完了

編集者の役割

CSSを導入するには、3つの方法

.クラスを代表して
#IDの代わりに
上記の次の定義をカバーし、同じ名前の繰り返しであれば、最優先、インラインおよびアウトリーチ式のライン、インタプリタ言語の特性、間、および高繰り返し作業だと同程度を、繰り返していない場合
優先順位はもっと注意を払う必要があるので、JSコントロールのスタイルは、スタイル間の線です

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <!--2、内联式-->
    <!--书写位置：head->style标签-->
    <!--优缺点：可读性强，复用性(文件内部复用)，但样式被html页面绑定了，不能提供给其他html页面使用-->
    <style>
        div {
            width: 50px;
            height: 50px;
        }
        .d1 {
            background-color: purple;
        }
        .dd.d2 {
            background-color: pink;
        }
        .d2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

    </style>

    <!--3、外联式 -->
    <!--书写位置：样式在外部css文件中，在html文件中通过link标签引入css文件-->
    <!--css语法：css选择器{样式1:"内容"; 样式2:"内容"...}-->
    <!--html中使用：head->link->外部css文件-->
    <!--优缺点：可读性强,文件级别复用，适合团队开发-->
    <link rel="stylesheet" href="css/样式.css">
</head>
<body>
    <!-- 标签的宽度会适应父级，高度由内容撑开 -->
    <!--1、行间式-->
    <!--书写位置：在标签的style属性中书写样式-->
    <!--优缺点：可读性差，没有复用性，书写直接-->
    <div style="width: 150px; height: 200px; background-color: deeppink;">123</div>

    <div class="dd d1"></div>
    <div class="dd d2"></div>

</body>
</html>

外部CSSファイル

/* css/样式引入.css */
.d1{
    width: 250px;
    height: 250px;
    background-color: blue;
}

CSSの基礎セレクタ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>

        /*优先级：按作用域大小区分，作用域越小优先级越高*/
        /* !important > 行间式 > id > class > 标签 > *
        /*最重要的是class，因为可以多重命名，还可以相同*/
        /*1.通配选择器*/
        * {
            font-size: 30px;
            color: brown;
        }
        /*2.标签选择器*/
        div{
            color: orange;
        }
        span{
            color: hotpink;
        }
        /*3.类选择器：.类名*/
        .aa{
            color: blue;
        }
        /*4.id选择器: #id名 不可重复，但css和html中没有逻辑，写了也没关系，js中则不一样*/
        #bb{
            color: red;
        }


        /*组合使用: 找一个id为bb，class为aa的div*/
        div#bb.aa {
            color: gray;
        }

        /*如果非要超过行间式，可以使用important*/
        /*不建议使用，因为js也改不了，js默认是行间式，除非js也加个important*/
        .aa{
            color: blue!important;
        }

    </style>
</head>
<body>
    <div class="aa" id="bb" style="color: purple">d1</div>
    <div class="aa">d2</div>
    <div>d3</div>
    <span>s1</span>
    <span class="aa">s2</span>
    <span>s3</span>

</body>
</html>

day75フロントエンドの基礎

フロントエンドの基礎

フロントエンドの内容を知るには

HTML5

HTML5の構成

目的

三のhtmlの知識

タグ

財団

テキストラベル

[機能]タブ

画像のタグ

リスト]タブ

表タグ

FORMタグ

機能分類ラベル

ネストされたルールタグ（キー）

CSS

CSSのREVIEW

CSSを導入するには、3つの方法

外部CSSファイル

CSSの基礎セレクタ

おすすめ