html5

最新推荐文章于 2024-10-13 19:23:10 发布

疯人院疯疯疯

最新推荐文章于 2024-10-13 19:23:10 发布

阅读量115

点赞数

分类专栏： web 文章标签： html5

web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Html5介绍
html—xhtml版本—w3c和whatwg(web应用技术工作组)----html5
html5广义=html5 +css3技术+javascript+api
html5 的特点
- 代码更加简洁
- 标签具有语义化
- 新增了一些属性
- 代码更加的宽松
html5的发展史
2004年提出的构想----2008年模拟第一份草案-----2012年推广html5----2020年正式的版本

html5的结构

<! doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

html5语法更加宽松
<meta…/>

1. <meta charset="utf-8">
2. <meta charset="utf-8" />
3. <meta charsrt="UTF-8"></meta> html5可以吧所有的标签看成双标签

向下兼容----比html5版本低的版本语法都支持
html5新增的一些标签—标签具有语义化

<header>网页文档的一个区域—网页的头部

<nav> 代表网页的导航---链接的哪行文本
<section>代表网页的一个快---<div>相似
<article>网页中的文章内容
<aside>网页文档的侧边栏
<footer>代表网页的页脚---版权

之前的html结构是

<div class="header"></div>
<div class="nav"></div>
<div class="section">
	<div class="section_left"></div>
	<div class="section_right"></div>
</div>
<div class="footer"></div>

html5新增的type属性值

在这里插入图片描述
placeholder =“内容” 输入框的提示信息

required=“required” 必须得填写

autofocus=“autofocus” 自动获取焦点

html5新增的表单属性

email	限定用户输入的必须是email类型
url	限定用户输入必须是url类型（网络地址）
date	限定用户输入的是日期类型
number	限定用户输入的必须是数字类型
month	限定用户必须输入月类型
time	限定用户属于的是必须是时间类型
search	限定用户输入必须是一个搜索框
week	限定用户输入的是周类型
color	产生一个颜色选项
ranger	产生一个滑块

视频
.ogg MP4 .webm
视频格式
当前 video元素支持三种视频格式
在这里插入图片描述

格式

<video src="视频的路径" autoplay="autoplay"> <video>
<video >
	<source src="XX.mp4">
	<source src="XX.ogg">
	<source src="XX.webm">
</video>

autoplay 自动播放
controls 控件
preload 预加载
loop 播放完循环播放
width height 宽度高度

音频
.ogg .mp .wav

格式:

<audio src="音频的位置"> </audio>

<audio>
	<source src="XX.webm">
	<source src="XX.webm">
	<source src="XX.webm">
</audio>

css3
css2+ 新语法
对css2进行扩充删减优化

选择器
类选择器 id选择器标签选择器
属性选择器
E—element 元素 data----属性
< 标签属性=“属性值”></标签>----html元素

E—element 元素	data----属性
E[data]	选择带有data的属性给元素加样式
E[data=“one”]	选择带有data的属性的元素对象，并且属性值等于one的家样式
E[data^=“o”]	选择带有data的属性的元素对象，并且属性值以o开头 ^开头
E[data$=“e”	选择带有data的属性的元素对象，并且属性值以e结尾 $结尾
E[data*="n”	选择带有data的属性的元素对象，并且属性值包含n， *包含

伪类结构

E：first-child{}	第一个孩子
E：last-child{}	最后一个孩子
E: only-child{}	仅有一个孩子
E:nth-child(n){ }	第n个孩子 123456 li:nth-child(3){}
E:nth-child(2n + 1){ }	获得奇数孩子,n=1 3 5 7
E:nth-child(odd)	奇数（同上）
E:nth-child(2n)	获得偶数孩子 n=2468
E:nth-child(even)	偶数（同上）

伪元素

E:first-letter	设置第一个文字
E:first-line	设置第一行样式
E::after	盒子里面插入的内容在盒子里面的后面
E::before	在盒子里面插入内容在盒子里面的最前面

设置文本阴影
text-shadow：水平垂直模糊强度（可选）颜色；
水平正直右侧负值左侧
垂直正直下册负值上侧
可以有多组阴影值，之间用逗号相隔

设置盒子阴影
box-shadow:水平垂直模糊强度模糊尺寸颜色内外阴影（默认是外阴影不加 outset 内部阴影inset）；

边框直角变圆角
border-radius：上左上右下右下左；

设置半透明颜色
color:rgba(255,0,0,0.3) 透明度为0.3
background:rgba(0,0,0,0.6) 透明度为0.6

背景图片的尺寸
background-size：宽度高度；

background-size：cover；全部覆盖（宽度和高度）
background-size:contain; 只覆盖宽或者高就停止