Front-end basis

What is the front-end


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

To learn the contents of the front end

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

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

HTML5

HTML5 (HTML): HTML (HyperText Mark-up Language), 5 is the version number, the previous version and also html4 xhtml
- Hypertext: In addition to being able to display text, when we as a carrier to html, you can also carry pictures, audio, video and so on.
- Markup Language: no grammar, no syntax logic, explained from top to bottom, there is no right or wrong, only the knowledge and do not know, whether the effect of the division.
html language development files are .html suffix, making running front-end interface presented to the user in the browser.
Note: .html file can double-click to open directly in the browser, also based browser as the carrier (the text itself is the main effect, the reason for the display of audio, video, browser with this resolution function, which makes super the message text can be resolved)

Composition of HTML5

Escape character (understand)
instruction
Label (focus)

purpose

Completion page framework to build, what kind of label, tag complete what kind of nesting relationship (difficulty)

Three html knowledge


指令：<>包裹由!开头
    文档类型指令：<!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大小写不敏感

label

Single Label: no content to the main function, can be omitted terminator/
Dual Tags: content-based, middle contains a scope, you can not clear, but it must be clear label end

basis

<!--注释：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中 -->

head and body in the pages of the script difference:

To complete the advance logic, it is in the head, depending page structure, on the body (almost all of them in the body), in the body of the script can be written in the head, but need to declare when all logical pages Once loaded, and then load the script, so no need to write directly on the bottom body on it.

Text labels

<!-- 文本标签 -->
<!-- 标题：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>

Features tab


<!-- 换行标签 浏览器只会把空格或者换行识别成一个四个像素的空白-->
<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,比如在顶端 -->

Picture tags


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

List tab

<!-- 列表: 无序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>

Table tags


<!-- 表格标签 -->
<!--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 tag

<!-- 表单标签: 完成前后台交互的 - 将前台用户输入的内容或文件提交给后台 -->
<!-- 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>

Functional classification label

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：无语义，高度自定义，自带换行

Nested rule tag (Key)

When you write non-standard, such as the contents written in the / body and html, the remains will automatically help you to adjust to the rearmost body during use, application scenarios for you to have some content must perform on the bottom, then so it Insurance
Div used to build the frame, the coupling junction code, each div is a function, large or small, of Demand

Examples

<!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

What is the css: Cascading Style Sheets (Cascadng Style Sheet)
css belongs markup language , no logic
css is complete page style (looks like) and layout (tag position)
Learning content:
- How html css control label - to establish contact - css selectors
- What css styles (styles and layout) can be controlled
- How html css into the
Learning Objective:
- Complete the style of the page (Draw the label)
- Complete the layout of the page (and the place where it appears on)

The role of editor

Three ways to introduce css

.On behalf of class
#On behalf of id
Between the line of the highest priority, inline and outreach formula if repetition of the same name, then the characteristics of interpreted languages, covering the following definitions above, if not repeat the same degree, who's who and high repetition work
js control styles are line between style, so priorities need to pay more attention

<!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>

External css file

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

css foundation selector

<!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 front-end basis

Front-end basis

To learn the contents of the front end

HTML5

Composition of HTML5

purpose

Three html knowledge

label

basis

Text labels

Features tab

Picture tags

List tab

Table tags

Form tag

Functional classification label

Nested rule tag (Key)

css

css REVIEW

Three ways to introduce css

External css file

css foundation selector

Guess you like