给李书记点个赞吧
首页

在移动设备上设置原始大小显示

在iPhone系列和iPod touch使用的是Safari浏览器, 支持前面介绍的媒体查询表达式。 例如,使用iPhone分辨率是320px × 480px 去访问我们前面的布局示例,却不是我们想看到的结果, 并不是从上到下排列显示, 而是和电脑显示器访问的布局是一样的。为什么会这样?因为在iPhone中使用的Safari浏览器在进行页面显示时是将窗口的宽度作为980px进行显示的, 因为太多网页是按照800px左右标准进行制作的, 所以Safari浏览器默认按照980px的宽度来显示,就可以正常显示绝大多数的网页了。所以即使在页面中已经写好了页面在小尺寸窗口中运行的样式, iPhone中的Safari浏览器也不会使用这个样式, 而是选择窗口宽度为980px时所使用的样式。 所以我们需要在移动设备上设置原始大小显示和是否缩放的声明。是在页面的头部<head></head>之间加上下面这样的语句∶

<meta name=”viewport” content=”width=device-width; initial-scale=1.0″ />

<meta name=”viewport” content=”width=600px ” />

 meta 标签的viewport属性是在移动设备上设置原始大小显示和是否缩放的声明。可以使用的参数设置如下∶

  • width : viewport的宽度
  • height : viewport的高度
  • initial-scale : 初始的缩放比例
  • minimum-scale : 允许用户缩放到的最小比例
  • maximum-scale : 允许用户缩放到的最大比例
  • user-scalable : 用户是否可以手动缩放

如果在页面中已经准备好了在小尺寸的窗口中使用的样式, 并且有可能在iPhone或iPod touch中被打开时,请不要忘记了加入<meta>标签并在标签中写入指定的窗口宽度。其实还可以通过viewport把自己冒充成更宽的屏幕。

  • 评论:0条
  • 分类:html5+css3 php实战教程
  • 浏览:1188
  • 06月16日

    响应式布局中可用的设备类型

    • 可用的设备类型

    在上面的语法中,例如在CSS中嵌入“@media”的方式, 开头必须书写“@media”,然后指定设备类型(上例使用screen代表电脑显示器)。CSS中定义了10种设备类型,可以指定的值与该值所代表的设备类型如表1-20所示:

    表1-20 在Media Queries中可以指定的值与该值所代表的设备类型

    可以指定的值 设置类型
    All 所有设备
    Braille 盲文,即盲人用点字法触觉回馈设备
    embossed 盲文打印机
    handheld 手持的便携设备
    Print 文档打印用纸或打印预览视图模式
    projection 各种投影设备
    Screen 彩色电脑显示器屏幕
    Speech 语言和音频合成器
    Tty 固定字母间距的网格的媒体,比如电传打字机和终端
    Tv 电视机类型的设备

     

    • 可用的设备特性参数

    通过设备类型可以区分使用的设备,再通过设备特性参数来设置同一设备的不同型号。例如,通过设备类型指定电脑显示器, 再通过设备特性参数指用多大屏幕的显示器。设备特性的书写方式与样式的书写方式很相似, 分为两个部分,当中由冒号分割, 冒号前书写设备的某种特性, 冒号后书写该特性的具体值。例如“(min-width:320px)”。CSS中的设置特性共有13种, 是一个类似于CSS属性的集合。但与CSS属性不同的是,大部分设备特性的指定接受min/max的前缀, 用来表示大于等于或小于等于的逻辑,以此避免使用“<”和“>”这些字符。对于这13种设备特性参数的说明如表1-21所示:

    表1-21 13种设备特性的说明

    特性 可指定值 可用媒体类型 是否接受

    min/max前缀

    特性说明
    width 带单位的长度值

    例如:640px

    视觉屏幕/触摸设备 允许 定义输出设备中的页面可见区域宽度(单位一般为px),即浏览器窗口的宽度
    heigth 带单位的长度值

    例如:320px

    视觉屏幕/触摸设备 允许 定义输出设备中的页面可见区域高度(单位一般为px),即浏览器窗口的高度
    device-width 带单位的长度值

    例如:640px

    视觉屏幕/触摸设备 允许 定义输出设备的屏幕可见宽度(单位一般为px),即设备屏幕分辨率的宽度值
    device-heigth 带单位的长度值

    例如:320px

    视觉屏幕/触摸设备 允许 定义输出设备的屏幕可见高度(单位一般为px) ,即设备屏幕分辨率的高度值
    orientation 只能指定两个值:

    portrait 或 landscape

    位图介质类型 不允许 浏览器窗口的方向是纵向还是横向, 当窗口商度大于等于宽度值是该特性值为portait(横向),否则为landscape(竖向)
    aspect-ratio 比例值

    例如16/9

    位图介质类型 允许 定义’width’与’height’的比率,即浏览器的长宽比
    device-aspect-ratio 比例值

    例如16/9

    位图介质类型 允许 定义’device-width’与’device-height’的比率,即设备屏幕长宽比。如常见的显示器比率:4/3, 16/9,16/10
    color 整数值 视觉媒体 允许 设备使用多少位的颜色值,如果不是彩色设备,则值等于0
    color-index 整数值 视觉媒体 允许 色彩表中的色彩数
    monochrome 整数值 视觉媒体 允许 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
    resolution 分辨率值

    例如300dpi

    位图介质类型 允许 定义设备的分辨率。如:96dpi,300dpi,118dpcm
    scan 只能指定两个值:

    progressive 或interlace

    电视类 不允许 定义电视类设备的扫描方式, progressive逐行扫描,interlace隔行扫描
    grid 只能指定两个值:

    0 或1

    栅格设备 不允许 用来查询输出设备是否使用栅格或基于位图。1代表是,0代表否

     

    可以使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式, 例如以下语句指定了当设备窗口宽度小于640px时所使用的样式:

    @media screen and (max-width: 640px) { 样式代码 }

     

    可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中, 指定方式类似如下所示:

    @media handheld and (min-width:360px), screen and (max-width: 480px) { 样式代码 }

     

    可以在表达式中加上not关键字或only关键字, not关键字表示对后面的表达式执行取反操作, 书写方法类似如下所示:

    /* 样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中 */

    @media not handheld and (color) { 样式代码 }

    /* 样式代码将被使用在非彩色设备中 */

    @media all and (not color) { 样式代码 }

    使用only关键字的作用是让那些不支持Media Queries但是能够读取Media Type的设备的浏览器将表达式的样式隐藏起来。 例如:

    @media only screen and (color) { 样式代码 }

    上面的语句对于支持Media Queries的设备来说,将能够正确应用样式, 就像only不存在一样。对于不支持Media Queries但能够读取Media Type的设备(例如IE8只支持“@media screen”)来说, 由于先读到的是only而不是screen, 将忽略这个样式。对于不支持Media Queries的浏览器(例如IE8之前的浏览器)来说, 无论是否有only, 都将忽略这个样式。

    相关文章推荐:

    响应式布局Media Query 的使用方法

    响应式布局语法结构及用法

  • 评论:0条
  • 分类:html5+css3 php实战教程
  • 浏览:1806
  • 06月15日

    响应式布局语法结构及用法

    媒体查询有两种使用方式, 一种是在CSS样式中内嵌“@media”,在同一个CSS中通过不同窗口编写不同的样式去选择。 另一种是使用外部样式表的引用, 在@import和link中使用“@media”,根据不同的窗口大小选择对应的样式文件。这两种方式的使用方法是一样的。Media Queries的使用方法如下所示:

    @media 设备类型 only (选取条件)  not (选取条件)  and  (设备特性),设备二 { 样式代码 }

    在CSS3中的Media Queries模块中支持对外部样式表的引用, 使用方法类型如下代码:

    @import url(color.css) screen and (min-width: 1000px);                /*使用@import导入css文件*/

    或:

    <link rel=”stylesheet” type=”text/css” media=”only screen and (max-width: 480px),only screen and (max-device-width: 480px)” href=”link.css” rel=”external nofollow” />   /*使用link导入外部css文件*/

    简写:

    <link rel=”stylesheet” type=”text/css” media=”screen and (max-width: 480px)  href=”link.css” />

    上面使用中only可省略,限定于计算机显示器,第一个条件max-width是指渲染界面最大宽度,第二个条件max-device-width是指设备最大宽度。在样式表中内嵌@media的代码示例如下所示:

    @media screen (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) { 样式代码 }

    简写:

    @media screen and (max-width:640px)  { 样式代码 }

    在上面的示例代码中,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。从上面的例子可以看出,字符间以空格相连,选取条件包含在小括号内,样式代码为兼容设置的样式表,包含在中括号里面。only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。

  • 评论:2 条
  • 分类:html5+css3 php实战教程
  • 浏览:2553
  • 06月14日

    响应式布局Media Query 的使用方法

    Media Query 的使用方法

    在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式。通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。

    如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。媒体查询能够获取的值如下:

    • 设备的宽和高device-width,device-heigth显示屏幕/触觉设备。
    • 渲染窗口的宽和高width,heigth显示屏幕/触觉设备。
    • 设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。
    • 画面比例aspect-ratio点阵打印机等。
    • 设备比例device-aspect-ratio-点阵打印机等。
    • 对象颜色或颜色列表color,color-index显示屏幕。
    • 设备的分辨率resolution。

    文章来自php编程,转载请注明出处。

  • 评论:0条
  • 分类:html5+css3 php实战教程
  • 浏览:1068
  • 06月13日

    HTML5新增及删除的属性(4)

    今天是html5的第四课,也是最后学习html5的最后一课,在最后一课中李书记主要给大家讲解HTML5新增及删除的属性新增加的新增的全局属性以及hidden元素隐藏属性。那么今天带大家学习吧。

    HTML5新增及删除的属性

    a 标签  media 属性  用来设定超链接连接的媒体类型。

    area标签 增加了rel属性和hreflang属性。为了和a标签一致。

    link标签  size属性用来设定ico图标的大小。

    ol标签  reversed属性  倒序属性

    base标签  target属性。。。

    meta标签  charset属性  用于设置字符集。

    script标签  async属性  异步加载脚本属性。

    html标签  manifest属性 后期做网站离线应用的专用属性。

    style标签  scoped属性  最有潜力的属性。目前不支持。

    html5+css3

    html5+css3

    删除的属性

    • 表示样式的属性基本都删除了

    bgcolor、background、link、alink、vlink….

    • 无用属性

    link标签 target属性、img标签的name属性…

    新增的全局属性:

    contenteditable  内容可编辑属性

    作用:设置元素可以在页面上进行临时的编辑操作。

    如果需要将编辑之后的内容进行保存,需要借助ajax技术实现。

    designMode   编辑模式属性

    作用:设置全页面可编辑模式。

    格式”:document.designMode=’on’  开启模式

    document.designMode=’off’  关闭模式

    hidden   元素隐藏属性

    作用:设置任意元素为不显示状态,不占用物理空间

    效果和display:none一致

    如果要用JS控制,那就是元素.hidden=布尔值

    Spellcheck  单词拼写检测属性

    暂不支持

    tabindex   表单索引设置属性

    作用:设置tab键的次序。一般用于表单元素

    好啦,李书记为大家分享的html5总共4节课课程全部结束啦,如果喜欢的话,大家就继续支持李书记php博客吧。

  • 评论:0条
  • 分类:html5+css3
  • 浏览:1000
  • 04月08日

    html5新智能表单的应用(3)

    今天李书记带大家在学习下html5中的新的智能表单部分应用,通过和html4进行的对比,html5所有新添加的表单我将统一的学习下,具体的html5新的表单用法我全部列出来进行讲解。希望对大家学习html5有帮助。

    dialog 对话标签

    作用:用于表示一段完整的对话内容。需要和dt及dd配合使用

    html5+css3

    html5+css3

    <dialog>

    <dt>李书记是谁</dt>

    <dd>怎么学习php编程</dd>

    <dt>如何快速掌握php编程</dt>

    <dd>php编程需要注意什么</dd>

    <dt>php高级课程包含哪些</dt>

    <dd>php特级课什么内容</dd>

    </dialog>

    datalist 数据列表标签

    作用:用来为一个输入标签添加数据列表

    例子:

    <form>

    <input type=”text” name=”keywords” value=”” list=”unknow” />

    <input type=”submit” value=”百度一下:李书记” />

    </form>

    <!–数据列表–>

    <datalist id=”unknow”>

    <option>李书记php博客讲的是什么</option>

    <option>php基础知识</option>

    <option>php高级知识</option>

    <option>如何学好JS?</option>

    <option>如何学好HTML?</option>

    <option>php特级知识</option>

    </datalist>

    新的智能表单的应用:新的智能表单的用法。

    在HTML5中为了表单布局的方便,避免表单之间的冲突,我们允许将表单标签与form标签分离。

    第一步:为制定的form标签添加一个id属性,同时赋值

    第二步:为属于当前form标签的表单标签(input,textarea等)添加form属性,制定id即可。

    注意:能用旧的表单布局就不用新的,不是旧版本的不好用,该方法的目的是为了方便布局。

    新增加的表单类型:

    email  邮件表单类型

    url   url地址类型    网址类型

    number  数字表单

    color  颜色表单

    tel  电话表单

    search 搜索表单

    range 滑块表单

    date 日期表单

    time 时间表单

    week 周选取表单

    month月选取表单

    datetime 日期时间选取表单

    Datetime-local 本地日期时间选取表单

    新增的表单属性:

    autofocus  自动获取焦点属性,提高用户体验。

    placeholder  设置表单的提示信息

    注意:在HTML5之前我们一致使用value的值作为默认值和提示信息使用,功能重叠,为了功能更加精确,HTML5中value仅表示当前表单的默认值,placeholder担任提示信息工作。

    form 为表单指定form标签使用。

    required 强制必填属性。

    max 设置表单的最大值

    min 设置表单的最小值

    注意:可以使用的表单:number、range、date、time、datetime、datetime-lical、week、month

    Step 设置表单的跳步属性,主要用于number表单

    multiple 可以设置文件表单为多文件上传

    Pattern 为表单设置正则表达式。

    novalidate  对form标签使用,设定所有表单内容不验证就可以提交

    formaction 设置当前提交按钮提交表单的新地址

    formmethod 设置当前提交按钮的提交表单方法

    formentype 设置表单提交信息的编码方式。

    formnovalidate 设置当前提交按钮提交时不需要表单验证

    注意:以上四个属性对任何的提交按钮有效,包括button提交按钮,input提交按钮,图片提交按钮……

    最后我想讲的是今天我们已经学习了html5的第三课程,我们html5主要分为4天的课程,如果想学习第二节课请去html5最新课程-新增的其他标签html5入门(2) 观看。如果有不明白的地方欢迎联系我。     

  • 评论:0条
  • 分类:html5+css3
  • 浏览:1157
  • 04月07日

    html5最新课程-新增的其他标签html5入门(2)

    今天李书记将带大家做几个有意思的标签,那就是写一些媒体标签,通过一些html5技术做的视频音频标签可以在网页中加载更多的视频和音频标签包括flash动画等等。希望大家认真学习哈,另外html5入门我总共总结4课,这4节课贯穿html5所有比较实用的标签。

    html5入门技术

    html5入门技术

    audio  音频标签:

    作用:在页面中引入音频内容。

    <!–基本的音频格式–>

    <audio src=”_WStyle.mp3″ controls>后备内容</audio>

    <!–完整格式的音频–>

    <audio controls>

    对不起,您的破浏览器不支持音频标签,请升级浏览器

    <source src=”_WStyle.mp3″ type=”audio/mp3″ />

    <source src=”_WStyle.ogg” type=”audio/ogg” />

    <source src=”_WStyle.wav” type=”audio/wav” />

    </audio>

    属性:

    src 在音频标签中用于引入音频的地址。如果使用多个音频资源,则需要在source标签中引入音频地址,audio中不使用该属性。

    controls 设置播放的控制面板。单属性

    Autoplay 设置音频为自动播放  单属性

    loop 设置音频为循环播放。

    Preload 设置音频为预先加载属性。在音频未开始播放之前就先下载内容。

    none  不预先加载

    auto 自动加载。

    注意:该属性和autoplay有冲突,不能同时使用

    各个浏览器对于音频编码的支持。

    IE浏览器  MP3和WAV的编码格式

    FF浏览器  ogg和WAV的编码格式

    Opera浏览器  ogg和WAV的编码格式

    chrome浏览器 ogg和MP3及vp8格式

    safari浏览器 ogg和MP3及vp8格式

    video 视频标签:

    作用:在网页中播放视频文件。

    <!–简单的视频格式–>

    <video src=”制作宇宙中的地球_超清.mp4″ controls>又是这个破浏览器赶紧换了~</video>

    <!–完整的视频格式–>

    <video controls>

    又是这个破浏览器赶紧换了~

    <source src=”制作宇宙中的地球_超清.mp4″ type=”video/mp4″>

    <source src=”制作宇宙中的地球_超清.ogg” type=”video/ogg”>

    </video>

    视频标签的属性:

    src  引入视频地址,video和source同时使用时,不需要使用该属性

    controls  显示控制面板属性  单属性

    Autoplay 自动播放属性  单属性

    loop  设置为循环播放  单属性

    width 设置视频的宽度

    height 设置视频的高度

    poster  设置视频的预览图片

    preload 设置预先加载属性

    auto  自动加载

    none 不自动加载(默认)

    浏览器对视频编码的支持。

    IE浏览器  支持H.264和VP8编码格式。

    FF浏览器  支持ogg和VP8编码格式

    Opera浏览器 支持ogg和VP8编码格式

    chrome浏览器 支持ogg和VP8,H.264编码格式

    safari浏览器  支持ogg和VP8,H.264编码格式

    source 音视频资源标签

    作用:用于引入音频或者视频

    格式:<source src=”地址” type=”音视频类型的MIME”>

    canvas 画布标签

    关于canvas画布标签我会在后面的课程中总结中单独花几天时间讲下,这个比较复杂。

    embed 多媒体标签

    一般用于引入页面中的flash文件

    <!–引入falsh文件–>

    <embed src=”旋转的文字.swf”>

    meter  状态条标签

    max 设置最大状态值

    min 设置最小状态值

    value 设置当前值

    high  设置高警告值

    low  设置低警告值

    optimum  设置良好值

    规则:

    如果optimum值比low的值还低,则表示值越低状态越好(绿色) 中间和高值则为黄色和红色

    如果optimum值处于high值和low值之间,则表示中间状态良好(绿色),低值和高值为黄色

    如果optimum值比high值还高,则表示值越高越好(绿色),中间值和低值为黄色和红色

    progress  进度条标签

    作用:表示一个事物的进度。

    max 设置最大进度值。

    value 设置当前进度只

    格式:

    <!–进度条–>

    <progress max=”100″ value=”0″>破浏览器!</progress>

    Mark 高亮标记标签

    作用:将该标签内部的文字变为具有黄色背景效果的文字,用于提示读者注意该内容。

    注意:可以修改CSS样式。。。

    time 时间标签

    作用:对时间进行一个解释,方便搜索引擎收录。

    datetime属性

    格式:

    datetime=”2012-12-12T20:30:28″ 当前时间

    datetime=”2012-12-13T20:30:28Z  UTC时间格式

    datetime=”2012-12-14T20:30:28+08:00  指定时区格式

    pubdate 属性

    设定当前的时间为一个内容发布的时间。

    ruby 拼音注释标签

    作用:给文字加拼音注释

    格式:

    <ruby>文字<rt>拼音</rt></ruby>

    details 细节描述标签

    summary 细节描述标签的标题标签

    今天我们主要讲解html5入门课程的第二节,关于除了页面布局其他标签的使用方法,如果大家对html5不是太熟悉请将HTML5入门教程(1)好好学习下,代码敲十遍,在学习这节课的内容。

     

  • 评论:0条
  • 分类:html5+css3
  • 浏览:973
  • 04月05日

    HTML5入门教程(1)

    今天李书记php教程网带大家讲解下HTML5学习的心得,html5我也是今年才接触的,但是我之前有html基础在身上,所以学了花了半天的时间讲html5基础的标签语法和常用的元素都掌握了,感觉还行,比html增加了不少的动态的标签,做出东西来很炫。那么今天我们看看学习html5和html有什么区别把,我都列出来了,大家看看。

    DTD声明的改变

    HTML4的文件声明非常长…

    在HTML5中没有的了DTD文件的限制,所以变短了.

    <!doctype html> 而且没有任何大小写的限制,

    <!DocType HTML> 也是完全正确的HTML5书写规则

    新的标签书写方式:

    不允许写结束标签的标签

    base、link、br、hr、img、meta、source….

    可以省略结束标签的标签

    列标标签li、option、tr、td、dt、dd…

    完全可以省略的标签

    html、head、body…

    建议按照原来的标准来写。

    HTML5的版本分类:

    有HTML4发展而来的松散语法的HTML5(承认版本)

    由XHTML衍生而来的严格语法XHTML5(默许版本)

     

    单双引号:

    在HTML5中属性可以使用单引号,可以使用双引号,也可以不使用引号。只有一种除外,在属性值中有=的字符,必须使用引号。

    比如:id=“3=5”

    DIV+CSS网页布局:

    主要目标为了让内容和样式分离。在搜索引擎没有发展起来的时候,该布局方式是非常完美的布局方式。

    旧版的DIV+CSS页面布局

    旧版的DIV+CSS页面布局

    旧版的DIV+CSS页面布局

    HTML5+CSS的布局模式:

    HTML5+CSS的布局模式

    HTML5+CSS的布局模式

    新增的结构标签

    新增的结构标签是为了搜索引擎更好的收录和抓去网页内容新增的标签,本质上就是div标签,一个块状元素。

    Header 标签

    表示一个页面中顶部区域(布局中)

    表示一片文章正文开始之前的内容(文章中)

    注意:

    1个页面中不一定已有一个header标签,为header标签添加class或者id都可以,并没有限制

    • 在一个页面的布局中,一般只有一个header表示页面的头部区域。
    • 在文章中,header可以表示文章正文开始之前的内容,包括,标题,作者,时间以及预览信息等…

    footer 标签

    表示一个页面的底部区域(在布局结构中)

    表示一片文章的正文结束部分之后的内容(在文章中)

    注意:

    1个页面中不一定已有一个footer标签,为footer标签添加class或者id都可以,并没有限制

    • 在页面布局中一般只有一个footer标签表示页面的底部
    • 在文章中,除了正文之后的信息都可以放在footer中,例如参考文献,鸣谢列表,注释及作者信息等..

    nav标签

    表示一个页面的导航(在布局中)

    表示一篇文章的目录或者分页部分

    注意:nav仅仅是一个特定的div而已,书写导航依旧要使用ul或者ol来实现。

    section标签

    在布局中表示页面的主要内容区块。

    在文章中表示文章区块或者章节。

    在页面布局中:

    <header>页面顶部</header>

    <section>主要内容区域</section>

    <aside>次要内容区域</aside>

    <footer>页面底部</footer>

    在文章中:

    请参考article中section的用法。

    aside 标签

    在页面布局中表示一个页面的次要内容区域。

    在文章中表示一个文章的注释信息或者旁白等。

    article标签

    表示一片完整的文章内容或者一个博文、评论信息等。

    格式:

    一篇较短 的文章

    <article>

    <header>正文之前的信息</header>

    <p>正文</p>

    <footer>底部信息</footer>

    </article>

    一片多个段落较长的文章

    <article>

    <header>正文之前的信息</header>

    <section>

    <p>正文的段落</p>

    <p>正文的段落</p>

    <p>正文的段落</p>

    </section>

    <footer>正文之后的内容</footer>

    </article>

    文章和文章评论的书写方式

    <article>

    <header>正文之前的信息</header>

    <section>

    文章的主体内容

    </section>

    <section>

    <article>评论的文章内容</article>

    <article>评论的文章内容</article>

    <article>评论的文章内容</article>

    <article>评论的文章内容</article>

    ….

    </section>

    <footer>正文之后的内容</footer>

    </article>

    hgroup 标签标题组标签。

    作用:用来将一片文章的多个标题进行包含组成一个标题组,声明他们是一片文章的标题。

    注意:该标签一般在文章的header中使用

    该标签一般只包含h1-h6的标签

    figure  内容解释标签

    figcaption  解释的描述标签

    该标签的作用是进行内容的解释和描述,内容可以为文字,图片,音频视频等..

    figcaption负责内容的解释部分,

    <figure>

    <!–需要描述的内容–>

    <p>UFO</p>

    <!–解释信息–>

    <figcaption>

    解释:Unknow Fly Object;

    </figcaption>

    </figure>

    address标签

    该标签为地址标签,表示一个现实地址或者网络地址

    以上就是李书记php博客中为大家分享的关于html5学习课程的相关基本知识,在html5中我会列出相关的技术类文章四篇讲html5出现的新标签讲完,希望大家喜欢。

  • 评论:0条
  • 分类:html5+css3
  • 浏览:1280
  • 04月03日