H5C3提高笔记（部分简化版）

1.CSS写三角形

1.1写一个宽高为0的矩形
1.2定义边框的粗细，虚实 ，颜色透明度为0
1.3为矩形的一条边设置颜色即可

2.用户界面：

   2.1鼠标样式
li{
curcer: pointer(小手)   move(移动)  text(文字) not-allowed（禁止）
  }
   2.2表单轮廓线
input{
     outline:none;
}
   2.3防止拖拽文本域
textarea{
     resize:none;
}

3.行内元素和文本(图片)的垂直居中：（行内元素和行内块元素）

 span{
   vertical-aline：baseline(基线)	top  middle  bottom
	}
   3.1图片与盒子底部空白缝隙的解决方案
答：1.给img添加非基线对齐。
       2.给图片转换为块级元素。

4.溢出文字省略号显示

4.1单行文字：(步骤)	
     white-space:nowrap;(强制一行显示)(默认normal自动换行)
     overflow：hidden;(超出部分隐藏)
     text-overflow:ellipsis；(文字用省略号代替超出部分)
4.2多行文字：（兼容性较差）（可由后台人员实现）
      overflow：hidden;(超出部分隐藏)
      text-overflow:ellipsis；(文字用省略号代替超出部分)
      display:-webkit-box;
      -webkit-line-clamp:  2;(第二行显示省略号)
      -webkit-box-orient:vertical;

HTML5

1.新增语义化标签：

<header>:头部标签
<nav>:导航栏标签
<aside>:侧边栏标签
<footer>:底部标签
<section>:某个区域标签
<article>:内容标签
***IE9中，这些元素需要转换为块级元素***

2.新增多媒体标签：

视频：<video>(尽量MP4格式的视频)(可以设置宽高)
	<video src="文件地址" controls></video>
	属性：controls：播放控件     loop：循环播放   muted：静音播放
	          poster：等待加载时显示图片   autoplay：自动播放(谷歌浏览器禁止了该功能,需添加muted)
音频：<audio>
	<vaudio src="文件地址" controls></audio>(尽量MP3格式)
	属性：autoplay(谷歌浏览器禁止了该功能)   controls  loop

3.新增input类型：

type="email"  type="url"  type="date"  type="time"  type="tel"
type="number"  type="week"  type="month"  type="search"  type="color"

4.新增表单属性：

required：内容 必填   placeholder：提示文本   multiple：可以多选文件提交
autocomplete: off/on  输入的历史记录  autofocus：焦点自动填充

CSS3

1.属性选择器：（不借助与类 or id）

①input(元素) [value(属性)]{
	color:blue;
	}
②input(元素) [type(属性)=text(值)]{
	color:blue;
	}

2.E:nth-child(n)选择器

3.E:nth-of-type(n)选择器

4.伪元素选择器：

::before
::after

5.新增盒子模型：

1.box-sizing:content-box  盒子大小为：width+border+padding（默认）
2.box-sizing:border-box  盒子大小为：width

6.过渡：

transition：要过渡的属性(all)  花费的时间(秒s)   运动曲线   何时开始（后两个可以省略）