[HTML]Web前端开发技术19（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用，hgroup， figcaption，figure，section——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

HTML5 文档结构

HTML5 页面结构

HTML5 新增结构元素

1．header 标记

2．nav 标记

3.article标记

4．section 标记

5．aside 标记

6．footer 标记

HTML5 新增页面元素

hgroup 标记

figure 标记与figcaption 标记

HTML5 表单

HTML5 新增的表单属性

1.form标记的新属性

2．input 标记的新属性

课后练习

网页标题：head中定义JS函数

网页标题：调用外部js文件的JavaScript函数

网页标题：告警框与确认框的应用

网页标题：提示框的应用

网页标题：数值类型数据的应用

总结

---

前言

这个章节比较长，我们慢慢地哇~

掌握 HTML5 页面结构。

学会使用 HTML5 新增元素和新增属性。

掌握 HTML5 新增表单元素及新增属性的设置方法。

---

HTML5 文档结构

HTML5 文档结构同样是由头部和主体两部分组成，只是新增了一些结构元素，如header、nav、article、section、aside、footer 六个结构元素，这些元素都是块级元素。

---

HTML5 页面结构

HTML4.01页面布局

HTML5结构元素布局

因此HTML5为了代码更好的语义化，新增了一系列专用文档结构标签代替原先用

加上id名称的做法

---

HTML5 新增结构元素

1．header 标记

       header 标记定义文档和区域的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。通常

标记至少包含（但不局限于）一个标题标记（h1～h6），也可以包括hgroup（标题组合）标记、表格标识、搜索表单、导航等。

2．nav 标记

       nav 标记代表页面的一个部分，是一个可以作为页面导航的链接组。建议不要在footer元素中使用nav元素，否则易造成页面显示不正确。配置相应的CSS 代码可以实现水平导航。

3.article标记

       article标记是一个特殊的section标记，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如论坛帖子、博客文章、新闻故事、评论等。

       一般来说，article会有标题部分，通常包含在header内，有时也会包含footer。article标记可以嵌套，内层的article对外层的article标记有隶属关系。例如1篇博客的文章可以用article显示，然后后续的一些评论可以用article的形式嵌入其中。

4．section 标记

       section 标记定义文档中的节。例如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。section 元素不是一个普通的容器元素，它表示一段专题性的内容，可以带有标题。如果描述一件具体的事物，建议使用article 来代替section；如果使用section，仍可以使用h1 作为标题，而不用担心它所处的位置。如果一个容器需要定义样式或定义行为，建议用div 元素。

5．aside 标记

       aside（侧栏，也称为旁注）标记用来说明其所包含的内容与页面主要内容相关，但不是该页面的一部分，类似于使用括号对正文进行注释（就像这样）。括号中的内容提供关于该元素的一些附加信息，例如广告、成组的链接、侧栏等。

6．footer 标记

       footer 标记定义section 或文档的页脚，包含了与页面、文章或部分内容有关的信息，例如文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它与页眉header 标记用法相同，在一个页面中可以多次使用，若在一个区段的最后使用footer标记，那么它就相当于该区段的页脚。

---

HTML5 新增页面元素

HTML5除了新增的结构元素header、nav、article、aside、section、footer外，还增加了新的内联元素(time、meter及progress等)、新的内嵌元素(video和audio)、新的交互元素（details、datagrid和command等）及其它页面元素。

---

hgroup 标记

标题组合hgroup 标记是对网页或区段section 的标题元素（h1～h6）进行组合。例如，在某一区段中需要连续设置多个标题标记，可以使用hgroup 标记来组合。

基础语法：

     <hgroup>

         

标题1

         

标题2

……

     hgroup>

---

figure 标记与figcaption 标记

figure标记用于对元素进行组合，常用于图像与图像描述组合。figcaption（图题）标记用于定义figure元素的标题（caption），可以给一组图像标记定义标题，但figcaption 标记不是必需的。如果包含了figcaption元素，那么它必须放置在figure元素的第一个或最后一个子元素的位置上。

       基础语法：

     

    

图像文件说明内容。

     <img src=""   width=""  alt="" title="" />

     <figcaption >为图添加标题figcaption>

 

---

HTML5 表单

表单是HTML 中获取用户输入的手段，HTML5 对表单系统做了彻底的改造，以适应当前的应用。

       在HTML5 中增加了从用户收集特定类型数据的新方法和在浏览器中检查数据的能力，但在使用有些新增特性前最好先检查一下浏览器的支持情况。

       下面从表单新增属性、表单新增元素及表单新增类型等方面分别进行介绍。

---

HTML5 新增的表单属性

       HTML5表单新增一些新属性。这些属性是autocomplete、novalidate。

1.form标记的新属性

1）autocomplete属性

    autocomplete：on|off。属性规定form标记或类型为text、search、url、telephone、email、password、date pickers、range、color的input标记是否具有自动完成的功能。当表单元素设置了自动完成功能后，会记录用户输入过的内容，双击表单元素会显示历史输入。

2）novalidate属性

      novalidate：true|false。属性规定在提交表单时不进行验证form或类型为text、search、url、telephone、email、password、date pickers、range、color的input标记。

2．input 标记的新属性

height 和 width 属性。 height 和 width 属性规定只适用于 image 类型的 input 标记的图像高度和宽度。

form 属性。 form 属性规定输入域所属的一个或多个表单。 form 属性必须引用所属表单的 id 。

list 属性。 list 属性规定输入域的 datalist 。 datalist 标记是输入域的选项列表。 list 属性适用于类型为 text 、 search 、 url 、 telephone 、 email 、 password 、 date pickers 、 range 、 color 的 input 标记。

autofocus 属性 。

autofocus 属性规定在页面加载时，该域自动地获得焦点。该属性适用于所有 input 标记的类型。

placeholder 属性 。

placeholder属性提供一种提示，描述输入域所期待的值。

---

课后练习

网页标题：head中定义JS函数

• 网页标题：head中定义JS函数
• 在head中定义message和sum函数，在body中进行调用，在body中的JavaScript语句能够被立即执行，定义的函数，必须引用才能执行。

• 网页运行时首先弹出一个消息框，单击确定之后显示网页的内容，单击网页中的按钮，弹出消息框显示出=100+200计算结果，如下图所示：

         思考：如何实现在两个文本框中输入任意数字，计算两个数字之和，可直接在网页中修改代码，实现该功能。

	
    
head标记内定义两个JS函数
    
无返回值函数：message()
    
有返回值函数:sum(x,y)
    

    	
    

---

网页标题：调用外部js文件的JavaScript函数

• 网页标题：调用外部js文件的JavaScript函数
• 录入如下代码，熟练使用调用外部JS文件的方法。
  • 其中HTML部分的代码如下所示：

• • 在JS文件夹中新建文件“demo.js”，并录入如下代码：

1. 网页运行时，单击按钮弹出一个消息框，观察执行的是外部js文件的代码，还是head中script标签内的代码：

---

网页标题：告警框与确认框的应用

• 网页标题：告警框与确认框的应用
• 录入如下代码，熟悉告警框alert()与确认框confirm ()的使用

• 确认框确认按钮的返回值类型为逻辑值，确定true，取消false。

---

网页标题：提示框的应用

• 网页标题：提示框的应用
• 录入如下代码，熟悉提示框prompt()的使用

• 可通过提示框录入信息，运行效果如下图所示：

---

网页标题：数值类型数据的应用

• 网页标题：数值类型数据的应用
• 录入如下代码，熟悉数值类型数据的应用

• 运行效果如下图所示：

---

总结

人生苦短，一天当作两天卷！

掌握 HTML5 页面结构。

学会使用 HTML5 新增元素和新增属性。

掌握 HTML5 新增表单元素及新增属性的设置方法。

---

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！