HTML5 基础总结
HTML5
HTML全称为超文本标记语言，是一种标记语言。由一系列标签构成，这些标签将分散的Internet资源链接成为了一个整体。
文档声明
HTML5之前 以SGML（通用标准标记语言）为标准 H5不再采用这个标准 声明方式比较简洁
语法特性
- HTML5里边部分结束标签可以省略 例如：HTML BODY li tr …
- 单标签：不需要加结束的/ 例：input img br hr
- 属性值可以不放在引号当中
HTML基本结构
<!DOCTYPE html> <!--告诉浏览器我们要使用什么规范！-->
<html lang="en">
<!--网页头部-->
<head>
<!--meta 描述标签，描述网站信息-->
<meta charset="UTF-8">
<!--keywords 属性说明，网站的关键字-->
<meta name="keywords" content="">
<!--description 网站的描述-->
<meta name="description" content="">
<!--表示链接到网站的图标，如favicon-->
<link rel="icon" href="./images/favicon.ico" />
<!--title标签 网页标题-->
<title>这是我的第一个网页</title>
<!-- 链接到外部CSS样式表 -->
<link rel="stylesheet" href="styles.css">
</head>
<body> <!--body表示网页主体部分-->
hello,world;
</body>
</html>
标签
span a i img ul li div p form input textarea select option…
- 语义化标签
- header main footer nav section(一节)
- aside article hgroup（放置标题）
- figure (放置音频视频媒体文)
- figcaption(放置媒体文件标题)
<figure>
<figcaption>标题</figcaption>
<img src="" alt="">
</figure>
- address time progress（进度条效果）
<section>
<progress value="50" max="100"></progress>
</section>
- 功能性的标签
- 视频：video
<video src="demo.mp4" controls autoplay></video> - 音频：audio
<audio src="demo.mp3" controls autoplay></audio> - 视频源：source
<video> <source src="demo.mp4"> <source src="demo.ogg"> </video> - 画布绘制：canvas
属性
- hidden （隐藏，类似于display:none;的效果）
<header hidden>123</header>
- contenteditable内容可编辑
<div style="width:300px; height:300px;background:#ccc;"contenteditable="true"></div>
- draggable是否可以拖拽
<div style="width:300px; height:300px;background:#ccc;"draggable="true"></div>
- video audio
- controls 播放控件
- autoplay 是否自动播放
- poster 封面图片
表单
form input textarea select option label
- 控件类型：
- text password radio checkbox file（文件域） button reset hidden（隐藏域）submit
- H5的控件类型：email url year month week date time datetime-local tel search number range（滑块） color
- 属性
- form标签
- action 表单提交的地址
- method 提交的方式(HTTP方法 GET/POST)
- enctype 提交内容的数据格式(form-data/urlencoded)
- novalidate 在提交的时候不进行验证
- autocomplete 表单自动补全/提示
- name 名字 用来进行选择
- 表单控件可以使用的属性：
- type 控件类型
- name 名字 用来进行提交
- value 值
- readonly 只读（只能提交不能修改）
- disabled 禁用 (不能提交不能修改)
- form 表示当前的控件要提交的表单是哪个(和form标签的id属性相关联的)
- required 当前控件是必填项
- pattern 用正则进行验证
- autofocus 自动获得焦点
- placeholder 默认的提示文字
- submit中可以用到的属性：
- formaction（跳转到其他界面）
- formmethod
- formenctype
- formtarget（跳转时打开新窗口）【一套表单多种提交】
- 数值类型（min max step）最小值 最大值 步进值 —只能用在数值里边
- form标签
<!-- 举例1 -->
<form action="demo.html" novalidate autocomplete="off">
<ul>
<li><input type="file">
<li><input type="hidden">
<li><label>电子邮件：<input type="email" name="n" value="123@qq.com" readOnly></label>
<li><label for="url">网址：</label><input type="url" name="u" id="url" >
<li><input type="year" name="y" disabled>
<li><input type="month" name="m">
<li><input type="week" name="w">
<li><input type="date" name="d">
<li><input type="time" name="t">
<li><input type="datetime-local" name="dt">
<li><input type="tel" name="t">
<li><input type="search" name="s">
<li><input type="number" name="n" min="0" max="10" step="2">
<li><input type="range" name="r">
<li><input type="color" name="c">
<li><input type="submit" value="demo.html">
<li><input type="submit" value="百度" formaction="http://www.baidu.com" formtarget="_blank">
</ul>
</form>
<!-- 举例 -->
<form action="http://www.baidu.com" id="myform" target="_blank">
</form>
<section>
<input type="text" name="user" form="myform" required pattern="\d{6,8} autofocus placeholder="请输入6-8个数字" >
<input type="submit" form="myform" >
</section>