web基础

最新推荐文章于 2022-03-26 21:14:01 发布

llx18672151537

最新推荐文章于 2022-03-26 21:14:01 发布

阅读量262

点赞数

本文链接：https://blog.csdn.net/llx18672151537/article/details/53239549

版权

html是超文本标记型语言

表格标签
    标签
    定义表格的范围：<table></table>
        border：设置表格线
       bordercolor：设置表格线的颜色
        cellspacing: 设置单元格之间的距离
       cellpadding: 设置文字和单元格之间的距离
       width: 设置表格的宽度
       height：设置表格的高度

   在table标签里面表示行： <tr></tr>
    align：设置对齐方式，值 left   center   right

   在tr标签里面表示列： <td></td>
align：设置某个单元格对齐方式

    在tr标签里面也可以表示单元格：<th></th>
       实现居中和加粗的效果

表单标签

输入项需要写到form标签里面
   大部分输入项是通过标签input进行封装操作的
   <input type="输入项的类型"/>
   第一个：普通输入项 <input type="text"/>
   第二个：密码输入项 <input type="password"/>
   第三个：单选输入项 <input type="radio"/>
       要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
        设置默认选中，使用属性 checked="checked"
   第四个：复选输入项 <input type="checkbox"/>
       要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
       设置默认选中，使用属性 checked="checked"
   第五个：文件输入项，上传文件的。<input type="file"/>
   第六个：隐藏项，这个值不会显示在页面上，但是提交表单也可以提交到服务器上
       <input type="hidden"/>
   第七个：普通按钮 <input type="button"/>
   可以写value属性，设置输入项的默认值
下面的两个输入项不是使用input标签进行封装的
   第八个：下拉选择输入项
       <select>
       <option>AAAA</option>
       <option>BBBB</option>
       <option>CCCC</option>
        </select>
    使用属性 selected="selected" 默认选中
   第九个：文本域
        <textarea cols="10" rows="5"></textarea>

css的选择器

标签选择器

class选择器

id选择器

JavaScript是基于对象和事件驱动的语言，应用于客户端。

js的语句
在java里面语句：if 、 switch 、while do-while for

js的数组
    什么是数组：定义一个变量只能存一个值，想要存多个值，可以使用数组进行存储
    js里面定义数组的方式
       1：var arr1 = [];
   2：var arr2 = ["10",10,true];
     3：var arr3 = new Array(3);
       4：var arr4 = new Array(4,5,6);

innerHTML属性
   （1）innerHTML属性不是dom里面属性
   （2）实现什么功能
      第一，获取标签里面的文本内容
        var span1 = document.getElementById("spanid");
       alert(span1.innerHTML);

      第二，向标签里面设置内容（可以写html代码）
        var div1 = document.getElementById("div1");
       div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";

表单的提交
   （1）在html中写form标签，提交方式
   提交表单有三种方式
   第一种方式：在form标签里面，写提交按钮 <input type="submit"/>
       = 代码
       <form method="get">
           username: <input type="text" name="username"/>
           <br/>
           password: <input type="password" name="password"/>
           <br/>
           <input type="submit" value="提交"/>
       </form>

   第二种方式：在form标签里面，写普通按钮 <input type="button"/>
       = 代码
       //使用button进行表单的提交
       function form01() {
           //得到form标签
           var form01 = document.getElementById("form01");
           //提交form表单
           form01.submit();
       }

   第三种方式：使用超链接提交数据
   * <a href="要链接的地址?参数名称1=参数的值1&参数名称2=参数的值2">超链接</a>
   * <a href="15-表单的提交方式二.html?username=ccc&password=123456">超链接提交数据</a>

表单校验
   （1）规范数据的输入的格式
   （2）如何进行表单的校验
   第一，使用submit进行表单提交，进行表单校验
   * 使用事件 onsubmit事件，写在form标签里面
   <form method="get" οnsubmit="return checkForm();">
   * 如何return返回的值true可以提交表单，如果返回false不会提交表单
   = 代码
   //submit表单的校验
   function checkForm() {
       //判断用户名不能为空
       var username = document.getElementById("usernameid").value;
       var password = document.getElementById("passwordid").value;
       if(username == "") {
           alert("用户名不能为空");
           return false;
       }
       if(password == "") {
           alert("密码不能为空");
           return false;
       }
       return true;
   }

   第二，使用button进行表单校验
   = 代码
   //使用button提交表单，进行校验
   function form01() {
       //得到输入项里面的值，判断值是否为空，如果为空不进行提交
       var username = document.getElementById("usernameid").value;
       var password = document.getElementById("passwordid").value;
       //如果值为空，不进行提交
       if(username == "") {
           alert("用户名不能为空");
       } else if(password == "") {
           alert("密码不能为空");
       } else {
           //得到form标签
           var form01 = document.getElementById("form01");
           form01.submit();
       }
   }