Html基础与表单案例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Html</title>

</head>

<body>

    <!-- HTML的定义：HTML是超文本标记语言

        超文本就是链接，标记也叫标签，带尖括号的文本

        标签语法

        标签成对出现，中间包裹内容

        <>里面放英文字母（标签名）

        结束标签比开始标签多/

        双标签：成对出现的标签

        单标签:只有开始标签，没有结束标签

     -->

     <strong>我爱前端</strong>

     <!-- strong标签是双标签，作用：加粗文字 -->

     <hr>

     <!-- hr标签是单标签，作用：生成一条水平线 -->

     <br>

     <!--br 标签是单标签 作用： 换行 -->

     <!-- html的基本骨架

        HTML的基本骨架是网页模板

        html：整个网页

        head：网页头部，存放给浏览器看的代码，例如css

        body：网页主体，存放给用户看的代码，例如图片，文字

        title：网页标题

        快速生成：在html文件中按 ！（英文状态）和enter键或tab键    -->

        <!-- 标签关系

        作用：明确代码的书写位置

        1.父子关系（嵌套关系）

        2.兄弟关系（并列关系）

        -->

        <!-- 注释

        注释就是对代码的解释和说明，能提高代码的可读性

        不会在浏览器中显示

        快捷键：Ctrl+/

        -->

        <!-- 标题标签

        标签名：h1~h6（双标签）

        特点：文字加粗，逐渐减小，独占一行（换行）

        -->

        <h1>一级标题</h1>

        <h2>二级标题</h2>

        <h3>三级标题</h3>

        <h4>四级标题</h4>

        <h5>五级标题</h5>

        <h6>六级标题</h6>

        <!-- 经验：h1标签在一个页面只用一次，用来放标题或logo

        h2~h6则没有限制

         -->

         <p>段落一</p>

         <p>段落二</p>

         <!-- 段落标签

        一般用在新闻段落，文章段落，产品描述等

        标签名：p（双标签）

        显示特点：独占一行，段落之间有间隙

        -->

        第一行内容<br><hr>第二行内容

       

        <!-- 换行于水平线标签

        换行：<br>(单标签)

        水平线：<hr>标签（单标签）

        -->

        <strong>加粗</strong>

        <em>倾斜</em>

        <ins>下划线</ins>

        <del>删除线</del>

        <!-- 文本格式化标签

        作用：为文本添加特殊的格式。，以突出重点，都不换行。

        常见的文本格式：加粗，倾斜，下划线，删除线等

        strong：加粗

        em：倾斜

        ins：下划线

        del：删除线

        -->

        <!-- 图像标签

        作用：在网页中插入图片

        <img src='图片的URL'>

        src:用于指定图像的位置和名称，是<img>的必须属性

        图像标签的属性（不区分先后顺序）

        属性名='属性值'

        alt：替换文本，图片无法显示的时候显示的文字

        title：提示文本，鼠标悬停在图片上面的时候显示的文字

        width：设置宽度

        height：设置高度

        注意：浏览器缩放图片是等比例缩放的

        -->

        <!-- 路径

        路径就是指从查找文件时的起点到终点所经历的路线

        相对路径：从当前文件位置出发查找目标文件

        绝对路径：从盘符出发查找目标文件

        window电脑从盘符出发，Mac电脑从根目录出发

        . 表示当前文件所在文件夹

        / 表示进入某个文件夹里面

        ..当前文件的上一级文件夹

        -->

        <!-- 超链接

            作用：点击跳转到其他页面

            <a href='xxx.xxx.xxx'>xxx</a>

         -->

         <a href="#" target="_blank">跳转</a>

         <!-- 在新窗口打开页面 -->

         <!-- 加了target='_blank' 属性跳转时可以不覆盖原网页 -->

         <audio src="音频的URL"></audio>

         <!-- 音频标签

            常见属性：

            src：必须属性，作用：音频的URL

            controls：作用是显示音频控制面板

            loop：作用是循环播放

            autoplay：作用是自动播放,但浏览器为了用户体验会禁用

            -->

        <video src="视频的URL"></video>

        <!--

            src：必须属性，作用：视频的URL

            controls：作用是显示视频控制面板

            loop：作用是循环播放

            muted：禁音播放

            autoplay：作用是自动播放,但浏览器为了用户体验只能在静音状态下自动播放

         -->

         <!-- 列表

            作用：布局内容排列整齐的区域

            列表分类：无序列表，有序列表，定义列表

        -->

        <ul>

            <li>列表条目1</li>

            <li>列表条目2</li>

        </ul>

        <!-- 无序列表

        作用：布局排列整齐的不需要规定顺序的区域

        标签：ul嵌套li，ul是无序列表，li是列表条目

        注意：ul标签里面只能包裹li标签，li标签里面可以包裹任何内容

        -->

        <ol>

            <li>列表条目1</li>

            <li>列表条目2</li>

        </ol>

        <!-- 有序列表

        作用：布局排列整齐的需要规定顺序的区域

        标签：ol嵌套li，ol是有序列表，li是列表条目

        注意：ul标签里面只能包裹li标签，li标签里面可以包裹任何内容

        -->

        <dl>

            <dt>我是标题</dt>

            <dd>我是描述</dd>

        </dl>

        <!-- 定义列表

        标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情

        注意：dl里面只能包含dt和dd，dd和dt可以包含任何内容

        -->

        <table border="1">

            <tr>

                <th>姓名</th>

                <th>数学</th>

            </tr>

            <tr>

                <td>小雷</td>

                <td>150</td>

            </tr>

        </table>

        <!-- 表格

        网页中的表格于Excel表格类似，用来展示数据

        标签：table嵌套tr，tr嵌套td/th

        table：表格

        tr：行

        th：表头单元格

        td：内容单元格

        注意：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线

        -->

        <table border="1">

            <thead>

                <tr>

                    <th>姓名</th>

                    <th>数学</th>

                </tr>

            </thead>

           <tbody>

                <tr>

                    <td>小雷</td>

                    <td>150</td>

                </tr>

            </tbody>

            <tfoot>

                <td>第一</td>

                <td>满分150</td>

            </tfoot>

        </table>

        <!-- 表格结构标签

        作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰

        thead：表格头部，表格头部内容

        tbody：表格主体，主要内容区域

        tfoot：表格底部，汇总信息区域

        不会改变网页只是让代码更清晰

        -->

        <table border="1">

            <thead>

                <tr>

                    <th>姓名</th>

                    <th>数学</th>

                </tr>

            </thead>

           <tbody>

                <tr>

                    <td>小雷</td>

                    <td rowspan="2">150</td>

                     <!-- 上下合并150这个单元格，要加rowspan，合并几个值就写几个 -->

                </tr>

                <tr>

                    <td>小雷</td>

                    <!-- <td>150</td> -->

                    <!-- 把被合并的单元格去掉 -->

                </tr>

            </tbody>

            <tfoot>

                <td colspan="2">满分150</td>

                <!-- 左右合并满分150这个单元格，要加colspan，合并几个值就写几个  -->

                <!-- <td>满分150</td> -->

                <!-- 把被合并的单元格去掉 -->

            </tfoot>

        </table>

        <!-- 合并单元格

        作用：将多个单元格合并成一个单元格，以合并同类信息

        步骤：

        1.明确合并目标

        2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

        跨行合并，保留最上单元格，添加属性rowspan

        跨列合并，保留最左单元格，添加属性colspan

        3.删除其他单元格

        注意：不要跨结构（tf，tb，th）合并

        -->

       

        文本框：<input type="text" placeholder="请输入文本">

        <br><br>

        密码框：<input type="password" placeholder="请输入密码">

        <br><br>

        多选框：<input type="checkbox" checked>

        <!-- 默认选中 -->

        <br><br>

        单选框1：<input type="radio" name="gender" checked="checked">

        <!-- 默认选中 -->

        <br><br>

        单选框2：<input type="radio" name="gender">

        <br><br>

        上传文件：<input type="file">

        <br><br>

        上传文件：<input type="file" multiple>

        <!-- 表单

        作用：收集用户信息

        input的基本使用

        input标签type属性值不同，则功能不同

        <input type=''>

        属性有：

        text:文本框，用于输入单行文字

        password:密码框

        radio:单选框

        checkbox:多选框

        file:上传文件

        input的占位文本

        占位文本：提示信息

        <input type='' placeholder='要提示的信息'

        单选框radio

        常用属性：

        name：控件名称，控件分组，同组只能选中一个（单选功能）

        checked：默认选中，属性名和属性值相同，简写位一个单词

        上传文件 file

        默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。

        <input type='file' multiple>

        多选框-checkbox

        多选框也叫复选框

        默认选中：checked

        -->

        城市：

        <select>

            <option>北京</option>

            <option selected>广州</option>

            <!-- 加了selected是可以设置默认选中广州 -->

            <option>上海</option>

            <option>深圳</option>

        </select>

        <!--下拉菜单

            标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项

         -->

         文本域：

         <textarea>输入文本</textarea>

         <!-- 文本域标签

        作用：多行输入文本的表单控件

        标签：textarea 双标签

        右下角有拖拽功能，未来都会禁用的，会用css设置尺寸

        -->

        点文字也会选中

        <!-- 完整写法 写法一 -->

        <input type="radio" name="gender" id='man'><label for='man'>男</label>

        <!-- 简单写法 写法二 -->

        <label><input type="radio" name="gender">女</lab1>

        <!-- label标签

        作用：网页中，某个标签的说明文本

        经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围

        写法一：

        label标签只包裹内容，不包裹表单控件

        设置label标签的for属性值和表单控件的id属性值相同

        <input type ='radio' id ='man'>

        <label for='man'>男</label>

        写法二：

        使用label标签包裹文字和表单控件，不需要属性

        <label><input type='radio' 女 <label>

        提示：支持label标签增大点击范围的表单控件：文本框，密码框，上传文件，单选框，多选框，下拉菜单，文本域等等    

        -->

        <form action=''>

            用户名：<input type='text'>

            <br><br>

            密码：<inpu1 type='password'>

            <button type='submit'>提交</button>

            <button type='resest'>重置</button>

            <button type='button'>普通按钮</button>

        </form>

        <!-- 按钮标签 button

        <button type=''>按钮</button>

        type属性值说明：

        submit：提交按钮，点击后可以提交数据到后台（默认功能）

        reset：重置按钮，点击后将表单控件恢复默认值

        button：普通按钮，默认没有功能，一般配合JavaScript使用

        注意：表单标签要放在form表单区域才能使用,action-''是未来发送数据的地址

        -->

        <div>这是div<div>

            <!-- div是大盒子  独占一行-->

        <span>这是span<span>

            <!-- span是小盒子 可以在同一行 -->

        <!-- 无语义的布局标签

        作用：布局网页，划分网页区域，摆放内容

        div：独占一行

        span：不换行

        -->

        我是空 &nbsp;&nbsp;&nbsp;&nbsp;格

        <!-- 字符实体

        作用：在网页中显示预留字符

        空格：&nbsp; 在代码中敲键盘空格，网页只识别一个

        小于号：&it;

        大于号：&gt;

        -->

</body>

</html>

-----------------------------------------------------------------------------------------------------------

表单案例

<!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>

</head>

<body>

  <h1>注册信息</h1>

  <form action="">

    <!-- 表单控件 -->

    <!-- 个人信息 -->

    <h2>个人信息</h2>

    <label>姓名：</label><input type="text" placeholder="请输入真实姓名">

    <br><br>

    <label>密码：</label><input type="password" placeholder="请输入密码">

    <br><br>

    <label>确认密码：</label><input type="password" placeholder="请输入确认密码">

    <br><br>

    <label>性别：</label>

    <label><input type="radio" name="gender"> 男</label>

    <label><input type="radio" name="gender" checked> 女</label>

    <br><br>

    <label>居住城市：</label>

    <select>

      <option>北京</option>

      <option>上海</option>

      <option>广州</option>

      <option>深圳</option>

      <option>武汉</option>

    </select>

    <!-- 教育经历 -->

    <h2>教育经历</h2>

    <label>最高学历：</label>

    <select>

      <option>博士</option>

      <option>硕士</option>

      <option>本科</option>

      <option>大专</option>

    </select>

    <br><br>

    <label>学校名称：</label><input type="text">

    <br><br>

    <label>所学专业：</label><input type="text">

    <br><br>

    <label>在校时间：</label>

    <select>

      <option>2015</option>

      <option>2016</option>

      <option>2017</option>

      <option>2018</option>

    </select>

    --

    <select>

      <option>2019</option>

      <option>2020</option>

      <option>2021</option>

      <option>2022</option>

    </select>

    <!-- 工作经历 -->

    <h2>工作经历</h2>

    <label>公司名称：</label><input type="text">

    <br><br>

    <label>工作描述：</label>

    <br>

    <textarea></textarea>

    <br><br>

    <!-- 协议 和 按钮 -->

    <input type="checkbox"><label>已阅读并同意以下协议：</label>

    <ul>

      <li><a href="#">《用户服务协议》</a></li>

      <li><a href="#">《隐私政策》</a></li>

    </ul>

    <br><br>

    <button>免费注册</button>

    <button type="reset">重新填写</button>

  </form>

</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/230642.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

将yolo格式转化为voc格式：txt转xml(亲测有效)

将yolo格式转化为voc格式：txt转xml(亲测有效)

1.文件目录如下所示&#xff1a; 对以上目录的解释&#xff1a; 1.dataset下面的image文件夹&#xff1a;里面装的是数据集的原图片 2.dataset下面的label文件夹&#xff1a;里面装的是图片对应得yolo格式标签 3.dataset下面的Annotations文件夹&#xff1a;这是一个空文件夹&…
阅读更多...
如何在使用Docker快速部署StackEdit并实现公网访问本地编辑器远程办公

如何在使用Docker快速部署StackEdit并实现公网访问本地编辑器远程办公

文章目录 1. docker部署Stackedit2. 本地访问3. Linux 安装cpolar4. 配置Stackedit公网访问地址5. 公网远程访问Stackedit6. 固定Stackedit公网地址 StackEdit是一个受欢迎的Markdown编辑器&#xff0c;在GitHub上拥有20.7k Star&#xff01;&#xff0c;它支持将Markdown笔记保…
阅读更多...
如何在Linux命令行下发送和接收UDP数据包

如何在Linux命令行下发送和接收UDP数据包

众所周知，在传输层有两个常用的协议 TCP 和 UDP，本文介绍在 Linux 命令行下，如何使用 nc 命令发送或接收 UDP 数据包，这些命令的用法对调试 UDP 通信程序将有所帮助，本文适合初学者阅读。 1. 问题的提出 编写了一个使用 raw socket 在数据链路层接收原始 UDP 数据包的程序…
阅读更多...
Leetcode 2968. Apply Operations to Maximize Frequency Score

Leetcode 2968. Apply Operations to Maximize Frequency Score

Leetcode 2968. Apply Operations to Maximize Frequency Score 1. 解题思路2. 代码实现 题目链接&#xff1a;2968. Apply Operations to Maximize Frequency Score 1. 解题思路 这题说来惭愧&#xff0c;一开始自己没有搞定&#xff0c;不过看了大佬们的解答之后发现多少有…
阅读更多...
本地声明式缓存

本地声明式缓存

SpringBootCaffeineRedis声明式缓存 最近接到一个项目&#xff0c;里面同时整合了Caffeine和Redis。 对于像验证码&#xff0c;或者对用户操作做一些限制的缓存&#xff0c;还有分布式锁等等操作就利用redis来缓存&#xff0c; 对于一些热点数据&#xff0c;为了降低数据库查…
阅读更多...
Java语言真的跌落神坛了吗？

Java语言真的跌落神坛了吗？

Java语言真的跌落神坛了吗&#xff1f; 在开始前我有一些资料&#xff0c;是我根据自己从业十年经验&#xff0c;熬夜搞了几个通宵&#xff0c;精心整理了一份「 Java的资料从专业入门到高级教程工具包」&#xff0c;点个关注&#xff0c;全部无偿共享给大家&#xff01;&#…
阅读更多...
居民建筑能耗现状以及节能降耗方向

居民建筑能耗现状以及节能降耗方向

1我国居住建筑能耗统计情况 我国民用建筑能耗统计工作起步较晚。为了解和掌握民用建筑能源消耗情况&#xff0c;2007年住房和城乡建设部发布了《民用建筑能耗统计报表制度》(试行)[建科函(2007)271号]&#xff0c;自此我国民用建筑能耗统计工作正式展开&#xff0c;而城镇居住…
阅读更多...
新增数据，某个字段的值总是保存不上问题解决

新增数据，某个字段的值总是保存不上问题解决

在系统中新增一条数据&#xff0c;某个字段的数据总是保存不上&#xff0c;但是没有报任何异常和错误&#xff0c;其他字段也都是正常的&#xff0c;通过抓包分析请求参数发现那个字段的值也没有传给后端&#xff0c;检查了前后端代码也没有排查到问题。百思不得其解&#xff0…
阅读更多...
【算法与数据结构】455、LeetCode分发饼干

【算法与数据结构】455、LeetCode分发饼干

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;因为大饼干可以满足大胃口的孩子也必然可以满足小胃口的孩子&#xff0c;如果要尽可能的满足孩子的胃口…
阅读更多...
Git的rebase和merge合并代码的区别

Git的rebase和merge合并代码的区别

引言 Git的中rebase和merge都可以合并代码&#xff0c;那他们有什么相同和不同呢&#xff1f;本文来一次说清楚、说明白。 首先Git中的rebase和merge都是用于合并代码的方式&#xff0c;但它们有不同的工作原理和影响。 Merge&#xff08;合并&#xff09; 合并&#xff08;…
阅读更多...
[PHP]四舍五入保留两位小数

[PHP]四舍五入保留两位小数

number_format($number, 2, ., )
阅读更多...
【智慧之窗】AI驱动产品探索

【智慧之窗】AI驱动产品探索

一.初识 ChatGPT ChatGPT 是由 OpenAI 开发的自然语言处理&#xff08;NLP&#xff09;模型&#xff0c;基于 GPT&#xff08;Generative Pre-trained Transformer&#xff09;架构。GPT 系列的模型旨在理解和生成自然语言文本。ChatGPT 专注于支持对话性任务&#xff0c;即与…
阅读更多...
java的json解析

java的json解析

import com.alibaba.fastjson.*; public class JsonParser { public static void main(String[] args) { String jsonStr "{\"name\":\"John\", \"age\":30}"; // JSON字符串示例 // 将JSON字符串转换为JSONObject对象 JSONObje…
阅读更多...
想做新程序员？马上用 GPT-4 编程，一切我们都替你搞好了！

想做新程序员？马上用 GPT-4 编程，一切我们都替你搞好了！

// 打不过就加入。与其担心被 GPT-4 取代&#xff0c;不如现在就学习驾驭它。 &#xff08;GPT-3.5 和其他模型都不用怕&#xff0c;它们都不行&#xff0c;谁用谁知道……除了 Claude 我们还在测试中&#xff09; 文末有一键加入方法&#xff0c;国内用户也能无障碍使用—…
阅读更多...
Ubuntu 20.04 prometheus prometheus-process-exporter

Ubuntu 20.04 prometheus prometheus-process-exporter

prometheus-process-exporter 监控系统架构方案 https://blog.csdn.net/weixin_45801289/article/details/126922395 sudo apt install prometheus-process-exporter prometheus-process-exporter_0.4.0ds-1_amd64.deb service prometheus-process-exporter status netstat …
阅读更多...
中国一重集中采购平台的建设经历和系统亮点

中国一重集中采购平台的建设经历和系统亮点

中国一重前身为第一重型机器厂&#xff0c;是“一五”期间建设156项重点工程项目之一&#xff0c;始建于1954年&#xff0c;是中央管理的涉及国家安全和国民经济命脉的国有重要骨干企业之一&#xff0c;是国家创新型试点企业、国家高新技术企业&#xff0c;拥有国家级企业技术中…
阅读更多...
大语言模型--数据

大语言模型--数据

数据 大语言模型 数据WebText和OpenWebText数据集Colossal Clean Crawled Corpus&#xff08;C4&#xff09;Benchmark的数据污染问题GPT-3的数据集The Pile数据集 WebText和OpenWebText数据集 WebText数据集被用于训练GPT-2模型。其目标是获取既多样化又高质量的数据集。以前…
阅读更多...
漏洞复现-iDocview doc/upload接口存在任意文件读取漏洞（附漏洞检测脚本）

漏洞复现-iDocview doc/upload接口存在任意文件读取漏洞（附漏洞检测脚本）

免责声明 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…
阅读更多...
SpringSecurity源码学习六：授权

SpringSecurity源码学习六：授权

目录 1. 用户权限2. 资源权限2.1 自定义资源权限2.2 权限注解2.2.1 默认注解2.2.2 自定义注解2.2.3 注解初始化和保存 3. 代码示例4. 源码解析4.1 投票器4.1.1 投票器不同实现类的含义4.1.2 默认投票器WebExpressionVoter 5. 总结 SpringSecurity的授权是依赖于过滤器FilterSec…
阅读更多...
Postgresql源码（117）libpq的两套实现（socket/shm_mq）

Postgresql源码（117）libpq的两套实现（socket/shm_mq）

libpq的通信方式 libpq提供了两套通信方式 socketshm_mq 分别实现在下面两个文件中 pqcomm.cpqmq.c 什么时候用socket通信&#xff1f; 除了下述并行场景&#xff0c;其他场景全部使用socket通信。 static const PQcommMethods PqCommSocketMethods {.comm_reset sock…
阅读更多...
最新文章

Copyright @ 2022~2023