HTML和CSS基础课程.docx

#PS基础##前端需要的PS技能 - PS技能（前端需要）：切图、修图、测量 - PS工具： - 移动工具 - 矩形选框工具 - 裁切工具 - 吸管工具 - 横排文字工具 - 手抓（快捷键：空格） - 缩放（快捷键：Ctrl + 和 Ctrl -） - 标尺（快捷键：Ctrl R，主要是拖出参考线。矩形区域选择的时候，按住Ctrl，就能贴合参考线） - 自由变换（快捷键 Ctrl T） - 盖印可见图层（Ctrl Alt Shift E） - 储存为web格式（Ctrl Alt Shift S）##图片格式 - PSD（源文件） - JPG、GIF、PNG（导出图） - JPG：不支持透明半透明，所有空白区域填充白色（网页中的大图、高清图：体积大） - GIF：支持透明，不支持半透明（网页中的小图标、动态图片） - png8：支持透明，不支持半透明（网页中的小图标） - png24：支持透明，也支持半透明（图像中存在半透明效果的图片）##PSD测量注意事项 - 文字右方和下方会有1像素的默认间隙#代码初识html 超文本标记语言（结构）CSS 层叠样式表（样式）js javascript（行为）文件编码格式与代码编码格式一致的时候，网页才不会出现乱码，才可以显示正常。GB2312 中文简体标准utf-8 国际标准样式的位置：行间样式内部样式外部样式表##backgroundbackground: { url(bg.jpg) center top no-repeat gray fixed;}等价于：#bg {background-image: url(bg.jpg);background-position: center top;background-repeat: no-repeat;background-color: gray;background-attachment: fixed;}##borderborder-top/right/bottom/leftsolid dash dotted(IE6不支持)paddingpadding-top/right/bottom/left内边距相当于给一个盒子加了填充厚度，会影响盒子大小##marginmargin-top/right/bottom/left上下外边距会叠压父子级包含的时候，子级的margin top会传递给父级；（内边距替代外边距）如果给一个盒子仅设置margin-left: auto，那么盒子会跑到最右边；如果设置margin-right: auto，那么盒子就会跑到最左边。同时设置margin-left和margin-right为auto，可以使盒子居中。##盒模型和结构样式盒子大小 = border + padding + width/height盒子宽度 = 左border + 左padding + width + 右padding + 右border盒子高度 = 上border + 上padding + height + 下padding + 下border常见样式——结构width 宽度height 宽度background 背景border 边框padding 内边距margin 外边距复合属性：一个属性多个属性值的命令##常见文本设置font: font-stylefont-weightfont-size/line-heightfont-family;font-size（一般为偶数，中文最小号12px）font-family（中文默认宋体、西文默认是arial，可用逗号分隔多种字体）color（英文、rgb、十六位进制色彩值）line-height（文字是在行高的上下居中）text-aligntext-indent（首行缩进，用em缩进字符）font-weightfont-styletext-decoration：underline、overline、line-throughletter-spacingword-spacing（以空格为解析单位）##img注意写img的alt属性把img放到一个块里面，默认img与该块的下边框有几个像素的间距。为了解决这个问题，可以为img添加样式display: block;但是这种解决方法有局限性。另外一种方法是给图片添加vertical-align: top;也可以。##a标签target=”_self”/”_blank”在head中添加如下代码，可以让页面中所有的链接都在新页面中打开，其中base代表默认base target=_blank/a标签的作用链接（a标签中放链接）下载（href的路径是文件路径）锚点（a的href中放的是id）##常见标签和SEO浅析标题h标签段落p标签强调strong标签（粗体）强