文章目录

  • 注册页面
  • 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";//更改cssdocument.getElementById("s123").style.color="blue";document.getElementById("qwe").style.backgroundColor="black";</script>
</body>
</html>

前端JavaScript+HTML相关推荐

  1. 在C#后端处理一些结果然传给前端Javascript或是jQuery

    在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...

  2. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  3. 判断字符串 正则_(重学前端 - JavaScript(模块一)) 14、引用类型之 RegExp (正则)(详述)...

    上一篇文章介绍了 JavaScript 中的 Date 类型,从地理方面的原理知识开始入手,如果大家认真看过上一篇文章,相信 JavaScript 中的 Date 类型已经难不住大家了!!! 但是今天 ...

  4. 前端---JavaScript基础4

    文章目录 前端---JavaScript基础3 call&apply 原型链 原型链操作 例子:按钮组件封装:(类似于Bootstrsp里的按钮组件封装) 前端-JavaScript基础3 c ...

  5. 前端---JavaScript基础3

    文章目录 前端---JavaScript基础3 普通对象与函数对象 原型及属性判断 构造函数继承 原型继承 组合继承 寄生组合式继承 前端-JavaScript基础3 普通对象与函数对象 原型及属性判 ...

  6. 前端---JavaScript基础2

    文章目录 前端---JavaScript基础2 对象类型判断 call函数 对象属性操作 深拷贝方法 前端-JavaScript基础2 重构以下代码:(以面向对象的方式) 重构后:(其中this指针问 ...

  7. 前端---JavaScript基础1

    文章目录 前端---JavaScript基础1 数据类型 面向对象 对象创建方式 对象类型判断 前端-JavaScript基础1 JS是 解释型语言:跨平台 慢 编译型语言:不能跨平台 快 数据类型 ...

  8. web 前端 如何分享到instagram_好程序员web前端教程分享前端javascript练习题三

    好程序员web前端教程分享前端javascript练习题三 cookie 一周内免登录 样式代码: 姓名: 密码: 一周内免登陆 js功能代码: var input=document.getEleme ...

  9. Web前端JavaScript笔记（4）节点

    如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...

  10. 前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述

    前言 作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...

最新文章

  1. New LINQ CTP!
  2. 算法设计与分析 Fibonacci数列问题的词典法（动态规划：词典）
  3. Pci设备驱动:设备枚举
  4. react render没更新_web前端教程分享React学习笔记（一）
  5. 腾讯郑兴：原生安全+协同防御是政企云安全治理的基石
  6. springboot三种过滤功能的使用与比较
  7. JDBC 4.0鲜为人知的Clob.free（）和Blob.free（）方法
  8. 感恩有您！《大数据》祝您新年快乐！
  9. mysql 大数据量插入遇到瓶颈 可行性方案探究
  10. Intel 64/x86_64/IA-32/x86处理器 - 指令格式(2) - 8086/16位指令格式概述
  11. Windows界面编程：MFC
  12. 2022最新软件测试面试题，看完还怕拿不到offer？
  13. ASP.NET MVC中的下拉框数据查询
  14. QQ邮箱服务器协议,理解邮件服务流程——SMTP、IMAP、POP3 协议
  15. Linux可以打开cdr文件吗,CDR是什么格式
  16. 1898: [Zjoi2005]Swamp 沼泽鳄鱼
  17. 关于人机智能的几点思考
  18. 获得除当前元素外的所有其他元素，并对其他元素进行设置
  19. 笔记本CPU低压和标压有什么区别？
  20. 【零基础-3】PaddlePaddle学习Bert

热门文章

  1. 论文阅读：Recurrent Neural Networks for Time Series Forecasting Current Status and Future Directions
  2. 记录一次chown -R 777 /误操作导致vultr utunbu服务器被迫销毁
  3. 【算法】一致性哈希算法原理详解
  4. 04-项目立项：项目方案、可行性分析、产品规划、立项评审
  5. tile cannot extend outside image
  6. STM32c8t6驱动激光雷达（一）
  7. 水文章（bushi）
  8. 好用的ROS开发软件（持续更新~）
  9. Unity3D 游戏引擎之构建简单的游戏世界（三）
  10. 图像增强算法（持续更新中）