HTML基础知识点

HTML学习 基础知识点

   版权声明：未经博主授权，内容严禁转载 ！ 

 DOCTYPE验证：

doc 文档意思

type 类型的意思

<!DOCTYPE>

　　1.声明用来告知浏览器页面是用了那种HTML版本。（常用 html4  html1.0  html5）
　　2.声明位于文档中的最前面位置，处于《html》标签之前。
　　3.声明不是一个标签。
　　4.声明指定了标记语言的规则，确保浏览器能够正确渲染内容。

DOCTYPE验证 网址：http://validator.w3.org

DOCTYPE验证 快捷方式

快速创建HTML在最小化模板

<!DOCTYPE html>
<!-- 本地区域使用简体中文 -->
<html lang="zh-cn">
<head>
  <!-- 页面编码格式 -->
  <meta charset="utf-8">
  <title> html5 template </title>
</head>
<body>
  
</body>
</html>

创建文件模板：

<!DOCTYPE html>
<!-- 本地区域使用简体中文 -->
<html lang="zh-cn">
<head>
  <!-- 页面编码格式 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,init-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=Edge,chrome=1">
  <title> html5 template </title>
</head>
<body>

</body>
</html>

  体验HTML5新特性

 1.语义化元素（让浏览器更清楚含义）

header ：头部
nav：导航
section：节点
　　header：节点中头部
　　article ：独立的文章
footer：尾部
aside：附着信息

案例：

<!DOCTYPE html>
<!-- 本地区域使用简体中文 -->
<html lang="zh-cn">
<head>
  <!-- 页面编码格式 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,init-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=Edge,chrome=1">
  <title> index </title>
</head>
<body>

  <header></header>
  <nav></nav>
  <section>
    <header>section-header</header>
    <article class="">
      article
    </article>
    <article class="">
      article
    </article>
    <article class="">
      article
    </article>
    <footer>section-footer</footer>
  </section>
  <aside class="">
    aside
  </aside>
  <footer>footer</footer>

</body>
</html>

完善代码：

<!DOCTYPE html>
<!-- 本地区域使用简体中文 -->
<html lang="zh-cn">
<head>
  <!-- 页面编码格式 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,init-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=Edge,chrome=1">
  <title> index </title>
  <style media="screen">
    header,footer,nav,article,section,aside{
      display: block;
      border: 1px solid #999999;
      margin: 5px;
      padding: 5px;
    }
  </style>
</head>
<body>

  <header>header</header>
  <nav>nav</nav>
  <section>
    <header>section-header</header>
    <article class="">
      article
    </article>
    <article class="">
      article
    </article>
    <article class="">
      article
    </article>
    <footer>section-footer</footer>
  </section>
  <aside class="">
    aside
  </aside>
  <footer>footer</footer>

</body>
</html>

 

2. 表单验证（强化表单元素和属性，数据验证更简单）

代码案例：

  <form class="" action="index.html" method="post">
    <input type="email" name="" value="">
    <button type="submit" name="button">submit</button>
  </form>

会自动验证是否正确，不需要 JavaScript 去编写代码了。

  <form class="" action="index.html" method="post">
    <input required type="email" name="" value="">
    <button type="submit" name="button">submit</button>
  </form>
required ： 表示该文本框内容不允许为空

 3.本地储存

　　持久化本地储存：可以不通过第三方插件实现数据本地存储。

　　WebSocket ： 页面之间实现双向通信。

　　服务器推送事件（SSE）：从Web服务器推送消息给浏览器。

本地存储用户名：

<input type="text" name="username" id="username" value="">
<button type="button" name="button" onclick="savename()">Save UserName</button>
<script type="text/javascript">
  function savename() {
    var un = document.getElementById('username').value;
    console.log(un);
    localStorage.username=un;
  }
</script>

 存储用户名 然后 获取用户名 案例

<h2 id="hun"></h2>
<input type="text" name="username" id="username" value="">
<button type="button" name="button" onclick="savename()">Save UserName</button>
<button type="button" name="button" onclick="loadname()">LoadUserName</button>
<script type="text/javascript">
// 存储用户名
  function savename() {
    var un = document.getElementById('username').value;
    console.log(un);
    localStorage.username=un;
  }
// 加载用户名
  function loadname() {
    var h2un =document.getElementById("hun");
    h2un.innerHTML = localStorage.username;
  }

</script>

 4.多媒体元素 - Canvas画布

 　　绘制图形 图片 矢量图等。

 5. 多媒体处理

<video width="800" src="3.mp4" autoplay controls poster="posterimage.jpg"></video>

controls ： 带控制工具

6.地理定位

　　哈哈，没写！

HTML4 与 HTML5 的区别

html5 更加灵活，支持一下多种形式：

　　1.标签名称可以大写（不推荐）。

　　2.属性双引号可选（推荐添加双引号）。

　　3.属性值可选（boolean属性的属性值推荐省略）。

　　4.闭合空元素可选（推荐省略）。

 

posted @ 2018-04-25 15:01  叫我+V  阅读(158)  评论(0)  编辑  收藏  举报