0919(选择器)

2016-09-19  本文已影响0人  happywho250

0919内容：

  1. 认识html常用标签，css样式，css属性。
    将一个页面拆分成多个页面，iframe,

扩充：
断点续传 以及 百度云上传机制，断点续传是一种结合本地存储和网络存储的技术，主要用来解决网络失效时的视频丢失问题。网页内不支持断点续传，大文件不建议网页上传，
md5:为计算机安全领域广泛使用的一种散列函数，用以提供消息的完整性保护使用客户端,每一个文件都有一个32位的检验码，md5，比如上传视频到百度云，客户端会首先分析文件，生成一个32位校验码与服务器上比对，如果与服务器码值相同，则会实现秒传功能，实际没有上传本地，只是把服务器已有的保存到你的个人文件夹（云端同样的文件不会保存两份）

teleport pro软件 直接将网页内的所有内容down到本地访问

隐藏域：<form type="hidden" name="id" value="10">比如论坛评论，很多个帖子，评论都提交到服务器的一个地方进行处理，服务器就通过隐藏域来进行识别

html中的iframe

              将一个页面才分成多个部分，如做后台管理系统      
              <a href="2.html" target="fir">用户管理</a>  
              //单击使2.html页面在name名为"fir"的iframe分页上打开  
               <a href="3.html" target="fir">书籍管理</a>  
               //单击使3.html页面在name名为"fir"的iframe分页上打开   
              <iframe src="0.html" frameborder="1" width="400px"height="400pxbackground-color="red"  
              name="fir"></iframe>//一个默认页面为0.html的分页

css选择器

  1. 通用选择器 *{样式}

  2. 标签选择器 E{样式}

  3. class选择器 .class名{样式}

  4. ID选择器 #ID名{样式}

  5. 多元素的组合选择器
    5.1 多元素选择器 E,F{样式} 匹配所有的E,F元素
    p,a{background:red;}p,a元素背景都为红色
    5.2 后代元素选择器 E F{样式} 匹配所有属于E元素的后代F元素
    p a{color:red;}p元素的后代a元素颜色为红色
    5.3 子元素选择器 E>F{样式} 匹配所有的E元素的子一代F元素（第一层后代）
    p>a{color:red;} a只能属于p的子一代，不能是其他
    5.4 毗邻元素选择器 E+F{样式} 匹配紧随E元素之后的一个同级F元素
    5.5 同级通用元素选择器 E~F{样式} 匹配E元素之后的所有同级F元素（中间允许有其他元素间隔）

  6. 伪类及伪对象选择器
    6.1 :link,设置未被访问前的状态
    6.2 :hover, 设置鼠标悬停是的状态
    6.3 :visited, 设置访问后的状态
    6.4 :active, 设置点击是的状态
    6.5 :after, 用来和 content 属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容。

      body:after {  
  content: "The End"; body结束后页面会出现 The End的内容
  display: block;  
  margin-top: 2em;  
  text-align: center;
 }

6.6 :before, 用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容。
6.7 :first,设置页面容器第一页使用的样式。仅用于 @page 规则
@page :first { margin: 4cm }
6.8 :first-letter, 设置对象的第一个字符的样式
6.9 :first-child, 设置E的第一个子对象元素
p:first-child{background-color:red;}第一个P标签背景为red.
6.10 :first-line,设置第一行的样式
6.11 E:not(s) 匹配所以不匹配选择符s的元素E
6.12 E:target对页面中的某个target元素指定样式，在用户单击了页面中的链接并且跳转到了target元素才会生效 匹配相关url指定的E元素
<style>
:target{background-color:red};
</style>
</head>
<body>
<a href="#one">one</a>
<a href="#two">two</a>
<a id="one">A部分</a>
<a id="two">B部分</a>
</body>
当单击one时A部分显示红色，当单击two时B部分显红色

  1. 结构性伪类选择器
    7.1 E:root 匹配文档的根元素。在HTML中，根元素永远是HTML
    7.2 E:empty 匹配没有任何子元素（包括text节点）的元素E
    7.3 E:last-child 匹配父元素中最后一个E元素
    7.4 E:nth-child(n) 匹配父元素中的第n个子元素E
    7.5 E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E
    7.6 E:first-of-type 匹配同级兄弟元素中的第一个E元素
    7.7 E:only-child 匹配属于父元素中唯一子元素的E
    7.8 E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素(同种元素只存在一个)
    7.9 E:nth-of-type(n) 匹配同类型中第n个同级兄弟元素E
    7.10 E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
  2. UI元素状态伪类
    8.1 E：enable 匹配所有用户界面（form表单）中处于可用状态的元素E
    8.2 E：disable 匹配所有用户界面（form表单）中处于不可用状态的E元素
    8.3 E：checked 匹配所有用户界面（form表单）中处于选中状态的元素E
    8.4 E::selection 匹配E元素中被用户选中或处于高亮状态的部分
  3. 子串匹配的属性选择器
    9.1 E[att^="val"] 匹配具有att属性、且值以val开头的E元素
    9.2 E[attr$="val"]匹配具有att属性、且值以val结尾的E元素
    9.3 E[attr*="val"]匹配具有att属性、且值中含有val的E元素
    9.4 E[attr]匹配具有attr属性的所有E元素
上一篇下一篇

猜你喜欢

热点阅读