初次认识 别来无恙 博客！

认识HTML5

HTML和HTML5的区别
1.HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），
因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。

HTML5的特性

新增标签

1.<header>111</header>//头部标签
2.<nav>222</nav>//导航标签
3.<article>333</article>//内容标签
4.<section>444</section >//块级标签
5.<aside>555</aside>//侧边栏标签
6.<footer>666</footer>//尾部标签

视频标签

source标签写法

例如：<source src="myvideo.webm" type="video/webm"></source> *source标签需要加上tpye属性*

video标签写法

例如：<video width="300" height=""></video>

source标签包含在video标签里面

例如：<video width="300" height="">
      <source src="myvideo.webm" type="video/webm"></source>
      </video>

video标签里可加的属性值

autoplay----视频加载完成后自动播放
controls----给视频添加控件，就是播放按扭和进度条
loop----循环播放
muted----静音播放
poster----用户下载时显示的图像 ,值为url放置路径
preload----边加载边播放-->
**！！！上面这六个的属性值都不用加**
--------------------------------
width----设置宽度（不需要加单位）
height----设置高度（不需要加单位）

autoplay属性

<video width="300" height="" autoplay> </video>

controls属性

<video width="300" height="" controls> </video>

loop属性

<video width="300" height="" loop> </video>

muted属性

<video width="300" height="" muted> </video>

poster属性

<video width="300" height="" poster> </video>

preload属性

<video width="300" height="" preload> </video>

音频标签写法

例如： <audio src="../1.mp3" autoplay></audio>

单标签input属性

HTML学过的type属性值

type属性值	含义
button	按钮
password	密码
text	默认文本
radio	单选
checkbox	多选
submit	提交
reset	重置

HTML5新增type属性值

type属性值	含义
number	数字
date	日期
file	上传文件
email	邮箱
tel	手机号
url	网址
search	搜索
color	颜色

HTML学过的type属性值用法

例子：
<input type="button " name="" id="" value="" />
<input type="password " name="" id="" value="" />
<input type="text" name="" id="" value="" />
<input type="radio" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<input type="submit" name="" id="" value="" />
<input type="reset" name="" id="" value="" />

HTML5新增type属性值用法

例子：
<input type="number" name="" id="" value="" />
<input type="date" name="" id="" value="" />
<input type="file" name="" id="" value="" />
<input type="email" name="" id="" value="" />
<input type="tel" name="" id="" value="" />
<input type="url" name="" id="" value="" />
<input type="search" name="" id="" value="" />
<input type="color" name="" id="" value="" />

HTML5 input新增属性

属性值	含义
placeholder	表单提示文字
required	校验表单（注意不能为空）
multiple	选择多个文件上传 按住ctrl进行选择多个文件
autocomplete	启用on 关闭off 提交记录
min max	通常与数字和日期类型一起使用搭配改变type的属性值来使用
pattern	表单正则验证()
step	给默认数字类型上下箭头提供跳跃的数字 出现上下箭头
readonly	只读属性
disabled	禁用属性

实例：
<form>
<input type="text" name=""id="" value="" placeholder="请输入"/>
<input type="text" name="" required id="" value=""/> //校验表单不能为空
<input type="file" multiple name="" id="" value="" />
<input type="submit" value="提交"/>
**这里需要给一个提交按钮**
</form>

<form autocomplete="on">
First name:<input type="text" name="fname" pattern="[A-Za-z]{3}"><br>//表单正则验证
2222222222: <input type="text" name="name" disabled><br>
Last name: <input type="number" name="" step="3"><br>//提供跳跃的数字 出现上下箭头
E-mail: <input type="email" name="email" autocomplete="on"><br>//提交记录
<input type="submit">
</form>
<input type="text" name="" id="" value="" readonly/> //只读属性（不需要添加属性值）
<input type="text" name="" id="" value="" disabled/> //禁用属性（不需要添加属性值）

以上就是一个初学者第一次初次接触前端开发所学的一小部分知识要点。