简单的HTML5初步入门教程_html5教程技巧

作者：夫妇郭_390 | 来源：互联网 | 2017-05-11 14:13

这篇文章主要介绍了简单的HTML5初步入门教程,为一些静态文本显示的方法,需要的朋友可以参考下

HTML5 代表未来；W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML，从而使 HTML5 成为正式标准并得到认可。

HTML5 是下一代的 HTML。
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，目标是取代现有的HTML4.01和XHTML1.0标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依
赖，并且提供更多能有效增强网络应用的API。
HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 是 W3C 与 WHATWG 合作的结果。
WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
为 HTML5 建立的一些规则：
新特性应该基于 HTML、CSS、DOM 以及 Javascript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

最简单的 HTML5 文档

XML/HTML Code复制内容到剪贴板

>
<title>A Tiny HTML Documenttitle>
<p>Let's rock the browser, HTML5 style.p>

只包含一行文本的超简单的 HTML5 文档，它在浏览器中效果如下：

更常见的结构用和来分块，把页面的信息和页面的实际内容分开，并用来封装整个文档，现在的文档样子如下：

XML/HTML Code复制内容到剪贴板

>
<html>
<head>
<title>A Tiny HTML Documenttitle>
head>
<body>
<p>Let's rock the browser, HTML5 style.p>
body>
html>

、和 HTML5 不要求这些元素，但是这种书写风格比较好。

HTML5 文档类型

XML/HTML Code复制内容到剪贴板

第一行都必须是一个特定的文档类型声明，用于告诉后面的文档标记遵循哪个标准。HTML5 的文档类型声明极其简单。

字符编码

现在大部分网站都使用 UTF-8 的编码，这种编码简洁、转换速度快，而且支持任何你想要的非英文字符。

在 HTML5 中增加字符编码信息很简单，在中增加元素，如下：

XML/HTML Code复制内容到剪贴板

<head>
<meta charset="utf-8">
<title>A Tiny HTML Documenttitle>
head>

Dreamweaver 设计工具在创建新的网页时会自动添加这个元信息，并且也会将文件保存为 UTF 编码格式。如果你使用的是最简单的文本编辑器，在保存的时候记得选择正确的编码（UTF-8）。

页面语言

指明网页中使用的自然语言是一种好的习惯。为给内容指定语言，可在任何元素上使用 lang 属性。

为整个页面添加语言说明，就是为元素指定 lang 属性，如下代码：

XML/HTML Code复制内容到剪贴板

<html lang="zh-CN">

如果页面包含多种语言的文本，那么这个信息细节对于屏幕阅读器也是很有用的。

添加样式表

只要是经过特意设计的专业网站，就一定会使用样式表。指定要使用的 CSS 样式表时，需要在中增加元素，如下：

XML/HTML Code复制内容到剪贴板

<head>
<meta charset="utf-8">
<title>A Tiny HTML Documenttitle>
<link rel="stylesheet" href="TinyHTML5.css">
head>

添加 Javascript

在 HTML5 中添加 Javascript 与在传统页面上添加差不多，例如：

XML/HTML Code复制内容到剪贴板

<head>
<meta charset="utf-8">
<title>A Tiny HTML Documenttitle>
<link rel="stylesheet" href="TinyHTML5.css">
<script src="TinyHTML5.js">script>
head>

没有必要添加 language=”Javascript”属性。浏览器假定你要使用的 Javascript。

特别注意：

如果你要在 IE 中花大量时间测试包含 Javascript 的页面，还应该增加一个特殊的注释，叫Web标志（saved from url=），这行注释要放在指定字符编码元素的后面，如下：

XML/HTML Code复制内容到剪贴板

<head>
<meta charset="utf-8">
<title>A Tiny HTML Documenttitle>

这条注释告诉 IE 将页面视为从远程网站上下载下来的，否则，IE 会切换到一种特殊锁定模式，弹出一条安全警告，在你点了“允许阻止的内容”按钮之后才会执行 Javascript 代码。

(0014) 指的是 about:internet 字符串的长度。

最终结果

一个完整美观的 HTML5 代码最终如下：

XML/HTML Code复制内容到剪贴板

>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>A Tiny HTML Documenttitle>
<link rel="stylesheet" href="TinyHTML5.css">
<script src="TinyHTML5.js">script>
head>
<body>
<p>Let's rock the browser, HTML5 style.p>
body>
html>

推荐阅读

js
PDF内容编辑的两种小方法，你知道怎么操作吗？

本文介绍了两种PDF内容编辑的方法：迅捷PDF编辑器和Adobe Acrobat DC。使用迅捷PDF编辑器，用户可以通过选择需要更改的文字内容并设置字体形式、大小和颜色来编辑PDF文件。而使用Adobe Acrobat DC，则可以通过在软件中点击编辑来编辑PDF文件。PDF文件的编辑可以帮助办公人员进行文件内容的修改和定制。 ... [详细]

蜡笔小新 2023-12-12 19:37:50
char
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
js
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33
const
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
spring
SpringBoot集成前端模版（thymeleaf）的配置步骤

本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]

蜡笔小新 2023-12-14 10:11:46
js
Java验证码——kaptcha的使用配置及样式

本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]

蜡笔小新 2023-12-13 13:58:25
js
介绍一个免费的具备数据显示/录入/更新/删除功能的asp.net控件

本文介绍了一个免费的asp.net控件，该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用，同时具备多种功能，例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外，它还提供了数据验证、日期选择器、数字选择器等功能，以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后，该控件还支持字段值合计和数据导出功能。总之，该控件功能强大且免费，适用于asp.net开发。 ... [详细]

蜡笔小新 2023-12-11 09:41:26
js
使用chrome编辑器实现网页截图功能的方法

本文介绍了在chrome浏览器中使用编辑器实现网页截图功能的方法。通过在地址栏中输入特定命令，打开控制台并调用命令面板，用户可以方便地进行网页截图操作。 ... [详细]

蜡笔小新 2023-12-10 15:50:00
js
Unity3D引擎的体系结构和功能详解

本文详细介绍了Unity3D引擎的体系结构和功能。Unity3D是一个屡获殊荣的工具，用于创建交互式3D应用程序。它由游戏引擎和编辑器组成，支持C#、Boo和JavaScript脚本编程。该引擎涵盖了声音、图形、物理和网络功能等主题。Unity编辑器具有多语言脚本编辑器和预制装配系统等特点。本文还介绍了Unity的许可证情况。Unity基本功能有限的免费，适用于PC、MAC和Web开发。其他平台或完整的功能集需要购买许可证。 ... [详细]

蜡笔小新 2023-12-10 11:01:31
js
引号快捷键_首选项和设置——自定义快捷键

3.3自定义快捷键（CustomizingHotkeys）ChemDraw快捷键由一个XML文件定义，我们可以根据自己的需要， ... [详细]

蜡笔小新 2023-10-17 19:10:46
javascript
简单的ajax与struts2实例

前言对于从事技术的人员来说ajax是这好东西，都会使用，而且乐于使用。但对于新手，开发一个ajax实例，还有是难度的，必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细]

蜡笔小新 2023-10-16 17:08:23
input
javascript入门·表单与表单元素总结（表单验证）

表单提交前的最后验证：通常在表单提交前，我们必须确认用户是否都把必须填选的做了，如果没有，就不能被提交到服务器，这里我们用到表单的formname.submit()看演示，其实这个对于我们修炼道 ... [详细]

蜡笔小新 2023-10-15 18:44:55
javascript
使用粘性页眉和页脚切换侧栏 - Toggle Sidebar with sticky header and footer

Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ... [详细]

蜡笔小新 2023-10-13 12:28:22
javascript
禁止程序接收鼠标事件的工具_VNC Viewer for Mac(远程桌面工具)免费版

VNCViewerforMac是一款运行在Mac平台上的远程桌面工具，vncviewermac版可以帮助您使用Mac的键盘和鼠标来控制远程计算机，操作简 ... [详细]

蜡笔小新 2023-12-14 12:55:15
char
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05

夫妇郭_390

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章