网页设计基础内容总结（三）

最新推荐文章于 2024-10-04 14:46:05 发布

勤奋的喜羊羊

最新推荐文章于 2024-10-04 14:46:05 发布

阅读量617

点赞数 1

分类专栏：知识分享文章标签：前端 html

本文链接：https://blog.csdn.net/m0_67859413/article/details/127142489

版权

知识分享专栏收录该内容

4 篇文章 1 订阅

订阅专栏

前言

终于有机会出三了，前阵子我太忙，一直在想如何才能将离散数学速通。普通的学习离散数学实在是太慢了，搞得我学习起来不是很舒服。大家可以放心的关注博主，博主的这个网页设计系列不太可能是烂尾楼的。只要博主还尚在人世，这个系列就会一直的更新下去。其实我出这个系列的原因就是——想让大家可以简洁高效地学习网页设计这门课程。我们的路还很长，但我们必须走好每一步。

一、Page One

对表单的的设计

<header></header>页眉标签，常在表单中使用。

<footer></footer>页脚标签，常在表单中使用。

<form></form>表单标签，可以将表单元素放置在<form></form>标签中。

<label>标签标签，它的基本用法是<label for="#"></label>,它用于声明一个标签（很少用）。

<div></div>Div标签。

<textarea></textarea>文本域标签。

<input>输入型表单元素标签，是一个单标签，它的基本语法为：<input type="表单元素类型"value="表单元素的值"name="表单元素的名称"class="类别名">，通过设置<input>标签的type属性可以得到不同类型的表单元素。具体的类型如下：

type的属性值为text时，元素类型为文本框，如<input type="text"value="这是文本框">。

type的属性值为checkbox时，元素类型为复选框，如：

<input type="checkbox"value="1"name="cbx">打球

<input type="checkbox"value="2"name="cbx">照相

<input type="checkbox"value="3"name="cbx">跳舞

type的属性值为file时，元素类型为文件域，如<input type="file"value="">。

二、Page Two

type的属性值为hidden时，元素类型为隐藏域，如<input type="hidden"value="1">，隐藏域的内容对用户是不可见的，它不会显示在页面上。

type的属性值为image时，元素类型为图像域，如<input type="image"src="图像地址"name="图像域名称">。

type的属性值为password时，元素类型为密码域，

如<input type="password"value="123456">。密码域是一种特殊类型的文本域。为避免有不良企图的人看到密码，用户输入的字符默认不显示出来。每个输入的字符都用会回显字符显示，常见的回显字符有（*）和（●）。

type的属性值为radio时，元素类型为单选按钮，如

<input type="radio"value="1"name="rdo1">男

<input type="radio"value="2"name="rdo1">女

（注意：此处示例的两个单选按钮的name都是rdo1，表明它们是同一组的单选按钮。此时，单选按钮男或女，只能选其一）

type的属性值为button时，元素类型为普通按钮，如<input type="button"value="这是按钮">。

type的属性值为reset时，元素类型为重置按钮，如<input type="reset"value="重置按钮">，value中的值可以填任何你认为合适的提示语，如“重填”等。

type的属性值为submit时，元素类型为提交按钮，如<input type="submit"value="提交按钮">，value的用法同上。

对文件域file的一些补充：文件域主要用于选择电脑中的文件，它含有一个文本框和一个“浏览”按钮。单击浏览按钮，可选择本地电脑中的文件。选择文件后，value的属性值就显示为“文件路径+文件名+文件后缀”的形式。

三、Page three

<select></select>标签对用于定义下拉列表。

<option></option>标签对用于定义下拉列表中的选项。下拉列表中有多少个选项，就需要添加多少个<option></option>标签对。示例如下：

<select>
    <option value="值1">选项1</option>
    <option value="值1">选项1</option>
    <option value="值1">选项1</option>
</select>

关于文本域的一些补充：<textarea></textarea>为文本域标签，它相当于一个多行的文本框，可以让用户输入大量数据。它有两个属性cols（表示一行能容纳多少个字）和rows（表示该文本域有多少行），示例如下：

<textarea cols="20"rows="10">
只见闰土左手拿着铁叉，两双大眼睛目光炯炯地
看着在田地里奔跑的猹，……………………………………………
…………………………………………………………………………………………………
以上省略两万字
</textarea>

小结

关于表单中的CSS样式的设计，我暂时不讲。以后会单独出一篇文章来专门讲CSS样式。我们学习掌握了表单的基础知识后，就可以尝试地做一个网页版的用户登录or注册界面了，十分的神奇。文章的最后，让我们一起做个小游戏叭。