前端JavaScript+HTML

最新推荐文章于 2024-08-03 22:21:30 发布
最新推荐文章于 2024-08-03 22:21:30 发布
阅读量2.2k 收藏 1
点赞数 3
分类专栏： # JavaScript 文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52006948/article/details/113462578
版权

文章目录

注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
     <h4>青春不常在,抓紧谈恋爱</h4>
     <table width="500px" border="0" >
         <tr>
             <td>性别：</td>
             <td>
                 <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
                 <input type="radio" name="sex" id="nv"> <label for="nv">女</label>
             </td>
         </tr>
         <tr>
             <td>生日</td>
             <td>
                 <select>
                     <option>--请选择年份--</option>
                     <option>2001</option>
                     <option>2002</option>
                     <option>2003</option>
                 </select>
                 <select>
                     <option>--请选择月份--</option>
                     <option>1</option>
                     <option>2</option>
                     <option>3</option>
                     <option>4</option>
                     <option>5</option>
                     <option>6</option>
                     <option>7</option>
                     <option>8</option>
                     <option>9</option>
                     <option>10</option>
                     <option>11</option>
                     <option>12</option>

                 </select>
                 <select>
                     <option>--请选择日--</option>
                     <option>1</option>
                     <option>2</option>
                     <option>3</option>
                 </select>
             </td>
         </tr>
         <tr>
             <td>所在地区</td>
             <td><input type="text" value="北京"></td>
         </tr>
         <tr>
             <td>婚姻状况</td>
             <td>
                 <input type="radio" name="marry" id="1" checked="checked"> <label for="1">未婚</label>
                 <input type="radio" name="marry" id="2"> <label for="2">已婚</label>
                 <input type="radio" name="marry" id="3"> <label for="3">离婚</label>
             </td>
         </tr>
         <tr>
             <td>学历：</td>
             <td><input type="text" value="博士"></td>
         </tr>
         <tr>
             <td>喜欢的类型</td>
             <td><input type="checkbox" name="love" id="11"><label for="11"> 妩媚的</label>
                 <input type="checkbox" name="love" id="12"><label for="12"> 可爱的</label>
                 <input type="checkbox" name="love" id="13"><label for="13"> 小鲜肉</label>
                 <input type="checkbox" name="love" id="14"><label for="14"> 老腊肉</label>
                 <input type="checkbox" name="love" id="15"><label for="15"> 漂亮的</label>
             </td>
         </tr>
         <tr>
             <td>自我介绍</td>
             <td>
                 <textarea>个人简介</textarea>
             </td>
         </tr>
         <tr>
             <td></td>
             <td>
                 <input type="submit" value="免费注册">
             </td>
         </tr>
         <tr>
             <td></td>
             <td>
                 <input type="checkbox" checked="checked">我同意加入
             </td>
         </tr>
         <tr>
             <td></td>
             <td>
                 <a href="#">我是会员，立即登录</a>
             </td>
         </tr>
         <tr>
             <td></td>
             <td>
                 <h5>我承诺</h5>
                 <ul>
                     <li>年满18岁，单身</li>
                     <li>抱着严肃的态度</li>
                     <li>真诚寻找另一半</li>
                 </ul>
             </td>
         </tr>
     </table>
</body>
</html>

css伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css伪类选择器</title>
    <style>
        /*链接伪类选择器 必须按顺序进行，不能互换*/
        /*1.未访问的链接样式*/
        a:link {
            color: #333;
            text-decoration: none;   /*去下划线*/
        }
        /*2.已访问的的链接样式*/
        a:visited {
            color: #8bff6d;
        }
        /*3.鼠标经过时的样式*/
        a:hover {
            color: #ff5438;
        }
        /*4.鼠标按下未弹起时的样式*/
        a:active {
            color: aqua;
        }

        
        /* :focus伪类选择器 表单获得光标时的样式*/
        input:focus {
            background-color: #ff5438;
            color: #8bff6d;
        }
    </style>

</head>
<body>
     <a href="#">这是一个链接</a> <br>
     <a href="#">这是链接</a>
     <input type="text">

</body>
</html>

使用js控制HTML元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用js控制HTML元素</title>
</head>
<body>
     <h1 id="s123">这是HTML</h1>
     <p id="qwe">这是HTML</p>
     <script>
         //document.getElementById("s123")  获得要改的地方
         //innerHTML=   要改的内容
         document.getElementById("s123").innerHTML="这是js";
         document.getElementById("qwe").innerHTML="这是js";
     </script>
</body>
</html>

使用 js控制css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用js控制css</title>
    <style>
        h1 {
            color: red;
        }
        p {
            height: 123px;
            width: 123px;
            background-color: #8bff6d;
            color: red;
        }
    </style>
</head>
<body>
     <h1 id="s123">这是HTML</h1>
     <p id="qwe">这是HTML</p>
     <script>
         //document.getElementById("s123")  获得要改的地方
         //innerHTML=   要改的内容
         document.getElementById("s123").innerHTML="这是js";
         document.getElementById("qwe").innerHTML="这是js";
         //更改css
         document.getElementById("s123").style.color="blue";
         document.getElementById("qwe").style.backgroundColor="black";
     </script>
</body>
</html>
允诺@晴天
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue之事件绑定
deep_zhuheihei的博客
07-20 302
<!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>Doc
【网页前端设计HTML】超链接
weixin_53597021的博客
08-03 675
超链接，英文名是hyperlink。每一个网站都是由非常多的网页组成，而页面之间通常都是通过超链接来相互关联的。超链接能够让我们在各个独立的页面之间方便地跳转。
HTML 专业词汇与语法规则
m0_74012211的博客
08-03 179
HTML 专业词汇与语法规则
4个自定义倒计时
lulei5153的博客
08-03 204
【代码】4个自定义倒计时。
【Dash】使用 HTML 和 CSS 创建图表
u010528690的博客
08-03 759
【代码】【Dash】使用 HTML 和 CSS 创建图表。
【Dash】HTML 和 CSS 的作用
u010528690的博客
08-03 748
超文本标记语音，提供一套标签（组件），用于定义网页上的内容结构和意义。例如标签表示一个段落， 到 表示不同级别的标题。
Web开发-html篇-上
最新发布
Broken_x的博客
08-03 793
html基础篇上
前端 HTML 概述
m0_74012211的博客
08-03 130
前端 HTML 概述
HTML 基础结构
m0_74012211的博客
08-03 267
HTML 基础结构
敦煌文化主题页面 HTML,CSS,Javascript 源码分享
m0_61603704的博客
08-03 262
项目亮点：加入了大量的CSS动画效果，以及JS交互效果，水平适合初学者以及大学生，包含登录注册页。使用技术：HTML，CSS，JavaScript。
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 626
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
m0_74283290的博客
08-03 604
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 299
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 908
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 233
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【Vue3】自定义组件
又言又语
07-30 445
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 343
处理vite项目中src和url路径问题
RN高级interview
流星雨的博客
07-31 488
RN高级interview
互联网医院系统源码与医保购药APP开发的完整技术指南
meihusdk的博客
07-30 365
开发过程中需注重数据安全、系统性能、用户体验等多个方面，确保系统的高效稳定运行和良好用户体验。希望这篇技术指南能为开发者提供有益的参考，助力互联网医疗健康行业的发展。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2433
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值