Web技术应用基础-HTML
文章平均质量分 90
习题
少年游四方
低头赶路,敬事如仪。
展开
-
实验四 JavaScript的使用
一、实验目的1.理解JavaScript脚本编程语言;2.掌握JavaScript基本语法规则;3.学会使用JavaScrip操作网页对象;4.初步掌握正则表达式的使用5.掌握在浏览器调试JavaScript代码二、实验内容创建用户注册页面文件register.html,界面如下图:新建JavaScript文件verify.js,对注册信息进行验证,各输入项的验证要求如图所示,若输入数据不符要求,显示红色提示信息。验证成功才能提交,否则不能提交。数据验证规则如下:①用户名由6-10位字原创 2021-04-26 23:22:17 · 3570 阅读 · 11 评论 -
完成一个版块
完成一个版块任务描述相关知识外阴影多行省略设置圆角代码文件任务描述本关任务:实现下面效果,包括外阴影,多行省略,圆角的设置。效果如下:相关知识为了完成本关任务,你需要掌握:1.外阴影,2.多行省略,3. 设置圆角。外阴影下面是基本的html结构:<div class="shadow"></div>效果如下:现在要左边,右边,下边都添加阴影。效果如下:该如何实现呢?咱们先实现右边和下边的阴影。如上面所说,添加如下代码:.shadow{原创 2021-03-18 18:34:57 · 713 阅读 · 0 评论 -
用Swiper实现轮播图
用Swiper实现轮播图任务描述相关知识搭建Swiper环境代码文件任务描述本关任务:用Swiper实现一个轮播图。相关知识为了完成本关任务,你需要掌握:Swiper基本的HTML结构,基本功能的实现。搭建Swiper环境1.下载插件进入Swiper官网 http://www.swiper.com.cn/download/index.html,只需要下载swiper-4.2.2.min.js和swiper-4.2.2.min.css就可以了。2.引入插件<!DOCTYPE h原创 2021-03-18 16:59:08 · 1617 阅读 · 0 评论 -
html--网页综合项目实战
header——头部任务描述相关知识float属性鼠标滑过效果代码文件任务描述本关任务:实现静态页面的头部——header。效果如下:相关知识为了完成本关任务,你需要掌握:float属性,鼠标浮动在上面的效果。float属性这里需要实现的效果如下:下面是基本的html结构,去除了ul,li的默认样式:<ul class="head"> <li>首页</li> <li>班级设置</li> <l原创 2021-03-18 16:51:45 · 3868 阅读 · 2 评论 -
HTML--表单类的标签
表单5.表单元素——checked属性任务描述相关知识代码文件6.表单元素——disabled 属性任务描述相关知识代码文件7.表单元素——label 标签任务描述相关知识代码文件8.表单元素——下拉列表任务描述相关知识代码文件9.表单元素——文本域任务描述相关知识代码文件10.表单元素——提交按钮任务描述相关知识代码文件11.表单元素的综合案例任务描述相关知识代码文件5.表单元素——checked属性任务描述本关任务:创建一组单选框,name属性值为marry,默认选中未婚。要求:对每一个选项使用原创 2021-03-18 11:39:20 · 7908 阅读 · 0 评论 -
HTML--表单类的标签
HTML--表单类的标签1.表单元素——文本框1.1任务描述1.2相关知识代码文件2.表单元素——文本框2.1任务描述2.2相关知识代码文件3.表单元素——单选框3.1任务描述3.2相关知识代码文件4.表单元素——多选框4.1任务描述4.2相关知识代码文件1.表单元素——文本框1.1任务描述本关任务:创建一个input标签, type类型为text,name属性值为nickName。效果如下:1.2相关知识一般在网站上填写个人信息的时候,会输入姓名、昵称等信息,这里用到的就是<input原创 2021-03-18 00:02:39 · 3616 阅读 · 5 评论 -
HTML--表格
1.表格的标题任务描述本关任务:添加一个表格标题,内容为科目成绩。实现的效果如下:相关知识表格一般都有标题来说明这个表格具体是做什么的。你可以用<caption>标签来创建表格标题,需要注意的是它的位置:紧随<table>标签之后。例子如下:<table border="2" cellspacing="0" cellpadding="10"> <caption>班级成绩</caption> <tr>原创 2021-03-17 23:07:03 · 1264 阅读 · 0 评论 -
html--表格
html--表格1.表格的基本构成1.1任务描述1.2相关知识代码文件2.表格的属性——宽、高2.1任务描述2.2 相关知识代码文件3.表格的属性——cellpadding3.1任务描述3.2相关知识代码文件表格的属性——cellspacing任务描述相关知识代码文件1.表格的基本构成1.1任务描述本关任务:创建你的第一个表格,它的边框宽度为5px,内容和效果图展示的一样。实现的效果如下:1.2相关知识大家都知道,表格由行和列组成,这里我们就用HTML标签写一个表格。<table>原创 2021-03-17 22:46:48 · 1249 阅读 · 0 评论 -
html---基本标签
基本标签1.创建 ``-``标签1.1任务描述1.2相关知识1.3编程要求2.创建`p`标签2.1任务描述2.2相关知识3.创建`a`标签3.1任务描述3.2相关知识4.创建`img`标签4.1任务描述4.2相关知识5.创建`div`标签5.1任务描述5.2相关知识6.添加注释6.1任务描述6.2相关知识1.创建 <h2>-<h6>标签1.1任务描述本关任务:依次创建<h2>-<h6>标签,文本内容为创建不同字体大小的标题,查看它们的区别。实现的效果如原创 2021-03-17 17:28:45 · 1004 阅读 · 0 评论 -
创建第一个 HTML 标签
创建第一个 HTML 标签任务描述相关知识编程要求测试说明任务描述本关任务:创建你的第一个标签<h1></h1>,文本内容为welcome to Educoder。实现的效果如下:相关知识<h1>welcome</h1>上面这行代码它表示一个HTML元素。大多数 HTML 元素都是由开始标签和结束标签组成的,通常成对出现 。开始标签:用尖括号<>包裹关键词,像<h1>这样。结束标签:用</>包裹和开始原创 2021-03-17 16:54:31 · 2573 阅读 · 0 评论 -
HTML视频:视频播放网页
这HTML视频:视频播放网页任务描述相关知识使用HTML5 video元素播放属性嵌入视频网站播放使用超链接播放任务要求任务描述本关任务是编写一个在线播放的视频网页,你将通过本关学习HTML播放视频的多种方式。本关网页显示效果如下图所示:相关知识使用HTML5 video元素播放我们可以使用 HTML5 <video> 元素来进行播放。通常我们可以配合加入<object>和<embed>。例如:<video width="550" controls原创 2021-03-16 23:48:50 · 19070 阅读 · 0 评论 -
HTML音频:音乐播放网页
HTML音频:音乐播放网页任务描述相关知识使用HTML5 audio元素播放属性使用雅虎媒体播放器播放使用超链接播放任务要求任务描述本关任务是编写一个在线播放音乐的网页,你将通过本关学习HTML播放音频的多种方式。本关网页显示效果如下图所示:操作效果如下图所示:相关知识在网页中播放音频,对大家而言是一件习以为常的事,但若想要同时兼容多种浏览器和设备,并不是一件容易的事。所以,本关中,我们为大家讲解了几种通用的音频播放方案。使用HTML5 audio元素播放我们可以使用 HTML5 <原创 2021-03-16 23:31:49 · 9839 阅读 · 0 评论 -
HTML——多媒体
HTML图片:带图片的菜谱网页任务描述相关知识概念属性alt属性:提供替换文本height,width属性 :设定图形尺寸align属性:设置对齐与浮动方式任务要求任务描述Web世界绚丽多彩,除了显示文本以外,网页中还能包含图片、动画、音频和视频等多媒体信息。在本关中,你将编写一个带图片的菜谱网页。通过本关,你将学习如何使用HTML在网页中添加图片,以及如何设置相关的图片属性。本关网页显示效果如下图所示:相关知识概念在 HTML 中,我们使用 <img> 标签定义图像。基本的写原创 2021-03-16 23:17:22 · 2682 阅读 · 0 评论 -
HTML表格:日常消费账单表格展示网页
HTML表格:日常消费账单表格展示网页任务描述相关知识最基本的表格带边框的表格带表头的表格scope属性结构更清晰的表格单元格跨越多行多列的表格编程要求测试说明任务描述本关任务是编写一个日常消费账单表格展示网页,你将通过本关学习如何使用HTML编写出简洁清晰的表格。本关网页显示效果如下图所示:相关知识在日常生活中财务报表、日历等,都常使用表格展示。通常,表格数据都由行和列组成。最基本的表格在HTML表中,一个表格(table)由行(tr)组成,每一行由单元格组成,单元格有标题单元格(th)和原创 2021-03-15 21:52:43 · 5120 阅读 · 0 评论 -
HTML标题与段落:网络文章网页
HTML标题与段落:网络文章网页任务描述相关知识分级标题段落与换行列表有序列表实例无序列表实例描述列表实例文本格式化引用编程要求测试说明任务描述本关任务是完成一个格式丰富的文章网页,你将通过本关学习标题、段落、文本格式化和引用等,与文本相关的标签。本关网页显示效果如下图所示:相关知识分级标题HTML提供了六级标题用于创建网页信息的层级关系。<h1> 定义重要等级最高的标题,之后<h2>到<h6>层级依次递减。举例如下:<body> &原创 2021-03-15 21:28:22 · 5101 阅读 · 0 评论 -
HTML链接:带超链接的网页
HTML链接:带超链接的网页任务描述相关知识概念属性href属性锚 URL实例:创建网页内导航相对 URL实例:跳转到同一网站的另一个网页绝对 URL实例:跳转到另一网页发送电子邮件target属性:在何处打开链接编程要求测试说明任务描述本关的任务是编写一个带超链接的HTML页面,链接包含页面内导航链接和跳转其他网页的链接。显示效果如下:相关知识概念超链接是网页互连的核心,网页之间通过超链接连接在一起。我们使用<a> 标签定义超链接。一个简单的例子如下:<a href原创 2021-03-15 20:59:41 · 7375 阅读 · 0 评论 -
HTML结构:自我简介网页
自我简介网页任务描述相关知识声明文档格式:DOCTYPE根元素:HTML元素头元素:head元素网页标题元素:title元信息元素:meta编码格式:charset描述:description关键词:keywords主体元素:body元素编程要求测试说明任务描述本关任务是编写一个自我简介网页,你将通过本任务理解一个HTML网页的完整结构,并了解如何让搜索引擎更好的找到你的网页。显示效果如下图所示:为完成以上网页制作,请大家认真阅读以下相关知识。相关知识学习了基本的HTML网页相关概念和属性,你原创 2021-03-15 19:25:31 · 12677 阅读 · 3 评论 -
初识HTML:简单的Hello World网页制作
HTML——基础前言任务描述相关知识HTML基本概念基本的HTML结构HTML的标签HTML的元素HTML的属性编程要求测试说明前言HTML(Hypertext Markup Language,超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在CSS(Cascading StyleSheets,级联样式表单)和JavaScript的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台。自1995年HTML2.0面世,HTML陆续推出了得到广泛应用的HTML3.2和H原创 2021-03-15 13:21:34 · 4271 阅读 · 0 评论