Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第1章 HTML基础_第1页
Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第1章 HTML基础_第2页
Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第1章 HTML基础_第3页
Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第1章 HTML基础_第4页
Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第1章 HTML基础_第5页
已阅读5页，还剩26页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3第1章HTML基础商城注册页面介绍背景知识商城注册页面实现步骤本章小结01020304-了解HTML基本概念-掌握文本信息的分类和实现掌握列表信息的分类和实现掌握表格的基本属性，能够使用表格实现布局效果-掌握表单中各元素的分类和实现0102030405E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商城注册页面介绍01需求分析1.1商城注册页面功能的需求如下：

用户填写个人信息用户可以在文本框中输入用户名。用户可以在文本框中输入电子邮箱地址。用户可以在密码类型的文本框中输入密码和确认密码。用户可以在文本域输入自我介绍。用户可以在文本框中填写个人网站。2.用户选择信息用户可以在单选按钮组中选择性别。用户可以在复选框中选择爱好。用户可以在下拉列表框中选择国家。3.用户上传头像用户可以通过文件域上传头像。4.用户勾选同意协议用户勾选复选框表示同意相关服务协议或隐私政策，这通常是完成注册前的必要步骤。5.用户点击注册按钮用户在填写完所有必要信息并同意协议后，可以点击“注册”按钮提交表单完成注册流程。需求分析1.1商城注册页面运行截图：商城注册页面实现思路1.2商城注册页面实现思路如下：1.注册页面整体结构设计先确定页面整体结构，明确页面中包含的基本信息，如用户名、电子邮箱、密码、确认密码、性别、爱好等。2.学习HTML知识学习利用HTML知识构建注册页面，包括如何添加文本框、Email类型的文本框、密码文本框、单选按钮组、复选框、下拉列表框、文本域、文件域以及按钮元素。3.学习表单知识深入学习表单知识，理解表单在网页制作中的作用。利用表单实现商城注册页面的开发。知识导图1.3本章知识导图，如图1-2所示。图1-2知识导图E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3背景知识02HTML简介2.1HTML是HypertextMarkupLanguage的缩写，中文含义是超文本标记语言。使用HTML标签编写的文档称为HTML文档，目前最新的版本是HTML5.0，使用最广泛的是HTML4.1版本。HTML语言的主要作用如下：（1）用HTML语言可以标识文本。例如，定义标题文本、段落文本、列表文本、预定义文本等。（2）使用HTML语言可以建立超链接。用户通过超链接可以访问互联网上的信息，点击超级链接可以跳转到链接页面。（3）使用HTML可以创建列表，能把信息有序地组织在一起，以方便浏览。（4）使用HTML语言可以在网页中显示图像，播放声音、视频、动画等多媒体内容，提升网页的吸引力。（5）使用HTML语言可以制作表格，用于显示大量数据。（6）使用HTML语言可以制作表单，允许用户在网页中输入和选择信息，提升网页的交互性。HTML网页基本结构2.2HTML网页一般包含两部分：头部区域和主体区域。其中<html>标签用于标识当前文件是HTML文档，<head>标签用于标识页面的头部区域，<body>标签用于标识页面的主体区域。一个完整的HTML文档结构如代码清单1-1所示。HTML定义文本信息2.3（1）设计标题信息HTML中包含6级标题，从<h1>至<h6>，其中<h1>字号最大，<h6>字号最小。标题属于块级元素，浏览器会自动在标题前后加上空行。（2）设计字体信息HTML中使用<font>标记设计字体信息。<font>标记的face属性表示字体的类型，默认字体是宋体。size属性表示文字的大小，其取值范围是1~7（文字的显示是从小到大，默认字号是3）。color属性设定文字颜色，默认颜色是黑色。（3）设计段落信息HTML中使用<p>标记创建一个段落标记。<p>标记是块级元素，浏览器会自动在<p>标记的前后加上空格（4）设计文字格式信息HTML中可以使用特定的文字修饰标签来设置文本的表现效果。常用的文字修饰标签有：<b>标签表示粗体，<i>标签表示斜体，<big>标签表示文本变大，<small>标签表示文本变小，<sup>标签表示文本上标，<sub>标签表示文本下标。HTML定义文本信息2.3以下案例是使用HTML定义文本信息的显示效果：HTML定义列表信息2.4列表可以使网页相关的文本内容以一种整齐划一的方式显示。HTML提供无序列表和有序列表两种方式定义列表。（1）无序列表无序列表是指各个列表项之间没有顺序级别之分，通常用一个项目符号作为列表项的前缀。其中<ul>标签用于定义无序列表，<li>标签用于定义列表项，<ul>标签的type属性用于定义列表项的标记符，默认值为disc，表示实心圆，其他取值还有circle（空心圆）和square（实心方块）。（2）有序列表有序列表是指各个列表项之间有先后顺序之分。HTML使用<ol>标签定义有序列表，使用<li>标签定义列表项。start属性是列表项开始的位置序号。type属性表示序号的类型，type属性各个取值的描述见表1-1。HTML定义列表信息2.4以下案例是使用HTML定义列表信息：HTML设计表格2.5表格在HTML中以行列形式呈现内容。除了数据展示外，它还可作为页面元素的排版工具，将页面元素嵌入表格单元可有序排列页面组成部分。表格由行、列和单元格三个组成部分，其中使用<table>标签声明一个表格对象，使用<tr>标签声明行，使用<td>标签声明单元格，表格的基本语法结构如下所示（1）表格的基本结构从结构上看，表格可以分为表头部、主体和表页脚三部分，使用<thead>创建表头，使用<tbody>创建表格主体，使用<tfoot>创建表页脚。在<table>标签中还可以使用<caption>标签为表格添加标题，在表格的顶部显示出来。HTML设计表格2.5（2）表格的属性

使用<table>标签的各个属性可以设置表格的高度、宽度、边框线的粗细、对齐方式、背景颜色、背景图片、单元格间距和边距等内容。<table>标签的属性及说明见表1-2所示。（3）单元格合并

默认情况下，表格中每行的单元格高度和宽度都是一样的，但很多时候，由于制表或页面布局需要，表格每行的单元格数目不一致，这时表格需要执行跨行或跨列操作，也就是需要合并单元格。

表格中合并单元格的属性是rowspan和colspan，基本语法如下：<tdrowspan="所跨行数"colspan="所跨列数">单元格内容</td>HTML设计表格2.5以下案例是使用HTML设计表格：HTML设计表单2.6表单是用来收集客户端提交到服务器端的信息容器。客户端将信息填写在表单的控件中，当用户点击表单中的提交按钮后，表单控件中所包含的信息会被提交给表单的action属性所指定的服务器程序进行处理。（1）表单标签HTML采用<form>标签定义表单，其语法结构如下：<formaction="..."method="..."></form>其中：action属性用来设置表单提交时，表单数据应发送到的URL。这个URL可以是服务器端的脚本、处理表单数据的API接口或其他处理表单提交的处理程序。method属性用来设置处理表单数据的方法。method属性主要包括两种方法：get和post，在数据传输过程中分别对应HTTP协议中的GET和POST方法，二者的区别是post方法传输数据时对用户是不可见的，安全性比较高，支持传送的数据量较大，而get方法将表单中的数据以“名/值”对的形式添加到action所设置的URL后面，安全性较差，支持传输的数据量较小。HTML设计表单2.6（2）input标签input标签是表单中最常用的标签，网页中的文本框、按钮、复选框等都是用这个标签定义的。input标签的语法格式如下：<inputtype="..."name="..."value="...">其中type属性用于定义标签的类型，主要包括：①单行文本框和密码框input标签的type属性值为“text”时表示单行文本框，type属性值为“password”时表示密码框。如果要设置用户输入数据的最大长度，则需要设置input标签的maxlength属性。例如，一般中国人的名字最多5个汉字，即10个字节，则将maxlength属性设置为10。②单选按钮和复选框在网页中，有些信息不让用户输入，只让用户选择，即输入的数据必须有严格限制，这时就要用到单选按钮和复选框。input标签的type属性值为“radio”时表示单选按钮，type属性值为“checkbox”时表示复选框。③按钮表单按钮一般分三类，分别是“submit”提交按钮、“reset”重置按钮和“button”普通按钮。当单击提交按钮时，用户输入的数据会提交到<form>标签中的action属性所定义的位置。当单击重置按钮时，会清除用户填写的数据，并将表单中的所有控件重新置为初始值。④隐藏域Input标签的type属性值为“hidden”时表示隐藏域，即对于网页访问者来说，隐藏域是不可见的。当表单提交时，隐藏域信息也会被提交。HTML设计表单2.6（3）select标签在HTML文件中，使用<select>标签表示下拉菜单或者带有滚动条的菜单。select标签的语法格式如下：<selectname=""id=""size=""multiple>

<optionvalue="">选项1</option>

...

<optionvalue="">选项n</option></select>标签中的name属性定义select标签的名称。size属性表示菜单选项显示条数。multiple属性表示是否可以多选，缺省时表示用户只能选一项。select下的option子标签表示下拉列表的选项。如果某个option标签设置了selected属性，表示该选项默认被选中。HTML设计表单2.6（4）textarea标签在HTML文件中，如果需要输入大量的文字，特别是包括换行文本时，需要使用<textarea>标签定义多行文本框。textarea的语法格式如下：<textareacols="30"rows="10"></textarea>其中，cols表示多行文本框的列数，rows表示多行文本框的行数。HTML设计表单2.6以下案例是使用HTML设计表单E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商城注册页面的实现步骤03创建register.html文件3.1创建register.html文件，添加表单标题“商城注册页面”，添加form表单。在form表单中添加页面元素3.2在form表单中添加用户名、电子邮箱、密码、确认密码、性别、爱好、国家、自我介绍、上传头像、提交按钮等元素。在form表单中添加页面元素3.2商城注册页面3.3E6636BC20180234D78A0072836F0BA7012B9B20

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论