JavaWeb02---HTML&CSS

最新推荐文章于 2025-06-05 20:08:17 发布

aogogogo

最新推荐文章于 2025-06-05 20:08:17 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb 文章标签： html css

本文链接：https://blog.youkuaiyun.com/zhouboke/article/details/82828393

JavaWeb 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了HTML表单的各种元素及其属性，包括文本输入、密码输入、单选和多选按钮等，同时涵盖了div和span的用途，以及CSS的基本概念、引入方式和选择器，适合初学者快速掌握网页设计的基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、表单相关知识

1.表单：

　　所有需要提交到服务器端的表单项必须使用<form></form>括起来

　　form标签属性（有两个）：

　　　　1）action，整个表单提交的位置（可以是一个页面，也可以是一个后台java代码）

　　　　2）method，表单提交的方式（get / post / delete ... ...等7种）

　　　　　　　get提交方式：所有的内容显示在地址栏，不够安全，长度有限制

　　　　　　　post提交方式：所有的内容不会显示在地址栏，比较安全，长度没有限制

2.表单标签：　　

    1)文本输入项：<input　type = "text"　　name = ""　　size = ""　　maxlength = ""　　                        readonly = ""　　placehoder = "" />

　　2)密码输入项：<input　type = "password"　　name = ""./>

　　3)单选按钮：<input　type = "radio"　　name = ""　　value = ""　　checked = "" />

　　4)多选按钮：<input　type = "checkbox"　　name = ""　　value = ""　　checked = "" />

　　5)下拉列表：

　　　　<select name = "">

　　　　　　<option value = ""　　selected = "">北京</option>

　　　　　　<option value = "">上海</option>

　　　　</select>

　　6)文件上传项：<input type = "file"　　name = "" />

　　7)文本输入域：<textarea　name = ""></textarea>

　　8)提交按钮：<input type = "submit"　　value = "" />

　　9)普通按钮：<input type = "button"　　value = "" />

　　10)重置按钮：<input　type = "reset"　　value = "" />

　　11)隐藏项：<input type = "hidden"　　name = "" />

3.表单标签及属性代码

<body>
　　<form action="#" method="get">
　　　　隐藏字段:<input type="hidden" name="id" value="" /><br />
　　　　用户名：<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5" placeholder="请输入用户名"/><br />
　　　　密码：<input type="password" name="password" required="required"/><br />
　　　　确认密码：<input type="password" name="repassword"/><br />
　　　　性别：<input type="radio" name="sex" value="男"/>男
　　　　     <input type="radio" name="sex" value="女" checked="checked"/>女<br />
　　　　爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
　　　     　<input type="checkbox" name="hobby" value="打电动"/>打电动
　　　     　<input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
　　　　头像：<input type="file" name="file"/><br />
　　　　籍贯：<select name="province">
　　　　　　　　　<option>--请选择--</option>
　　　　　　　　　<option value="北京">北京</option>
　　　　　　　　　<option value="上海" selected="selected">上海</option>
　　　　　　　　　<option value="广州">广州</option>
　　　　　　　</select><br />
　　　　自我介绍：
　　　　　　<textarea name="zwjs">

　　　　　　</textarea><br />
　　　　提交按钮：<input type="submit" value="注册"/><br />
　　　　普通按钮：<input type="button" value="zhuce"/><br />
　　　　重置按钮：<input type="reset" />
　　</form>
</body>

二、div和span

1.div

一个块级元素（单独显示一行）。它单独使用没有任何意义。必须结合CSS来使用。主要用在页面的布局。

2.span

一个内联元素（显示一行）。它单独使用没有任何意义。必须结合CSS来使用。主要用于对摞起来的内容进行样式的修饰。

三、CSS

1.作用：

　　HTML：它是整个网站的骨架

　　CSS：它是对整个网站骨架的内容进行美化（修饰）

2.引入方式（3种）：

　　1）行内引入

　　2）内容引入方式

　　3）外部引入---------多对多

3.基本选择器（3种）：

　1）ID选择器：（保证唯一性）

　#id 属性名{

　　　　　　　　属性名n：属性值n;　　　　最后一行的分号可以省略，但最好不要省略。

　　　　　　}

　　2）标记选择器：（一般所有的元素设置相同样式时使用，不能设计差异化样式）　　

　元素名{

　　　　　　　　属性名n：属性值n;

　　　　}

　　3）类选择器：（一般较多元素设置相同样式时使用）

　.类名{

　　　　　　　　属性名n：属性值n;

　　　　}

JavaWeb02---HTML&CSS

一、表单相关知识

1.表单：

2.表单标签：

3.表单标签及属性代码

二、div和span

1.div

2.span

三、CSS

1.作用：

2.引入方式（3种）：

1）行内引入

2）内容引入方式

3）外部引入---------多对多

3.基本选择器（3种）：

1）ID选择器：（保证唯一性）

2）标记选择器：（一般所有的元素设置相同样式时使用，不能设计差异化样式）

3）类选择器：（一般较多元素设置相同样式时使用）

4、盒子模型

2.表单标签：　　

　　1）行内引入

　　2）内容引入方式

　　3）外部引入---------多对多

　1）ID选择器：（保证唯一性）

　　2）标记选择器：（一般所有的元素设置相同样式时使用，不能设计差异化样式）　　

　　3）类选择器：（一般较多元素设置相同样式时使用）