HTML5 初步了解

Posted 旭宝爱吃鱼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5 初步了解相关的知识,希望对你有一定的参考价值。

这是HTM5L的第一篇博客. 

那么就让我们简单的了解html5的语法吧.

(HTML5运行环境要求极低,非关键地方就不做截图了)

<!--根标签-->
<html>
<!--头部标签-->
<!--
src和href的区别
src:引用,该资源是页面不可缺少的一部分,如(img标签 video标签 radio标签);
href:引入,引入外部资源,如(a标签 link标签)
-->
  <head>
     <meta charset="UTF-8">
     <title>第一个程序</title>
  </head>
<!--身体标签-->
  <body>
     你好,世界!
  </body>
</html>

上面的代码是最最简单的代码

下面是一些常用标签

<!--根标签-->
<html>
<!--头部标签-->
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<!--身体标签-->
<body>
<!--标题标签-->
    <h1>旭宝爱吃鱼</h1>
    <h2>旭宝爱吃鱼</h2>
    <h3>旭宝爱吃鱼</h3>
    <h4>旭宝爱吃鱼</h4>
    <h5>旭宝爱吃鱼</h5>
    <h6>旭宝爱吃鱼</h6>

    <div>旭宝爱吃鱼</div>
    <div>旭宝爱吃鱼</div>
    <div>旭宝爱吃鱼</div>
    <div>旭宝爱吃鱼</div>

<!--段落标签-->
    <p>旭宝爱吃鱼</p>
    <p>旭宝爱吃鱼</p>
    <p>旭宝爱吃鱼</p>
<!--输入框标签-->
    <input><br>
    <input placeholder="请输入用户名"><br><br><br>
    <input value="旭宝爱吃鱼"><br>
    <input type="color"><br>
    <input type="checkbox"><br>
    <input type="date"><br>
    <input type="range"><br>
<!--换行标签-->
    <br>
<!--超链接标签-->
    <a href="http://baidu.com" target="_blank">百度一下,你就不知道</a>
<!--图像标签
    相对路径 项目中的资源
    绝对路径 http:// https:// ftp:// file://
   -->
    <img src="https://www.baidu.com/img/bd_logo1.png" width="150" height="150">

  <!--列表标签-->
   <ul>
       <li>旭宝爱吃鱼->1</li>
       <li>旭宝爱吃鱼->2</li>
       <li>旭宝爱吃鱼->3</li>
       <li>旭宝爱吃鱼->4</li>
   </ul>
  <!--容器标签-->
   <div>旭宝爱吃鱼</div>

</body>
</html>

 

以上是关于HTML5 初步了解的主要内容,如果未能解决你的问题,请参考以下文章

常用HTML5代码片段

十个html5代码片段,超实用,一定要收藏

webGL初步了解,最简单的方式了解webgl

HTML5系列-SVG了解

html5 canvas基本用法

初步了解设计模式