WEB前端开发的经历和过程

前端开发

用前端技术实现用户界面
前端技术:基础三大要素 html5 css3 javascript +js衍生物(vue,react,angular框架,node.js)

用户界面:pc端 + 移动端app (页面+交互+数据渲染)

发展史

web1.0阶段 蒂姆·伯纳斯·李 [1] (Tim Berners-Lee) 界面:只能读 不能写

web2.0阶段 布兰登·艾奇(Brendan Eich,1961年~) JS 有了交互 只能读 还能写 建设者

web3.0阶段(大前端) 09年 Ryan Dahl

浏览器及其内核

浏览器=外壳+内核

五大浏览器

浏览器内核
IETrident
FireFox(火狐)Gecko
Safari(ios)Webkit
Chrome(谷歌)Webkit—>Blink
Opera(欧朋)Presto–>Blink

基本代码的表示(vscode)

标题

<h1>标题内容</h1>  有且只有一个 一般用在logo  作用:网站权重
<h2>标题内容</h2>
<h3>标题内容</h3>
<h4>标题内容</h4>

图片的路径

1.绝对路径
  1)网络上的图片
  2)本地绝对路径的图片
2.相对路径
  	根目录    / (编辑器里打开的文件夹的顶级目录)
  	同级目录  ./ 或者不写
  	上级目录 ../ 跳出本文件夹至上一个文件夹	
  	上上级目录  ../../跳出2个文件夹
  
  <img src="1.jpg" alt="">
    alt:当图片加载失败的文本提示
    title:鼠标悬停时的文本提示
    width:宽度  等比例缩放  3:2  
    height:高度 

本地图片

修饰文字

加粗
<b>adsaudf</b> bold 非语义标签
<strong>safsf</strong> 语义化标签  装重要的 强调的文字  希望被爬虫抓取
斜体
<i>斜体文字</i> italic 斜体
<em>斜体文字</em>  语义化标签
下划线
<u>aefresf</u>
<ins>ftrewtet</ins>语义化标签
中划线
<s>99.00</s>
<del>99.00</del>语义化标签
换行

给段落内的文字换行

<br> break
水平线
<hr color="red" align=""  width="300px">

align 水平对齐方式 left 左对齐  right  center居中

字符实体

版权符 人民币符 > < . “” —》Unicode编码
人民币符 ¥

&yen;  人民币符号
&copy;版权符 
&gt; 大于号
&lt;小于号

布局标签

大盒子大容器 大区域

<div></div> 可以装div,img  p hi....

小容器 小盒子 小区域

<span></span> 可以装几个字 小图标 非常小的图片
  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值