AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端JavaScript+HTML

2023-02-15 99
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端JavaScript+HTML

文章目录

注册页面

css伪类选择器

使用js控制HTML元素

使用 js控制css


注册页面


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


文章标签：
JavaScript
前端开发
关键词：
前端javascript
JavaScript HTML
JavaScript前端
前端html
HTML JavaScript
允诺@晴天
目录
相关文章
代码掌控者
|
9天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
代码掌控者
27 1
小王老师呀
|
14天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤，包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆，以及在 HTML 文件中引用混淆后的文件。通过这些步骤，可以有效提高代码的安全性。
小王老师呀
31 2
蓝易云
|
18天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
33 3
疯狂的猿
|
21天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果，可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素，向下拖拽可实现删除效果，简单实用，欢迎下载
疯狂的猿
34 4
土木林森
|
22天前
|
设计模式 前端开发 JavaScript
揭秘！前端大牛们如何巧妙利用JavaScript，打造智能交互体验！
【10月更文挑战第30天】前端开发领域充满了无限可能与创意，JavaScript作为核心语言，凭借强大的功能和灵活性，成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果，展示了JavaScript的多样性和强大能力。
土木林森
34 4
想飞的雪糕
|
20天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门：Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络，包括前馈神经网络（FFNN）、深度神经网络（DNN）和循环神经网络（RNN）。通过简单的示例和代码，帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景，并简要介绍了卷积神经网络（CNN）的替代方案。
想飞的雪糕
53 1
进步`于辰
|
20天前
|
移动开发 前端开发 JavaScript
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面，开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面，涉及多种特效实现，如动态图片切换和人物聚合效果。作品源码已上传至CSDN，视频效果可在CSDN预览。
进步`于辰
29 0
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
疯狂的猿
|
20天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码，在公路上开车网页小游戏源代码。
疯狂的猿
47 0
html5+three.js公路开车小游戏源码
土木林森
|
25天前
|
JavaScript 前端开发 开发者
前端框架对比：Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域，Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣，Vue.js以轻量级和易上手著称，适合快速开发小型到中型项目；Angular则由Google支持，功能全面，适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
土木林森
37 1
疯狂的猿
|
29天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
80 6

热门文章

最新文章

  • 1
    HTML元素 属性 格式化标签
  • 2
    @Html.ValidationSummary()作用
  • 3
    HTML基础加强
  • 4
    再来 10 个新鲜的 HTML5 教程
  • 5
    MDN Web技术文档 - HTML 元素
  • 6
    jQuery从html代码中获取对应标签的写法
  • 7
    在Pyramid中使用Mako模板以及默认和.html后缀关联
  • 8
    Skytte：一款令人印象深刻的 HTML5 射击游戏
  • 9
    HTML5 &lt;script&gt;元素async,defer异步加载
  • 10
    HTML5特性速记图
  • 1
    前端如何学习Node.js及Node.js的主要用途
    72
  • 2
    前端工程化：Webpack配置全攻略
    53
  • 3
    前端框架与库 - Angular基础：组件、模板、服务
    66
  • 4
    前端实现打字机的效果 -- typed库的使用
    139
  • 5
    手把手教你写一个简易的微前端框架​
    39
  • 6
    前端常见的性能优化方案？
    78
  • 7
    前端工程化：Webpack配置全攻略
    74
  • 8
    Python后端与前端交互新纪元：AJAX、Fetch API联手，打造极致用户体验！
    83
  • 9
    前端框架与库 - Vue.js 组件与路由
    50
  • 10
    告别‘老司机’时代，AJAX与Fetch API让你的前端与Python后端无缝对接！
    65

    • 相关课程

    更多
  • JavaScript 自学手册文档教程
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • JavaScript异步编程
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    无影云桌面