课程咨询:400-111-8989

  • HTML5零基础怎么学?为你分享一些学习HTML5的干货

    发布:HTML5培训  来源:html5教程  时间: 2018年07月03日

  • 今天小编要跟大家分享的文章是关于HTML5零基础怎么学?为你带了一些学习HTML5的技巧,希望这些技巧能够帮助你迅速学成HTML5技术。最近几年,Web前端开发的最热领域当属HTML5,HTML5技术已经从根本上改变了开发商开发web应用的方式,从桌面的浏览器开始到移动端的应用,这种语言和标准都正在不断的影响,并将持续影响着各种各样的操作平台...

  • 今天小编要跟大家分享的文章是关于HTML5零基础怎么学?为你带了一些学习HTML5的技巧,希望这些技巧能够帮助你迅速学成HTML5技术。最近几年,Web前端开发的最热领域当属HTML5,HTML5技术已经从根本上改变了开发商开发web应用的方式,从桌面的浏览器开始到移动端的应用,这种语言和标准都正在不断的影响,并将持续影响着各种各样的操作平台。

    这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。

    一 新的文档类型(Doctype)

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

    你还在使用上面这个既麻烦又难记的XHTML文档类型吗? 如果还是这样的话,现在该切换到新的HTML5文档类型了。

    <!DOCTYPE html>

    只要这么简单的15个字符就可以了。(注意:你的doctype的申明需要出现在你html文件的第一行。)

    二 图形(Figure)元素

    考虑用下面的代码来标记图片?

    <mg src="path/to/image" alt="About image" />
    
    <p>Image of Mars. </p>

    很不幸,它不能用简单、富有语义关联的方式与图形的标题关联,因为它仅仅是用段落标记以及图片元素包裹着,而HTML5通过引进<figure>元素,改进了这一点。当结合 <figcaption> 元素使用时,我们就可以将图形标题与图形配对起来。代码如下:

    <figure>
    
    <img src="path/to/image" alt="About image" />
    
    <figcaption>
    
    <p>This is an image of something interesting. </p>
    
    </figcaption>
    
    </figure>

    三 布局

    当创建一个响应式网站,或让现有的网站变成响应式的,首先要关注的元素的布局。我在建立响应式的网站,总是先创建一个非响应的布局,页面宽度固定大小。如果非响应版本完成得非常不错,我再添加媒体查询(Media Queries)和响应式代码。这种操作方式更容易实现响应式特性,在同一时间专注于一个任务。

    当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到<head>和</head>标签之间。这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。

    1.<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    
    2.<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    3.<meta name="HandheldFriendly" content="true">

    现在是时候添加一些媒体查询了。根据 W3C 网站,媒体查询由媒体类型和零个或多个媒体查询的条件表达式组成。通过使用媒体查询,外观呈现可以针对特定范围内的输出设备,而不需要改变内容本身。换句话说,媒体查询让您的网站在各种各种显示器上看起来都很好,从小的智能手机到大的电脑屏幕等等。

    媒体查询取决于你的网站布局,所以对我来说为您提供一个现成可以使用的代码片段有点困难。但是,下面的代码对于大多数网站都是一个很好的起点。在这个例子中,#primary 是主要内容区域,#secondary 是侧栏。

    从代码中你可以看到,我定义了两种规格:首先有一个最大宽度为1060px,为平板电脑优化的横向显示。#primary 占在其父容器宽度的67%,#senondary 占30%,再加上3%的左外边距。第二个规格是用于平板电脑和更小的屏幕尺寸。

    由于智能手机的屏幕尺寸小,我决定给 #primary 设置100%的宽度,#secondary 也设置100%的宽度,他将在 #primary 下面。 正如我已经说过的,你可能必须要对这段代码位进行修改才能适应您的网站的具体需求。

    1./* Tablet Landscape */
    
    2.@media screen and (max-width: 1060px) {
    
    3. #primary { width:67%; }
    
    4. #secondary { width:30%; margin-left:3%;}
    
    5.}
    
    6./* Tabled Portrait */
    
    7.@media screen and (max-width: 768px) {
    
    8. #primary { width:100%; }
    
    9. #secondary { width:100%; margin:0; border:none; }
    
    10.}

    完成以后,让我们看看你的布局是如何响应的。要做到这一点,我用这 Matt Kersley 创建的一款非常的响应式测试工具。

    四 字体

    本教程的最后一步绝对非常重要,但往往被网站开发人员忽视——字体。到现在为止,大多数开发人员(包括我自己)使用像素来定义字体的大小。虽然像素在普通 网站使用是OK的,但是对于响应式网站来说应该有响应式的字体。事实上,一个响应式的字体大小应关联它的父容器的宽度,这样它才可以适应客户端的屏幕。

    CSS3 规范引入了一个新的单位叫 rem,和 em 类相似,但相对于 HTML 元素来说, rem 更易于使用。

    rem 是相对于 HTML 元素的,不要忘了重置 HTML 的字体大小:

    1.html { font-size:100%; }

    完成后,您可以定义响应式的字体大小,如下所示:

    1.@media (min-width: 640px) { body {font-size:1rem;} }
    
    2.@media (min-width:960px) { body {font-size:1.2rem;} }
    
    3.@media (min-width:1100px) { body {font-size:1.5rem;} }

    请注意,旧浏览器不支持 rem 单元,所以不要忘了实现一个替代。

    以上就是小编今天为大家分享的关于HTML5零基础怎么学?的一些学习技巧了,希望本篇文章能够对正在学习HTML5技术的你有所帮助,想了解更多HTML5相关资讯,记得关注达内HTML5培训官网哦。

    HTML5零基础怎么学?为你分享一些学习HTML5的干货

    声明:本文章来自互联网分享如涉及到版权问题请联系客服处理谢谢!

  • 上一篇:为你介绍关于HTML5的响应式布局的设计方法和响应式前端优化

    下一篇:没有下一篇了

网站导航
2002-2018 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56