新建文件夹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标签,可以把任何我们认为将来需要有特殊样式的内容放进去。
空白折叠现象:在文本内容中输入多个空格或换行,页面上只会显示一个空格。在文本和标签之间输入空格或换行会被忽略。转义字符:表示小于号<,大于号>,表示空格,表示版权符号?。我们可以在需要的地方使用。注释:快捷键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的学习。
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery