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

前端JavaScript+HTML

2023-02-15 107
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端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
前端开发
关键词：
HTML JavaScript
前端html
HTML前端
JavaScript前端
前端javascript
允诺@晴天
目录
相关文章
代码掌控者
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
代码掌控者
65 1
优雅草央千澈
|
2天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
优雅草央千澈
46 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
疯狂的猿
|
3天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
疯狂的猿
54 33
RossyYan
|
8天前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言（HyperText Markup Language，简称 HTML）是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同，负责搭建网页“骨架”，用标签组织内容，像标题、段落、图片等元素，通过起始与结束标签（部分可单用，如`<img>`）界定层级与布局，将信息有序整合。标签含特定语义，向浏览器传达展示方式，为网页准确呈现及后续美化、交互筑牢根基。
RossyYan
62 25
天启互联网工作室
|
26天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0（静态互联网，1990年代初至2000年代初）以静态内容和单向信息流为主，用户仅能浏览。Web2.0（互动互联网，2000年代初至2010年代初）引入了用户生成内容和社交网络，内容动态且互动性强。Web3.0（语义互联网，2010年代至今）强调语义化、个性化、智能化及去中心化，结合AI、区块链等技术，提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术，在各阶段不断演进，共同推动了现代互联网的发展。
天启互联网工作室
36 1
前端基础之HTML
2G冲浪词条
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题，javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题，并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先，在Spring Boot应用中添加一个实现了`Filter`接口的类，设置响应头允许所有来源的跨域请求。接着，通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL，验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
2G冲浪词条
54 3
springboot解决js前端跨域问题，javascript跨域问题解决
疯狂的猿
|
1月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿，其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
疯狂的猿
92 2
土木林森
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
55 6
龙大吉
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
龙大吉
73 5
土木林森
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式（Hash路由和History路由）、优点及挑战，并通过实际案例分析，帮助开发者更好地理解和应用这一关键技术，提升用户体验。
土木林森
110 1

热门文章

最新文章

  • 1
    WeaveFox：蚂蚁集团推出 AI 前端智能研发平台，能够根据设计图直接生成源代码，支持多种客户端和技术栈
  • 2
    前端必须掌握的设计模式——发布订阅模式
  • 3
    圈子社交app前端+后端源码，uniapp社交兴趣圈子开发，框架php圈子小程序安装搭建
  • 4
    DeepSeek Artifacts：在线实时预览的前端 AI 编程工具，基于DeepSeek V3快速生成React App
  • 5
    前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
  • 6
    婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
  • 7
    2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
  • 8
    uniapp开发鸿蒙，是前端新出路吗？
  • 9
    2025年前端局势分析，我该不该转行？
  • 10
    前端必须掌握的设计模式——模板模式
  • 1
    【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
    437
  • 2
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    65
  • 3
    js设计模式-观察者模式与发布/订阅模式
    93
  • 4
    js设计模式-策略模式与代理模式的应用
    85
  • 5
    深入理解JavaScript中的闭包机制
    68
  • 6
    使用Vue.js构建交互式前端的技术探索
    100
  • 7
    使用Node.js构建实时聊天应用的技术指南
    157
  • 8
    深入理解JavaScript中的事件循环机制
    100
  • 9
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    140
  • 10
    JavaScript 数组方法概览
    45

    • 相关课程

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

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    阿里云开通OSS存储服务详细流程