应用程序的分类
客户端/服务器
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>⭐</span>
<!-- 十六进制 -->
<span>⌛</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>