打破畏惧感，HTML5初识

作者: rogertan30 | 来源:发表于2016-10-09 11:55 被阅读34次

打破畏惧感，HTML5初识
打破畏惧感，CSS初识
前端知识1-HTML5
HTML5 2018-07-09
初识HTML5
初识html5
初识HTML5
初识HTML5
初识 HTML5
初识HTML5

首先，认识，了解，学习h5离不开w3c的网站

作为iOS开发，经常会在webView中做一些js和本地交互。另外大多数的“公司协议”会使用html5本地文件。h5＋css＋javascrpt 也是我们前端的一大分支，一个懂前端的客户端开发在竞争上是非常加分的。h5相当于一间屋子里面的家具，他负责告诉我们这间屋子里面有什么。css相当于家具上的油漆涂料和墙纸，他负责装饰。javascrpt负责处理人（客户端）怎么使用家具。

所以了解h5是非常非常有必要的。此文章是作者学习小码哥视频的笔记。
</br>
首先编写一个hello world

<!--根标签-->
<html>
  <!--头部(放置一些配置性的东西)-->
  <head>
    <!--标题-->
    <title>我的第一个程序</title>
    <!--设置编码-->
    <meta charset="UTF-8">
  </head>
  <!--身体(主要内容)-->
  <body>
    <p>hello World!</p>
  </body>
</html>

</br>
HTML中常见的标签

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML常见的标签</title>
  </head>
  <body>
    <!--标题标签-->
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
    <hr>
    <!--div标签-->
    <div>我是div标签我是div标签我是div标签</div>
    <div>我是div标签我是div标签我是div标签</div>
    <div>我是div标签我是div标签我是div标签</div>
    <div>我是div标签我是div标签我是div标签</div>
    <div>
      <p>
        <input name="user">
      </p>
    </div>
    <hr>
    <!--段落标签-->
    <p>我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签</p>
    <p>我是段落标签我是段落标签我是段落标签我是段落标签</p>
    <p>我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签</p>
    <p>我是段落标签我是段落标签我是段落标签我是段落标签</p>
<hr>

    <!--表单标签-输入框-->
    <input name="user"><br><br><br><br>
    <input type="date"><br>
    <input type="file"><br>
    <input type="color"><br>
    <input type="checkbox"><br>
    <input type="radio"><br>
    <input type="password"><br>
    <hr>

    <!--超链接标签-->
    <a href="http://www.520it.com" target="_blank">我是超链接,可以跳转</a>
    <!--
 相对路径: 资源在当前的项目中 (./ ../ ././lao.png)
 绝对路径: 资源不再当前项目中 (http:// https:// ftp:// file:///)
 https://www.baidu.com/img/bd_logo1.png
     -->
    <!--图像标签-->
    <a href="http://baidu.com" target="_blank">
    ![描述图片的文字](https://www.baidu.com/img/bd_logo1.png)
    </a>
    [站外图片上传中……(2)]

    <!--换行标签-->
    <br>

    <!--横线标签-->
    <hr>

    <!--列表标签-->
    <!--无序列表-->
    <ul>
      <li>我是列表1</li>
      <li>我是列表2</li>
      <li>我是列表3</li>
      <li>我是列表4</li>
      <li>我是列表5</li>
    </ul>

    <!--有序列表-->
    <ol type="I">
      <li>我是列表1</li>
      <li>我是列表2</li>
      <li>我是列表3</li>
      <li>我是列表4</li>
      <li>我是列表5</li>
  </ol>

</body>
</html>

</br>

HTML5其他常见的标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>其他标签</title>
</head>

<body>
  <meter value="60" max="100" min="0">60%</meter>
 
  <!--进度条-->
  <progress value="80" max="100">适配浏览器兼容</progress>
  
  <!--音频-->
  <audio src="sources/music.m4a" controls="controls">当前的浏览器不支持,请更新浏览器</audio>
  
  <!--视频-->
  <video src="sources/BigBuck.m4v" controls="controls" loop="loop">当前的浏览器不支持,请更新浏览器</video>

</body>
</html>