1. meta标签
meta标签来设置网页的一些元数据。
1.比如网页字符集
2.关键字（name="keywords/description" content="关键字1,关键字2.../描述"），搜索引擎在检索页面时，会同时检索页面中的关键字和描述，但这两个值不会影响排序
3.简介
4.做请求的重定向 <meta http-equiv="refresh" content="5"; url="目标路径" />
2.实体写法
&实体的名字;
如：< = <
版权符号： ©
3. 图片标签
在用图片标签时，如果不使用alt属性，浏览器不会收录图片，也无法被检索到
4.图片的格式
1.JPEG 支持颜色多，图片可以压缩，但是不支持透明。一般使用JPEG来保存颜色丰富的照片
2.GIF 支持颜色少，只支持简单的透明图和动态图。图片颜色单一或动态图可使用
3.PNG 支持颜色多，并且支持复杂的透明。可以显示颜色复杂的图片以及透明图。
5. 内联框架
<iframe>引入外部页面。不推荐使用，因为内联框架中的内容不会被搜索引擎检索到。特殊情况除外，例如内网项目，内部使用。
6. center
<center></center>标签中的内容，会自动显示在中间。不推荐使用。
7. 超链接
点击后自动打开计算机默认的邮件客户端<a href="mailto:邮件地址">
8.块和内联
div p h1 h2...等都是块元素，独占一行。
span a img iframe...等是内联元素（行内元素），不会独占一行。
9. 选择器
常用的选择器：
元素选择器，id选择器。类选择器，选择器分组，通配选择器（*{}），
交集选择器，后代元素选择器，子元素选择器（> 可能不兼容），
属性选择器（p[属性名]{}，p[属性值=？]{}，p[属性值^=？]：以？开头的属性）
元素之间的关系：父元素（直接包含子元素的元素），子元素（直接被父元素包含的元素），祖先元素，后代元素，兄弟元素。
兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。
如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p {margin-top:50px;}；
若要选择跟在h1后的所有p：h1 ~ p{margin-top:50px;}
另外还有
:only-child
:first-child
:last-child
:nth-child(?) : number / even / odd
:first-of-type
:last-of-type
伪类：专门用来表示元素的一种特殊的状态；如a:link,a:visited(只能设置字体颜色),a:hover,a:active...
一般的元素也可以有hover，active状态，但并非所有浏览器都兼容，如ie6。
其他的伪类：:focus(获取焦点)，
::selection(为选中的文字设置样式)，如p::selection{bc-color:red;}
否定伪类：:not(选择器)
选择器的优先级：内联样式>id选择器>类和伪类>元素选择器>通配选择器>继承的样式；可以在样式后添加 !important，此时样式的优先级会变成最高，但在开发中尽量避免使用。
10. em
1em = 当前元素的一个字体大小
11. 行高
line-height设置行高，单位px；也可以设为%，根据字体大小判断；也可指定为数值，行高会设置为字体相应大小的倍数。
行间距=行高-字体大小。
单行文本在父元素中垂直居中。
12.文本样式
text-transform：设置文本大小写
text-decoration：文本的装饰效果
letter-space：字符间距
word-spaceing：单词间距
text-align：设置文本对齐方式
text-indent：设置首行缩进
13.盒子模型
内边距：盒子内容区与盒子边框的距离
盒子可见的宽度 = 内容区宽度 + 内边距 + 边框宽度
外边距：当前盒子与其他盒子之间的距离
在网页中垂直方向的相邻外边距会发生外边距的重叠，如果父子元素垂直重叠，则子元素的外边距会设置给父元素。
14.浏览器默认设置
浏览器为了在页面中没有样式时也有比较好的显示效果，所以为很多元素都设置了默认的margin和padding。这些默认样式，正常情况下不需要。
在编写之前，往往把这些默认样式取消。
所以使用
* {
margin:0;
padding:0;
}
15.内联元素的盒模型
内联元素不能设置width和height，可以设置垂直、水平方向的内边距。
还可以设置水平方向的外边距。
若需要设置宽和高，可以通过display来设置元素类型，将内联元素与块元素互相转换。
可选值：
inline：将元素变为内联元素显示
block：将元素设置为块元素显示
inline-block：行内块元素，既可以设置宽高，又不会独占一行
none：此元素不会显示，并且不会在页面中占用位置
visibility可以用来设置元素的隐藏和显示的状态，可选值如下：
hidden：隐藏元素，不会在页面中显示，但依旧占据位置
16.overflow
子元素超出父元素的大小，称为溢出。父元素默认将溢出在外面显示。
用overflow属性可以设置父元素如何处理溢出。
常用可选值如下：
visible：默认值，不做处理，子元素内容在父元素外显示
hidden：溢出内容被隐藏，不显示
scroll：显示滚动条，可以查看溢出内容。不智能
auto：根据需求自动添加滚动条，水平或垂直
17.float
使用float使元素浮动，脱离文档流。
none：默认值，默认在文档流中排列
left：脱离文档流，向左浮动
right：向右浮动
浮动的元素不会盖住文字，文字会自动环绕在浮动的元素周围。
块元素脱离文档流之后，高度和宽度都会被内容撑开。
内联元素脱离文档流后会变成块元素。
18.高度塌陷
子元素脱离文档流后，父元素高度无法被撑起，造成高度塌陷。此时父元素下所有的元素都会上移，破坏布局。
在开发时需要避免这种情况。为了解决这一问题，可以采用如下方式：
根据w3c标准，页面中元素都有一个默认属性Block Formatting Context，简称BFC，该属性可以打开或关闭，默认是关闭的。开启BFC的元素不会被浮动元素覆盖，可包含浮动的元素。
如何开启：
1.设置元素浮动
2.设置元素绝对定位
3.设置元素为inline-block
4.父元素的overflow设置为非visible的值，例如hidden【推荐】
在IE6及以下浏览器，直接将元素的zoom设置为1即可（开启的是hasLayout属性）
清楚其他元素浮动对当前元素的影响：clear。
可选值：
none：默认值不清除浮动
left：清除左侧浮动影响
right：清除右侧浮动影响
both：清除对当前元素影响最大的
所以也可以使用如下方法解决高度塌陷：
在高度塌陷的父元素下添加一个空白的div，给这个div进行清除浮动，可以使用这个空白的div来撑开父元素。
还可以使用after伪类向父元素后添加一个空白的块元素，然后对其清除浮动，也可以达到相同的作用，推荐使用这个方法，不会向页面中添加多余的div。
.clearfix:after{
/*添加一个内容*/
content:"";
/*转换为块元素*/
display:block;
/*清除两侧浮动*/
clear:both;
}
但在ie6中不支持，更换写法如下：
.clearfix{
zoom:1;
}
既要解决高度塌陷，又要解决父元素和子元素的外边距重叠：
.clearfix:after, .clearfix:before{
/*添加一个内容*/
content:"";
/*转换为块元素*/
display:table;
/*清除两侧浮动*/
clear:both;
}
19.定位
将指定元素拜访到任意位置：position
可选值：
static：默认值，元素没有开启定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
相对定位 relative：
相对于原来的自身的位置，相对定位的元素不会脱离文档流。
开启定位后，若不设置偏移量，不会产生任何变化。
可以通过left、right、top、bottom四个属性设置元素的偏移量。【相对于其定位位置的偏移量】
相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素。
绝对定位 absolute：
绝对定位会使元素脱离文档流。
需要设置偏移量。
绝对定位是针对离他最近的、开启了相对定位的祖先元素来移动的，即要设置祖先元素的position为relative。如果有的祖先元素都没开启相对定位，则以浏览器窗口为原点。
绝对定位会改变元素性质，内联元素会变成块元素。
固定定位 fixed：
固定定位永远针对浏览器窗口进行定位，而且不随窗口滚动。
层级：z-index属性设置元素层级，指定一个正整数，层级越高，越优先显示。
对于没有开启定位的元素，不能使用该属性。
而且对于父子元素，父元素层级再高，也不会覆盖子元素。
opacity：可以用来设置元素背景的透明度，0-1。
但此属性在ie8及以下的浏览器不支持。可以使用filter属性：alpah(opacity=透明值)，透明值0-100.
20.背景图片位置
①使用left top bottom right来定位
/*居中显示*/
background-position:center center;
②使用px
background-position:100px 100px;
设置会背景图片是否随页面滚动：background-attachment
令页面背景全屏且随页面滚动：
body {
background-image:url(...);
background-repeat: no-repeat; background-size: 100% 100%;
background-attachment: fixed;
}
21. 图片整合
360截图20190715214349419.jpg
22.表单
action：指向服务器地址，提交表单时会提交到action对应的地址。如果希望表单提交到服务器中，还必须给表单指定项指定一个name属性。
像选中按钮这种不需要用户填写内容的表单项必须指定value属性，这样被选中的按钮的value属性值会被提交给服务器。
在下拉列表中，name属性指定给select，value属性指定给option。
希望按钮或者多选框指定默认选中的选项，需要给选项添加checked属性：checked="checked"
给下拉列表指定默认选项，要给option添加selected属性:selected="selected"
select的专属属性：multiple="multiple"，下拉列表可以变成多选列表。
在select中，可以使用optgroup对选项进行分组，同一分组放在同一个group中，需要给group添加label属性。
使用filedset对表单进行分组，设置组名（legend）
23. 框架集
框架集可以同时引入多个页面。使用frameset来创建一个框架集，但是和body标签不能同时存在。在该标签中使用多个frame标签来引入指定页面。frameset必须选择rows或clos属性，指定每一部分所占的大小。
frameset也可以互相嵌套。
但是frameset不推荐使用。因为和frame一样，里面的内容不能被搜索引擎检索到，使用框架集则意味着不能有自己的内容，只能引入其他页面，引入几个页面，就需要发送几次请求，用户体验差。
快看完了，视频下架了，不更了...
网友评论