前端基础知识点

• html

1. 声明 !DOCTYPE html

   	作用：它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
   	用法：位于文档中的最前面的位置

2. HTML中有110个标签分为13类

   基础标签、格式标签、表单标签、框架标签、图像、音频 | 视频、链接、列表、表格、样式/节、元信息、程序、main       
   

3. 元素类型
   1. 块元素 （block）

   	特点： a.块级元素会新起一行。一般块级元素可以包含行内元素和其他块级元素。
   	b. 宽度缺省是它父级元素的100%，除非设定一个宽度
   	c. 高度、行高、外边距、内边距都可以设置
   	常见元素： address – 地址
   	blockquote – 块引用
   	center – 举中对齐块
   	dir – 目录列表
   	div – 常用块级容易，也是CSS layout的主要标签
   	dl – 定义列表
   	fieldset – form控制组
   	form – 交互表单
   	h1 – 大标题
   	h2 – 副标题
   	h3 – 3级标题
   	h4 – 4级标题
   	h5 – 5级标题
   	h6 – 6级标题
   	hr – 水平分隔线
   	menu – 菜单列表
   	noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
   	noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
   	ol – 有序表单
   	p – 段落
   	pre – 格式化文本
   	table – 表格
   	ul – 无序列表

   1. 行内块元素 (inline-block)

      	特点：a.元素排列在一行
      	b.宽度默认由内容决定
      	c.元素间默认有间距
      	d.支持宽高、外边距、内边距的所有样式的设置

   3.行内元素 （inline）

   	特点：a.都在一行上，遇到父级元素边界会自动换行
   	b.高、行高以及内外边距都不可以改变
   	c.宽度与内容一样宽，且不可改变
   	d.行内元素只能容纳文本或者其他行内元素
   	e.对于行内元素，需要注意的是：设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效
   	常见元素：
   	a – 锚点
   	abbr – 缩写
   	acronym – 首字
   	b – 粗体(不推荐)
   	bdo – bidi override
   	big – 大字体
   	br – 换行
   	cite – 引用
   	code – 计算机代码(在引用源码的时候需要)
   	dfn – 定义字段
   	em – 强调
   	font – 字体设定(不推荐)
   	i – 斜体
   	img – 图片
   	input – 输入框
   	kbd – 定义键盘文本
   	label – 表格标签
   	q – 短引用
   	s – 中划线(不推荐)
   	samp – 定义范例计算机代码
   	select – 项目选择
   	small – 小字体文本
   	span – 常用内联容器，定义文本内区块
   	strike – 中划线
   	strong – 粗体强调
   	sub – 下标
   	sup – 上标
   	textarea – 多行文本输入框
   	tt – 电传文本
   	u – 下划线

   行内元素的间距问题：

   	两个行内元素在一起，会出现一定的间距，即使将border、padding、margin都设置为零也无济于事，那么怎么才能去除这些间距呢？
   	1.重设字体
   	将行内元素的直接父级设置font-size=0px;再给行内元素设置字体大小就可以解决。
   	2.借助HTML注释
   	在两个行内元素之间加入HTML注释，告诉浏览器这中间不是换行也不是空格，而是连接在一起的，这样也可以解决。

• css

  1. 兼容性

     1. 权重层级

        	a. 较长的 css selector 权重会大于较短的 css selector
        	b. id selector 权重高于 class selector.
        	c. 行内样式>id>class>elements
        	d. 总是先考虑使用权重更高的 css 选择器, 而不是使用 !important
        	**只有当你的目的是覆盖来自第三方的 css(如: Bootstrap, normalize.css)时, 才在页面范围使用 !important**
        	**永远不要 在你写一个第三方插件时使用 !important**
        	**永远不要在全站范围使用 !important

     2. ie兼容的参考网站

        	a. https://www.cnblogs.com/xiaoyueyue165/p/6925148.html
        	b. 媒体查询 选择器前缀写法
        	兼容 ie8/9/ 10 @media screen\0{}
        	兼容 ie9/10 @media screen and (min-width:0\0) {}
        	兼容 ie8 @media \0screen{}
        	兼容 ie7及ie6 @media screen\9{}
        	兼容IE6/7/8 @media \0screen\,screen\9{}
        	兼容ie10 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
        	c. CSS 属性前缀
        	兼容ie6 _color:red;
        	兼容ie7及以下 *color:red;
        	兼容ie6/7 +color:red;
        	兼容ie6-10 color:red\9;
        	兼容ie8-10 color:red\0;
        	兼容 ie9/10 color:red\9\0;

     3. 关于ie9 不兼容 input 属性placeholder

        	思路：
        	1.将span标签覆盖在input上;
        	2.input 获取焦点隐藏span 失去焦点时存在值掩藏span 为空显示span;
        	3.点击span标签时 input聚焦
        	html:
        	<!--[if lte IE 9]>
        	<span class="span1">请输入受理编号</span>
        	<![endif]-->
        	<input type="text" class="hd_acceptnumber" value=""
        	placeholder="请输入受理编号" onfocus="$('.span1').hide()" onblur="if($(this).val()!=''){$('.span1').hide()}else{$('.span1').show()}""/>
        	js：
        	$(".span1").on("click",function(){
        	$(".hd_acceptnumber").focus();
        	})；

     4. 轮播图兼容

        	注意点：
        	1.Ie8 支持 swiper2.0版本 https://2.swiper.com.cn/
        	2.Ie7 支持 jq swiper2.0
        	兼容ie8以及ie7需要swiper 统一使用swiper2.0;下载测试包引入js\css

     5. Echart兼容

     6. 	注意点：
        	1.Ie8 不支持 rgba(0, 0, 0, 0.6)
        	解决：filter 格式：progid:含义为区分，gradient渐变颜色
        	progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000) (alpha RR GG BB)
        	2. Ie6-ie8 兼容
        	解决：opacity:0.5;
        	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
        	参考网址：https://segmentfault.com/a/1190000002433305
        	3.垂直水平居中
        	兼容：
        	position: absolute;
        	left: 50%;
        	top: 50%;
        	transform: translate(-50%, -50%);
        	-ms-transform: translate(-50%, -50%); /* IE9及以上支持 */
        	注意点：
        	1.Ie8 ie7兼容@media
        	position: absolute;
        	left: 50%;
        	top: 50%;
        	height: 600px;
        	max-width: 1000px;
        	margin-top: -300px; /* 高度的一半 */
        	margin-left: -500px; /* 宽度的一半 */

     7. js兼容

        	ie11-- ie9 document.querySelector()
        	Ie7 -- ie8 document.getElementById()
        	<!--[if IE]><![endif]--> 中 ie11 与ie10不支持 条件注
        	<!--[if IE]><![endif]--> 中 ie11 与ie10不支持 条件注释

  	<!DOCTYPE html> 是 HTML5 中唯一的 doctype，也被视作将网页 "升级" 到 HTML5 的第一步。
  	很多国外网站的 <!DOCTYPE html> 和 <HEAD> 之间都会有一段注释,如:
  	<!—[if IE 6 ]><html class="ie ielt9 ielt8 ielt7 ie6" lang="en-US"><![endif]—>
  	<!—[if IE 7 ]><html class="ie ielt9 ielt8 ie7" lang="en-US"><![endif]—>
  	<!—[if IE 8 ]><html class="ie ielt9 ie8" lang="en-US"><![endif]—>
  	<!—[if IE 9 ]><html class="ie ie9" lang="en-US"><![endif]—>
  	<!—[if (gt IE 9)|!(IE)]><!—><html lang="en-US"><!—<![endif]—>
  	改代码作用于 css，来写一些针对 IE 各版本的样式差异。
  	先判断用户用的哪个 IE 版本，然后在标签上加上该版本的 class，这样可以方便 hack。
  	css 文件是这样写的：
  	.ie6 xxx {};
  	.ie7 xxx {};
  	这是目前最好的 hack 方式之一。 （这种写法在 菜鸟教程中被提及感兴趣可以去看看：https://www.runoob.com/tags/tag-doctype.html）