黑马程序员技术交流社区

标题: 成都校区html5第一天 [打印本页]

---

作者: zh1993huanhuan    时间: 2019-4-9 20:40
标题: 成都校区html5第一天
1. Html5的笔记

2019年4月5日
9:36

1新增的html的语义化：header头部  nav 导航栏  article 内容  section块级  aside侧边栏 footer尾部，注意：都是块级元素，1.针对搜索引擎，2.可以多次使用，3.在IE9中转换为块级元素，display-block;
2HTML的多媒体标签：
audio音频标签；
（1）标签格式：<audio src=路径，></audio>
  (2) 属性：controus=“controus” 控件， autoplay=" autoplay"自动播放，（谷歌禁用）loop="loop"循环播放。
  （3）不同的浏览器支持不同的格式，我们采取解决方法；
   <audio>
       <source  src="media/snow.mp3“  type="audio/mpeg">
     <source  src="media/snow.ogg“  type="audio/ogg">
   </audio>
video视频标签：
（1）标签格式：<video src=路径，></audio>
   (2) 属性：controus=“controus” 控件， autoplay=" autoplay"自动播放，（谷歌禁用）loop="loop"循环播放。
   
（3）不同的浏览器支持不同的格式，我们采取解决方法；
   <video>
       <source  src="media/video.mp4“  type="video/mp4">
     <source  src="media/video.ogg“  type="video/ogg">
   </video>
Input的新增标签和属性
type="email"
<form action="“>
<ul>
<li>邮箱：<input  type="email"></li>
<li>电话号码：<input  type="tel"></li>
<li>数量：<input  type="number"></li>
<li>搜索：<input  type="search"></li>

</ul>
</form>
4表单的属性：
required="required"不能为空；
  (重要）placeholder提示文本（占位符）；=请输入文字 默认不显示；
（重要） autocomplete   off关闭，经常用；
上传头像:<input type=file         multiple=multiple> 可以多选文件提交；
二.css3
1.Css3的属性选择器；
1）根据属性名
2）根据属性值
<button >按钮</button>
<button >按钮</button>   
<button disabled="disabled" >按钮</button>  
1.属性选择器 1.属于他的元素，  中间没有空格：button[disabled]
 <button disabled="disabled">按钮</button>
2.属于它的值：E  [“id=box”];
3.以它开头的 ：E [“id^=box"]；
4,替它结尾的：  E [“id$=box”]；
5全部选中：      E  [“id*=box”]；
2.结构选择器；
  E：first-child  
E：last-child  
E: nth-child(n)  n可以是选用的值，关键词，（even双数，odd单数，）公式:n是从0开始；可以是不同类的，选择父元素的
E: first-of-type
E: last-of-type
E:nth-of-type(n)是同类的；考虑元素类型。



3.伪类元素选择器；
::before
::after             content不能省略，可以为空；
4.2d的转换

1）移动；transform-translate(x,y);
             x,y自身的像素；
               transform-translatX(x);
               transform-translatY(y);
      百分比：自身宽度，高度的百分比，
             transform-translat（自身宽度，高度的百分比），

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2