新建文件夹HTML5（随便命名）并在VS Code中打开。在文件夹中新建demo1.html文件。生成HTML5骨架快捷键：先输入英文！，再按Tab键。保存文件快捷键：按Ctrl加S。

 

　　方式一：使用Chrome浏览器，并设置为默认浏览器。然后双击html文件打开。方式二：在VS Code中安装Live Server插件，并在VS Code的html文件窗口中鼠标右键并选择open with live server。这样当我们修改页面代码并保存时，在浏览器中打开的该网页就能实时刷新页面。调成左右分屏，方便编程：

 

　　这是一个原标签，表示网页的基础配置。charset是字符集属性，UTF-8是字符集的值。

 

　　我们一定要先在VS Code编辑器中将文件也设置为相同的字符集，然后更改meta元素。

 

　　此标签用来设置页面标题：

 

　　网页的关键词和页面描述虽然是不可见的，但有利于搜索引擎的推荐优化。

 

　　HTML5里面大多数都是成对标签，少数是单标签。

 

　　标题和段落标签：

 

　　div标签：

 

　　没有具体含义，仅仅是用来将有关系的部分放在一起，结合css实现网页布局。类似的还有span标签，可以把任何我们认为将来需要有特殊样式的内容放进去。

 

　　空白折叠现象：在文本内容中输入多个空格或换行，页面上只会显示一个空格。在文本和标签之间输入空格或换行会被忽略。转义字符：表示小于号<，大于号&gt，表示空格，表示版权符号？。我们可以在需要的地方使用。注释：快捷键ctrl加/。

 

　　创建项目文件夹doctor，并在其中创建images（存放图片）、css（存放样式资料）、js（存放js文件）三个文件夹。在VS Code中打开doctor文件夹。在doctor文件夹下创建文件index.html，生成HTML5骨架。下面来修改下index.html中的配置，在head元素中进行如下配置：

 

　　用div元素来对页面进行大致分区，对每个div元素用类名进行命名：

 

　　类名命名规则：

 

　　骨架大体就搭好了，后面每学习新知识我们就往里面添加内容：

 

　　HTML5有三种列表：无序列表、有序列表、定义列表。

 

　　无序列表是没有刻意顺序的列表。

 

　　基本格式：

 

　　ul全名是unordered list，li全名是list item。

 

　　注意：

 

　　ul标签中只能嵌套li标签，li标签中可以嵌套任何其他标签。li标签不能单独出现，只能作为子标签出现。

 

　　列表的嵌套：

 

　　ol全称是ordered list。

 

　　基本格式：

 

　　使用type属性设置不同的编号类型：

 

　　通过start属性（必须是整数）控制序号从第几项开始：

 

　　通过reversed属性使列表倒序排列：

 

　　定义列表需要逐条对列表项进行描述。

 

　　基本语法：

 

　　dl全名是definition list，dt全名是data term，dd全名是data definition。

 

　　这一章我们学习了列表，现在来完善我们的小慕医生。来看看哪些地方可以用列表实现，我们先完成html的部分，样式等到学习css了再进行调整。

 

　　导航栏：

 

　　用无序列表：

 

　　横幅图片的小圆点：

 

　　用有序列表（因为语义上是有序的）：

 

　　常用链接：

 

　　用无序列表：

 

　　新闻列表：

 

　　无序列表：

 

　　医院公告：

 

　　有序列表+定义列表：

 

　　科室介绍：

 

　　无序列表：

 

　　专家介绍：

 

　　无序列表：

 

　　友情链接：

 

　　无序列表：

 

　　页脚剩余信息：

 

　　无序列表：

 

　　img标签用来在网页中插入图片，src是source的缩写，其属性值应该是图片的存储目录和完整文件名（包括后缀名）。一般将图片文件存放在项目文件夹的images子文件夹中。

 

　　alt属性：

 

　　alt属性是alternate“替代品”的缩写，它是对图像的文本描述，不是必须定义的。

 

　　当图片未被加载时，会显示alt属性中的备用文本。

 

　　网页朗读器会朗读alt中的文本，供视力不便的朋友使用。

 

　　width、height属性：

 

　　用来设置宽度和高度，单位是像素，不需要写单位。

 

　　如果省略一个属性，将按原始宽高比缩放图片。

 

　　网页上支持的图片格式：

 

　　相对路径和绝对路径：

 

　　关于二者的区别建议网上百度自行学习。

 

　　路径回退一级是…/，相应的回退两级是…/…/

 

　　从一个网页跳到另一个网页，需要用到超链接，它是链接不同网页的重要工具。

 

　　使用a标签，a全名是anchor：

 

　　href全名是hypertext reference，属性值为要跳转到的网页。也支持相对路径和绝对路径。

 

　　title属性：

 

　　将设置悬停文本。

 

　　在新窗口中打开网页：

 

　　使用target属性：

 

　　给图片设置超级链接：

 

　　使用a标签包裹img标签就可以了。

 

　　页面内锚点：

 

　　首先在元素中添加id属性：

 

　　demo1.html

 

　　然后，定义超级链接：

 

　　demo2.html

 

　　这样，当我们在demo2.html页面中点击该超链接时，将跳转到demo1.html页面中的指定元素那里去。

 

　　下载链接：

 

　　指向exe、zip、rar等文件格式的链接，将自动成为下载链接：

 

　　邮件链接：

 

　　使用mailto前缀：

 

　　电话链接：

 

　　使用tel前缀：

 

　　音频：

 

　　在网页中插入音频使用audio标签。

 

　　常见支持格式：mp3、ogg等。

 

　　controls属性是必须写的，表示显示播放控件；

 

　　src属性用于定义音频地址。

 

　　当audio标签不被支持时，才会显示标签对中的文字。

 

　　autoplay属性用来让音频自动播放。

 

　　loop属性用来让音频重复播放。

 

　　视频：

 

　　使用video元素，其他的都和音频一模一样。

 

　　常见支持格式：mp4、ogv、webm等。

 

　　HTML5推出了众多的区块标签：

 

　　学完了这章内容，我们来将所有的div标签换成大纲标签，并实现图片、超链接等内容。

 

　　将头部用header元素替代

 

　　将网页导航条用nav元素替代

 

　　实现头部的功能区

 

　　设计图

 

　　先去设计文件里（见文章顶部）找到这三个图片，并复制到我们项目文件夹下的images目录中：

 

　　然后是代码部分：

 

　　把div改成了section元素

 

　　效果如下：

 

　　实现横幅

 

　　设计图

 

　　对于横幅图片也是同样的步骤，把图片放到images下，并加上“责任、科学、严谨”然后代码如下：

 

　　之前的标题级别有点问题，除了新加的这句标题，把原本的h2都替换成h3。

 

　　内容区域

 

　　首先把内容区域的div改成section元素。

 

　　A.先实现这部分的图片：

 

　　设计图

 

　　加上对应的图片，并用超链接元素包裹起来：

 

　　B.医院动态

 

　　设计图

 

　　加上对应的图片，并用超链接元素把该包裹的包裹起来：

 

　　效果：

 

　　C.医院公告

 

　　设计图

 

　　实现超链接：

 

　　效果：

 

　　D.宣传图片

 

　　设计图

 

　　把div元素改为aside元素，并插入图片：

 

　　效果：

 

　　E.科室介绍

 

　　设计图：

 

　　代码：

 

　　效果：

 

　　F.专家介绍

 

　　设计图：

 

　　代码：

 

　　效果：

 

　　页脚

 

　　把页脚的div改成footer元素，超链接都给加上：

 

　　效果：

 

　　使用form元素，action表示表单要提交到的后台程序的网址，method属性表示表单提交的方式，有get或post。

 

　　单行文本框

 

　　type属性表明输入控件是一个文本框；value属性表明已经填写好的值；placeholder属性表示提示文本，将以浅色文字写在文本框中；disabled表明元素被锁死，用户不能交互：

 

　　单选按钮

 

　　type属性表明输入控件是一个单选按钮；value属性是必写的，将会被提交到服务器；checked属性表示默认选中；name属性值很重要，所有具有相同name属性值的单选按钮将会互斥选中：

 

　　label标签

 

　　label标签用来将文字和单选按钮进行绑定，用户单击文字的时候也能选中单选按钮。

 

　　复选按钮：

 

　　type属性表明输入控件是一个复选按钮，其他的和单选按钮都是类似的：

 

　　密码框

 

　　和单行文本框是差不多的，只不过type是password，而且输入内容被隐藏了：

 

　　下拉菜单

 

　　select表示下拉菜单，option是它的内部选项

 

　　多行文本框

 

　　cols和rows表示默认显示的列数和行数：

 

　　三种按钮

 

　　它们都使用input标签，type属性值不同：

 

　　更丰富的input种类：

 

　　datalist元素：

 

　　提供一些智能感应的备选项。举个例子，如果我们输入一个“王”字，将会显示所有带“王”字的选项：

 

　　效果：

 

　　这个地方用到了这章所学的内容：

 

　　下面来实现一下：

 

　　注意：

 

　　td一定在tr里面，tr一定在table里面。

 

　　边框属性border：

 

　　设置表格的边框为1像素宽：

 

　　使用caption子标签定义标题：

 

　　注意caption子标题一定要写在所有tr元素前面

 

　　使用th元素定义表头：

 

　　colspan属性用来设置td或者th的列跨度，rowspan属性用来设置td或者th的行跨度。

 

　　效果：

 

　　thead标签定义表头，tbody标签定义表核心内容，tfoot定义表脚：

 

　　效果：

 

　　HTML5的学习到此就结束了，从下一篇博客开始CSS3的学习。