html css

1、用于预格式化文本的标签是<pre>
预格式化就是保留文字在源码中的格式 最后显示出来的样式与源码中的样式一致
2、
col-xs- 超小屏幕手机
col-sm- 小屏幕平板
col-md- 中等屏幕 笔记本电脑
col-lg- 大屏幕 台式机
3、动画
linear 动画从头到尾的速度是相同的
ease默认 动画以低速开始 然后加快 在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
4、<abbr>标签用来表示一个缩写词或者首字母缩略词
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
鼠标在PRC上时会显示People’s Republic of China
5、id名不能为纯数字
6、<dl>定义列表 <dt>定义列表中的项目<dd>描述列表中的项目

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
</dl>

7、<ol>标签定义有序列表 <ul>标签定义无序列表 两者里面都可以放<li>标签
8、浏览器端的存储技术：cookie、WebStorage(localStorage\sessionStorage)、userData、indexedDB
服务器端的存储技术：session
9、calc()函数用于动态计算长度值width:calc(100%-100px);左右两边间距各位50px
10、UTF-8 万国码 可在同一页面中显示其他多种语言
GBK 汉字编码 可表示繁体字简体字
11、Wekbit是一个开源的浏览器引擎 也就是浏览器的内核 Chrome Safari 搜狗浏览器使用
Firefox便是使用的Mozilla内核
而微软的IE系列则使用的是Trident内核
12、<hr>水平线 <img>行内替换元素<input>行内替换元素
13、background-position 配合 background-image 属性使用 有两个参数
①Xpos 规定水平方向的对齐方式 值有left right center
Ypos 规定垂直方向的对齐方式 值有top bottom center
②x% y% 这里的x%指的是父级容器的宽度减去图片的宽度后的差值的x%
③x y
14、head标签可以包含 title meta link script等
15、HTML body部分中的JavaScript会在页面加载的时候执行
HTML head部分中的JavaScript会在被调用的时候执行
16、css链接样式 a:link; a:visited; a:hover; a:active;
17、margin padding border display 不可以继承
18、css3：ragba 基于rgb设置颜色和透明度rgba(r,g,b,透明度);
19、BFC块级格式化上下文
20、关于图片请求
img src都会请求
挂靠在某个元素上的background:url()会请求 单独写这么一个样式并不会请求
21、BFC块级格式化上下文
当：①float:left/right; ②position:fixed/absolute; ③display:inline-block/table-cell/table-caption/flex/inline-flex; ④overflow:hidden/scroll/auto; 是就会出现一个BFC
BFC就是页面上的一个隔离的独立容器 容器里面的元素不会影响到外面的元素
22、主流浏览器内核私有属性css前缀
Mozilla内核(Firefox) -moz
webkit内核(chrome/safari) -webkit
opera内核(opera) -o
trident内核(ie) -ms
23、css选择器优先级
id>类>标签
24、font-style 设置字体的风格 font-weight设置字体的粗细
25、在网页上通过链接直接打开邮件客户端发送邮件<a href="mailto:邮件地址"></>
26、H5中 img、br、hr、input、link、meta等标签不用写自闭合斜线了
27、调用canvas对象的getContext方法来获取绘图环境
28、border:none 时不是宽度为0 none表示无边框样式
29、在js里面添加的属性名使用驼峰法(fontSize) 在css里面使用连线(font-size)
30、H5中的属性名对大小写不敏感
31、data-* 属性用于存储页面或应用程序的私有自定义数据 赋予我们在所有HTML元素上嵌入自定义data属性的能力
属性名不能包含大写字母 使用 getAttribute 获取属性

function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
    alert(animal.innerHTML + "是一种" + animalType + "。");
}
//
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>    
</ul>

32、css属性 就近原则 <div><span>1</span></div>即span的属性会覆盖div

33、
CSS Sprites
①简介
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。
②优点
（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
（2）CSS Sprites能减少图片的字节；
（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
③缺点
（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。
34、css3选择器
:root 选择文档的根元素
:empty p:empty 选择没有子元素的每个<p>元素
35、input 标签的 readonly属性 readonly规定输入的字段为只读
36、设置一般用set开头 获取采用get开头 对于键值一般是(key,value)的形式
37、我们可以在a标签的href中添加什么使页面不跳转
javascript:void(0) javascript:; #
38、
①内联css：内联css也可以称为行内css或者行级css 它直接在标签内部引入 显著的优点是十分便捷、高效。但是同时也造成了不能重用样式的缺点 如果代码行数到达一定长度不建议使用 通常内联css作为测试使用 可以查找代码中的bug<div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div>
②页级css：页级css也可称为内部css 整体是放在head标签里面的 在style标签里面定义样式 作用范围和字面意思相同 如果你写的代码比较长 每次写样式都要拉到最上面就很麻烦 所以它在可维护性方面较差

<style type="text/css">
    div{
        width: 65px;
        height: 20px;
        border: 1px solid;
        background: greenyellow;
       }
</style>

③外联css：外联css也称为外部css 在实际项目中通常是使用这种方式 它只在页面中使用link或者@import引入即可 可维护性好 并且外联css是一个单独的文件 可以作用于多个页面 在修改的时候可以针对性的修改某一块区域 达到多个页面样式同时变更
link和@import都没有放置顺序的要求 但是不同的放置位置可能会造成效果显示的差异 对于link无论放在哪个位置 都是一边加载数据 一边进行优化 视觉感受良好 而对于@import 放置到哪里 才从哪里开始加载css样式 即先加载数据 然后加载样式 如果网速不佳 可能会造成只有数据出来样式一点点加载的效果 并且在同一个页面中 调用两种方式 link永远比@import的优先级高
①<link rel="stylesheet" type="text/css" href="*.css" />
link语法格式中 rel指的是关联 type指的是类型 href指的是链接文件路径
link的作用主要用来引入css和网页图标 并告知搜索引擎 网页之间的关系等
②<style>@import url("*.css");</style>
@import语法格式务必写在style标签里 后面加文件路径即可
39、float元素
当一个元素浮动之后 它会被移出正常的文档流 然后向左或向右平移 一直平移到碰到了所处容器的边框 或者碰到了另一个浮动的元素
只有横向浮动没有纵向浮动
当元素应用了float属性之后 将会脱离普通流 其父元素将得不到脱离普通流的子元素的高度
float会将元素的display属性改为block
①行内元素与浮动元素发生重叠 其边框背景和内容都会显示在浮动元素之上
②块级元素与浮动元素发生重叠时 边框和背景都会显示在浮动元素之下 内容会显示在浮动元素之上
清除浮动的方法：在容器中添加一个标签设置标签的样式为 clear:both;、容器设置为overflow:hidden;
40、DHTML
DHTML是dynamic HTML即动态HTML 是相对传统的静态的html而言的一种制作网页的概念
DHTML只是HTML、CSS和客户端脚本的集成 即一个页面中包括html+css+javascript(或其他客户端脚本)
DHTML的优点 html确定页面框架 css和脚本决定页面样式 动态内容 动态定位
41、css可继承属性：字体(font-?) 文本属性(text-?/line-height/word-spacing 增加或减少单词间的空白/letter-spacing 增加或减少字符间的空白/direction 规定文本的书写方向/color 文本颜色)元素可见性 表格属性(caption-side/border-collapse等)列表布局属性(list-style-?)
42、h1加粗大号文字
43、可以对元素的margin设置百分数 百分数是相对父元素的width计算 不管是margin-top/bottom/left/right padding同理
44、优化css图片加载 CSS sprite / SVG sprite / Iconfont / base64
45、对input输入框的输入数字范围进行限制 <input type="number" min=1 max=100>
46、H5标签
video 定义视频
track 定义用在媒体播放器中的文本轨道
time 定义日期时间
summary 定义details元素的标题
source 定义媒介源
nav 定义导航
select 定义下拉列表
meta 定义元信息
menu 定义菜单列表
mark 定义有记号的文本
keygen 定义生成密钥
embed 定义外部交互的内容或插件
figure 定义媒介内容的分组 以及标题
等
47、input元素可定义type的值
button 定义可点击的按钮
checkbox 定义复选框
file 定义输入字段和“浏览”按钮 供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段
48、网页HTML文档支持的图片格式有 jpg gif png bmp 。 bmp格式不常见 因为这种格式虽然清晰色彩丰富 但是所占内存很大
49、
strong 重要文本
em 强调文本
b 粗体文本
big 大号字体效果
50、contents() 方法获得匹配元素集合中每个元素的子节点
51、css权重
style 行内样式 1000
id 100
class 10
element 标签 1
52、hidden-print 在浏览器端可见 打印时隐藏 bootstrap
53、一份标准的HTML文档 必须的HTML标签
html head title body
54、
（1）request header
分析http协议的时候可以通过浏览器的开发者工具查看
①Accept：向服务器声明浏览器(客户端)可以接受的媒体类型的资源
浏览器可以接受text/html、application/xhtml+xml等
②Accept-encoding：向服务器声明客户端接收的编码方法 通常为压缩方法 浏览器支持采用经过gzip deflate br压缩过的资源
③Accept-language：向服务器声明客户端接收的语言 有en-US/en/zh-CN等
q表示权重
④Cache-control：控制浏览器的缓存 常见值为private、no-cache、max-age、alidate默认为private
⑤Cookie 告诉服务器关于session的信息 存储让服务器辨别用户身份的信息
⑥Refer：告诉服务器该页面是从哪个页面链接的
⑦Upgrade-insecure-requests：声明浏览器支持从http请求自动升级为https请求 并且在以后发送请求的时候都使用https
⑧User-agent：向服务器发送浏览器的版本、系统、应用程序的信息
（2）response header
①Accept-ranges：表示自己是否接收获取某个实体的一部分 服务器支持断点续传 以及同时下载文件的多个部分时 必须设置为bytes
②Alt-svc：服务器使用alt-svc标识资源 可以通过不同的网络位置或者网络协议进行获取
③Content-length：http消息实体的传输长度
④Content-encoding：设置数据的编码类型(压缩类型)
⑤Content-type：设置响应体的媒体资源类型
⑥Age：表明响应从缓存中拿到时相应的寿命
⑦Date：设置响应被服务器创建的时间
⑧Expires：设置响应体的过期时间 如果在过期之前访问 就会读取缓存中的版本
⑨Last-modified：文件在服务器中最后被修改的时间
⑩p3p：隐私安全平台 网站向浏览器申明自己的隐私政策
⑪Server：设置服务器名称
⑫Set-cookie：设置http的cookie
⑬Status：设置http的响应状态
55、table中 tr表示行 th和td同样是表示一个存储格 唯一不同的是th中的文字以粗体出现
56、vlink 设置已被访问的连接的颜色
57、webworker运行在后台的JavaScript程序 不会影响页面性能
58、运用css3动画 需要运用@keyframes规则animation属性
59、SVG是一种使用XML描述2D图形的语言 适合静态图片的展示
canvas 对象支持所有的JavaScript鼠标事件 但绘制在其中的图形并不作为其子元素存在 所以需要获取canvas对象上的鼠标坐标来绑定事件 并不能直接给canvas里面的图形绑定事件
60、hsl 代表 色相-饱和度-明度
61、
readonly=true 页面上无法修改内容 内容会被提交
disabled=true 无法修改内容 也不会被提交
62、div:nth-child(?) 子元素必须是div元素
63、em 强调 显示为斜体不加粗文本
64、autofocus聚焦到这个input框上<input type="text" name="fname" autofocus>