码迷,mamicode.com
首页 > 其他好文 > 详细

表单,音视频,语义化标签与属性选择器,结构伪类选择器,伪元素选择器(按钮禁止点击)

时间:2020-03-06 23:57:38      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:dom   数字键盘   mp4   禁用   选择   播放器   针对   sea   table   

HTML5简介

万维网的核心语言,标准通用标记语言的写一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素,属性和行为;广义的HTML是包含HTML5本身 + CSS3 + JavaScript,虽然不被所有浏览器所支持,但它是一种趋势;

新增语义化标签

<header></header> <!-- 头部标签 -->
<nav></nav> <!-- 导航标签 -->
<article></article> <!-- 内容标签 -->
<section></section> <!-- 块级标签 -->
<aside></aside> <!-- 侧边栏标签 -->
<footer></footer> <!-- 尾部标签 -->

注意:

  1. 这些语义化标签是针对搜索引擎的;
  2. 可以被使用多次
  3. 在 IE9 中需要被转换成块级标签 display: block;

音频标签

<audio src="音频地址"></audio>
<!-- 由于mp3的格式不是被所有的浏览器所支持的 -->
<audio>
  <source src="url.mp3" type="audio/mpeg" />
  <source src="url.ogg" type="audio/ogg" />
</audio>
属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放,chrome 默认时禁用的
controls controls 如果出现该属性,则向用户显示播放控件,各个浏览器样式不同
loop loop 如果出现该属性,则每当音频结束时重新开始播放
src url 音频播放地址

视频标签

<video src="视频地址"></video>
<!-- 由于mp4的格式不是被所有的浏览器所支持的 -->
<video>
  <source src="url.mp4" type="video/mp4" />
  <source src-"url.ogg" type="video/ogg" />
</video>
属性 描述
autoplay autoplay 视频就绪自动播放
controls controls 向用户显示播放控件
loop loop 循环播放
preload auto,meta,none 当页面加载后载入整个视频;当页面加载后只载入元数据;当页面加载后不载入视频 (如果设置了 autoplay 属性,则忽略该属性)
src url 地址
poster imgurl 加载等待的画面图片
muted muted 静音播放
width px 设置播放器宽度
height px 设置播放器高度

新增表单属性

input 新增 HTML5 表单属性,移动端常用

<!-- 按钮禁止点击 -->
<button disable></button>
属性值 说明
type="email" 限制用户必须输入邮箱类型
type="url" 限制用户必须输入网址
type="date" 限制用户输入日期
type="time" 限制用户输入时间
type="month" 限制用户输入月份
type="week" 限制用户输入星期
type="number" 显示用户输入数字 (mobile唤醒数字键盘)
type="tel" 显示用户输入手机号码(mobile唤醒数字键盘)
type="search" 搜索框
type="color" 生成一个选择颜色表单
属性 说明
required required 表单不能为空
placeholder 提示文本 表单的提示信息
autofocus autofocus 自动聚焦属性光标
autocomplate off/on 需要成功提交过一次内容,需要有一个name属性,一般情况为off
multiple multiple 可以选择多文件提交

CSS3 选择器

属性选择器

选择符 简介
E[attr] 选择具有attr属性的E元素
E[attr="val"] 选择attr属性等于val的元素
E[attr^="val"] 选择attr属性开头等于val的元素
E[attr$="val"] 选择attr属性结尾等于val的元素
E[attr*="val"] 选择attr属性中包含val的元素

结构伪类选择器

选择符 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中的最后一个子元素E
E:nth-child(n) 匹配父元素中的第N个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个

注意:nth-child(n);nth-of-type(n) ;even:偶数;odd:基数

伪元素选择器

选择符 简介
::before 在元素内部的前面插入元素
::after 在元素内部的后面插入元素

注意:

  • before 和 after 必须有 content 属性
  • before 在内容的前面 after 在内容的后面
  • before 和 after 创建一个元素,但是属于行内元素
  • 因为在 dom 中看不到刚才创建的元素,所以称为伪元素
  • 伪元素和标签选择器一样权重为1

表单,音视频,语义化标签与属性选择器,结构伪类选择器,伪元素选择器(按钮禁止点击)

标签:dom   数字键盘   mp4   禁用   选择   播放器   针对   sea   table   

原文地址:https://www.cnblogs.com/article-record/p/12431607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!