前端开发入门
本文最后更新于 371 天前,其中的信息可能已经有所发展或是发生改变。

前端概述

前端开发是指构建和设计用户界面的过程,使用户能够与网站或应用程序进行交互。

下面我们会详细讲解一下web前端的基础内容,当然前端开发不只有web前端开发,还有app前端开发等等

 

前端开发工具

如果想要真正开发好一个应用,那趁手的开发工具肯定是必不可少的,下面我们使用的开发工具是vscode,当然用记事本也是可以写的(编程语言的本质就是一串遵循了某种规则的文本),就不教你们下载了,网上有很多教程

html(超文本标记语言)

大家都用过wored吧,html与wored的使用方法很像,只不过html要求你使用标签来完成,一个标签的基本格式是<h1>内容</h1>,这种需要将内容包含在里面才能产生作用的标签叫做闭合标签,像<img src=”>这种不需要内容即可产生效果的标签就是开标签,用来加载图片,其中src中可以放url也可以放文件地址,html是web’页面的主体,不可缺少的部分。

    
<!-- 这是标题标签,用于知道你内容的标题和子标题,
 html里包括六个级别的标题,
 也就是说按下面的写法可以写到h6 -->
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

<!-- 这是段落标签,通常用来指定文本内容 -->
 <p>这是一个段落</p>

 <!-- 这是列表标签,通常用来展示数据 -->
  <!-- 无序列表 -->
    <ul>
        <li>第一个列表内容</li>
        <li>第二个列表内容</li>
        <li>第三个列表内容</li>
    </ul>
    <!-- 有序列表 -->
     <ol>
        <li>第一个列表内容</li>
        <li>第二个列表内容</li>
        <li>第三个列表内容</li>
     </ol>

<!-- 这是连接标签 -->
<a href="https://www.svjpblog.cn/">随军的博客</a>

<!-- 这是图片标签 -->
 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQ5jPLYIm521kw6Cu0f4NdtzHMqZnxtlcLNQ&s" >

<!-- 除了这些还有一种容器标签 -->
 <div>这是一个div容器</div>
 <div>这是一个div容器</div>
<span>这是一个span容器</span>
<span>这是一个span容器</span>
<!-- div和span的区别就在于div为块级元素span为行内元素 -->
<div>
    <p>这是一个div容器</p>
    <ol>
        <li>第一个列表内容</li>
        <li>第二个列表内容</li>
        <li>第三个列表内容</li>
     </ol>
</div>

css(样式)

如果说html是人的身体,那么css就是衣服,你可以用css来随意装扮你的html。在正式学习css之前我们得要了解一下选择器是什么选择器顾名思义就是能够定位元素,定位的方法无非就四种1.通过标签定位2.通过类名定位3.通过id定位4.通过属性定位。

我们可以通过css来改变什么呢,不外乎颜色,背景,字体大小,排版等等,还有很多请同学们自行学习,当然网上有很多别人写好很好看的样式,不需要我们再写一遍,’不要重复造轮子‘可以说是互联网行业最流行的话之一了,

 

    
    <style>
    /* 放在这个标签里的就是css */
    div{
        height: 150px;
        width: 260px;
        background-color:red;
    }
    .blue{
        background-color: blue;
    }
    #gree{
        background-color: green;
    }
    a[href="https://www.svjpblog.cn/"]{
        font-size: 15px;
    }
    div>a{
        font-size: 50px;
    }
</style>
<div>红标签</div>
<div class="blue">蓝标签</div>
<div id="gree">绿标签</div>
<a href="https://www.svjpblog.cn/">div外面的连接</a>
<div>
    <a href="">div里面的连接</a>
</div>

javascript(用户端动态脚本)

前面我们用html标签语言来塑造主体,用css可以将主体装饰的很好看,但是有一个最大的问题,就是这个页面没办法动起来,而javascript(后面都简写为js)的出现就是为了解决这个问题,至于为什么前面有个java这里面有着一个小故事就不细说了,感兴趣的可以去了解一下,js和c/c++,java,python等这些常见编程语言很多相似的地方,有判断,有循环,有列表等等,单单只是写法的不同,这里就不细将乐,我们详细介绍一下js中的特色玩法。

document对象,他是js操控html文档的入口点,document和css一样通关类名id等等来选择元素,选择完之后大概能做的操作有三个,修改创建元素,操作属性,添加事件下面我们用个添加计数器的例子讲解一下

<p>计数器<span id="num">0</span></p>
<button id="numButton">计数按钮</button>
<script>
    let i = 0;
    document.getElementById('numButton').addEventListener('click',function(){
       i++;
       document.getElementById('num').textContent=i; 
    });
</script>

vue(js框架)和element组件库

累了如果讲到再用文档讲吧

暂无评论

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇