Web开发(vue2+3)

学前端干嘛?

由于自己是电子信息工程专业,本来不打算学web,但是ai工具的大爆发让我发现即便我0基础写web代码,也能写得不错.
也就是说,我只需要让ai写代码,我只需要读懂它写的代码,明白代码的逻辑,完全可以完成轻量级前端的工作.
因此本次学习目标是:了解web代码的语法和常见逻辑,保证自己能读懂前端代码.

AI能满足多大的开发需求?

不得不承认,现在的ai能力只能助力完成初级开发,而且这还是在你给的prompt比较好的情况下.由于ai写的代码也会有bug,即便ai有能力完成高级开发,人类也要有处理bug的能力,这个是最难解决的,改别人代码的bug常常比自己重写代码更难.

HTML

由于之前稍微接触过超文本语言,现在发现大部分原生HTML都很少见,因为都是使用框架,而且相对简单,ai完全能胜任,有不会的也可以直接让ai改,估计以后手写HTML只有写markdown笔记时有机会用到了.
也就说,在学习HTML几乎只用“了解”即可,比如:

1. 「文本域」标签

• 像发表评论这种需要输入一大段文字的地方使用,如下:

清空

• 读代码时看到textarea标签知道是文本域

2. 「lable」标签

• 常用在优化表单的点击体验上,lable盒子中的内容可以链接到某个input标签,比如: 点击“姓名”而不是必须点击input框才能链接.

姓名：

3. 「按钮button」标签

• 按钮常用于表单提交,放在表单中(form标签)默认即为提交功能.

以上学习都是非常轻量化了.

CSS

css相较于html,内容会多一些,但是都还算轻量

1. 通配选择器(常用于开发初期清除各种标签自带的属性)

*{
	color: white
}

2. 三大特性:继承性、层叠性、优先级(color: blue !important;)
3. 最常见的显示模式有块级、行内块级、行内级.其中行内元素设置宽高是不生效的.
4. 伪元素选择器使用两个冒号::,可以很方便在元素中设置部分的内容特性.after和before常用来添加图标、引号.first-letter可以对第一个文字设置大写. selection可以改变选中文本样式等等.
5. 伪类选择器用单冒号:,可以设置各种情况的样式,比如被聚焦时:focus,被点击时:active
6. padding和border都会撑大盒子,如果不希望撑大,应当设置box-sizing:border-box或者手动减,建议在通配选择器中默认写自动减
7. margin:auto可设置盒子居中,前提是有width;垂直相邻的margin,会合并取大值.
8. 塌陷问题:子盒子的margin-top会传给父级使用,可能是个bug.需要注意
9. 行内元素的上下边距只能通过行高line-height来调整,且行内元素按基线对齐(图片底部有留白)
10. 弹性盒子:沿主轴方向排列,会根据父级盒子的大小自动压缩或扩大,通过flex-wrap设置是否自动压缩或换行,通过justify-content修改子盒子对齐方式,侧轴方向排列通过align-items修改排列方式,align-content修改对齐方式.设置主轴方向:flex-direction.
11. 项目目录,通过link标签包含默认的.css文件,类似.h头文件.
12. 使用h1>a标签放网站和关键字,h1可以提高搜索排名,可以把图标设置为背景,把关键字的字体大小设置为0.下面的标签隐藏了关键字,只显示图片,能够提高搜索效率.

    关键字

<div>
<h1><a href="https://www.baidu.com" style="
background-image: url(https://img1.baidu.com/it/u=3301973218,3744196507&fm=253&fmt=auto&app=138&f=PNG?w=900&h=411); 
background-size: contain;
font-size: 0;
height:50px;
width:110px;
display: block;   /* a标签默认是行内元素,无法强制宽高 */
">关键字</a></h1>
</div>

12. 绝对、相对定位:子绝父相.将父类position:relative(相对原来的自己),再将子类绝对定位,子类将变为块级元素,且找到相对定位的上级,悬浮后进行偏移.如果没有相对的上级,就找浏览器视窗作为目标.另外,使用z-index属性可以更改悬浮层级.(居中显示一般是top:50%和transform: translateY(-50%)一起配合使用,如果涉及文字,可能还要用行高line-leight、文字对齐text-align来调整居中)
13. 固定定位:position:fixed让盒子不受滚动条影响
14. CSS雪碧,将需要的所有小图继承到一张大图,减少服务器响应次数.首先,创建所需小图大小的盒子,然后将大图设置为背景图,最后background-position填写小图在大图中的反坐标.
15. 字体图标,www.iconfont.cn中可以上传、下载所需字体图标
    第一步:link引入.css
    第二步,在案例中找到icon的类名,并使用

    <link rel="stylesheet" href="/js/iconfont/iconfont.css">
    <span class="iconfont icon-chuyulaji-canzhilaye" style="font-size:100px";></span>

16. 过度效果transition:all 1s;可以让两个css效果过渡更平滑,场合hover一起用
17. cursor属性可以改变光标类型,以提示用户.
18. meta为元数据标签,于head标签内,常用于放SEO三大标签name= “title、description、keywords”.