化妆品营销型网站模板,包图网图片素材,html5手机网站发布,discuz集成wordpress本文是从简书复制的, markdown语法可能有些出入, 想看正版和更多内容请关注 简书: 小贤笔记
整个前端开发的工作流程
产品经理提出项目需求UI出设计稿前端人员负责开发静态页面(跟前端同步的后台人员在准备数据)前后台的交互测试产品上线(后期项目维护)
互联网原…本文是从简书复制的, markdown语法可能有些出入, 想看正版和更多内容请关注 简书: 小贤笔记
整个前端开发的工作流程
产品经理提出项目需求UI出设计稿前端人员负责开发静态页面(跟前端同步的后台人员在准备数据)前后台的交互测试产品上线(后期项目维护)
互联网原理
当用户在浏览器输入网址的时候就会发送到对应的服务器请求该网址对应的网页信息服务器会把该网址对应的网页资源都下载到你电脑的临时文件夹临时文件夹中的资源通过浏览器显示出来(所以我们第二次请求网站的时候速度会快很多)
元素
行内元素一行中有n多个行内元素行内元素不能设置宽和高块元素一个块元素独自占一行行内块元素一行中可以有多个行内块元素但是可以设置宽和高
html骨架结构
!DOCTYPE..文档声明头(html5,html4.01,XHTML)在html4.01和XHTML中各有3个小规范 strict 严谨的transitional 普通的frameset 框架html超文本标记语言里面用的都是标签对儿 head metacharset:UTF-8,GB2312meta namedescription content要描述的内容/meta namekeywords content关键字关键词/ (以上两个meta都是为了SEO优化)title页面的标题/title body 标题h1/h1h2/h2段落 p:虽然p是块元素但是他里面放的也是图片文字span:里面用来放文本图片文字a链接a href要跳往的地址图片img src相对地址/绝对地址css写在 里面 样式的基本语法 选择器(div){ key:value } p{height:40px;line-height:40px;background-color:red;
} 选择器 标签选择器div,h,p,a,img,spanclass选择器:.xinxi (千万不要用汉字和数字开头做为class名一定要用英文)
html更多解读
html只考虑标签嵌套跟tab和空格无关无数个空格也只算作一个 图片标签[图片上传失败...(image-fd7aaf-1518537900016)] 相对路径以当前页面为出发点查找的(./ 或 不写,找到父级../)绝对路径都是以http开头的例如http://i1.piimg.com/567571/f3f79e8903424ea4.jpg图片标签上有两个常用属性src属性引入图片地址; alt标签图片无法正常加载时用来替代的文字(alt也可以省略)a链接常用的属性 href:要跳往的地址,href的作用 可以填写绝对路径跳到直到的网页可以写#1不确定地址的时候 2)简单的回到顶部效果利用锚点进行页面切换 title:鼠标移上时的提示target:打开方式(默认的_self当前页面打开; _blank新页面打开)这些属性中title和target都可以省略a链接的锚点使用 本页面各个模块之间的相互跳转 div id#div1/div
a href#div1/a 2 实现不同页面之间不同模块的相互跳转 a hrefdetail.html#detail1/a
列表
无序列表:无序列表中的li也是容器
ulli/lili/li
/ul
有序列表
olli/lili/li
/ol
定义列表dl,dt,dd都是容器
dldt表头/dtdd详情介绍/dd
/dl
表单
表单用输入文本框 input typetext placeholder默认提示/输入密码 input typepassword placeholder默认提示/单选按钮单选按钮组一定要加上name否则无法实现单选效果
input typeradio namesex/男
input typeradio namesex/女
多选框 input typecheckbox checked/下拉单
selectoption namecity valuebj北京/optionoption namecity valuesh上海/optionoption namecity valuesz深圳/option
select
name和value主要用于前端向后台提交数据id 设置样式(不建议)在JS阶段用来获取元素id配合a链接进行锚点设置留言框textarea name value cols rows/textarea
按钮
普通按钮 typebutton提交按钮 typesubmit重置按钮 typereset
选择器
标签选择器div h1~h6 p span a img ul li ol dl dt dd input select
添加一个小icon的步骤
到官网上去取图片以京东为例 https://www.jd.com/favicon.ico把以上图片另存为存到电脑中注意把icon图标放到文件夹的根目录在html页面中加入link relicon hreffavicon2.ico typeimage/x-icon
一个完整的页面由三部分构成
html超文本标记语言 通过语义化标签搭建页面结构css:层叠样式表 负责页面样式美化页面的js:轻量级的脚本语言交互指的是两个地方行为 前端自己在页面上写的动效前后台的数据交互 结构样式和行为三者相结合
css的引入方式
嵌入式(内嵌式)
stylebody{height:100%;background-color: red;}
/style
行内样式
body styleheight:100%; background: #333333
外链式真正的开发用的都是外链
link relstylesheet hrefstyle.css/
css的优先级
行内内嵌外链
css常见属性和样式
当设置错误的时候在chrome的控制台会有黄色的叹号进行提示color颜色值 颜色有三种表示方法 快捷键c tab 用英文redrgb(255,0,0)#ffffont-size:字体大小 快捷键fsz30-font-size:30px font:400 14px/28px 宋体;background:添加背景 图片默认是横向重复和纵向重复 位置 横向位置left center right纵向位置top center bottom综合写法background: url(images/bg2.png) no-repeat left center red; background-image:url(图片地址)background-repeat:no-repeat; /repeat-x;/repeat-ybackground-position:0 0background-color:red字体是否倾斜 font-style:italic 倾斜 normal 正常下划线和删除线 text-decoration: line-through; 删除线text-decoration: none; 去除下划线text-decoration: underline;添加下划线
css中的选择器
1.标签选择器div p ul li dt dd em i u del strong b input label from table 缺点只能进行共性的操作无法个性操作2.class选择器3.id .class名,同一个页面能有无数个相同的class名#id名同一个页面只能有一个ID名ID名是不能重复的在真正的开发过程中class是用来设置样式的id是用来获取元素 div classdiv1 div2 div3 iddiv1/div4.后代选择器div p(把div容器下子子孙孙的p元素都选择上了)5.子选择器div p(选择div容器下的儿子)兼容IE7 6.交集选择器: div.div17.并集选择器div,p8.通配符*代表所有的元素9.序选择器兼容IE8 div p:first-childdiv p:last-child10.下一个兄弟选择器 ul li li{} 兼容IE7
开发常用的浏览器
chromeIE7~11firefox
CSS的继承性和层叠性
以font开头的属性都能够继承line-heightcolor可以继承text开头的也可以继承比如text-align
css权重
!important权重无穷大少用为好id的权重大于class的权重
css盒子模型
css盒子模型由5部分 内容的宽高 padding border margin单行文本的居中height line-height多行文本的居中padding和line-heightpadding padding是内边距padding的颜色和内容的颜色一致background-color填充的是border以内的颜色padding是复合值 padding:30px; -pl30; pt30;pr30;pb30 padding:20px 30px; -上下为20px 左右30px padding:10px 20px 30px; - 上10px 左右20px 下30px padding:10px 20px 30px 10px; 上 右 下 左 如果现设置padding:30px 再设置padding-left:10px 请问最后的值各是多少 左10px; 其他都是30pxmargin外边框border: border:1px solid #000;border-widthborder-stylesolid实体,dashed虚线,dotted点border-color
行内元素和块级元素
p标签虽然是文本标签但是它可以当容器来使用p标签内一定不能放div; p段落也是块元素他独占一行文本元素p span a i em u b strong img容器级div li dt dd h级不建议除了p所有的文本元素都是行内元素所有容器级别的元素都是块元素块和行内元素的相互转化 displayinline; //行内display:inline-block;//行内块displayblock; //块关于定位大部分情况建议的是:父相子绝父亲相对定位儿子绝对定位 关于脱离文档流的方法 浮动 float:left; float:right;绝对定位 position:absolute;固定定位 position:fixed;重点1父相子绝 2行内元素一点脱离文档流就可以设置宽高了注意行内元素一旦脱离文档流虽然能设置宽高但是如果不设置宽的话会默认跟内容一样宽而块级元素如果不设置宽度的话默认跟父级一样块没有父级的话默认跟屏幕一样宽清除浮动 固定高度height:xxxpx; 缺点如果作为产品列表的容器展示我们无法知道容器的具体高度overflow:hidden 溢出隐藏清除浮动 缺点如果父容器比较小子容器比较大父容器如果通过overflow:hidden来清除浮动的话子容器就看不到了clear:both 缺点可以解决浮动引起的文档流错乱问题但是上面浮动元素的父容器该没有高度还没有高度伪类清除浮动 ul::after{display: block;height:0;content: ;clear: both;
}透明度处理 rgba() 背景透明文字不透明opacity:0 背景透明文字也透明 opacity:0.1;/*不兼容IE7浏览器*/
filter:alpha(opacity10);
最基本的开发首先必须创建的项目结构
images文件夹放切好的图片css文件夹放置css文件index.cssindex.html文件
关于继承
宽度继承如果没有父级块元素的宽度默认跟可视区一样宽如果有父级的情况下默认跟父级宽度一样宽(宽度可以继承但高度无法继承;)font可以继承color可以继承当遇到a标签的时候 color无效line-height可以继承
当文本超度固定宽度的处理方法
单行文本出超固定宽度出现省略号的写法
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
英文不折行的问题处理 word-wrap:break-word;出现滚动条的写法overflow-y:scroll;
区分伪类和伪元素
伪元素用:和::都可以现在建议用::伪类给当前选择器添加动效只能用:
