• 前端入门

    前端学习

    """ wwwh what why where how
1、html: 页面架构
2、css: 页面布局
3、javascript: 页面交互
4、jquery: js的工具包
5、bootstrap: 快速页面搭建的框架

前端：写网页 - 用户能看到一切交互页面 - 网页、app、小程序...
"""

    HTML

    """
1、什么是html：超文本标记语言
	超文本：文本、图片、音频、视频、超链接
	标记：符号 - 标签 - 没有逻辑
	
2、组成：转义字符、指令、标签
3、目的：完成页面架构的搭建 - 用什么标签、完成什么样的标签嵌套关系
"""
    第一个页面
    <!--注释：doctype 必须出现在页面的最上方，规定该文档采用的html版本类型 -->
<!doctype html>
<!--html语言不区分大小写-->

<!--页面标签：包含所有页面内容，只有head与body两个子标签-->
<html>
    <!--头标签：样式、脚本、后勤操作：页面编码、页面标签标题图标-->
    <head>
        <title>第一个页面</title>
        <meta charset="utf-8">
        <style></style>
        <script></script>
    </head>
    <!--体标签：页面显示内容存放区域、样式、脚本-->
    <body>
        你好，html &nbsp;&nbsp;&nbsp;&nbsp; 这是我的第一个页面
        <style></style>
        <script></script>
    </body>
</html>
    指令
    """
指令：被<>包裹，以!开头 - 
	注释：<!-- --> 
	文档类型：<!doctype>
"""
    转义字符
    """
转义字符：被 & ; 包裹，内容为特殊的字母或数字组成
	<: &lt;
	>: &gt;
	空格：&nbsp;
	版权：&copy;
"""
    标签
    """
标签：被<>包裹，以字母开头，可以包含数字和减号-
	系统标签：h1~h6 p span div i b a img hr br table form input
	自定义标签：满足合法命名的所有标签

注释：html语言中，系统建议只使用系统标签，不建议使用自定义标签
"""

    常用标签

    基础
    <!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>
    标签的分类
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标签的分类</title>
</head>
<body>
    <h1>标签的分类</h1>
    <hr>
    <!-- 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 -->
    <!-- / 代表标签的结尾，但是单标签可以省略 -->
    <div></div>
    <hr />

    <!--3、简单和组合标签-->
    <!--组合：ul>li table>tr>td|th form>input -->
</body>
</html>

    w3c页面架构分析

    <!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导读
    """
1、csss是什么：级联样式表 （Cascading Style Sheet）
2、css属于标记语言，没有逻辑
3、css是完成页面 样式(张什么样) 与 布局(标签位置)

4、学习的内容：
	css如何控制html标签 - 建立联系 - css选择器
	css可以控制哪些样式(样式与布局)
	css如何导入到html文件中

5、学习目的：
	完成页面的样式
"""
    css三种引入方式
    <!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引入直接的优先级
    <!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基础选择器

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

    div*3 按tab键会出现三个div标签

    ul>li*3 按tab键之后会出现一个ul标签内嵌套三个li标签

    p{内容}*3 按tab键后出现三个

    内容

    (tr>td{内容}*3)*2 按下tab键之后会生成一个二行三列的列表
  • 相关阅读:
    2-Rsync备份-全网备份
    1-Rsync备份-备份概述
    复杂声明学习总结
    EasyExcel的用法
    listvue
    解决Error: Cannot find module 'node-sass'问题
    Webpack
    babel的使用
    nodejs的使用
    vue入门
  • 原文地址：https://www.cnblogs.com/zhoajiahao/p/11267882.html
Copyright © 2020-2023  润新知