当前位置: 开发笔记 > 编程语言 > 正文

html5入门介绍（第一讲）——黄丹华

作者：mobiledu2502886443 | 来源：互联网 | 2023-09-11 12:42

•HTML5HTML5开发进程•08年工作草案•09年停滞一年•10年重新启动HTML5计划•2012年发布候选推荐版•2022年发布计划推荐版本html5新的认识包括兼容性、实用

•HTML5

HTML5开发进程

•08年工作草案

•09年停滞一年

•10年重新启动

HTML5计划

•2012年发布候选推荐版

•2022年发布计划推荐版本

html5新的认识包括兼容性、实用性、互通性、通用访问性&＃xff0c;其中兼容性主要是html5中有一个代码替换功能&＃xff0c;就是如果浏览器不支持某种标签会自动的执行被替代的内容&＃xff1a;示例代码如下——

<canvas>
你的当前浏览器不支持canvas
canvas>

大家可以试着把这段代码在每个浏览器中尝试一下&＃xff0c;结果肯定是在IE中可以看到这句话&＃xff0c;如果支持的话是不会看到任何东西的。

1、效率和用户优先

他把抽象层次分为4个&＃xff0c;考虑最多的是用户、其次编程者、浏览器、规范者。例如&＃xff1a;

html5支持以上三种情况&＃xff0c;这对于用户和、编程者是一件非常好的事情&＃xff0c;因为可以使用三种&＃xff0c;同时降低编程错误率&＃xff0c;但是对于浏览器和代码规范者就比较头疼了&＃xff0c;因为这里涉及到三种&＃xff0c;那么作为浏览器的话就必须兼容这三种&＃xff0c;那样就会给浏览器带来负荷。

2、表现和内容分离

HTML5很大程度的将css与尽可能的分离例如&＃xff1a;big、center、font、basefont这些标签都已经移除 &＃xff0c;也就是说在我们最新版本的HTML5浏览器中&＃xff0c;这些标签都是已经失效的。

3、化繁为简

新的简化的DOCTYPE

新的简化字符集声明

HTML旧版DOCTYPE

HTML5 DOCTYPE

HTML旧版字符集申明

HTML5字符集

HTML旧版DOCTYPE

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 DOCTYPE

DOCTYPE html>

HTML旧版字符集申明

HTML5字符集

可以看到我们的HTML5还是把用户和编程者放在首位。

4、无插件范式

HTML5提供了对很多功能的原生支持&＃xff0c;不需要安装插件。主要是通过CSS和Javascript的方式控制页面的布局。

HTML5新功能

html的新元素列表

其中前面两个&＃xff0c;接下来详细讲解&＃xff0c;第二个到倒数第二个都为新添加的html标签&＃xff0c;主要是经过长期的使用而演化而来的&＃xff0c;其主要是例如&＃xff1a;

接下来讲解一下这些标签的使用方法&＃xff1a;

DOCTYPE html>
<html>

<head>
<meta charset&＃61;"utf-8" />
<title>HTML5title>
<link rel&＃61;"stylesheet" href&＃61;"html5.css">

head>

<body>

<header>
<h1>Headerh1>
<h2>Subtitleh2>
<h4>HTML5 Rocks!h4>
header>

<div id&＃61;"container">

<nav>
<h3>Navh3>
<a href&＃61;"">Link 1a>
<a href&＃61;"">Link 2a>
<a href&＃61;"">Link 3a>
nav>

<section>
<article>
<header>
<h1>Article Headerh1>
header>
<p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.p>
<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.p>
<footer>
<h2>Article Footerh2>
footer>
article>
<article>
<header>
<h1>Article Headerh1>
header>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odiop>
<footer>
<h2>Article Footerh2>
footer>
article>
section>

<aside>
<h3>Asideh3>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncusp>
aside>
<footer>
<h2>Footerh2>
footer>
div>
body>

html>

css如下&＃xff1a;

/* html5 css file, Copyright ?Pro HTML5 Programming */

body {
background-color:#CCCCCC;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin: 0px auto;
max-width:900px;
border:solid;
border-color:#FFFFFF;
}

header {
background-color: #F47D31;
display:block;
color:#FFFFFF;
text-align:center;
}

header h2 {
margin: 0px;
}

h1 {
font-size: 72px;
margin: 0px;
}

h2 {
font-size: 24px;
margin: 0px;
text-align:center;
color: #F47D31;
}

h3 {
font-size: 18px;
margin: 0px;
text-align:center;
color: #F47D31;
}

h4 {
color: #F47D31;
background-color: #fff;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(-45deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(-45deg);
position: absolute;
padding: 0px 150px;
top: 50px;
left: -120px;
text-align:center;

}

nav {
display:block;
width:25%;
float:left;
}

nav a:link, nav a:visited {
display: block;
border-bottom: 3px solid #fff;
padding: 10px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}

nav a:hover {
color: white;
background-color: #F47D31;
}

nav h3 {
margin: 15px;
color: white;
}

#container {
background-color: #888;
}

section {
display:block;
width:50%;
float:left;
}

article {
background-color: #eee;
display:block;
margin: 10px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

article header {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;

}

article footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}

article h1 {
font-size: 18px;
}

aside {
display:block;
width:25%;
float:left;
}

aside h3 {
margin: 15px;
color: white;
}

aside p {
margin: 15px;
color: white;
font-weight: bold;
font-style: italic;
}

footer {
clear: both;
display: block;
background-color: #F47D31;
color:#FFFFFF;
text-align:center;
padding: 15px;
}

footer h2 {
font-size: 14px;
color: white;
}

/* links */
a {
color: #F47D31;
}

a:hover {
text-decoration: underline;
}

其中重点是

HTML5 Rocks!

这里实现了旋转效果&＃xff0c;主要是通过css3加html5实现的&＃xff0c;效果如下&＃xff1a;

转:https://www.cnblogs.com/huangdh3/archive/2011/06/03/2072317.html

推荐阅读

header
Android开发笔记：使用Picasso加载网络图片等比例缩放

在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]

蜡笔小新 2023-12-14 17:34:00
header
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
const
向QTextEdit拖放文件的方法及实现步骤

本文介绍了在使用QTextEdit时如何实现拖放文件的功能，包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数，并结合QMimeData和QUrl等类，可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]

蜡笔小新 2023-12-14 16:06:38
const
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
object
XML介绍与使用的概述及标签规则

本文介绍了XML的基本概念和用途，包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则，包括标签的尖括号和合法标识符的组成，标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读，读者可以对XML的基本知识有一个全面的了解。 ... [详细]

蜡笔小新 2023-12-13 17:39:50
js
《数据结构》学习笔记3——串匹配算法性能评估

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

蜡笔小新 2023-12-13 16:16:05
js
自动轮播，反转播放的ViewPagerAdapter的使用方法和效果展示

本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter，并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]

蜡笔小新 2023-12-13 14:41:31
request
Support Paged.JS for automatic hugo resume> PDF conversion.

FeatureRequestIsyourfeaturerequestrelatedtoaproblem?Please ... [详细]

蜡笔小新 2023-12-13 11:52:05
js
Html5-Canvas实现简易的抽奖转盘效果

本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]

蜡笔小新 2023-12-13 06:02:20
buffer
如何用GStreamer删除H264格式的中间部分视频

本文讨论了如何使用GStreamer来删除H264格式视频文件中的中间部分，而不需要进行重编码。作者提出了使用gst_element_seek(...)函数来实现这个目标的思路，并提到遇到了一个解决不了的BUG。文章还列举了8个解决方案，希望能够得到更好的思路。 ... [详细]

蜡笔小新 2023-12-10 08:46:57
buffer
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
js
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
js
后台获取视图对应的字符串

1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]

蜡笔小新 2023-12-13 18:03:01
js
GPT-3发布，动动手指就能自动生成代码的神器来了！

近日，OpenAI发布了最新的NLP模型GPT-3，该模型在GitHub趋势榜上名列前茅。GPT-3使用的数据集容量达到45TB，参数个数高达1750亿，训练好的模型需要700G的硬盘空间来存储。一位开发者根据GPT-3模型上线了一个名为debuid的网站，用户只需用英语描述需求，前端代码就能自动生成。这个神奇的功能让许多程序员感到惊讶。去年，OpenAI在与世界冠军OG战队的表演赛中展示了他们的强化学习模型，在限定条件下以2:0完胜人类冠军。 ... [详细]

蜡笔小新 2023-12-11 11:04:43
js
使用n3-charts绘制以日期为x轴的数据

本文介绍了如何使用n3-charts绘制以日期为x轴的数据，并提供了相应的代码示例。通过设置x轴的类型为日期，可以实现对日期数据的正确显示和处理。同时，还介绍了如何设置y轴的类型和其他相关参数。通过本文的学习，读者可以掌握使用n3-charts绘制日期数据的方法。 ... [详细]

蜡笔小新 2023-12-10 00:19:21

mobiledu2502886443

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

Tags | 热门标签

RankList | 热门文章