day02：input、下拉框、文本域、frameset（target、name）、div、css、行内内部外部导入、选择器、字体的样式、文本的样式、背景的样式、边框样式、轮廓样式、列表的样式

本文链接：https://blog.youkuaiyun.com/m0_45209551/article/details/123527570

这篇博客详细介绍了HTML中的input属性、下拉框、文本域等重要元素，并深入探讨了frameset的使用。此外，还重点讲解了CSS的基础语法、引入方式、选择器以及各种样式的设置，包括字体、背景、边框、轮廓和列表样式。通过实例代码展示，帮助读者掌握前端网页设计的基本技巧。

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

一回顾

1.html是超本文标记语言
2.web前端的三剑客:html css js
3.html常用的标签
  标题标签 <h1></h1> <h6></h6>
  图像:<img src="路径" width="宽度" height="高度" 
       alt="图片加载错误的提示信息" title="鼠标移入的提示信息">
  超链接:<a href="跳转的地址" target="页面打开的方式"></a>
  列表:
    无序列表 <ul><li></li></ul>     属性 type
    有序列表 <ol><li></li></ol>     属性 type
    定义列表 <dl><dt><dd>
 表格: <table> <tr> 行 单元格<td> 表头<th>
         属性:
            border  边框
            width   宽度
            align   对齐方式
            bgcolor  背景颜色
            cellspacing  边框与边框之间的间距
            cellpadding  内容与边框之间的间距
  表单:
    使用场景:大部分网站的登录注册  以及需要向服务器提交数据 都可以使用表单
    作用:主要用于收集用户的信息 将用于提交的到服务器
    组成:
      form容器 
         action 提交的地址  method 提交的方式  entype  提交的数据类型  
      输入框  
      提交按钮
   input标签type属性:
        text 文本
        password 密码
        radio 单选按钮
        checkbox 多选框
        file 文件
        date  年 月 日 
        datetime_local  年月 日 时分
        week 周
        month 年 月
        number 数值框
        range 滑块
        submit 提交按钮
        reset 重置按钮
        button 普通的按钮
        color 颜色
        email 邮箱
        search 搜索

二 input的属性(重点)

属性名	属性值
id	用于前端来获取这个标签
name	用于后台获取输入框中的值
placeholder	输入框中的提示信息
size	表示输入框的大小
checked	设置单选按钮与多选按钮默认选中
disabled	表示按钮禁用
value	表示输入框中的默认值

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form method="get" action="#">
            <input id="tv_name" name="" placeholder="请输入名称" size="1"/>
            <p>
                <input type="radio" name="hobby"/>抽烟
                <input type="radio" name="hobby" checked />喝酒 
                <input type="radio" name="hobby" />烫头
                <input type="button" value="禁用" disabled />
                <input type="text" value="春天来了" />
            </p>
        </form>
    </body>
</html>

效果

三下拉框(重点)

1.标签:<select> <option> </option> </select>
2.解释:
   <select> 表示的是下拉框
   <option> 表示是下拉框的条目
3.属性:selected  表示默认选中的条目

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <select>
            <option>茅台一斤</option>
            <option>五粮液二斤</option>
            <option>二锅头不限量</option>
            <option selected>百年糊涂</option>
        </select>
    </body>
</html>

效果

四文本域(重点)

1.标签的名称:textarea
2.属性:cols 跨列 rows 跨行

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <textarea cols="100px" rows="10px">
            
        </textarea>
    </body>
</html>

效果

五案例

step01 需求

step02 分析

step03 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="#" method="get">
            <p>如需要帮助，请咨询<img src="img/icon1.bmp" /> 或拨打400-800-1688</p>
            <p>电子邮箱:<input type="email"/></p>
            <p>会员登录名:<input type="text"/></p>
            <p>密码:<input type="password"/></p>
            &