目录
(一) 网页的内容:HTML(超文本标记语言(HyperText MarkUp Language))(从语义的角度,描述页面的结构)(HTML不区分大小写)(标签、元素、属性)
(三)行为:JavaScript(从交互的角度,提升用户体验)
一、前端技术的构成:
Alt+Shift +数字(2)(1):分屏(分成两屏)(回归一屏)
Ctrl+L :选择一行
Ctrl+光标移动点击:可以同时多行进行编辑
! + Tab :进行扩展基本结构
border: 1px solid; (solid指实线框)
快速生成link属性的代码 | link:css + Tab | <link rel="stylesheet" href="style.css"> |
快速生成带id的代码 | div#nav + Tab | <div id="nav"></div> |
快速生成带class的代码 | div.bar + Tab | <div class="bar"></div> |
同时快速生成带class和id的代码 | div#nav.bar + Tab | <div id="nav" class="bar"></div> |
生成开始和结束标签 | p + Tab | <p></p> |
直接扩展内容 | p{段落内容} + Tab | <p>段落内容</p> |
扩展带有属性的标签(仅自动扩展重要的属性) | img + Tab | <img src="" alt=""> |
取值和属性的添加 | img[src="logo.jpg"] + Tab | <img src="logo.jpg" alt=""> |
标签的嵌套 | p>span + Tab | <p><span></span></p> |
同级标签的添加 | p>img+a + Tab | <p><img src="" alt=""><a href=""></a></p> |
分组添加标签 | (div>p)+(div>img) + Tab | <div> <p></p> </div> <div><img src="" alt=""></div> |
快速生成元素 | ul>li*3 + Tab | <ul> <li></li> <li></li> <li></li> </ul> |
快速设置颜色 | bd-l-c + Tab bd-t-c + Tab bd-r-c + Tab | border-left-color: #000; border-top-color: #000; border-right-color: #000; |
{ }: 写内容
[ ]: 添加属性的取值
对div标签添加样式之快速生成
w30 + Tab width: 30px; h30 + Tab height: 30px; bd1 + Tab border: 1px ; mg10+ Tab margin: 10px; pd5+ Tab padding: 5px; lh2+ Tab line-height: 2; bgc+ Tab background-color: #fff; 样例
<style>
div{
width: 30px;
height: 30px;
margin: 10px;
padding: 5px;
line-height: 2;
background-color: #fff;
}
</style>
(一) 网页的内容:HTML(超文本标记语言(HyperText MarkUp Language))(从语义的角度,描述页面的结构)(HTML不区分大小写)(标签、元素、属性)
标签: <title> </title>
<img />
<a href="#"></a>
插入图像:img
src属性: 路径 + 文件名 alt(替换文本):当图片无法正常显示时,会显示替换文字。
区域: div
列表 : <ul>(无序列表) <ol>(有序列表) <li>
表格: table <td>(行) <tr>(列) <th>(表头单元格)
表单:是一个区域,采集用户信息
表单元素:文本框、按钮、单选、复选、下拉列表、文本域
<input type="text / password / submit / reset / radio / checkbox" value="确定 / 重置" name="名称"/> (当设置 checked ="checked"时,该选项被默认选中 ) (单选框name属性设置相同; 复选框name属性设置不同) | 文本框: type="text" 密码框: type="password" 提交按钮: type="submit" 单选框:type="radio" 复选框:type="checkbox" 重置按钮: type="reset" value属性:按钮里的文字 name:可以为表单设置名字 | |
下拉列表框 select option | 爱好: <select> <option>选项1</option> <option selected="selected">选项2</option> </select> (selected="selected" :被选择的那一项) | |
文本域 textarea | <textarea rows="行数" cols="列数">文本</textarea> |
(lorem+"按键Tab":快速生成文本)(lorem(一个数字)+"按键Tab":快速生成相应数字的文本)
<p> <em>强调</em> <br/> <i>斜体,无语义</i> <p> <p> <strong> 重点强调</strong> <br/> <b>粗体,无语义</b> <p> | <em></em>:强调的斜体 <i></i>:斜体,无语义 <strong></strong>:重点强调的粗体 <b></b>:粗体,无语义 |
<dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dt>CSS</dt> <dd>层叠样式表</dd> </dl> | HTML 超文本标记语言 CSS 层叠样式表 |
(二) 内容的样式:CSS(从审美的角度,美化页面)
p{ font-size:12px; color:blue; font-weight:bold; } (每个属性值后,都需要加分号) | p:选择器(选择了Html中的p标签) 属性名: font-size: 字号 color:文字颜色 font-weight:加粗 |
/*css中注释形式*/
例: <p style = "color:red;"> </p> | 行内样式 |
例: <head> <style type="text/css"> p{ color:red; } </style> </head> | 内嵌样式(放入head标签中) |
例: 外部式样式表文件 style.css p{ color:red;/*设置字体颜色*/ } 网页文件: <html> <head> <link rel="stylesheet" href="css/style.css" /> </head> </html> | 单独文件样式(link添加法) (link:用于文件的链接) |
例: <style type="text/css"> body{background-color:#ccc; text-align:center; font-size:12px;} h1{font:"黑体";font-size:20px;} p{color:red;font-size:16px;} hr{width:200px;} </style> <body> <h1>标题</h1> <hr> <p>正文的段落</p> 版权所有 </body> | 标签选择器 |
例: <style type="text/css"> p { font-size:12px;} .one { font-size:18px;} .two { font-size:24px;} </style> <body> <p class="one">类别1</p> <p class="one">类别1</p> <p class="two">类别2</p> <p class="two">类别2</p> <p>普通段落中的文字</p> <body> | 类别选择器(可以多次引用) |
<style type="text/css"> #one{font-size:12px;} #two{font-size:24px;} </style> <body> <p id="one">文字1</p> <p id="two">文字2</p> </body> | ID选择器(仅可一次引用) |
(混合:
多个class选择器混用,用空格分开
<div class="one yellow left" >.......</div>
id和class混用
<div id="my" class="one yellow left">
id选择器不可以多个同时使用
)
例: <style type="text/css"> p (空格) span{ color:red; } </style> <body> <p><span>天使投资</span>是投资方式的一种</p> </body> | 嵌套声明 |
例: <style type="text/css"> h1,p { text-align:center;} </style> <body> <h1>欢迎访问论坛</h1> <p>欢迎访问论坛</p> </body> | 集体声明 |
例: <style type="text/css"> * { text-align:center; } </style> <body> <h1>欢迎访问论坛</h1> <p>欢迎访问论坛</p> <h2>欢迎访问论坛</h2> </body> | 全局声明 |
单位 px: 像素 %: 百分比
em: 1em----一个字符 2em-----两个字符 (自动适应用户所使用的字体大小)
设置的颜色值:
属性 | 描述 | 取值及各种表示方式 |
color | 文本颜色 | red #f00 rgb(255,0,0) |
letter-spacing | 字符间距 | 2px -3px(有重叠部分) |
line-height | 行高 | 14px 1.5em 120% (垂直居中:让line-height和段落高度像素大小相等) |
text-align | 对齐 | center left right justify(两端对齐) |
text-decoration | 装饰线 | none overline underline line-through |
text-indent | 首行缩进 | 2em |
font属性简化的使用方法:
font: 斜体 粗体 字号/行高 字体
font: italic bold 16px/1.5em '宋体';
属性 | 描述 | |
font | 在一个声明中设置所有的字体属性 | font : bold 18px '幼圆' |
font-family | 字体系列 | font-family:"Hiragino Sans GB","Microsoft YaHei",sans-serif;(定义多个字体,依次查找直至字体存在,则使用,加引号:字体的拼写有多个单词时) |
font-size | 字号 | 14px 120% |
font-style | 斜体 | italic |
font-weight | 粗体 | bold |
background-color |
background-image: url("logo.jpg")/*相对路径*/ |
background-repeat: repeat / repeat-x / repeat-y / no-repeat(一张大图) |
(整体使用顺序)background:颜色 图片 repeat |
a:link | 普通的、未被访问的链接 |
a:visited | 用户已访问的链接 |
a:hover | 鼠标指针位于链接的上方悬停 |
a:active | 链接被点击的时刻 |
有次序: a:hover 必须位于a:link和a:visited之后
a:active 必须位于a:hover之后 易记:Love&Hate
属性 | 描述 |
list-style | 所有用于列表的属性设置于一个声明中 |
list-style-image | 为列表项标志设置图像 |
list-style-position | 标志的位置 |
list-style-type | 标志的类型 |
table{ width: 500px; height:200px; } | 表格大小 |
table,td,th { border: 1px solid #eee(灰色); } 合并表格边框和单元格边框: table { border-collaps:collapse; } | 表格边框 |
例: tr:nth-child(odd) { background-color:#EAF2D3; } | 奇偶选择器 :nth-child(odd/even) |
CSS布局与定位:(盒子模型与定位机制)
(一)盒子模型
(页面上 区域、图片、导航、列表、段落、都可以是盒子)
height | 高度 |
width | 宽度 |
border(-top\-left\-bottom\-right)(有方向) | 边框 |
padding(-top\-left\-bottom\-right)(有方向) | 内边距 |
margin(-top\-left\-bottom\-right)(有方向) | 外边距 |
hidden | 超出部分不可见 |
scroll | 显示滚动条 |
auto | 如果有超出部分,显示滚动条 |
border-width: | px、thin(细)、medium(中)、thick(粗) |
border-style: | dashed(一个个横线)、dotted(一个个点)、solid(一条实线)、double(一条双实线) |
border-color: | 颜色 |
(设置在一起)border: | width style color |
例:
水平分割线:
.line{
height :1px;
width :500px;
border-top: 1px solid #e5e5e5;
}
当只有两个值时:第一个表示上下、第二个表示左右。
三个值时:第二个表示左右
要首先对浏览器默认的设置清零
*{
margin:0;
padding:0;
}
margin的合并:垂直方向合并,水平方向不合并。
text-align:center; | 图片、文字水平居中 |
margin:0(指距离浏览器上边的距离) auto(指左右浏览器自动计算); | div水平居中 |
(二)、CSS定位机制(文档流定位【flow】、浮动定位【float】、层定位【layer】)
display:(显示的方式)
display:none ; (元素不会被显示)
例:a{
display:block;
}
inline元素a转换为block元素从而使a元素具有块状元素的特点。
(默认)block类型:独占一行、元素的height、width、margin、padding都可设置 | 例: <div>、<p>、<h1>....<h6>、<ol>、<ul>、<table>、<form> 例: display:block; |
(默认)inline类型:不单独占用一行、width、height不可设置,width就是它包含的文字或图片的宽度,不可改变 | 例: <span>、<a>(多个超链接时,会有间距。可以将<div>中的font-size设置为0抵消) 例: display:inline; |
inline-block类型:不单独占用一行、元素的height、width、margin、padding都可设置 | 例:<img> 例: display:inline-block; |
float属性 | left、right(向右浮动)、none(不浮动) |
clear属性 | left、right、both(清除两侧浮动) |
static :默认值 | 没有定位,元素出现在正常的流中 top、bottom、left、right, z-index无效 |
fixed : 固定定位 | 相对于浏览器窗口进行定位, top、bottom、left、right, z-index有效 |
relative : 相对定位(脱离正常的文档流中,但其在文档流中的原位置依然存在) | 相对于直接父元素进行定位, top、bottom、left、right, z-index有效 |
absolute : 绝对定位(其在文档流中的原位置不再存在) 即:仅相对于:relative/absolute/body | 相对于static定位以外的第一个父元素进行定位,如果其父层中都未定义absolute或relative,则其相对于body进行定位 top、bottom、left、right, z-index有效 |
top、right、bottom、left、z-index(层叠关系:值大在上边) | 决定最后位置在哪 |
(三)、弹性盒子布局(移动优先、响应式布局)(元素可以拉大和缩小以适应空间)
弹性容器(Flex Container) | display:flex; flex-flow: flex-direction flex-wrap justify-content align-items align-content |
弹性元素(Flex Item) | flex: flex-grow flex-shrink flex-basis order align-self |
弹性容器样式 (定义弹性容器:display:flex;)
flex-direction属性----行布局 行为主(主轴、辅轴)(start---end)(列布局与此相反) | row、row-reverse |
flex-warp属性(折行) | nowrap wrap wrap-reverse |
flex-flow属性(设置行/列、折行) | 例: flex-flow: flex-direction flex-wrap; flex-flow: row wrap; |
justify-content属性(元素在主轴上的对齐方式)(以行为例) | flex-start(左对齐) center(居中对齐) flex-end(右对齐) space-between(两端对齐) space-around(拉手对齐) |
align-items属性(元素在辅轴上的对齐方式)(以行为例) | flex-start(顶端对齐) center(垂直居中对齐) flex-end(低端对齐) stretch(去掉元素高度,即和辅轴高度相同)(前提:弹性元素的高度没有设置) |
align-content属性(设置多行元素在容器中的整体对齐方式)(折行时)(只有一行或者一列时不起作用) | flex-start(左对齐) center(居中对齐) flex-end(右对齐) space-between(两端对齐) space-around(拉手对齐) stretch |
flex-grow | 元素被拉大的比例,按比例分配容器剩余空间 默认值为0:元素不占用剩余空间 取值为n:元素占据剩余空间若干份中的n份 |
flex-shrink | 元素被压缩的比例 默认为1,表示弹性元素默认等比例压缩 0则表示不压缩 |
flex-basis | 元素在主轴上的默认尺寸,其优先级高于width属性 |
flex | flex: flex-grow flex-shrink flex-basis; 例:flex:1 1 auto; |
order | 子元素在弹性容器中的排列顺序,数越小排名越靠前 |
align-self | 单个弹性元素在辅轴上的对齐方式,align-items是全部元素 |
(四)、网格布局(二维布局)
网格容器 | display: grid grid-template-columns grid-template-rows grid-template-areas grid-gap place-items: justify-items align-items(合并简写方式) place-content: justify-content align-content(合并简写方式) |
网格元素 | grid-column-* grid-row-* place-self: align-self justify-self(合并简写方式) |
grid-template-columns grid-template-rows | 划分网格的行和列,取值:px / % / auto / fr / repeat()函数 |
grid-template-areas | 命名单元格,相同名称的单元格被划分为一个区域 |
grid-gap | grid-row-gap: 行间距 grid-column-gap:列间距 grid-gap:grid-row-gap grid-column-gap |
justify-items:单元格内容的水平位置 | start / end / center /默认stretch |
align-items:单元格内容的垂直位置 | start / end / center /默认stretch |
justify-content:整个内容区域在容器里面的水平位置 | start / end / center /默认stretch space-around / space-between / space-evenly(所有间隙被平分) |
align-content:整个内容区域的垂直区域 | start / end / center /默认stretch space-around / space-between / space-evenly(所有间隙被平分) |
grid-row-start/end:数字(以线为基准) grid-column-start/end:数字 | 行(row)简写(grid-row:2/3;) 列(column)简写(grid-column:2/3;) grid-area:2/2/3/3; 注:span 2 (表示合并2个单元格) |
justify-self(单元格内容的水平位置) | start / end / center /默认stretch |
align-self(单元格内容的垂直位置) | start / end / center /默认stretch |