一 . css系列之html需知及ps的基础操作

（一）简介

1. 网站和网页的区别

a. 网站和网页是不同的概念
b. 网站包含网页，网页是用来显示内容的一个页面，网站是网页的集合
c. 网站的第一个页面被称为首页（或叫主页），默认的名称为index.html/default.html

2. 网页浏览工具——浏览器

a. 主流浏览器：IE(Trident)、谷歌(webkit)、火狐(gecko)、苹果、欧朋(blink)

3. W3C组织

a. World  WideWeb  Consortium万维网联盟
b. 1994年创立，非盈利性组织，是Web领域最具有权威的组织，web标准的制定者和推荐值
c. 它认为网页被分为三部分：结构、表现、行为
* 结构标准：XHTML（XHTML可扩展超文本标记语言 是更严谨更纯净的 HTML 版本）、xml。XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。    * 表现标准：css
* 行为：ECMAscript（ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。）

4. HTML：HyperText Markup Language超文本标记语言，它是标记语言，但不是编程语言，因为它不需要编译可以由浏览器直接解释执行

a. 超文本：具有音频、视频、图片、超链接等的文件
b. 标记：也叫标签，由尖括号和标签名构成，分为单标记和双标记* 单标记:<img />* 双标记:<p></p>

5. 网页的编辑工具——sublime text3，需要记住他的快捷键

a. 新建：Ctrl+N
b. 保存：Ctrl+S
c. 复制光标所在行：Ctrl+shift+D
d. 删除光标所在行：Ctrl+shift+K
e. 注释/取消注释：Ctrl+/
f. 向上移动光标所在行：Ctrl+shift+向上的方向键
g. 向下移动光标所在行：Ctrl+shift+向下的方向键
h. 向右缩进：Tab
i. 去除缩进：shift+Tab
j. Ctrl+鼠标滚轮
k. 返回：Ctrl+z

6. 常用的标记

a.  `<p>`标记：用来修饰大量文本
b. h标记：用来修饰标题，附加效果为加粗、h1字号最大，h6字号最小

 <h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

c. `<br />`换行标记
d. 符号* 空格：`&nbsp;`* 小于号：`&lt;`*  大于号：`&gt;`*  双引号：`&quot;`*  版权符号：`&copy;`*  注册商标：`&reg;`
e.  列表：无序列表、有序列表、定义列表* 无序列表

<ul  type="disc/circle/square"><li></li>…
</ul>

    * 有序列表

<ol  type="1,a,A,i,I"  start="数值"><li></li>…
</ol>

    * 定义列表

<dl><dt></dt><dd></dd>….
</dl>

f. 图像标签：<img />* src：图像的地址路径* width：宽度，属性值可以是像素值、百分比* height：高度，属性值为像素值* alt：当图片无法正常加载时的替代文字，一般写图片的名字或对图片内容的描述信息* title：鼠标悬停在图片上时的提示文字
g. 路径：相对路径、绝对路径* 相对路径：三种情况* 绝对路径：从盘符或协议开始写的路径（了解）
h. 站点的管理

（二）Photoshop的基本操作

1. 放大、缩小

a. 放大：Ctrl+加号
b. 缩小：Ctrl+减号
c. 或者使用工具栏中的缩放工具，直接点击图片就是放大，alt+放大工具就是缩小，在放大工具上面双击鼠标左键就是100%比例，或者ctrl+数字1也可以100%显示。
d. Alt+鼠标滚轮

2. 选择：使用矩形选择工具

a. 取消选区：Ctrl+D
b. 变换选区：在选区上面点击鼠标右键——“变换选区”
c. 增加选区：Shift+矩形选择工具
d. 减小选区：Alt+矩形选择工具

3. 显示/隐藏信息面板：F8或者窗口——“信息”

4. 临时抓手工具：空格+鼠标左键

5. 显示/隐藏标尺：Ctrl+R，在标尺上面点击鼠标右键，可以设置单位，要求设置为像素

6. 参考线：

a. 水平参考线：用鼠标左键按住水平标尺向下拉动
b. 垂直参考线：用鼠标左键按住垂直标尺向右拉动
c. 隐藏参考线：视图——显示——参考线
d. 删除参考线：从哪里来，到哪里去，如果要一次性删除，可以到视图——清除参考线
e. 如果要调节参考线的位置，使用移动工具进行拖动

7. 吸管工具的使用（用来拾取效果图中的颜色）：在要拾取的颜色上面点击鼠标右键——拷贝颜色十六进制代码

8. 切片工具的使用：所谓切片工具作用就是从效果图中截取我们想要的图片

a. 步骤：点击切片工具——在要截取的图片上按住鼠标左键拖动——在选好的图片上双击鼠标左键——命名——点击文件菜单——存储为Web所用格式——可以设置图片的格式和切片选项（选中切片）——保存

9. 可以使用矩形选择工具来截取图片，步骤为：选择——复制（Ctrl+C）——Ctrl+N——Ctrl+V

一 . css系列之html需知及ps的基础操作相关推荐

启明智显分享| 关于ESP32-S3系列串口屏应用时配网需知
提示:启明智显专为智能产品提供一站式彩屏显示+连接+云端服务+APP软件开发.维护等解决方案,帮厂商快速实现硬件的智能化.作为启明云端旗下方案公司,我们用心整理了开发小伙伴在开发过程中可能会遇到的问题 ...
汇总二，js系列-css系列-其他综合系列
目录 js系列: 1.js下载图片功能 2.base64加密 3.获取外网IP地址,动态创建script标签 4.非空正则式 5.js阿拉伯数字转大写,大写转数字 6.js获取地址栏参数小程序 1. ...
OA、CRM、ERP、OMS、WMS、SCM、BRP，电商企业需知的六大管理系统
CRM.ERP.OMS.WMS.SCM.BRP,电商企业需知的六大管理系统 OA 比如典型的OA系统,模板如:OA(点击可直接使用) 框架是这样的: CRM CRM(Customer Relation ...
[你必须知道的css系列]第一回：丰富的利器2：CSS选择符之子选择符、相邻选择符...
对了,接下来要讲的属性选择符,相邻选择符,子对象选择符可能大家稍微有点陌生了,这当然也是有原因的,因为IE6及以下的浏览器并不支持这几个选择符,而大多数从事这方面工作的技术人员,多数时候还是主要考虑 ...
layuiadmin上手好难_新手自学板绘先学SAI还是PS好？零基础绘画入门需知！
原标题:新手自学板绘先学SAI还是PS好?零基础绘画入门需知! 新手自学板绘先学SAI还是PS好?初学者如何入门绘画?学习板画难吗?怎样才能学习好绘画?想必这些都是绘画初学者们经常在想的问题吧,就是不 ...
reactjs antd（ant-design）安装、基本使用及css样式的按需引入
reactjs antd(ant-design)安装.基本使用及css样式的按需引入
CSS系列讲解-总目录
总目录: 欢迎来到孙叫兽的<CSS系列讲解>,蓝色字体为传送门,点击进入即可.本专栏已完结,大前端专栏支持更新. 玩转CSS系列: 什么是CSS?你真的理解? CSS页面DEMO CSS基 ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
css系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...
CSS系列之美化网页/span标签和div标签/字体样式/文本样式
CSS系列之美化网页/span标签和div标签/字体样式/文本样式 01 span标签和div标签 span标签的作用能让几个文字或者某个词语凸显出来属于行内元素 div标签属于块级元素程序示 ...

一 . css系列之html需知及ps的基础操作

（一）简介

1. 网站和网页的区别

2. 网页浏览工具——浏览器

3. W3C组织

4. HTML：HyperText Markup Language超文本标记语言，它是标记语言，但不是编程语言，因为它不需要编译可以由浏览器直接解释执行

5. 网页的编辑工具——sublime text3，需要记住他的快捷键

6. 常用的标记

（二）Photoshop的基本操作

1. 放大、缩小

2. 选择：使用矩形选择工具

3. 显示/隐藏信息面板：F8或者窗口——“信息”

4. 临时抓手工具：空格+鼠标左键

5. 显示/隐藏标尺：Ctrl+R，在标尺上面点击鼠标右键，可以设置单位，要求设置为像素

6. 参考线：

7. 吸管工具的使用（用来拾取效果图中的颜色）：在要拾取的颜色上面点击鼠标右键——拷贝颜色十六进制代码

8. 切片工具的使用：所谓切片工具作用就是从效果图中截取我们想要的图片

9. 可以使用矩形选择工具来截取图片，步骤为：选择——复制（Ctrl+C）——Ctrl+N——Ctrl+V

一 . css系列之html需知及ps的基础操作相关推荐

最新文章

热门文章