目录
（一） 网页的内容：HTML（超文本标记语言（HyperText MarkUp Language））（从语义的角度，描述页面的结构）(HTML不区分大小写)(标签、元素、属性)
一、前端技术的构成：
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 |
771
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
