html5
2025-01-29
HTML5
1.Html5 是一个泛指: HTML5 +CSS3+JavaScript
文档的第一行的代码表示的是当前文档的类型(Html1.0---html5.0)
Html5 的文档类型: <!doctype Html>
2.Html5和html之间有什么区别?
(1)首先在文档类型的书写上不同,html5中新增了一些语义化的标签,以及表单属性和表单的类型,还包含有新的伪类,伪元素选择器。
(2)简单,在书写上没有一定的要求eg: 可以不写结束标签,但是不能太随意。
小拓展:
浏览器内核指的是浏览器渲染的方式,每个浏览器的内核不相同。浏览器最重要或者说核心的部分是"Rendering Engine",即"渲染引擎",不过我们一般习惯将之称为"浏览器内核"。它负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。 所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
- 常用的语义标签:<nav></nav>--------导航
<section></section>-------区块,相当于html中的主体
<header></header>-------页眉,相当于html中的头部
<footer></footer>----------页脚,相当于html中的尾部
<article></article>------<文章>
<aside></aside>------<侧边栏>
<figure></figure>------表示媒介 内容分组,里面用来放置图像图表等
<progress></progress>------进度条,包括value和max两个属性
- 表单事件以及表单属性:
表单属性: patttern:正则表达式,用来验证表单
placeholder:占位符,用于表单的阴影提示
autofocus:用于获取焦点(可以自动聚焦在某一控件上)
muliple:多选
required:必填项
novalidate:关闭验证
autocomplete:规定输入字段是否应该启用自动完成功能其属性值(value)包括两个属性值:on(启用自动完成),off(禁止)
表单事件: oninput oninvalid(验证不通过时的提示)
智能(数据)列表:<datalist>
<option></option>-------通过option添加属性
<option></option>
</datalist>
5.多媒体
Video audio embed
属性: src 引入视频的路径
Controls 属性只有video和audio具备
Poster: 设置初始加载的视频图片
Loop: 设置视频循环播放
Autoplay: 自动播放
Type: video/mp4
添加多媒体的四种方法:(1)通过controls(是用来设置视频播放控件)控件添加
例如:<video src=”媒体链接” controls=”controls”>
(2)<video controls=”controls” poster=”给视频添加背景图片 ”loop=”loop” autoplay=”autoplay”>
(3)<auto autoplay=”autoplay”>
<source src=”video/....mp4(mp3)”></source>
</auto>
- <embed src=”video/...mp3(mp4)”></embed>这种方法最简单,不用添加其他播放控件.
6. css3中新增选择器
- 属性选择器分为5种
E:[attr=value]
E:[attr]
E:[attr*=value]
E:[attr^=value]
E:[attr$=value]
2.伪类选择器
E::first-child E::last-child E::nth-child()
E::nth-last-child()
E::target 结合锚点使用 ,用户点击时选择
E::selection 选中的区域
E::empty 选择没有内容的元素
E::after/before 在元素内容之后或之前添加内容(元素)
E::first-line 元素内容首行
E::first-letter 元素内容首字