前端知识概述 2-HTML&CSS

本文详细介绍了HTML表单的使用方法,包括各种表单元素如文本框、密码框、单选框等,以及表单的提交方式和数据传递机制。同时,文章还讲解了CSS的基础知识,包括内嵌、内部和外部引入方式,以及如何使用CSS进行页面美化。

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

内容


1 html表单标签(重点)

2 css(了解)


html的表单标签

应用场景

登录 注册等等

作用

只要后期需要将页面用户填写的数据传递给后台,我们都需要使用表单标签

使用

标签格式:表单标签不是由一个组成,而是有多个组成

<form>
  1 文本框    <input type="text" />
  2 密码框    <input type="password" />
  3 单选框    <input type="radio" />
  4 复选框    <input type="checkbox" />
  5 日期框    <input type="date" />
  6 隐藏框    <input type="hidden" />
  7 文件框    <input type="file" />
  8 下拉框    <select><option>内容</option></select>
  9 文本域    <textarea></textarea>
  10 提交按钮  <input type="submit" />
  11 普通按钮  <input type="button"/>
  12 重置按钮  <input type="reset" />
<form>
细节:所有的表单标签都要写在<form></form>里面

<body>
        <form>
            <input type="hidden" /> <!--隐藏框-->
            用户名:<input type="text" /><br/>
            密码: <input type="password" /><br/>
            性别: <input type="radio" name="sex" /> 男
                   <input type="radio" name="sex"/> 女<br/>
            爱好: <input type="checkbox" name="hobby"/>抽烟
                  <input type="checkbox" name="hobby"/>喝酒
                  <input type="checkbox" name="hobby"/>烫头<br/>
            日期:<input type="date" /><br/>
            上传:<input type="file" /><br/>
            籍贯:<select>
                    <option>北京</option>
          			<option>上海</option>
        			<option>广州</option>
        			<option>深圳</option>
        		</select><br/>
        个人介绍:<textarea rows="5" cols="50"></textarea><br/>
        <input type="submit" value="提交按钮"/>  <!--可以提交整个表单-->
        <input type="button" value="普通按钮"/>  <!--只和js一起使用-->
        <input type="reset" value="清空数据" />
        </form>
</body>

form标签的属性

form标签的2个属性:action method
action:指定表单提交到哪里的地址
method:提交方式  get提交  post提交
细节:get提交和post提交的区别
get提交方式会将整个表单提交的内容都显示在地址栏上(默认不写就为get)
post提交方式不会将整个表单提交的内容显示在地址栏上

所有标签的核心属性

name属性:表单提交数据是以key=value的形式进行提交的 name属性就是用来设置key名的 
细节:表单数据要想提交 必须得有name属性
value属性:用来设置value值的 一般只给单选框 复选框设置  其余标签会将用户填写的内容当成是value属性值
细节:按钮的value属性是用来设置按钮名称的

单选框/复选框特有的属性

checked="checked" 被选中

下拉框特有的属性

selected="selected" 被选中
<body>
        <!-- 核心点:
           form标签的属性:action  method
           action:指定当submit提交按钮被点击,要将表单提交到那个地方去  (后期都是提交给java代码了)
           method: 指定提交方式   get(提交默认)  post提交
           问:get提交和post提交的区别:
           get提交会将所有用户填写内容放在浏览器的地址栏中进行传递(key=value) 不安全
           post提交不会将所有用户填写内容放在浏览器的地址栏中进行传递  安全

           所有标签的核心属性:name  value (才能做后期的页面数据传递)
           后期是需要将表单里用户填写的数据进行提交的,但是如果表单中没有name属性,表单里面的数据是不会提交的
           name: 设置name名称  传递的过程中name名称会被当成key
           value:设置value值   传递的过程中value属性值会被当成value
           可以将用户输入的内容当成是value值 也可以自己手动设置value (单选框/复选框)
           按钮的value值只是用来设置按钮的名称

           单选框和复选框特有的属性:
           checked="checked" 默认被选中

           下拉框特有的属性:
           selected="selected"
        -->


        <form action="demo.html">
            <input type="hidden" /> <!--隐藏框-->
            用户名:<input type="text" name="username" /><br/>
            密码: <input type="password" name="password"/><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="喝酒" checked="checked"/>喝酒
                  <input type="checkbox" name="hobby" value="烫头" checked="checked"/>烫头<br/>
            日期:<input type="date" name="date"/><br/>
            上传:<input type="file" name="upload"/><br/>
            籍贯:<select name="city">
                     <option value="01">北京</option>
                     <option value="02">上海</option>
                     <option value="03"  selected="selected">广州</option>
                     <option value="04">深圳</option>
                 </select><br/>
            个人介绍:<textarea rows="5" cols="50" name="info"></textarea><br/>
            <input type="submit"  value="提交按钮"/>  <!--可以提交整个表单-->
            <input type="button" value="普通按钮"/>  <!--只和js一起使用-->
            <input type="reset" value="清空数据" />
        </form>
</body>

css(了解)

概述

CSS:Cascading Style Sheets ----层叠样式表 专门用于网页的美化

css的美化初体验:有三个font标签 需要设置字体大小为70 颜色为红色

结论:比HTML美化的功能更加强大,可以实现HTML不能实现的美化效果

CSS使用

1.css的代码三种引入方式

内嵌方式(行内方式) 内部方式  外部方式
内嵌方式(行内方式) 
需要在每个标签内部加上style属性
属性的值:key1:value1;key2:value2... 
内部方式  
需要在<head></head>之间定义标签<style>
标签名{
key1:value1;
key2:value2;
}
细节:css的注释: /* 注释内容 */
外部方式 条件:需要引入外部的文件
在外部创建一个css样式文件写样式
在需要的页面将css文件引入 <link rel="stylesheet" href="文件地址">
外部方式可以用于多个页面
外部了解方式:<style type="text/css">
			@import url("css文件地址"); 
		    </style>

细节:三种引入方式的优先级:就近原则 谁离标签近谁的优先级高

css的选择器(掌握)

作用:用来获取页面的标签的

条件:只能使用内部样式和外部样式来控制选择器

1 基本选择器

元素选择器:可以用来设置所有标签 根据标签名直接获取标签
类选择器:可以用来设置一组标签的 需要在标签上设定class属性根据class属性名获取标签
ID选择器:可以用来设置单个标签  需要在标签上设定ID属性根据id属性名获取标签

细节:ID选择器>类选择器>标签选择器

2 扩展选择器

并集(组合)选择器 多个选择器的集合           选择器1,选择器2,选择器3{属性}    
层级选择器 父元素下所有的子孙元素           元素1>元素2      元素1 元素2(包含子子孙孙)
<div>
	<div>
		<div></div>
	<div>
	<div><div>
	<div><div>
<div>
属性选择器 只要包含的有属性名就能被选中  
伪类选择器 同一个元素在不同的操作状态下呈现不同的样式 例如超链接
元素:link 正常状态
元素:hover 鼠标悬停
元素:active 正在激活
元素:visited 访问过的

css属性介绍

设定背景
	   background-color  设置元素的背景颜色
	   background-image  把图像设置为背景
	   background-repeat 设置背景图像是否重复及如何重复	

设定文本
	   color 设置文本颜色
	   text-align 对齐元素中的文本
	   text-indent 缩进元素中文本的首行
	   text-decoration 去除超链接的下划线
	   line-height  设置行高
	   
设定字体
	   font-size 设置字体的尺寸
	   font-family 设置字体属性(楷体)
	   font-style 设置字体风格(斜体)
	   font-weight 设置字体的粗细
	   
元素的显示和隐藏属性
	   display
	   取值:
           none 设置元素不可见
	      inline 设置元素为内联元素
	      block 设置元素为块级元素

css的浮动

作用:可以让div在一行

属性:float 取值:left right

clear清除浮动

​ left:清除自身的左浮动

​ right:清除自身的右浮动

​ both:不管左浮动还是右浮动都清除自身

盒子模型

css认为所有元素就是一个盒子

盒子组成:内容 边框 内边距 外边距

外边距 :margin 盒子和盒子或盒子和页面之间的距离

取值:left right top bottom

内边距 : padding 盒子中的内容和盒子边框之间的距离

取值:left right top bottom

标准盒子(默认):内容不变,盒子变化

属性控制(默认):box-sizing:content-box

怪异盒子:盒子不变 内容变化

属性控制:box-sizing:border-box
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body{
            background-image: url("img/register_bg.png");
        }

        #regist{
            border: 8px solid #EEEEEE;
            background-color: white;
            width: 800px;
            height: 500px;
            margin-left: 200px;
            margin-top: 30px;
        }

        #regist>div{
            float: left;
            height: 500px;
        }

        #left{
            width: 200px;
        }
        #center{
            width: 400px;
        }
        #right{
            width: 194px;
        }

        #d1{
            margin-left: 20px;
            margin-top: 20px;
        }

        #d1>div:first-child{
            font-size: 17px;
            color: #FFDC68;
        }
        #d1>div:last-child{
            font-size: 17px;
            color: #A6A7A8;
        }

        #d3{
            font-size: 14px;
            margin-top: 15px;
            margin-left: 65px;
        }

        a{
            text-decoration: none;
        }

        .td_left{
            width: 100px;
            text-align: right;
            font-size: 15px;
        }

        .td_right{
            padding-left: 22px;
            box-sizing: border-box;
        }

        #username,#password,#email,#name,#telephone,#yzm,#date{
            width: 220px;
            height: 20px;
            border: 2px solid gainsboro;
            border-radius: 5px;
        }

        #img{
            padding-left: 130px;
            padding-top: 5px;
            box-sizing: border-box;
        }

        #yzm{
            width: 100px;
        }

        #tpyzm{
            width: 100px;
            /*垂直居中*/
            vertical-align: middle;
        }
        #table{
            line-height: 40px;
        }

        #d2{
            margin-top: 50px;
        }
    </style>
</head>
<body>
        <div id="regist">
            <div id="left">
                    <div id="d1">
                        <div>新用户注册</div>
                        <div>USER REGISTER</div>
                    </div>
            </div>
            <div id="center">
                <div id="d2">
                    <form method="get" action="#">
                        <table  width="100%" id="table">
                            <tr>
                                <td class="td_left">用户名</td>
                                <td class="td_right">
                                    <input type="text" name="username" id="username" placeholder="请输入用户名"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left">密码</td>
                                <td class="td_right">
                                    <input type="password" name="password" id="password" placeholder="请输入密码"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left">Email</td>
                                <td class="td_right">
                                    <input type="text" name="email" id="email"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left">姓名</td>
                                <td class="td_right">
                                    <input type="text" name="name" id="name"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left">手机号</td>
                                <td class="td_right">
                                    <input type="text" name="telephone" id="telephone"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left">性别</td>
                                <td class="td_right">
                                    <input type="radio" name="sex" value="男"/>男
                                    <input type="radio" name="sex" value="女"/>女
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left">出生日期</td>
                                <td class="td_right">
                                    <input type="date" name="date" id="date"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left">验证码</td>
                                <td class="td_right">
                                    <input type="text" name="yzm" id="yzm"/>
                                    <img src="img/verify_code.jpg" id="tpyzm" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" >
                                    <img src="img/regbtn.jpg" id="img"/>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div id="right">
                    <div id="d3">
                        <div>已有账号? <a href="#">立即登录</a> </div>
                    </div>
            </div>
        </div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值