HTML部分
1.基本结构骨架
2.扩展
3.块级元素
行内元素
span a i
<span></span>
<a href="">超链接</a>
<em>斜体</em><i>斜体</i>
<b>加粗</b><strong>加粗</strong>
行内元素特征：(1)设置宽高无效 (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效 (3)不会自动进行换行
块标签
div，p、ul、li、ol、dl、dt、dd、nav等
<h1-h6>标题标签</h1-h6>
<p>段落标签</p>
<div></div>
<ul>无序列表</ul>
<ol>有序列表</ol>
<table>表格</table>
<form action="">表单</form>
块状元素特征：(1)能够识别宽高 (2)margin和padding的上下左右均对其有效 (3)可以自动换行 (4)多个块状元素标签写在一起，默认排列方式为从上至下
行内块元素
img input
<img src="" alt="">图片
<input type="text">文本框
<button>按钮</button>
特征：(1)不自动换行 (2)能够识别宽高(3)元素排列在一行;
使用display属性能够将三者任意转换：
display:inline;转换为行内元素
display:block;转换为块状元素
display:inline-block;转换为行内块状元素
标签上title属性与alt属性的区别是什么？
title属性为设置该属性的元素提供建议性的信息。
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的
** # iframe的优缺点？ **
优点：
- 解决加载缓慢的第三方内容如图标和广告等的加载问题
- iframe无刷新文件上传
- iframe跨域通信
缺点：
- iframe会阻塞主页面的Onload事件
- 无法被一些搜索引擎索引到
- 页面会增加服务器的http请求
- 会产生很多页面，不容易管理。
4.表单
text：单行文本输入框
password：密码输入框
radio：单选按钮
checked：复选框
button：普通按钮
submit：提交按钮
reset：重置按钮
image：图像的提交按钮
file：文件域
textarea：文本域
<input type="text" name="控件名称" value="默认文本值" size="写正整数，定义页面中的显示高度" checked="checked">定义选择默认选中项
5.表格
```html
table、tr 、td是组成表格的基本标签
tr是行
td是列
表格的合并
合并遵循：从上到下从左到右合并
合并代码
合并行：colspan （跨列合并）
合并列：rowspan （跨行合并）
属性
border：表格的边框
cellspancing：设置单元格与单元格边框之间的间隙
cellpadding：设置单元格边框之间的空白间距
width：表格宽度
height：表格高度
align：水平对齐方式center、left、right
CSS知识
请列举几种隐藏元素的方法？
-
visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
-
opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate
-
position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。
-
display: none；元素会变得不可见，并且不会再占用文档的空间。
css的样式表主要有几种
行内样式
内部样式
外联样式
1.语法
CSS只有一种注释方式： /* 注释内容 */
样式的三种写法
内部css样式，通过style标签下面写
外部样式，创建css文件用link标签href中输入文件名
嵌入式缺点混乱
2.选择器
选择器
类选择器：class-"."
id选择器：-“#”
通配符选择器：“*”
复合选择器
<1…>后代选择器
用空格连接
实例：.class h3{表示class选择器内层里所有的h3}
当标签发生嵌套的时候，外层为内存的父级内层标签就成为外层标签的后代
<2…>子元素选择器
子元素选择器
用>号连接
实例：.class>h3{表示类选择器的下一级的h3标签 }（！注意只能选择这个类选择器的下一级）
子元素选择器只能选择作为某元素子元素的元素
❤️…>交集选择器
交集选择器
用“.”链接
实例：h3.class{意思是选择h3标签且类名为class} （！两个选择器之间不可以有空格）
<4…>并集选择器
并集选择器
用“，”连接
实例：p，h{ }或.class,p{这两个分别选择的是heml中p标签和h标签 ；后者选择的是.class标签和p标签 }
<5…>伪类选择器
a:link :没有访问过的链接
a:visited ：已经访问过的链接
a:hover ： 鼠标移动到链接上
a:actie ：选定的链接（通俗的说就是鼠标点击不放的时候）
使用案例：a：hover{ color：red；}意思是鼠标移动到a标签的链接上时变成红色
3.优先级(重点)
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
4.权重（重点）
带有 !important 的权重为 10000
在行内写的css样式权重为1000
id选择器的权重为100
类选择器的权重为10
标签选择器的权重为1
例如：
.test #box{}
#box .test{}
//110
5、属性
1.文字相关
font-family设置字体
font-size字体大小
color表示字体颜色 font-weight:900/bold;
文字水平居中：text-align:center;
单行文本垂直居中：line-height
标签水平居中：margin:0 auto;
2.文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
CSS中 link 和@import 的区别是什么？
两者都是外部引用 CSS 的方式，但是存在一定的区别：
（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
（4）link支持使用Javascript控制DOM改变样式；而@import不支持。
背景
background-color:red; #ffff代表白色 #000代表黑色 #ccc代表灰色
background-color:rgba(0,0,0,.5) ;
background-image:url();图片路径
background-repeat:repeat/no-repeat/repeat-x/repeat-y;
background-position:left center; 第一个值代表水平的值 第二个值代表垂直的值
水平方向有left center right
垂直方向有 top center bottom
边框
边框2px 实线 黑色的语法是
border:2px solid #000;
边框2px 虚线 黑色的语法是
border:2px dashed #000;
solid是实线 dashed虚线
盒模型
一个盒子由content+padding+border+margin组成
padding:10px；代表上下左右都是10px
padding:10px 20px;上下是10px 左右是20px
padding:10px 20px 30px;代表上 左右 下
padding:10px 20px 30px 40px;代表上右下左
margin同理
margin:10px 5px 20px 5px；的含义描述正确的是上10px 右5px 下20px 左5px
例如
有一个div设置width是100px height是50px,border:5px solid #000; padding:10px 20px;那么盒子在页面实际占
据的宽度和高度是多少像素？
100+10+40
50+10+20
假设一个div设置width是200px,border:1px solid #000;padding-left:10px;box-sizing:border-box;那么这个div在页面实际占据的宽度是多少像素？
200px
浮动属性
float:none;
float:right;
float:left;
浮动：浮动影响，为什么清浮动？怎么清浮动？
页面布局的时候子元素不浮动的时候会撑起父盒子的高度，如果浮动了父盒子的高度为0，对后面的页面布局造成
影响，所以需要清除浮动。
(1)额外标签法 子级
（2）overflow:hidden；父元素等
（3）父级双伪元素清浮动 before。after
定位模式？定位的参照点？
相对定位：relative 相对他自身原来的位置
绝对定位: absolute 相对他最近的有定位的父元素
固定定位: fixed 浏览器 页面
注意：只有添加了定位的元素才可以设置z-index属性，后面的值代表层级，没有px等单位。
display属性值
display:none;隐藏但是不占位置、
visibility:hidden;隐藏但是占据位置
display:block;元素展示还有一个作用转换为块元素
display:inline;转换成行内元素
display：inline-block;转换成行内块元素
伪元素
a:link初识状态 a:visited 访问过后的 a:hover鼠标经过 a:active鼠标点击的一瞬间
口诀： lvha
文本下划线
ul去除小圆点 list-style:none;
a标签去除下划线 text-decoration:none;
a标签横穿线 text-decoration:line-through;
请描述一下cookies，sessionStorage和localStorage的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
扫一扫
1396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
