HTML5结构标签

<!DOCTYPE html>

<!--

↑ 文档声明。HTML5已经简化为上述样式!

注意:文档声明必须有!而且必须在文档页面的第一行!

HTML4.01之前的文档声明:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

-->

<html>

<head>

<!--

Head用于表示网页的元数据:即描述网页的基本信息

-->

<!--

meta标签常用属性:

1、charset:设置文档的字符集编码格式

HTML5中设置字符集编码:<meta charset="UTF-8">

HTML4.01之前...: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

>>>常见的字符集编码格式:

a.GB-2312:国标码,简体中文

b.GBK:扩展的国标码

c.UTF-8:万国码 Unicode 常用

2、http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存)

需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)

例如:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

3、name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看

常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少

例如:↓↓↓

-->

<!--作者-->

<meta name="author" content="http://www.jredu100.com" />

<!--网页关键字:多个关键字用英文逗号分隔-->

<meta name="keywords" content="HTML5,网页,Web前端开发" />

<!--网页描述:搜索网站时,title下面的解释文字。至关重要!!-->

<meta name="description" content="这是我在杰瑞教育开发的第一个网页。" />

<meta charset="UTF-8">

<!--title标签:网页的标题,即网页选项卡上的文字。-->

<title>我的第一个网页</title>

<!--使用link标签,链接网页图标(title前的小logo)

rel属性:声明链接文件的类型,此处选icon

type属性:可以省略

href属性:表示图片的路径地址

-->

<link rel="icon" type="image/x-icon" href="img/icon.png" />

</head>

<body>

</body>

</html>

时间: 2024-11-11 13:54:11

HTML5结构标签的相关文章

HTML5结构化标签

一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也就是说整个HTML文档结构定义不清晰,HTML5中为了解决这个问题,专门添加了:页眉.页脚.导航.文章内容等跟结构相关的结构元素标签. 在讲这些新标签之前,我们先看一个普通的页面的布局方式: 上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有

HTML5的新结构标签

在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文 章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也就是说整个HTML文档结构定义不清晰,HTML5中为了解决这个问题,专门添加了:页 眉.页脚.导航.文章内容等跟结构相关的结构元素标签. 在讲这些新标签之前,我们先看一个普通的页面的布局方式: 上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块,

HTML5 结构之美(3) - 结构标签综合运用

前面我们介绍了在 HTML5 中新增的结构标签,以及这些标签的定义和使用方法.接下来,让我们看一下在 HTML5 中进行总体页面布局的时候,具体应该怎样来综合运用这些结构标签. 大纲 通过使用新的结构标签,HTML5 的文档结构比大量使用 div 标签的 HTML4 的文档结构要清晰.明确了很多.如果再规划好文档结构的大纲,就可以创建出对阅读者或屏幕阅读程序来说,都很清晰易读的文档结构. 所谓大纲,简单来说就是文档中各内容区块的结构编排.内容区块可以使用标题标签(h1~h6)来展示各级内容区块的

HTML5 结构之美(2) - 新增的非主体结构标签

接上文<HTML5 结构之美(1) - 新增的主体结构标签>,HTML5 还新增了一些表示逻辑结构或附加信息的非主体结构标签. header标签 header 标签是一种具有引导和导航作用的结构标签,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,例如数据表格.搜索表单或相关的 logo 图片. 很明显,整个页面的标题应该放在页面的开头,我们可以用如下所示的形式书写页面的标题: <header><h1>页面标题</h1></he

HTML5新结构标签和移动端页面布局

--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.article 一篇文章 4.section 文章中的章节 5.aside 侧边栏 6.footer 页面底部.页脚pc端兼容需要引用对应的js脚本<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r

5.8 HTML5新结构标签

在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测 你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也就是说整个HTML文档结构定义不清晰,HTML5中为了解 决这个问题,专门添加了:页眉.页脚.导航.文章内容等跟结构相关的结构元素标签. 在讲这些新标签之前,我们先看一个普通的页面的布局方式: 上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块,

如何处理HTML5新标签的兼容性问题

支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添加标签默认的样式: * 当然最好的方式是直接使用成熟的框架.使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"&l

HTML5系列-标签级介绍

html5这个相信已经被嚼烂了!一提到ht5大家就会想到: 1.新的布局标签(nav.footer.section.artile.input的新类型等) 2.新功能标签(video.audio.canvas.svg等) 3.离线缓存,本地存储等 我了解到的做了简单分类,针对我们的ht5: 标签级:(我们主要了解部分) 一.section.nav布局标签等(优化布局处理)二.canvas(画布绘制)三.audio/video(音频视频播放)四.svg(可伸缩的矢量标记绘图)五.新表单(颜色,日历等

HTML5 语义标签使用详解

在 HTML5 出来之前,我们用 div 来表示页面章节,但是这些 div 都没有实际意义.(即使我们用 css 样式的 id 和 class 来形容这块内容的意义).这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分.但现在,那些之前没“意义”的标签因为 html5 的出现而消失了,这就是我们平时所说的“语义”. 如上图那个页面结构没有使用一个 div,都是采用 html5 语义标签(用哪些标签,关键取决于你的设计目标).但是也不要因为 html5 新标签的出现,而随意用之,错误的