前言
我们都知道Web前端主要由HTML CSS 和JS三部分语言组成, 其中HTML和CSS负责界面, JS负责事件逻辑
任何一个应用, 无非就是界面和事件两大块组成, 本文主要介绍如何快速上手界面的编写
控件对比
Android应用界面的编写主要通过控件的排列组合, 常用的控件有TextView, EditText, ImageView, 那么在Web前端中也有类似于Android中的控件,只不过在前端中不叫控件, 而叫标签, 部分对比如下:
Html标签 | Android控件 |
---|---|
img标签 | ImageView |
input标签和textarea标签 | EditText |
button标签 | Button |
h系列标签,p标签,span标签 | 类似于TextView |
div标签 | 类似于水平方向的LinearLayout |
容器标签和文本标签以及叶子标签的区别:
- 容器标签: 里面可以嵌套其他标签, 比如
div
标签 - 文本标签: 里面可以填充文本显示, 比如
p
标签 - 叶子标签:里面及不可以嵌套标签也不可以嵌套文本, 比如img标签
当然, 有些标签既是容器标签又是文本标签:
标签 | 容器标签 | 文本标签 | 叶子标签 |
---|---|---|---|
div | √ | √ | × |
p | × | √ | × |
span | √ | √ | × |
h系列 | √ | √ | × |
button | √ | √ | x |
img | × | × | √ |
audio | × | × | √ |
video | × | × | √ |
除此之外, 有的标签本身自带换行符:
标签 | 开头自带换行符 | 结尾自带换行符 |
---|---|---|
div | √ | √ |
h系列 | √ | √ |
button | x | x |
p | √ | × |
ul | √ | √ |
span | × | × |
img | × | × |
audio | × | × |
video | × | × |
关于控件的宽高显示:
样式属性 | Android宽高属性 |
---|---|
display:block | android:layout_width="match_parent" |
display:inline | android:layout_width="wrap_content" android:layout_height="wrap_content" |
display:inline-block | android:layout_width="自定义" android:layout_height="自定义" |
关于元素的位置定位:
标签 | Android控件 |
---|---|
position:absolute 元素的位置以浏览器窗口为参照摆放 | 相当于设置成为Framelayout的子控件 |
position:relative 元素位置以邻近元素为参照摆放 | 相当于设置成为LinearLayout的子控件 |
position:fixed 元素的位置以浏览器窗口为参照摆放, 但是不随滚动条移动 | 相当于在ScrollView上层增加一个固定控件 |
position: sticky 粘性定位, 元素滚动超出页面时切换为fixed模式 | 和Android中粘性控件一样 |
position: static 默认状态,此时top left right bottom等属性均无效 |
也就是说, top left right bottom
这几个属性需要和position
配合使用
关于自定义控件(标签)
在Android中除了官方提供的原生控件外, 我们还可以自定义控件, 那么Web前端可以吗?
如果放在以前肯定不行, 只能使用官方提供的html标签, 现在nodejs环境下可以实现自定义标签, 比如vue中:
在Android中我们可以对控件设置相应的属性, 并且把共同的属性抽取到style文件中
那么Web前端也一样, 只不过属性和样式分开处理,抽取出来样式放置在style
标签下, 如果单独放到一个文件中, 那么这个文件的后缀必须为.css
, 所以我们又称之为CSS样式表 或者CSS语言
事实上, 我们会发现, Android的界面编写方式很多都是参考的Web前端
小练习:
-
写一个左侧带图标的文本:
只要一个
img
标签和一个span
标签够了:<img style="max-width: 26px; max-height: 26px" src="./assets/logo.png"> <span>成墨文档</span>
效果如下:
成墨文档
接下来需要给内容增加一个超链接, 所以在最外层包裹一个
a
标签<a><img style="max-width: 26px; max-height: 26px" src="./assets/logo.png"> <span>成墨文档</span></a>
效果如下:
考虑到这个内容属于网站的网站标题, 为了利于
seo
因此最外层再包裹一个h1
标签, 此时文本也变大<h1> <a class="navbar-brand" href="/web/homepage/index"> <img style="max-width: 26px; max-height: 26px" src="./assets/logo.png"> <span>成墨文档</span> </a> </h1>
效果如下:
成墨文档
-
写一个网站导航条:
html代码如下:
<div id="navbar"> <h1> <a class="navbar-brand" href="/web/homepage/index"> <img style="max-width: 26px; max-height: 26px" src="./assets/logo.png"> <span>成墨文档</span> </a> </h1> <ul > <li><a href="/web/homepage/index">首页</a></li> <li><a target="_blank" href="https://www.xxx.com/pricing">价格</a></li> <li><a href="http://blog.xxx.com/">博客</a></li> <li><a href="https://docs.xxx.com/#/">帮助文档</a></li> <li><a href="/web/homepage/apidoc">API</a></li> <li class="long-li nav-item"><a href="/web/signup/sign_up" id="btn-register">免费注册</a></li> <li class="short-li nav-item"><a href="/web/login">登录</a></li> </ul> </div>
效果如下:
成墨文档
我们需要给其添加相应的样式:<style > #navbar{ /*固定在顶部*/ position: fixed; top:0px; left:0px; width:100%; height:64px; background-color:#AAAAAA; padding-left:50px; padding-right:20px; display:flex; align-items:center;/*指定垂直居中*/ } ul{ display: inline-block; /*列表向右浮动*/ float: right; } h1{ display:inline; } li{ /*去除列表中的原点样式*/ list-style: none; /*列表从左向右浮动*/ float: left; margin-left: 40px; } a{ /*取消超链接下划线*/ text-decoration: none; } </style>
以上是比较基础的练习, 熟悉的差不多了后, 我们开始进入到使用vue的开发阶段
Vue快速上手
环境配置:
vue项目创建:
第一步 安装vue:
npm install -g @vue/cli-service-global
第二步 创建脚手架(模板工程)
vue create hello-world
#或者直接使用图形化界面创建
vue ui
这里直接使用图形化创建:
创建后自动生成相应的文件和目录, 目录结构如下:
大部分和原生相比差别不大, 但是开发上更加高效,具体参考:
为什么选择vue
vue只是一个开发框架 或者理解为一个中间人, 它借助于nodejs环境, 使得我们可以采用MVVM的模型, 同时集成第三方各种插件, 方便而又快速地组件化开发, 相比原生而言整体的架构也更加清晰, 后期维护也得心应手
当然, 你也可以使用其他框架, 未来也可能出现新的框架, 但有一点是不会变的, 不管是什么框架, 它编译出来最终文件还是html
css
和js
, 因为 目前浏览器只识别这三种文件
我正在参与掘金技术社区创作者签约计划招募活动,点击链接报名投稿。