<div id="article_content" class="article_content clearfix" style="height: 1971px; overflow: hidden;">
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-211130ba7a.css">
<div id="content_views" class="markdown_views prism-atom-one-dark">
<!-- flowchart 箭头图标 勿删 -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
</svg>
<p>HTML5=HTML+CSS3+Javascript+API<br>
一、H5新增标签
(块状元素) 有意义的div
<article>标记定义一篇文章
<header>标记定义一个页面或一个区域的头部
<nav>标记定义导航链接
<section>标记定义一个区域
<aside>标记定义页面内容部分的侧边栏
<hgroup>标记定义文件中一个区块的相关信息
<figure>标记定义一组媒体内容以及它们的标题
<dialog>标记定义一个对话框(会话框)类似微信
<progress>进度条标签
<details> 标记定义一个元素的详细内容 ，配合dt、dd
<datalist> 为input标记定义一个下拉列表,配合option
<menu>命令列表
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
二、视频与音频
1、视频（video）
HTML5支持的视频格式：
Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件支持的浏览器:F、C、O
MPEG4=带有H.264视频编码+AAC音频编码的MPEG4文件支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式支持的浏览器: I、F、C、O
属性：autoplay视频打开之后自动播放
loop:视频循环播放
muted:视频静音
poster(图片) 视频第一个页面
preload="auto/metadata/none"视频是否加载完再播放
使用方法：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
<video src="文件地址" controls="controls"></video>
- 1
< video src="文件地址" controls="controls">
您的浏览器暂不支持video标签。播放视频
</ video >
- 1
- 2
- 3
- 4
< video controls="controls" width="300“ >
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >
- 1
- 2
- 3
- 4
- 5
2、音频（audio）
HTML5支持的音频格式：
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
使用方法与video相同
- 1
- 2
- 3
- 4
- 5
- 6
三、表单
HTML5中为了方便排版，可以使form中的表单标签脱离form的嵌套。
方法:form指定ID，所有表单标签均添加form=id属性
<form action="" method="post" id="register" >
</form>
<input type="text" name="user" form="register" />
<select name="year" form="register" >
<option value="1999"></option>
</select>
<textarea name="ext" form="register" ></textarea>
<button type="submit" form="register" >提交</button>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Type="email"限制用户输入必须为Email类型
Type="url"限制用户输入必须为URL类型
Type="date"限制用户输入必须为日期类型
Type="time"限制用户输入必须为时间类型 O
Type="month"限制用户输入必须为月类型O
Type="week"限制用户输入必须为周类型O
Type="number"限制用户输入必须为数字类型
Type="range"产生一个滑动条的表单
Type="search"产生一个搜索意义的表单 配合results="n"属性 C
Type="color"生成一个颜色选择表单
autocomplete自动完成功能(autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。)
autofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
placeholder表单的提示信息，存在默认值将不显示
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
<head lang="en"> <meta charset="UTF-8"> <style> p:empty{ height:20px; background: yellow;} </style>
</head>
<body>
<form action="" id=“inform”></form>
<input type=“text” form=“inform” required autofocus placeholder=“请输入信息” name=“username”/>
<input type=“submit” form=“inform”/>
<p>邮箱：<input type=“email” form=“inform” required/></p>
<p>网站：<input type=“url” form=“inform” required/></p>
<p>日期：<input type=“date” form=“inform”/></p>
<p>月份：<input type=“month” form=“inform”/></p>
<p>周：<input type=“week” form=“inform”/></p>
<p>数字：<input type=“number” form=“inform”/></p>
<p>滑动条：<input type=“range” form=“inform”/></p>
<p>搜索：<input type=“search” form=“inform”/></p>
<p>颜色：<input type=“color” form=“inform”/></p>
<p> 颜色：<input id=“myCar” list=“color” />
<datalist id=“color”>
<option value=“red”>
<option value=“green”>
<option value=“blue”>
</datalist>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi in labore libero mollitia, nihil quasi vero! Animi beatae consequuntur esse in, iste neque nesciunt officia, officiis provident, recusandae vero voluptates.</p>
<p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda corporis dolor dolores, dolorum eaque illum ipsam iusto laboriosam molestiae natus, pariatur porro quod voluptas! Eum modi quia repudiandae sit veritatis?</p>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
注册表
<fieldset>
<legend>用户登录</legend>
<p>用户名：<input type="text"/></p>
<p>密码：<input type="text"/></p>
<p>性别：<input type="text"/></p>
<p>爱好：<input type="text"/></p>
</fieldset>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
三、CSS3新增选择器
关系选择器
- 1
伪类选择器
结构性伪类选择器
- 1
- 2
- 3
UI元素状态伪类选择器
- 1
属性选择器
- 1
百度文库文件下载类型选择
<style>
a{
text-decoration: none;
color:#5783c2;
}
a[href$=".doc"]::before{
content:url(img/word.jpg);
}
a[href$=".txt"]::before{
content:url(img/txt.jpg);
}
a[href$=".ppt"]::before{
content:url(img/ppt.jpg);
}
</style>
<body>
<p><a href="aa.ppt">演讲稿写作格式及范例</a></p>
<p><a href="aa.doc">演讲稿的基本写作方法</a></p>
<p><a href="aa.ppt">演讲稿的写作课件</a></p>
<p><a href="aa.doc">演讲的系统分析</a></p>
<p><a href="aa.txt">秘书公文写作知识：演讲稿...</a></p>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
伪对象选择器
<style>
p::first-line{color:red}
p::first-letter{color:green;font-size:25px}
a::before{content:url(qvod.jpg)}
a::after{content:url(qvod.jpg)}
span::selection{background:#F0F}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
四、CSS3
1、边框
border-radius圆角边框
使用方法与padding一致
2、阴影
box-shadow盒子的阴影
box-shadow:h-shadow v-shadow blur spread color inset
阴影：水平阴影距离 垂直阴影距离 模糊距离 模糊大小 颜色 外阴影
text-shadow文本阴影
用法与盒子阴影用法一致
3、边界
border-image边界图片
border-image: source slice width outset repeat;
边界图片：图片路径 向内偏移 边界宽度 边框外部 repeat;
repeat:round(平铺)strech(拉伸)
4、多层背景设置
background：url(图片地址1) no-repeat left,
url(图片地址21) no-repeat left;
每层背景用逗号隔开
5、背景图片大小调整
background-size：length（定义宽和高）|percentage（百分比）|cover（最大程度放大）|contain（最小大程度放大）;
与background一一对应使用，用逗号隔开
6、背景图片的定位
background-origin规定背景图片的定位区域
background-origin：padding-box（背景图像填充框的相对位置）
border-box(背景图像边界框的相对位置)
content-box(背景图像的相对位置的内容框)
7、指定背景绘制区域
background-clip属性指定背景绘制区域
background-clip：border-box|padding-box|content-box;
8、背景图像滚动
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment:scroll背景图片随页面的其余部分滚动。这是默认
fixed背景图像是固定的
inherit指定设置应该从父元素继承
local背景图片随滚动元素滚动
9、渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background: linear-gradient(direction, color1,color2);
从上到下： background: linear-gradient(red, blue);
从左到右：background: linear-gradient(to right, red , blue);
对角:background: linear-gradient(to bottom right,red,blue);
角度:background: linear-gradient(angle, color1, color2); /*angle:90deg*/
径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(center, shape size, start-color, …, last-color);
background: radial-gradient(red, green, blue);
颜色结点不均匀分布:background: radial-gradient(red 5%, green 15%, blue 60%);
设置形状:background: radial-gradient(circle, red, yellow, green);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
</div>
<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
<div data-report-view="{"mod":"popu_387","dest":"https://blog.csdn.net/wanngxue/article/details/78548620","extend1":"pc","ab":"new"}"></div>
<div class="person-messagebox">
<div class="left-message"><a href="https://blog.csdn.net/wanngxue">
<img src="https://profile.csdnimg.cn/4/F/0/3_wanngxue" class="avatar_pic" username="wanngxue">
</a></div>
<div class="middle-message">
<div class="title"><span class="tit "><a href="https://blog.csdn.net/wanngxue" data-report-click="{"mod":"popu_379","ab":"new"}" target="_blank">w_viola</a></span>
<!-- 等级，level -->
<img class="identity-icon" src="https://csdnimg.cn/identity/blog2.png"> </div>
<div class="text"><span>原创文章 15</span><span>获赞 9</span><span>访问量 8093</span></div>
</div>
<div class="right-message">
<a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379","ab":"new"}">关注</a>
<a href="https://im.csdn.net/im/main.html?userName=wanngxue" target="_blank" class="btn btn-sm bt-button personal-letter">私信
</a>
</div>
</div>
</div>
</article>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
