HTML5 基础总结

本文介绍: HTML全称为超文本标记语言，是一种标记语言。由一系列标签构成，这些标签将分散的In t er net 资源链接成为了一个整体。HTML5之前以SGML（通用标准标记语言）为标准 H5不再采用这个标准声明方式比较简洁。

HTML5

HTML全称为超文本标记语言，是一种标记语言。由一系列标签构成，这些标签将分散的In t er net 资源链接成为了一个整体。

文档 声明

HTML5之前以SGML（通用标准标记语言）为标准 H5不再采用这个标准声明方式比较简洁

语法 特性

HTML5里边部分结束标签可以省略例如：HTML BODY li tr …
单标签：不需要加结束的/ 例：input img br hr
属性值可以不放在引号当中

HTML基本 结构

&lt;!DOCTYPE html&gt; &lt;!--告诉浏览器我们要使用什么规范！--&gt;
<html lang="en"&gt;

<!--网页头部-->
<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>

属性

hidden （隐藏，类似于display:none;的效果）

<header hidden>123</header>

contenteditable 内容可编辑

<div style="width:300px; height:300px;background:#ccc;"contenteditable="true"></div>

dragga ble 是否可以拖拽

<div style="width:300px; height:300px;background:#ccc;"draggable="true"></div>

video audio

表单

form in put textarea select option label

控件类型：
- text password radio checkbox file（文件域） button reset hid den（隐藏域）submit
- H5的控件类型：ema il url year month w ee k date tim e datetime–local tel search number range（滑块） color
属性
- form标签
  - action 表单提交的地址
  - method 提交的方式(HTTP方法 GET/POST)
  - e nc type 提交内容的数据格式(form–data/urlencode d)
  - no validate 在提交的时候不进行验证
  - auto com p let e 表单自动补全/提示
  - name 名字用来进行选择
- 表单控件可以使用的属性：
  - type 控件类型
  - name 名字用来进行提交
  - value 值
  - readonly 只读（只能提交不能修改）
  - disabled 禁用 (不能提交不能修改)
  - form 表示当前的控件要提交的表单是哪个(和f orm标签的id属性相关联的)
  - required 当前控件是必填项
  - pattern 用正则进行验证
  - auto f oc us 自动获得焦点
  - placeholder 默认的提示文字
  - submit中可以用到的属性：
    - f orm action（跳转到其他界面）
    - f o rm method
    - f o rmenc type
    - f o rm target（跳转时打开新窗口）【一套表单多种提交】
  - 数值类型（min max step）最小值最大值步进值 —只能用在数值里边

<!-- 举例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>