这是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 初步了解的更多相关文章

  1. HTML5初步——新的表单元素和属性

    HTML5初步--新的表单元素和属性 HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta chars ...

  2. HTML5初步了解

        一.使用HTML5的十大原因 你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码.HTML5是w ...

  3. 对HTML5的初步认识(一)

    一.概述 1.HTML5是什么? HTML5是最新一代的HTML标准,它不仅拥有HTML中所有的特性,而且增加了许多实用的特性,如视频.音频.画布(canvas)等. 2012年12月17日,万维网联 ...

  4. 学习前端第二天心得体会(初步了解HTML5的部分API以及画布Canvas)

    一.HTML5部分API 1.选择器querySelector和querySelectorAll 1.1.querySelector:返回文档中匹配指定的CSS选择器的第一元素.  document. ...

  5. 学习前端第一天心得体会(初步了解HTML5的新特性以及和HTML的区别)

    一.HTML5是什么? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提 ...

  6. html5引擎开发 -- 引擎消息中心和有限状态机 - 初步整理 一

    一 什么是有限状态机        FSM (finite-state machine),又称有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型.他对于逻辑以及 ...

  7. 移动端之Android开发的几种方式的初步体验

    目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...

  8. [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二)

    [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date  周六 10 一月 2015 By 钟谢伟 Category website develop ...

  9. 基于 HTML5 的 Web SCADA 报表

    背景 最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求.一个完整的报表,一般包含了筛选操作区.表格.Chart.展板等多种元素,而其中的数据表格是最常用的控件.在以往的工业项目 ...

随机推荐

  1. LINQ的First与FirstOrDefault方法和Last与LastOrDefault方法。

    First与FirstOrDefault的方法,均是返回集合中的第一个元素,区别在于如果没有结果,前者(First)会有抛出异常,后者(FirstOrDefault)会返回默认值.Last与LastO ...

  2. 在QTableWidget中添加QCheckBox并使其居中显示(转)

    实现思路:把QCheckBox嵌入式到一个水平布局中 QWidget *widget;   QHBoxLayout *hLayout;   QCheckBox *ckb;   ...   ckb =  ...

  3. NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器

    经过了这一个多星期的调整与修复,NanUI for .NET Winform的稳定版已经发布.应广大群友的要求,现已将NanUI的全部代码开源. GitHub: https://github.com/ ...

  4. Java项目打包部署war文件

    1.选中要打包的项目,右键单击,选择“Export-->WAR File”,在弹出的对话框中选择Destination.Server runtime等选项,点击Finish: 2.可以看到指定目 ...

  5. line-height 属性

    p.small {line-height:90%} p.big {line-height:200%}     该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最 ...

  6. volcanol_Linux_ 问题汇总系列_4_Thinkpad_E40_0578MDC_在Fedora 13 Linux(FC13)中如何安装无线网卡驱动

    今天晚上,我突然想在自己到笔记本上安装linux系统,因为我自己第一次接触到的linux是红帽支持到Fedora Core 4,所以一直最中意的linux 发行版本是FC系列,同时由于FC 15以后到 ...

  7. MUI(3)

    本篇博文是继续上篇博文MUI(2).上面这幅图是博文MUI(1)中实现的效果,在博文MUI(1)中提到了2个页面,一个页面是index.html,另一个页面是index_list.html页面.上面这 ...

  8. web项目 验证码 *** 最爱那水货

    1. jsp代码 : <Script> function changeImg(){ document.getElementById("certImg").src =&q ...

  9. 腾讯信鸽推送Android SDK快速指南

    信鸽Android SDK是一个能够提供Push服务的开发平台,提供给开发者简便.易用的API接口,方便快速接入.目前支持Android 2.2及以上版本系统.本文档将引导用户以最快的速度嵌入信鸽SD ...

  10. python 函数小实例

    1.判断一个数字是否为素数: import math # -----------------判断一个数是否是素数------------------ def sushu(a): i=1 for i i ...