HTML学习（三）

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量125 收藏
点赞数 2
分类专栏： HTML学习 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49049653/article/details/117481175
版权

HTML学习

一、表单

简介

HTML表单（form）是HTML文档中的一个区域，包含了一系列的可交互元素。表单主要用于收集用户输入的信息。

常用表单元素

（1）文本输入元素
定义用于文本输入的单行输入字段。
格式：<input type="text"/>

（2）单选框元素
单选按钮允许用户在有限数量的选项中选择其中之一。
格式：<input type="radio"/>

（3）复选框元素
复选按钮允许用户在有限的选项中选择多个选项。
格式：<input type="checkbox" name=" "/>
注意： 同一组复选框，其name必须相同。

（4）文本区元素
用于输入多行文本内容。
格式：<textarea name="" rows="" cols=""></textarea>

（5）下拉选择元素
下拉列表按钮允许用户通过下拉列表框的方式选择相应选项。
格式：

<select>
       <option></option>
        <option></option>
        <option></option>
</select>

注意： 有多少个选项就有多少个option。

（6）按钮元素
格式1：<input type="button"/>
格式2：<button type=""></button>

按钮的type类型有：button（普通按钮）、menu（菜单按钮）、reset（重置按钮）和submit（提交按钮）。

实例

运用HTML中的表单和表格和表格元素，创建一个个人简历。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人简历</title>
    <style type="text/css">
    body {
            justify-content: center;
            display: flex;
        }
        
        table {
            border: 1px solid black;
        }
        
        td {
            border: 1px solid black;
            width: 100px;
            height: 40px;
        }
        #text{
            text-align: center;
        }
    input{
        height:40px;
    }
    </style>
</head>
<body>
    <table cellspancing="0">
        <tbody>
        <caption>
            <h2>个人简历</h2>
        </caption>
        <tr>
            <td id="text">姓名</td>
            <td>
                <form>
                    <input type="text" name=""/>
                </form>
            </td>
            <td id="text">性别</td>
            <td>
                <form>
                    <input type="radio" name="sex" value="男" />男
                    <input type="radio" name="sex" value="女" />女
                </form>
            </td>
            <td id="text">出生年月</td>
            <td>
                <form>
                    <input type="date" name=""/>
                </form>
            </td>
            <td rowspan="4">
                <form>
                    <input type="file" name="photo" />
                </form>
            </td>
        </tr>
        
        <tr>
            <td id="text">民族</td>
            <td>
                <form>
                    <input type="text" name=""/>
                </form>
            </td>
            <td id="text">政治面貌</td>
            <td>
                <form>
                    <input type="text" name=""/>
                </form>
            </td>
            <td id="text">身高</td>
            <td>
                <form>
                    <input type="number" name=""/>
                </form>
            </td>
        </tr>

        <tr>
            <td id="text">学制</td>
            <td>
                <form>
                    <input type="number" name=""/>
                </form>
            </td>
            <td id="text">学历</td>
            <td>
                <form>
                    <input type="text" name=""/>
                </form>
            </td>
            <td id="text">户籍</td>
            <td>
                <form>
                    <input type="text" name=""/>
                </form>
            </td>
        </tr>
        <tr>
            <td id="text">专业</td>
            <td>
                <form>
                    <input type="text" name=""/>
                </form>
                
            </td>
            <td id="text" colspan="2">毕业学校</td>
            <td colspan="2">
                <form>
                    <input type="text" name="" style="width:258px;"/>
                </form>
            </td>
        </tr>
        <tr>
            <td id="text" colspan="7"><b>技能、特长或爱好</b></td>
        </tr>
        <tr>
            <td id="text">外语等级</td>
            <td>
                <form>
                    <input type="text" name=""/>
                </form>
            </td>
            <td id="text">计算机</td>
            <td colspan="4">
                <form>
                    <input style="width:680px;" type="text" name=""/>
                </form>
            </td>
        </tr>
        <tr>
            <td id="text" colspan="7">个人履历</td>
        </tr>
        <tr>
            <td id="text">时间</td>
            <td id="text" colspan="2"> 单位</td>
            <td id="text" colspan="4">经历</td>
        </tr>
        <tr>
            <td> 
                <form>
                    <input type="date" name=""/>
                </form>
            </td>
            <td colspan="2"> 
                <form>
                    <input type="text" name="" style="width:258px;"/>
                </form>
            </td>
            <td colspan="4">  
                <form>
                    <input type="text" name="" style="width:680px;"/>
                </form>
            </td>
        </tr>
        <tr>
            <td> 
                <form>
                    <input type="date" name=""/>
                </form>
            </td>
            <td colspan="2"> 
                <form>
                    <input type="text" name="" style="width:258px;"/>
                </form>
            </td>
            <td colspan="4"> 
                <form>
                    <input type="text" name="" style="width:680px;"/>
                </form>
            </td>
        </tr>
        <tr>
            <td> 
                <form>
                    <input type="date" name=""/>
                </form>
            </td>
            <td colspan="2" > 
                <form>
                    <input style="width:258px;" type="text" name=""/>
                </form>
            </td>
            <td colspan="4"> 
                <form>
                    <input style="width:680px;" type="text" name=""/>
                </form>
            </td>
        </tr>
        <tr>
            <td id="text">联系方式</td>
        </tr>
        <tr>
            <td id="text">通讯地址</td>
            <td colspan="2">
                <form>
                    <input style="width:258px;" type="text" name="address"/>
                </form>
            </td>
            <td id="text">联系电话</td>
            <td colspan="3">
                <form>
                    <input style="width:515px;" type="tel" name="tel"/>
                </form>
            </td>
        </tr>
        <tr>
            <td id="text">E-mail</td>
            <td colspan="2">
                <form>
                    <input style="width:258px;" type="email" name="email"/>
                </form>
            </td>
            <td id="text">邮编</td>
            <td colspan="3">
                <form>
                    <input style="width:515px;" type="number" name="邮编"/>
                </form>
            </td>
        </tr>
        <tr>
            <td id="text" colspan="7">自我评价</td>   
        </tr>
        <tr>
            <td colspan="7">
                <form>
                    <select>
                        <option></option>
                        <option></option>
                        <option></option>
                    </select>
                    <textarea style="width:1100px;"name="othertall" cols="60" rows="10"></textarea>
                </form>
            </td>
        </tr>
    </tbody>
    </table>
</body>
</html>

运行结果如下：
在这里插入图片描述

二、CSS样式

简介

CSS是Cascading Style Sheets的缩写，即层叠样式表单。CSS是HTML语言的一种扩展，其主要作用为：
1、定义web页面布局及页面中元素的显示方式；
2、利用CSS样式实现HTML内容的（结构）与表现（格式）的分离。
简而言之，CSS相当于HTML的“装饰器”。

语法结构

选择器{声明；声明；… }

注释

格式：/*注释内容*/

引入方式

（1）内嵌式
又称为行内式，在HTML标签内编写样式，如：<div style="width:500px;height:500px;"

（2）内部式
一般放置在HTML的head区域，只对当前页面有效，格式：<style type="text/css"></style>

（3）外部式
通过链接引入外部样式表文件，格式：<<link href="style.css">

选择器

选择器用于定位（选择）需要添加样式的网页元素，可分为以下几类：

  • 标签选择器
    顾名思义将HTML标签名作为选择器的名称，来进行样式设置。
  • 类选择器
  • ID选择器
    用于为标有特定ID的HTML标签设置样式。
  • 通配选择器
    利用*为指定范围内的所有标签设置样式。
  • 包含选择器
    为父标签下的子标签设置样式。
  • 选择器分组
    为一组元素设置相同的样式，利用逗号分隔多个选择器。
标签含义
<style>定义样式定义
<link>定义资源引用
<div>定义文档中的节或区域（块级）
<span>定义文档中的行内的小块或区域。
<font>规定文本的字体、字体尺寸、字体颜色等

实例

完成家用电器的统计，要求如下：
1、大标题背景：#0f7cbf ;字体大小：18px; 加粗，文本缩进1个文字的高 度，行高35px。
2、大家电等小标题：背景：#e4f1fa; 字体大小：14px; 加粗，文本缩进 2 个文字的高度，行高30px，颜色：#0f7cbf，当鼠标放上去时内容增加下划线。
3、平板电视等内容：字体颜色：#666,行高20px，文本缩进1个文字的高度，当鼠标放上去时颜色显示为#F60，并且增加下划线。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家用电器商品分类列表</title>

    <style type="text/css">
    body{
        width:300px;
    }
    #p1{
        background-color:#0f7cbf;
        font-size: 18px;
        font-weight: bold;
        text-indent: 12px;
        line-height: 35px;
    }
    #p2{
        background-color: #e4f1fa;
        font-size: 14px;
        font-weight: bold;
        text-indent: 12px;
        color: #0f7cbf;
        line-height: 30px;
    }
    #p2:hover{
        text-decoration: underline;
    }
    a{
        text-indent: 12px;
        color: #666;
        line-height: 20px;
        text-decoration: none;
    }
    a:hover{
        color:#f60;
        text-decoration: underline;
    }
    </style>
</head>
<body>
    <p id="p1">家用电器</p>
    <div>
        <p id="p2">大家电</p>
        <a href="">平板电视</a>&nbsp;
        <a href="">洗衣机</a>&nbsp;
        <a href="">冰箱</a>&nbsp;
        <br>
        <a href="">空调</a>&nbsp;
        <a href="">烟机/灶具</a>&nbsp;
        <a href="">热水器</a>&nbsp;
        <br>
        <a href="">冷柜/酒柜</a>&nbsp;
        <a href="">消毒柜</a>&nbsp;
        <a href="">家庭影院</a>&nbsp;
    </div>
    <div>
        <p id="p2">生活电器</p>
        <a href="">电风扇</a>&nbsp;
        <a href="">吸尘器</a>&nbsp;
        <a href="">净化器</a>&nbsp;
        <br>
        <a href="">净水设备</a>&nbsp;
        <a href="">挂烫机</a>&nbsp;
        <a href="">电话机</a>&nbsp;
    </div>
    <div>
        <p id="p2">厨房电器</p>
        <a href="">榨汁机</a>&nbsp;
        <a href="">电压力机</a>&nbsp;
        <a href="">电饭煲</a>&nbsp;
        <br>
        <a href="">豆浆机</a>&nbsp;
        <a href="">微波炉</a>&nbsp;
        <a href="">电磁炉</a>&nbsp;
    </div>
    <div>
        <p id="p2">五金家装</p>
        <a href="">淋浴/水槽</a>&nbsp;
        <a href="">电动工具</a>&nbsp;
        <a href="">手动工具</a>&nbsp;
        <br>
        <a href="">仪器仪表</a>&nbsp;
        <a href="">浴霸/排气 </a>&nbsp;
        <a href="">灯具</a>&nbsp;
    </div>
</body>
</html>

运行结果如下：
在这里插入图片描述

不断充电的兔子
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML ＜option＞ 标签
玄链教育
07-22 766
option 元素定义下拉列表中的一个选项（一个条目）。浏览器将 标签中的内容作为 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。
「HTML和CSS入门指南」option 标签详解
a451319296的博客
06-04 5035
option 标签是一个重要的标签，在 HTML 中用于创建下拉列表中的选项。使用 option 标签可以帮助您定义和呈现下拉列表中的各个选项。在使用 option 标签时，请注意选择正确的属性和方法、提供适当的标签、描述文本和无障碍功能、验证表单数据，并避免大量选项问题。
关于<option></option>标签的title属性问题
我思故我在的博客
08-22 8292
"-//W3C//DTD HTML 4.0 Transitional//EN">             New Document           //由于标签的title属性在有些浏览器上不能够正常工作，     //因此我们找了一个解决方法（在标签上做文章，具体方法如下:）                'yy' name=mysel onchange="documen
Option 和 Select 对象的基本使用
sky_zq16的博客
10-27 2471
Option 和 Select 对象的基本使用，这是两个很常用到的标签（这里主要是介绍属性的使用）   这里是代码的样板 //js的方法 function disable()   { //启动下拉列表   document.getElementById("mySelect").disabled=true;   } function enable()   { //
前端三件套html学习笔记
02-24
本人html学习笔记，方便遗忘后查找
三次学习
02-13
"三次学习"可能是指在学习过程中的一种迭代方法，通过反复实践和深化理解来掌握技能或知识。...反复实践，每次学习都能深化理解，这就是"三次学习"可能的含义——通过不断尝试和巩固，最终精通HTML。
HTML学习ji
10-27
HTML学习之旅是一个全面而深入的过程，涉及到许多关键概念和技术。 首先，我们需要了解HTML的基本结构。一个HTML文档通常由`<!DOCTYPE html>`声明开头，表明这是一个HTML5文档。接着是`<html>`元素，它是整个文档的...
学习HTML5过程笔记
03-19
三、HTML标签 * 列表标签：无序列表、有序列表、自定义列表 * 表格标签：表格标题和表头、表格结构标签、合并单元格 * 表单标签：Input系列、虚字文本框、单选框、文件选择、按钮、select下拉菜单按钮、texttarea文...
html学习资料
02-12
这个“HTML学习资料”压缩包显然是为初学者准备的，包含了帮助他们入门和理解HTML的重要资源。 在压缩包中，我们有以下三个文件： 1. **1.pdf**：这可能是一份HTML教程或指南，详细介绍了HTML的基本语法、元素和...
js 设置select选中的项
BlizzardWu的博客
08-17 5757
<select class="select_styled" id="ptz_com_nub"> <option style="font-size: 20px;" value="01" selected>COM1</option> <option style="font-size: 20px;" value="02">COM2 </option> <option style="font-size: 20px;"
HTTP的请求方法OPTIONS
热门推荐
Linlei的专栏
03-28 15万+
HTTP请求方法并不是只有GET和POST，只是最常用的。据RFC2616标准（现行的HTTP/1.1）得知，通常有以下8种方法：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE和CONNECT。 官方定义 OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。通过这个方法，客户端可以在采取具体资源
JS动态添加option和删除option
半块菠萝的博客
02-28 1万+
ｊｓ自动创建和删除ｏｐｔｉｏｎ 本文转载自http://www.jb51.net/article/35205.htm 仅供学习之用，留着随时查看动态创建
option与option之间传值（传递多个值）
penghaijun
08-03 5087
 function moveList(from,to){ var fromOption = document.myForm.elements[from];  var fromArray = fromOption.options;  var current=fromOption.selectedIndex;//当current的值为-1时，表示没有没有选中。while(current>-1)  { 
Web前端：HTML篇（四）头部head标签与样式表的导入
sjb2274540432的博客
07-24 984
样式表（Stylesheet）是一种用于定义网页内容外观和布局的文件。它通常与HTML文档一起使用，帮助开发者控制网页的视觉效果、排版、以及元素的呈现方式。最常见的样式表语言是CSS（Cascading Style Sheets，层叠样式表）。以下是样式表的一些主要特点和功能：（GPT说的）分离内容和表现：样式表允许将网页的内容（HTML）与其设计（CSS）分开，使得网站的维护和更新更加方便。例如，可以修改样式，而无需改变HTML结构。控制布局和外观。
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1108
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 2497
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML学习教程：表单与框架制作
"(北大青鸟)HTML学习教程003" HTML是超文本标记语言，是构建网页的基础，用于描述网页的结构和内容。在本教程的第三章中，主要探讨了两个关键概念：表单（Forms）和框架（Frames）。表单用于收集用户输入的数据，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值