• 前端入门


    编辑器

    pycharm:JetBrains 捷克的软件开发公司
    sublime:程序员Jon Skinner开发的文本编辑器
    Hbuild:数字天堂
    webstrom:JetBrains 捷克的软件开发公司旗下的JavaScript开发工具
    atom:Atom 是 Github专门为程序员推出的一个跨平台文本编辑器
    

    前端

    #概念
    #广义:用户能看见并且交互的界面展示
    #狭义:运行在浏览器上的页面
    
    #学习的语言
    #htlm5=>(h5架构 + css3布局 +javascript逻辑) 相当于 一个房子的架构,装饰,然后让它具有商业价值
    #为什么使用html5?
    #功能强大,可以进行 网页编写 | 移动端应用编写 |(客户端编写)
    
    #前后台分离的开发方式 =>通过接口完成数据交互 =>后台可以千千万,前端就是h5
    

    HTML: 超文本标记语言

    #学习html的目的:完成页面的结构的搭建,负责的是页面的结构
    #html属于标记语言,标记语言非编程语言,不具备编程语言具备的程序逻辑
    
    #html三大组成:
    '''
    标签:被尖括号包裹,由字母开头包含的合法字符,可以被解释器解析的标记.
    指令:被尖括号包裹,由!开头的标记。eg:设置文档类型:<!doctype html>  注释:<!-- -->
    转义字符:被&与;包裹的特殊字母组合或#开头的十进制数。eg:< >   实际开发中几乎不用了解
    '''
    

    标签

    #what
    #概念:被<>包裹由字母开头,可以结合合法字符(-|数字),能被浏览器解析的特殊字符
    
    #why
    #标签具有特定的功能:换行 | 设置页面的字符编码集 | 控制文字体颜色和大小 | 加载图片与视频
    <br> #换行
    <meta charset='utf-8'> #设置页面字符编码集
    <div style="color: #89ff43;font-size: 300px"></div> #控制文字颜色和大小
    
    #注意
    #标签都有头有尾,用/来标识标签的尾
    

    页面

    <!-- html的注释: 一个html页面有且只有一个页面模板 -->
    
    <!doctype html>
    <html>
        <head>
            <!-- 字符编码 -->
            <meta charset="utf-8">
            <!-- 页面标签的标题 -->
            <title>页面</title>
            <!-- 内部或外部的css样式 | js脚本 | 页面其他设置 -->
        </head>
        <body>
            <!-- 所有页面显示的内容: 文本 | 图片 | 视频 | 超链接 | 表格 | 表单 ... -->
            <!-- js脚本 -->
        </body>
    </html>
    

    常用标签

    # 学习的目的: 使用标签的语义与功能 | 完成页面架构的搭建(div)
    
    # 1.div: "三无", 无语义,无功能,无样式,可以随意使用,完成页面架构的搭建
    
    # 2.h1: 页面总标题, 代表页面'整体含义', 出现一次即可
    	<!--标题标签 h1-h6-->
        <!--h1标签: 页面基本上都会出现, 有且只要一个, 用来标识整个页面的标题 -->
        <h1>一级标题</h1>
        <h3>三级标题</h3>
    
    # 3.列表: ul>li*5 #重点 常用无序列表项
    	ul>li{无序列表项}*5
        按tab键得到如下结果:
        <ul>
            <li>无序列表项</li>
            <li>无序列表项</li>
            <li>无序列表项</li>
            <li>无序列表项</li>
            <li>无序列表项</li>
        </ul>
        
        ol>li{有序列表项}*5
        <ol start="10" type="I">
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>
    
    # 4.p: 段落标签  <p>段落</p>
    
    # 5.img: 图片标签, src(数据源), alt(资源加载失败的文本提示)
        <img src="https://ps.ssl.qhimg.com/dm/196_123_/t0120cdcea452f2bbff.jpg"
           	 alt="海贼王"
             title="给我个面子"
             width="200">  #等比设置宽高
    
    # 6.a: 超链接标签, href(超链接地址), target(转跳方式_self|_blank)
    	#有四种状态:没访问的状态,正要访问的状态,悬浮状态,访问后的状态
    	<!--超链接标签-->
        <!--href: 链接的地址-->
        <!--target: _self|_blank -->  #_self:自身页面转跳 _blank:新开页面转跳
        <!--title: 鼠标悬浮提示, 可以给任意标签添加-->
        <a href="https://www.baidu.com" target="_blank" title="鼠标悬浮提示">前往百度</a>
        #https 安全性能比http高,但是访问速度降低
        
        <!--锚点: 快速定位到页面指定位置-->
        <a name="top" id="top"></a>
        <div style="height: 2000px"></div>
        <a href="#top">返回Top</a>
        <!--总结: 通过a的name或普通标签的id设置锚点,再通过另一个a的href属性,值为#加锚点名,转跳到设置的锚点位-->
    
    # 7.常用的文本类标签: span i b
        <span>文本标签</span>
        <i>斜体</i><em>斜体方式强调</em>
        <b>加粗</b><strong>加粗方式强调</strong>
        <sup>上角标</sup><sub>下角标</sub>
    #了解
      #表格
        #<hr>分割线
        #<pre>原文本</pre>
    

    CSS: 样式层级表

    # 学习CSS的目的: 完成页面布局(还原设计稿)
    
    # 三大组成部分
    '''
    选择器:由标签、类、id单独或组合出现 #重点
    作用域:一组大括号包含的区域
    样式块:满足css连接语法的众多样式  #多条样式,字体多大,什么颜色等
    '''
    

    选择器

    # what: 用来将css与html建立关联的桥梁, 称之为css选择器
    
    # why: 将原来出现在标签内部的样式分离开来, 可以用一个个选择器加以管理, 达到页面与样式的解耦合目的, 从而提高代码的复用性与开发效率
    
    # 本质: 就是页面标签的某种名字
    

    css三种引入方式

    # 1.行间式
    '''
    i)写在标签的style属性中
    ii)属性 与 属性值 间用:赋值
    iii)属性 与 属性 之间用;隔开
    eg:<div style=" 100px;height: 100px;background-color: red"></div>
    '''
    
    # 2.内联式
    '''
    i)写在style标签中(style标签一般出现在head标签中)
        <style>
            p{
                 150px;
                height: 120px;
                background-color: greenyellow;#这三个样式组成样式快
            }  #{}就是作用域 p是选择器
        </style>
    ii)用选择器与html建立连接
    iii)样式块书写在作用域内
    	<p></p>
    '''
    
    # 3.外联式
    '''
    i)css样式完全与html文件脱离, 形成单独的.css文件, 样式书写在.css文件中
    
    h3 {
         80px;
        height: 80px;
        background-color: darkgreen;
        border-radius: 50%;
    }
    
    ii)用选择器与html建立连接
    iii)样式块书写在作用域内
    iv)要将.css文件与.html文件建立关联  => <link rel="stylesheet" href="css文件的相对路径">
    	#rel:样式层级表 href:数据源
    '''
    
    # 注: 选择器的应用场景在 内联式 和 外联式
    
    '''
    总结:
    开发: 最常用的是外联式, 内联与行间辅助样式布局
    测试: 内联式, 可读性最强, 且解耦有复用性
    行间的应用场景: 最简单粗暴, js操作的样式都是行间式
    '''
    

      

  • 相关阅读:
    基于node.js+socket.io+html5实现的斗地主游戏(1)概述
    [javascript]switchTab:仿腾讯首页Tab栏切换js插件
    [js]利用闭包向post回调函数传参数
    [CSS]利用伪元素实现一些特殊图形 from baidu校招
    [javascript]模块化&命名污染—from 编程精解
    [随手记]2014前端面试题解
    [IE bug] ajax请求 304解决方案
    [java]基于UDP的Socket通信Demo
    [JQuery]ScrollMe滚动特效插件
    java.lang.OutOfMemoryError及解决方案
  • 原文地址:https://www.cnblogs.com/lizeqian1994/p/10275196.html
Copyright © 2020-2023  润新知