前端JavaScript+HTML-阿里云开发者社区

前端JavaScript+HTML

2023-02-15 136

版权

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

简介： 前端JavaScript+HTML

文章目录

注册页面

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

文章目录

注册页面

css伪类选择器

使用js控制HTML元素

使用 js控制css

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

前端JavaScript+HTML

文章目录

注册页面

css伪类选择器

使用js控制HTML元素

使用 js控制css

热门文章

最新文章

相关课程

相关电子书