应用程序的分类

应用程序的分类

客户端/服务器

Client/Server CS模式

用户需要下载安装一个客户端才能使用。如通讯工具、网游、购物软件等。

特点:功能特别丰富、安装略微繁琐、需要更新,不同的平台软件不同

浏览器/服务器

Browser/Server BS模式

用户只需要一个浏览器就能使用。如各种商业网站、xxxx系统等。

特点:功能较独立的客户端来说略简单,无需下载安装、无需更新、平台无关。

为什么要学习WEB前端基础

由于JavaEE是BS模式,必须要使用浏览器渲染页面,程序都需要页面呈现数据。

所以后台开发,需要知道如何将数据显示在页面中。

学习web基础,就是学习开发网页。

网页是一个文件,后缀名为.html

浏览器

用于解析页面的平台。

名称
谷歌浏览器Chrome
火狐浏览器FireFox
微软IE/Edge
IOS Safari

前端自学网站

菜鸟教程

W3school

编写前端页面的工具

软件 下载地址
HBuilder https://www.dcloud.io/hbuilderx.html
VSCode
SubLime

HTML

Hyper Text Markup Language 超文本标记语言

超文本:超级文本/超链接文本,超越了文本的限制,如多媒体文件、超链接等。

标记:也可以成为标签,用<>括起来的一个特定单词,整体称为标记或标签,分为单标签或双标签。

  • 单标签:<单词>
  • 双标签:<单词></单词>

标签的类型

  • 块级元素,占页面中的一整行。block
  • 行内元素,占一行中的一部分。inline

标签的属性

标签第一个中括号中,使用 属性=“值”,让某个标签拥有特定属性

如中,charset="utf-8"就是meta标签的属性

charset称为属性名,utf-8称为属性值。

如果有多个属性,使用空格隔开。

网页基本结构

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页的主体
    </body>
</html>

创建一个文本文档,将以上内容进行保存,文档的后缀名改为.html,用览器就能解释运行。

HTML注释

<!-- HTML的注释 -->

页面中显示颜色的方式

  • 颜色单词,如red、blue、green等。
  • 颜色RGB,R-RED,G-GREEN,B-BLUE。rgb(255,0,0)表示红色,数字的范围[0-255]值越大对应的颜色越深。
  • 颜色的十六进制RGB。如#ff0000表示红色,相当于RGB(255,0,0)

资源的路径

  • 绝对路径:图片的完整地址。如在线图片或有盘符的地址
  • 相对路径:从当前页面出发,找到图片所在位置
    • 使用"…/"跳出当前目录
    • 使用"xxx/"进入xxx目录

常用标签

文字

标签名 作用
h1-h6 块级元素,标题。文字加粗,1最大,6最小。通常用h1-h3
p 块级元素,段落。
span 行内元素。
pre 块级元素,预处理标签,该标签中的文字中的内容如何定义就如何显示。
i 行内元素,倾斜
u 行内元素,下划线
b 行内元素,加粗
sub 行内元素,文字下标。
sup 行内元素,文字上标。
以上都是双标签

Emojo表情

用法:复制表情对应的十进制或十六进制代码,最好使用span显示

<!-- 十进制 -->
<span>&#11088;</span>
<!-- 十六进制 -->
<span>&#x231B;</span>

阿里标标矢量图库

图片img

单标签:行内元素

<img src="图片路径" 
     alt="无法显示图片时,显示的文字"
     title="鼠标悬停时显示的文字" 
     width="宽度" height="高度">

列表ul/ol/li

双标签,块级元素,li是ul或ol的字标签。

无序列表ul

默认每一项前用实心圆符号修饰

通过type属性修改符号

  • disc默认实心圆形

  • circle空心圆形

  • square实心正方形

  • none去掉修饰符号

    <ul type="square">
        <li>xxx</li>
        <li>xxx</li>
        
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值