第三章HTML5基本标签-文档资料
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</nav>
<footer li> HTML 5</l 条款，版权页等，这些 元素就能够用了。
article元素
<article> • article元素最容易跟 section和div容易混淆，其 <h1>一篇文章</h1> 实article代表一个在文档，页面或者网站中自 <p>文章内容..</p> 成一体的内容，其目的是为了让开发者独立开 <footer> 发或重用。譬如论坛的帖子，博客上的文章， 一篇用户的评论，一个互动的 widget小工具 <p> 版权： html5jscss 网所属，作 者： XXX 会有一个标题（通常会 • 除了它的内容， article </p> 在header里），会有一个 footer页脚。 </footer> </article>
<html lang = "en">
<head> <meta charset = "utf-8"> <title>HTML5 Demo</title>
<body>
<header><h1></h1><h2></h2></header> <nav><ul><li></li><li></li></ul></nav> <section> <article></article> <article></article> </section> <aside></aside> <footer></footer> </body> </html>
</hgroup>
nav元素
• nav元素代表页面的导航链接区域。用于定义页面的主要
导航部分。 • 规范上说nav只能用在页面主要导航部分上。页脚区域中
<nav>
<ul> 的链接列表，虽然指向不同网站的不同区域，譬如服务
i> < l i > C S S 3 < / l i > • nav使用注意： <li>JavaScript</li> • 用在整个页面主要导航部分上，不合适就不要用nav元素； </ul>
3
文件结构
属性：标记通过属性来精确控制信息，以便制作出各种效果。
<标记
属性１＝属性值
属性２＝属性值…>内容</标记>
并不是每个标记都有属性。
可以根据需要使用标记的所有属性或几个属性，属性之间没 有顺序。
属性和标记一样，也不区分大小写。
4
文件结构
Leabharlann Baidu
② HTML5基本框架
<html> <head> <title>网页的标题</title> </head> <body> 网页的内容 </body> </html>
常用的头部标记
常用的头部标记内容 <Title ></title> •<title>Title of the document</title>
<link></link>
•<link rel="stylesheet" href="style.css" /> <meta> </meta>
•<meta charset="utf-8">
<h1>网站标题</h1>
可以为每个内容块增加一个header元素 </hgroup> • header使用注意：
<h1>网站副标题</h1>
– 可以是“网页”或任意“section”的头部部分； </header> – 没有个数限制。 – 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。
HTML入门
HTML文件结构
页面属性标记 常用页面元素标记
基础篇
表格 表单
1
2.1 HTML 文件结构
标记及属性
HTML文件结构
2
① 标记及属性
文件结构
标记：为了使所要显示的内容达到一定的效果，在内容中加入 的特定标识。
<标记>受标记影响的内容</标记>
每个标记都用“<”（小于号）和“>”（大于号）围住。 注意：“<”、“>”与标记之间不能留有空格或其他非标记字符 在标记前加 “/”是结束标记 标记字母不区分大小写 对同一段要标记的内容，可以使用多个标记来共同作用，各 个标记间的顺序是任意的。
Html 5页面一般框架
• 便于维护和修改,对搜索引擎更友好,预留扩展,无障碍 浏览功能 • 分区级语义元素
– – – – – – – – Article Aside figure figcaption footer header hgroup nav section
Html 5页面一般框架
<!DOCTYPE html>
section元素
• section元素代表文档中的“节”或“段”，“段”可以是指一篇文章 <section>
里按照主题的分段；“节”可以是指一个页面里的分组。
<h1>section是啥？</h1> <h2>关于section</h2>
• section通常还带标题，虽然 html5中section会自动给标题h1-h6降级， <article> 但是最好手动给他们降级。如下： • 示例代码section使用注意： <p>section的介绍</p> • 一张页面可以用<section> section划分为简介、文章条目和联系信息。不过在文 章内页，最好用<h3> article 。section不是一般意义上的容器元素，如果想 关于其他 </h3> 作为样式展示和脚本的便利，可以用 div。 <p>关于其他section 的介绍</p> • 表示文档中的节或者段； </section> • article、nav、aside 可以理解为特殊的section，所以如果可以用article、 </article> nav、aside就不要用 section，没实际意义的就用div </section>
以<HTML>开头，以</HTML>结尾。 包括头部（Head）和主体（Body）两大部分。 <head>…</head> ：网页的题头，说明文件命名与文件本身 的相关信息。 <title>…<title>：网页标题，在浏览器的标题栏显示。 <body>…<body>：网页的正文。 5
hgroup元素
• hgroup元素代表“网页”或“section”的标题，当元 素有多个层级时，该元素可以将h1到h6元素放在其内， 譬如文章的主标题和副标题的组合
• • • •
hgroup使用注意： <hgroup> 如果只需要一个h1-h6标签就不用hgroup <h1> 这是一篇介绍 HTML 5 语义化标 如果有连续多个 h1-h6标签就用hgroup 如果有连续多个标题和其他文章数据， 签和更简洁的结构</h1> h1-h6标签就 用hgroup包住，和其他文章元数据一起放入header标 <h2>HTML 5</h2> 签
8
header元素
• header 元素代表“网页”或“section”的页眉。
– 通常包含h1-h6元素或hgroup ，作为整个页面或者一个内容块的 <header> 标题。也可以包裹一节的目录部分，一个搜索框，一个nav，
<hgroup>
或者任何相关logo。
• 整个页面没有限制header元素的个数，可以拥有多个，
<footer li> HTML 5</l 条款，版权页等，这些 元素就能够用了。
article元素
<article> • article元素最容易跟 section和div容易混淆，其 <h1>一篇文章</h1> 实article代表一个在文档，页面或者网站中自 <p>文章内容..</p> 成一体的内容，其目的是为了让开发者独立开 <footer> 发或重用。譬如论坛的帖子，博客上的文章， 一篇用户的评论，一个互动的 widget小工具 <p> 版权： html5jscss 网所属，作 者： XXX 会有一个标题（通常会 • 除了它的内容， article </p> 在header里），会有一个 footer页脚。 </footer> </article>
<html lang = "en">
<head> <meta charset = "utf-8"> <title>HTML5 Demo</title>
<body>
<header><h1></h1><h2></h2></header> <nav><ul><li></li><li></li></ul></nav> <section> <article></article> <article></article> </section> <aside></aside> <footer></footer> </body> </html>
</hgroup>
nav元素
• nav元素代表页面的导航链接区域。用于定义页面的主要
导航部分。 • 规范上说nav只能用在页面主要导航部分上。页脚区域中
<nav>
<ul> 的链接列表，虽然指向不同网站的不同区域，譬如服务
i> < l i > C S S 3 < / l i > • nav使用注意： <li>JavaScript</li> • 用在整个页面主要导航部分上，不合适就不要用nav元素； </ul>
3
文件结构
属性：标记通过属性来精确控制信息，以便制作出各种效果。
<标记
属性１＝属性值
属性２＝属性值…>内容</标记>
并不是每个标记都有属性。
可以根据需要使用标记的所有属性或几个属性，属性之间没 有顺序。
属性和标记一样，也不区分大小写。
4
文件结构
Leabharlann Baidu
② HTML5基本框架
<html> <head> <title>网页的标题</title> </head> <body> 网页的内容 </body> </html>
常用的头部标记
常用的头部标记内容 <Title ></title> •<title>Title of the document</title>
<link></link>
•<link rel="stylesheet" href="style.css" /> <meta> </meta>
•<meta charset="utf-8">
<h1>网站标题</h1>
可以为每个内容块增加一个header元素 </hgroup> • header使用注意：
<h1>网站副标题</h1>
– 可以是“网页”或任意“section”的头部部分； </header> – 没有个数限制。 – 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。
HTML入门
HTML文件结构
页面属性标记 常用页面元素标记
基础篇
表格 表单
1
2.1 HTML 文件结构
标记及属性
HTML文件结构
2
① 标记及属性
文件结构
标记：为了使所要显示的内容达到一定的效果，在内容中加入 的特定标识。
<标记>受标记影响的内容</标记>
每个标记都用“<”（小于号）和“>”（大于号）围住。 注意：“<”、“>”与标记之间不能留有空格或其他非标记字符 在标记前加 “/”是结束标记 标记字母不区分大小写 对同一段要标记的内容，可以使用多个标记来共同作用，各 个标记间的顺序是任意的。
Html 5页面一般框架
• 便于维护和修改,对搜索引擎更友好,预留扩展,无障碍 浏览功能 • 分区级语义元素
– – – – – – – – Article Aside figure figcaption footer header hgroup nav section
Html 5页面一般框架
<!DOCTYPE html>
section元素
• section元素代表文档中的“节”或“段”，“段”可以是指一篇文章 <section>
里按照主题的分段；“节”可以是指一个页面里的分组。
<h1>section是啥？</h1> <h2>关于section</h2>
• section通常还带标题，虽然 html5中section会自动给标题h1-h6降级， <article> 但是最好手动给他们降级。如下： • 示例代码section使用注意： <p>section的介绍</p> • 一张页面可以用<section> section划分为简介、文章条目和联系信息。不过在文 章内页，最好用<h3> article 。section不是一般意义上的容器元素，如果想 关于其他 </h3> 作为样式展示和脚本的便利，可以用 div。 <p>关于其他section 的介绍</p> • 表示文档中的节或者段； </section> • article、nav、aside 可以理解为特殊的section，所以如果可以用article、 </article> nav、aside就不要用 section，没实际意义的就用div </section>
以<HTML>开头，以</HTML>结尾。 包括头部（Head）和主体（Body）两大部分。 <head>…</head> ：网页的题头，说明文件命名与文件本身 的相关信息。 <title>…<title>：网页标题，在浏览器的标题栏显示。 <body>…<body>：网页的正文。 5
hgroup元素
• hgroup元素代表“网页”或“section”的标题，当元 素有多个层级时，该元素可以将h1到h6元素放在其内， 譬如文章的主标题和副标题的组合
• • • •
hgroup使用注意： <hgroup> 如果只需要一个h1-h6标签就不用hgroup <h1> 这是一篇介绍 HTML 5 语义化标 如果有连续多个 h1-h6标签就用hgroup 如果有连续多个标题和其他文章数据， 签和更简洁的结构</h1> h1-h6标签就 用hgroup包住，和其他文章元数据一起放入header标 <h2>HTML 5</h2> 签
8
header元素
• header 元素代表“网页”或“section”的页眉。
– 通常包含h1-h6元素或hgroup ，作为整个页面或者一个内容块的 <header> 标题。也可以包裹一节的目录部分，一个搜索框，一个nav，
<hgroup>
或者任何相关logo。
• 整个页面没有限制header元素的个数，可以拥有多个，