calc
calc()里面写的是表达式 加减乘除都可以 运算符前后需要有空格隔开
div{ width: calc(193px + 327px); height: calc(367px - 189px); background: red; }
html5新增语义化标签
header/* 头部 */ <section>区域块</section> <nav>导航栏</nav> <main> <figure>类似dl <figcaption>就是可以写文字啥的 请注意位置 要么是figure里面第一个子元素 要么是figure里面最后一个子元素 <footer><!-- 尾部 --> <article>文章 类似多个p的集合 也是块元素</article> <hgroup>是标题的集合 但是不会加粗 可以代表标题</hgroup> <!-- 侧边栏 可以是某一大块的侧边 比如腾讯大学右边 --> <!-- 也可以是固定在页面的左右侧边 --> <aside>哈哈哈</aside> 行内<time>时间</time> <!-- 行内元素 高亮 默认有黄色背景色 --> <mark>变黄</mark> <!-- 对话框 --> <dialog>哈哈哈</dialog> <audio src="音频文件就可以"> <audio controls autoplay loop muted> <!-- 资源管理器 source 引入不同格式的音频 --> <!-- type="audio/音频格式"介绍这个音频文件是啥格式 可以不写 --> <source src="../video/3theA.mp4" type="audio/mepg"> <source src="../video/a.mp3" type="audio/mepg"> <source src="../video/movie.webm" type="audio/webm"> <source src="../video/movie.ogg" type="audio/ogg"> </audio> controls 控制条 autoplay 自动播放 loop 循环播放 如果写loop=2就是播放两次 muted 默认静音 <!-- 视频的引入 vedio--> <video controls autoplay loop muted> <source src="../video/3theA.mp4" type="video/mp4"> <source src="../video/movie.ogg" type="video/ogg"> <source src="../video/movie.webm" type="video/webm"> </video>
H5新增表单控件
<!-- 1.数字框 --> <!-- min="最小值" --> <!-- max="最大值" --> <!-- step="5"间隔是5 --> <p>数字框:<input type="number" min="10" max="20" step="5"></p> <!-- 2、搜素框 --> <p>搜索框:<input type="search"></p> <!-- 3、颜色框 --> <p>颜色框:<input type="color"></p> <!-- 4、电话框 --> <p>电话框:<input type="tel"></p> <!-- 5、滑动条 --> <!-- step="10"间隔是10 比如说 用于调整音量 那么你每按一次↑键 音量会加10 每按一次↓键 音量会减10 如果你不设置 默认是1 --> <p>滑动条:<input type="range"></p> <p>滑动条:<input type="range" step="10"></p> <!-- 6、网址框 --> <!-- multiple可以同时输入多个值 英文逗号隔开 --> <p>网址框:<input type="url"></p> <!-- 可以同时输入多个网址 英文逗号隔开 --> <p>网址框:<input type="url" multiple></p> <!-- 7、邮箱框 --> <!-- multiple可以同时输入多个值 英文逗号隔开 --> <p>邮箱:<input type="email"></p> <p>邮箱:<input type="email" multiple></p> <!-- 8、时间相关的 --> <!-- 年月 --> <input type="month"> <!-- 年周 --> <input type="week"> <!-- 年月日 --> <input type="date"> <!-- 时分 --> <input type="time"> <!-- 年月日时分 --> <input type="datetime-local"> <hr> <!-- 9、了解 --> <!-- <input type="text" list="对应id名字"> <datalist id="id名字"></datalist> 上面这样子写 就把datalist和input绑定了 --> <input type="text" list="gouzi"> <datalist id="gouzi"> <option value="彭于晏" label="最帅的男人"></option> <option value="三哥" label="最man的男人"></option> <option value="高尔山" label="最阳光的男人"></option> <option value="老叔" label="最性感的男人"></option> <option value="矿工" label="最勤劳的男人"></option> <option value="张长宾" label="最优质的男人"></option> <option value="高圆圆" label="男人最喜欢的女人"></option> </datalist>
<!-- H5新增的表单属性 --> <!-- 1、虚焦的提示信息 --> <p>1、虚焦的提示信 <input type="text" placeholder="请输入"></p> <!-- 2、最大值 max="数字" --> <!-- 3、最小值 min="数字" --> <!-- 4、间隔、步幅 step="数字" --> <p>234 最大值 最小值 步幅 <input type="number" min="10" max="30" step="3"></p> <!-- 5、必填项 required --> <p>5、必填项 <input type="text" required></p> <!-- 6、只读项 只可以看 不能更改 readonly --> <p>6、只读项 <input type="text" value="哈哈哈" readonly></p> <!-- 7、自动聚焦 autofocus--> <p>7、自动聚焦 <input type="text" autofocus></p> <!-- 8、可以同时输入多个值 可以输入一个或多个值,每个值之间用逗号分开 multiple --> <p>8、可以同时输入多个值 <input type="url" multiple></p> <!-- 9、正则表达式 pattern="正则表达式" 请注意 二阶段会学 现在了解就好 --> <input type="text" pattern="[a-z]{6}"> <!-- 表示可以随机输入小写6个英文 --> <!-- 10、list属性: 结合datalist元素使用 --> <!-- <input type="text" list="对应id名字"> <datalist id="id名字"></datalist> 上面这样子写 就把datalist和input绑定了 --> <!-- 11、autocomplete属性:自动补全 历史记录 --> <input type="text" list="gouzi" autocomplete="off"> <datalist id="gouzi"> <option value="彭于晏" label="最帅的男人"></option> <option value="三哥" label="最man的男人"></option> <option value="高尔山" label="最阳光的男人"></option> <option value="老叔" label="最性感的男人"></option> <option value="矿工" label="最勤劳的男人"></option> <option value="张长宾" label="最优质的男人"></option> <option value="高圆圆" label="男人最喜欢的女人"></option> </datalist> <!-- 12、取消验证novalidate 你个哪一个表单标签设置上 那么你之前给他设置的验证信息将失效 还可以给form -->
新增属性选择器
/* 1、属性选择器 */ /* 代表有placeholder属性的input框 */ input[placeholder]{ background: red; } /* 2、属性值选择器 */ /* 代表type属性值为password的input框 */ input[type="password"]{ background: palegreen; } /* 代表选中 value属性值为abc的input */ input[value="abc"]{ background: yellow; } /* -------------------属性选择器 的 升级版------ */ /* 3、属性值开头选择器^ 英文输入法状态下 按住shift按键 按上方数字6 */ input[value^="abc"]{ background: cyan; } /* 4、属性值结尾选择器 $ 英文输入法状态下 按住shift按键 按上方数字4*/ input[value$="abc"]{ background: orange; } /* 5、 但凡有就行 属性值选择器 无论在前 在后 在中间 有就行 * */ input[value*="abc"]{ background: palegreen; } /* 6、有abc这个单词 啥叫单词 空格隔开 单纯的abc 属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词 */ input[value~="abc"]{ background: blue; } /* 7、只有abc这个单词 或者是abc- 这样子的 可以识别出来 | 英文输入法状态下 按住shift按键 按enter上方 "|"按键 并且属性值是value或者以“value-”开头的值(比如说zh-cn)*/ input[value|="abc"]{ background: purple; }
p:nth-child使用及其弊端
1. /* 结构性伪类 :nth-child() 一会儿还会说另一个 */ /* 选中第一个li */ li:nth-child(1){ background: pink; } /* 还可以这样子选中第一个 */ li:first-child{ background: skyblue; } /* 选中最后一个 第一种方式就是数一数有多少个 */ li:nth-child(13){ background: palegreen; } /* 还可以这样子选中最后一个 */ li:last-child{ background: purple; } /* 我们可以随机选择某一个 比如说第四个 */ li:nth-child(4){ background: cyan; } /* 我们还可以倒数选中第几个 */ li:nth-last-child(2){ /* 倒数第二个 */ background: yellow; } /* ------其实还可以书写数学表达式----- */ /* 选中奇数行 */ li:nth-child(2n+1){ background: red; } /* 当然 还可以这样子表示奇数 odd */ li:nth-child(odd){ background: yellow; } /* 选中偶数行 */ li:nth-child(2n){ background: cyan; } /* 当然 还可以这样子表示偶数 */ li:nth-child(even){ background: purple } 2.弊端 /* p:nth-child(3){ 先去找到第三个位置 结果发现是span 不是p 所以p:nthh-child(3)无效 background: red; } */ p:nth-child(4){ /* 先找到第四个位置 核对是不是p标签啊 是 可以作用 */ background: red; } /* :nth-child()先找位置 再核对元素是否为对应的 */ </style> </head> <body> <p>1</p> <p>2</p> <span>会打乱秩序</span> <p>3</p> <p>4</p>
了解
X:only-child这个伪类一般用的比较少,比如上述代码匹配的是div下的有且仅有一个的p,也就是说,如果div内有多个p,将不匹配。
:root匹配文档的根元素。在HTML(标准通用标记语言下的一个应用)中,根元素永远是HTML
X:empty匹配没有任何子元素(包括包含文本)的元素X -->
nth-of-type
/* div:nth-of-type() */ /* 他是先把所有div拎出来 然后再去找第几个 */ /* 你可以这样子选中第一个 */ li:nth-of-type(1){ background: red; } /* 你还可以这样子选中第一个 */ li:first-of-type{ background: yellow; } /* 你可以选中最后一个 */ li:nth-of-type(9){ background: cyan; } /* 你还可以这样子写 */ li:last-of-type{ background: olive; } /* 你可以选中某个 */ li:nth-of-type(4){ background: palegreen; } /* 你还可以选中倒数第几个 */ li:nth-last-of-type(3){ background: purple; } /* 你还可以数学表达式 奇数2n+1 或者odd 偶数是2n或者even */ li:nth-of-type(4n){ font-size: 30px; color:#f00; }