|
作为一个刚入行的萌新小白来说，学到的知识都是重点，谈不上技术分享，就分享一下我所知道的前端基础知识以及相关的注意点吧： 1.常用的PS操作及快捷键 Ctrl+N 新建画布 Ctrl+O 打开文件 Ctrl+R 调出隐藏标尺 在标尺上右键选择单位为像素 参考线的显示隐藏：Ctrl+：或者 Ctrl+H Ctrl+ 加号 放大画布 Ctrl+减号 缩小画布 Ctrl+Alt+0 100%显示画布 按住Alt键滚动鼠标滚轮,可以放大缩小画布 按住空格键（键盘上最长的键）鼠标将会变成小手形状，然后按下鼠标左键进行拖拽，就可以查看图片的其他部分 如果我们的PS几面乱了我们可以进行下面的操作： 菜单 -- 窗口 --- 工作区 ---- 复位基本功能 颜色的吸取： 点击前景色 --- 弹出拾色器控件 --- 将鼠标在页面移动到想要吸取的区域点击就可以吸取颜色 ---- 我们只要将进制颜色色值吸取即可； 注意： 工作中宽高的单位必须是像素px,分辨率必须是72屏显分辨率，颜色模式必须是rgb； 吸取的颜色在使用时，16进制的颜色数值前必须加上#，例：#f5f5f5; 2.HTML的认识 HTML认识：HTML是超文本标记语言，不是编程语言；所有的html标记（标签）都要放在尖括号<>里面 HTML结构：一对html标签里面嵌套一对head标签（给浏览器解析用的）和body标签（用户看的），head标签里面还嵌套了一对titlie标签（用户可以看见的） <html> <head> <title>....</title> </head> <body> </body> </html> Html 标签可以分为双标签和单标签 双标签： 由开始标签<开始标签>和结束标签</结束标签>组成；例如：<html></html> 单标签: 不需要包含内容，直接在开始标签最后面添加一个结束的符号/; 例如：<br /> Html标签的关系 嵌套关系 --- 后代关系，嵌套关系可以多层嵌套不单是两层；例如：head和style 并列关系 --- 兄弟关系；例如head和body sublime的使用技巧 新建文档 Ctrl+N 保存 Ctrl+S 保存文件名必须为.html； 放大缩小界面文字大小：按住Ctrl键，滚动鼠标滚轮或者Ctrl+加号变大，Ctrl+减号缩小； 生成页面骨架：01 – html:5 按下tab键 02 ！按tab键； 浏览页面效果：右键在浏览器中打开； 注意：生成骨架的时候，我们必须要先将新建的文档保存为.html格式； <!DOCTYPE html> 告诉浏览器用最新的html5版本去解析代码 lang="en"规定网站显示的语言，一般用英文en、中文zh-CN 字符编码 <meta charset="UTF-8"> Gb2312 简体中文 BIG5 繁体中文 GBK 全部中文（包括简体和繁体中文） UTF-8 全世界所有国家需要用到的字符 --- 常用的 3.HTML标签 段落标签 p，双标签，可以清楚得到划分页面的段落； 水平线标签 hr，单标签 换行标签 br标签 ，<br />强制换行； div标签布局标签，主要是布局用的大标签，也是主要标签; 特点：没有语义，独占一行； span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标；特点：没有语义，一行共存多个； 加粗标签： <b>单纯的加粗</b> <strong>语义化强调</strong> 倾斜标签： <i>单纯的加粗</i> <em>语义化强调</em> 删除线标签： <s>单纯的加粗</s> <del>语义化强调</del> 下划线标签： <u>单纯的加粗</u> <ins>语义化强调</ins> 图像标签 --- img ，单标签 <img src= “图片路径” /> 超链接：实现页面之间的跳转，a 标签，双标签； <a href=”#”></a> 注释：<!-- 注释内容 --> 快捷键 Ctrl+？ 锚点定位：实现页面内部的跳转 分两步实现锚点链接： 第一步：找目标，想要跳转到的位置添加id=”id名称” 第二步：设置锚点按钮，超链接a， <a href=”#id名称”>跳转到目标</a> 表格：一对table标签嵌套tr标签，tr标签嵌套td标签； table表示表格整体，tr表示行，td表示单元格（列）；表头单元格th表格标题caption 单元格和单元格之间的距离：cellspacing 单元格内容到单元格边框的距离：cellpadding 无序列表：ul嵌套li标签，li的个数不定 有序列表：ol嵌套li标签 自定义列表：dl嵌套dt和dd标签，dt表示描述标题，dd描述的内容； 4.Css基本属性 CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） 用于设置版面的布局和外观显示样式。能够将结构html和样式css分离书写，简化代码，提高可阅读性； css的书写位置 分为3类：行内式、内嵌式（内部样式）、外部链接式 Css样式书写格式： 选择器 { 属性1:属性值1; 属性2:属性值2; …… } Css注释 /* css注释内容 */ 快捷键 Ctrl+？， 如果是外部链接的css快捷键是ctrl+shift+？ 行内式<div style=“color:pink; font-size:16px;”>我是行内样式</div>;尽量不用 外部链接：实现了结构和样式的完全分离，代码简介，可读性强； 使用外部链接的步骤 01 新建：.css格式的css文件，直接书写选择器以及css样式； 02 引用：利用link标签引入新建的css文件，要配合link的三个属性 rel关系，type文件类型 （可以省略），href文件路径； 标签选择器：以标签名称命名的选择器 h { }; 类选择器 :在css里面用点“ . ” + 类名称 +{ css键值对 } 进行样式定义; 在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用； ID选择器 在css里面用 “ # ” + id名称 +{ css键值对 } 进行样式定义; 在html里面哪个标签需要，就在开始标签敲空格id=“id名称”进行调用； 一个id名称一个页面只能出现一次 通配符选择器* 一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用； 文字颜色 color 文字大小 font-size 文字字体 font-family 字体加粗 font-weight 字体样式(风格) font-style 文本水平居中 text-align: center; 文本的行高 line-height 文本线条装饰 text-decoration 后代选择器的html结构是有嵌套的后代关系（父子级），css书写的时候 一个空格表示了后代关系； 子元素选择器 只能选择嵌套关系的父子关系得到元素，也就是嵌套的第一层元素，一个大于号“>”表示选中子级； 交集选择器 :直接在标签选择器后面紧跟着书写类选择器或者id选择器即可； 并集选择器 样式一致的盒子如果单独设置样式需要书写多次，我们可以把样式相同的盒子只写一个样式，用英文的逗号隔开即可；一个逗号表示并集关系； 链接的伪类四种状态： a:link 未访问的链接（访问前） a:visited 已访问的链接（访问后） a:hover 鼠标移动到连接上（鼠标经过） a:active 选定的链接（按下鼠标的时候） 三种显示模式相互转换 将元素转化为块级元素：display:block; 将元素转化为行内元素：display:inline; 将元素转化为行内块元素：display:inline-block; 实体化三属性（重要滴很） 宽 width 高 height 背景 background 背景颜色background-color： 背景图片background-image： 背景平铺background-repeat： 图片定位background-position： 背景图片固定：background-attachment:fixed; 背景颜色半透明:background：rgba(0,0,0,透明度); Css的三大特性 : 层叠性（覆盖性）、继承性、优先级； 继承性 超链接a不能继承父级的颜色color；，超链接a的color和线条样式text-decoration需要单独设置；
| 
收藏
淘帖
踩
