人总会被某一瞬间的情感和生活瞬间点醒一些纠结了好久没有答案的事情。
文章目录
WEB静态页面
前端：
- 狭义：前端工程师使用HTML\CSS\JS等专业技能和工具将产品UI设计稿是现成网站产品
- 广义：所有用户终端产品与视觉和交互有关的部分
网站和网页：
- 网站指整站（即项目）
- 网页指单个页面
主页和内页：
- 主页 index.html
- 通过主页可以跳转至内页
前端页面根据功能可以分为三层结构：
- 结构层：由 HTML(Hypertext Markup Language：超文本标记语言)负责创建，解决了页面"内容是什么"的问题
- 表现层：由CSS(Cascading Style Sheets：层叠样式表)负责创建，解决了页面"如何显示内容"的问题
- 行为层：由js(javascript：脚本语言)负责创建，解决了页面上"内容应该如何对事件作出反应"的问题
1. HTML（超文本标记语言）
HTML（超文本标记语言）：用于构建网页基本结构及其内容的标记语言。
- 超文本：文本中包含指向其他文本的链接
- 标记语言（
HTML|XML|KML|Markdown）：将文本以及文本相关的其它信息结合起来，展现出关于文档结构。
1.1 标记的属性和规范
-
标记属性，所有元素都有的属性：
-
title属性：标记的标题，在鼠标移入该元素时显示出来<div title="我是title">div1</div> -
style属性：标记的样式，值为css样式表 -
class属性：标记的类名，多个元素可以使用相同的类名 -
id属性：标记的编号，不同于class，id的值在页面里是唯一的
-
-
页面信息
<!DOCTYPE html> <!-- 放在HTML文档最前面的位置，加上之后就会按照W3C的HTML5标准来解析渲染页面 --> <html lang="en"> <!-- 根元素，包含整个页面 --> <head> <!-- 对用户不可见，包含面向搜索引擎的关键字、页面描述，字符编码声明，css样式等 --> <meta charset="UTF-8"> <!-- 定义文档字符编码 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- compatible:兼容的 X-UA-Compatible：浏览器兼容--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 用于移动端 --> <meta name="keywords" content="HTML"> <!-- 关键字 --> <meta name="description" content="HTML 总结"> <!-- 页面描述 --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="style.css"> <link rel="alternate stylesheet" href="fancy.css" type="text/css" title="Fancy"> <!-- 可替换样式？？ --> <title>Document</title> <script src="javascript.js"></script> <!-- defer / async --> </head> <body> <!-- 包含能够被用户访问到的内容 --> </body> </html>
1.2 PS测量
-
颜色色值的转换：
- 英文单词：一个单词设置颜色，简单方便，但是只能为部分常用颜色赋值，且要求英语知识
- 16进制数：由一个#和3组两位数的16进制数来设置(每组数组为00-ff)，这三组数字分别表示了红绿蓝三种颜色的色值，方便获取赋值，能表示所有颜色，但是不容易阅读
- rgb颜色：由rgb函数加上红绿蓝三种颜色的色值作为参数设置(每个颜色的色值为0-255)，设置较麻烦，能表示所有颜色，容易阅读
- rgba颜色：rgb的升级版，在原有三种颜色基础上增加了a(alpha)，代表了透明度(0-1，透明到不透明)
-
ps简单使用步骤
-
prtSc截屏 -> ctrl+n新建画布 -> ctrl+v -> 矩形选框工具 -> 窗口（信息）
-
ctrl + d 取消选区
-
2. 盒模型
content | padding | border | margin
- 盒模型宽度 = width + padding-left + padding-right + border-left-width + border-right-width
- 盒模型高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width
- 复合顺序：上、右、下、左
2.1 盒模型兼容问题
标准浏览器【标准盒模型】：width = contentWidth
低版本浏览器【怪异盒模型】：width = 盒子宽
box-sizing
标准：content-box
低：boreder-box
2.2 外边距折叠
相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的上下外边距可以结合成一个单独的外边距。
折叠结果遵循下列计算规则：
- 相邻外边距都是正数时，折叠结果为它们两者之间较大的值
- 相邻外边距都是负数时，折叠结果为两者绝对值的较大值
- 相邻外边距一正一负时，折叠结果为两者代数之和
- 消除父子元素边距重叠的方式：
- 给父元素加边框；
- 给父元素加padding(让他们不相邻)
<div style="width: 100px;
height: 100px;
background-color: darkgoldenrod;"></div>
<div style="width: 100px;
height: 100px;
background-color: red;"></div>
<div style="width: 100px;
height: 100px;
background-color: darkgoldenrod;
margin-bottom: 10px;"></div>
<div style="width: 100px;
height: 100px;
background-color: red;
margin-top: 10px;"></div>
<div style="width: 100px;
height: 100px;
background-color: darkgoldenrod;
margin-bottom: 10px;"></div>
<div style="width: 100px;
height: 100px;
background-color: red;
margin-top: -20px;"></div>
2.3练习：
<!-- 三角形 -->
<div id="triangle"></div>
#triangle{
width: 0;
height: 0;
border-width: 60px;
border-style: solid;
border-color: transparent transparent firebrick transparent;
}
3. 元素的种类
-
区块元素：布局所用元素
-
每个元素独占一行
-
支持所有的样式
-
不设置宽度时宽度等于父元素宽度，不设置高度时高度为0，有内容时高度由内容撑开
-
不会解析换行符
-
常见的区块元素：
div(盒子)、ul(无序列表)、ol(有序列表)、dl(定义列表)、li(列表的项)、p(段落)、h1~h6(网页中的标题，从大到小)、table(表格)、form(表单)、pre(源代码)、hr(分割线)
-
-
内联元素：承载内容的元素
-
在一行有空间时，可以和非区块元素在同一行显示
-
不支持宽高样式，使用部分样式(上下margin和padding等)会出现问题
-
宽高完全由内容(文字图片等)撑开
-
换行符会被解析
-
常见的内联元素：
span(行间元素)、a(超链接)、b(加粗)、strong(加重)、i(斜体)、em(着重)、sub(下标)、sup(上标)、ins(插入)、del(删除)、img(图片)、input(表单项)、label(表单元素)、br(换行)
-
-
转换
display- inline-block
- inline
- block
- none
<!-- 区块元素：布局内容 --> <div></div> <!-- 内联元素：承载内容 --> <span>内联元素</span> <hr> <!-- display样式 --> <div style="width: 100px; height: 100px; background-color: red; font-size: 30px; color: white; display: inline-block; ">div1</div> <!-- inline 内联元素；block 区块元素 --> <!-- inline-block 内敛块元素 --> <span>span元素</span> <!-- 隐藏元素：display:none --> <div style="width: 100px; height: 100px; background-color: yellow; display: none;">none</div>
4. 基本选择器
- 将样式表写在style属性里叫行间样式，这种写法的样式只对当前元素有效，如果你希望你的css能够被页面的很多元素使用，可以选择内部样式表：style标记
- 内部样式表中只能写选择器和css样式，而选择器就是帮助你找到要设置样式的元素，语法：选择器{样式名:样式值;}
- 基本选择器：
- *(通配选择器)：获取所有元素
- 类型选择器(如div)：获取所有该种元素
- 类名选择器(.+class的值)：获取所有class包含该类名的元素
- id选择器(#+id的值)：获取id为该值的元素
- 组合基本选择器：
- 包含选择器(如#id .class)：获取范围内第一种选择器后代中第二种选择器选中的元素，包含选择器可以写很多级
- 分组选择器(如.class,#id或div .class,#id)：用","分隔2个或多个选择器，并把这些选择器选中的元素集合到一起
- 多条件选择器(如.box1.box2)：将多个选择器连着写，选中同时满足这些条件的元素
- 子元素选择器：(如div>.class)获取>前面的元素的子元素中满足>后面条件的元素
#div1 span{}
#div1 div, #div2 span{}
- 包含选择器&分组选择器
<style>
.box span{
color: red;
}
.box>span{
background-color: blueviolet;
}
</style>
<div class="box">
<span>span1</span>
<div>
<span>span2</span>
</div>
</div>
-
选择器优先级
行间样式 > id选择器 > class选择器 > 标记名选择器 > 通配符选择器
<!--
约分比较法
一一比较
如果两个选择器优先级相等，后写的选择器优先级更高
-->
<div class="box1" id="div1">
div
</div>
<style>
*{
color: yellowgreen;
}
div{
font-size: 20px;
color: cornflowerblue;
}
.box1{
color: turquoise;
}
#div1{
color: crimson;
}
</style>
5. 文本标记
文字样式会继承；盒模型样式不会继承
-
常用文字标签
<span></span> <p>段落</p> <h1>headline</h1> <b>bold</b> <i>italic</i> <ins>insert</ins> <del>delete</del> <!-- 搜索引擎 --> <strong>bold</strong> <em>bold and italic</em> <sub>下标</sub> <sup>上标</sup> <p>H <sub>2</sub>O</p> -
文字样式：
- font-size:14px; 字体大小：px像素为单位
- color:red; 字体颜色：英文/16进制/rgba
- line-height:120%; 字体行高：用px像素或百分比作为单位，百分比参照为文字大小
- text-align:center; 文字对齐方式：left(默认值)、right、center
- font-family:“微软雅黑” “黑体” 字体：设置多个文字，第一个字体本地没有时，会依次使用后续的字体
- font-weight:200/bold; 文字加粗：数值为加粗的程度，命令bold(加粗)/normal(不加粗，默认值)(b和strong默认值是bold)
- font-style:italic; 文字斜体，命令italic(斜体)/normal(不斜体，默认值)(i和em标签的默认值就是italic)
- text-indent:2em; 文本缩进，单位em(当前元素的字体大小的倍数单位，如2em就是2倍font-size)
- letter-spacing:0.5em/2px; 字间距：单位em或px
- text-decoration:underline; 文本装饰：underline(下划线)、 overline(上划线)、 line-through(线穿过/中划线)
- 样式的值中有一个是inherit，代表继承父元素的样式，注意盒模型样式不能继承，而文字样式可以继承
p{ font-size: 20px; color: red; background-color: royalblue; font-family: "黑体"; /* 文字水平对齐 */ text-align: center; /* 文字加粗 */ font-weight: normal; /* italic 斜体 */ font-style: italic; /* 首行缩进 2em 字体两倍 */ /* text-indent: 40px; */ text-indent: 2em; /* 行高;文字永远在行高中垂直居中 2em */ line-height: 3em; /* 字间距 */ letter-spacing: 1em; /* text-decoration: overline 上划线 line-through 中划线 underline 下划线 */ }
6. 路径&图片格式
-
表示文件的位置的方式就是路径
- 绝对路径：
"file:///C:/x.jpg"此文件相对于计算机的位置，在项目开发阶段要根据新位置修改路径 - 相对路径：此文件相对于该(代码)文件的路径，只要整个项目不改变相对路径就不会改变
- 绝对路径：
-
超链接元素
a(双标记、内联)，<a href="超链接路径" target="链接地址的打开方式"></a>- href属性，由于一般来说整个项目不会改变，因此绝大多数时候使用相对路径，但是部署到服务器上时可以使用绝对路径(因为几乎不会再改变位置)
- target属性，_blank(新页面)/_self(当前页面，默认值)
-
图片元素img(单标记、内联)，语法：
<img src="图片路径" alt="替代文字" width="图片的宽" height="图片的高"/>- src属性，同使用相对路径
- alt属性，当图片由于加载失败，网速，路径错误等问题无法显示时的替代文字，如果不设置显示为一个断裂的图片
- width、height属性，和css中的宽高类似，不过在只设置宽度时，高度会随之等比缩放
- img有高度，和文字混排时可以通过样式vertical-align可以改变与文字混排时文字的位置(top/middle/bottom)
-
href(引用链接【引用、链接】) —— 指向网络资源所在的位置, 用于在当前文档和引用资源间确定联系, 如加载css和a的超链接； -
src(引入来源【引入、替换】) —— 指向外部资源的位置, 用于替换当前元素, 如js脚本, 图片等元素
web所用图片格式除SVG(矢量图)，以下为ps可以创建的类型
JPG：不支持透明半透明，所有透明区域填充白色；使用：网页中的大图，高清图(体积中)- PNG-8(8位)：支持透明不支持半透明；由于只有8位最多256种颜色，所以一般用在网页中的小图标(体积小)
- PNG-24(24位)：支持透明和半透明；支持24位最多1600多万种颜色，因为一般用在需要透明/半透明的高清大图中(体积大)
- GIF：支持透明不支持半透明；可以制作动图(帧动画，体积大)和小图标(体积小)
- WBMP：计算机标准图像格式，但只有1位黑和白两种像素，一般用在性能低下的wap手机中(体积小)
ps操作：
图片文件在ps中打开
用矩形选框工具选中要截取的图
ctrl+c复制选取
ctrl+n新建画布
ctrl+v
ctrl + shift + alt + s保存为web所用格式文件
7. 背景样式
- background-color：背景色，使用某种单一颜色作为元素背景，值为之前学的各种颜色的设置
- background-image：背景图，使用图片作为元素背景，值为url(“图片的路径”)
- background-repeat：背景图平铺方式，背景图重置出现的方式，值为repeat(在水平和垂直方向上重复出现，默认值)、no-repeat(不会重复，只出现一次)、repeat-x/repeat-y(在水平/垂直方向上重复出现)
- background-position：背景图定位(复合样式，由background-position-x和background-position-y组成)，值为"水平偏移值 垂直偏移值"，2个值都可以设置位置命令或数值，位置命令包括(top、center、bottom、left、right)，数值则是以左上角为0 0点，单位为像素
- background-attachment：背景图是否固定，默认值scroll不固定(图片会跟着元素移动)，fixed固定背景(图片固定在窗口中不移动)
- background：背景的复合样式，可以将上面关于背景的所有值依次写在后面，各值之间用空格分开
div{
width: 150px;
height: 150px;
/* 背景图优先级高于背景色 */
background-color: coral;
background-image: url(./img/1.jpg);
/* repeat repeat-x no-repeat */
background-repeat: no-repeat;
/* 背景定位 */
/* left center right top bottom */
background-position: left center;
/* background-position: 30px 50px; */
}
要懂得知其然更要知其所以然。
1366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
