js，html知识点总结

前面花了一些时间研究了html、js的一些基本用法，对于测试开发来说，写一写基本的web的查询，展示测试结果等等来说基本够用，记录下一些基本的的知识点和学习心得。开发语言，不管是前端还是后端的开发语言，大体来说可以触类旁通，掌握基本的数据类型、语法之后就需要大量的敲代码的积累才会熟练。所以记录一些难点以及跟你之前学的语言的相同点和不同点，这样以后看起笔记来可以很快理解，总之就是总结一套适用于自己的学习和理解方法，这一点最重要

1.html的title就是显示在你浏览器tab上的内容，加上icon更美观

    <title>AIoT设备入库查询系统</title>
    <link rel="icon" type="image/x-icon" href="puppylogo.png">

2.导入库，类似import

    <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
    </script>
    <script src="https://unpkg.com/flyio/dist/fly.min.js"></script>

3.导入样式

    <link rel="stylesheet" type="text/css" href="tb.css">

4.实时显示时间

    <h2 id="datetime" class="datatime"></h2> 
    <script>
        setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
    </script>

5.select-下拉选择框，value是要传进来的值，><之间是要显示的值

        &nbsp;&nbsp;请选择查询：&nbsp;<select id="info" class="ivu-select" style="width:200px;height: 30px; ">
            <option value="mac"  SELECTED>Mac</option>
            <option value="sn">Sn</option>
            <option value="device_id"&nbsp;&nbsp;>DeviceId</option>

    </select> 

6.input-输入框，接收用户的输入，不同的type对应不同的功能效果，

text 定义单行文本输入域，用户可在其中输入文本
hidden 定义隐藏的文本域，该文本域不会显示在浏览器上，其信息对用户不可见。如果不希望用户看到某些数据，可以使用该输入类型的文本域
password 定义密码输入域，用户在该域中输入的字符不直接显示，而是显示星号或实心圆
radio 定义单选框，用户只能在多个选项中选择其中一个
checkbox 定义复选框，用户可以在多个选项中选择一个或多个
file 定义输入字段和 “浏览” 按钮，供用户选择文件
submit 定义提交按钮。提交按钮会把表单数据发送到服务器，数据会被发送到在表单的 action 属性中规定的URL
reset 定义重置按钮。重置按钮会把表单中的所有数据置为初始值
search 定义搜索框，用户可在其中输入任意文本
tel 定义电话号码输入框
url 定义定义URL输入框，用户只能输入合法的URL
email 定义定义email输入框，用户只能输入合法的email
number 定义定义数字输入框，用户只能输入数字
range 定义有取值范围的数字输入框，用户只能在指定的数值范围内进行选择
color 定义颜色选择器控件，用户可以选择颜色
date pickers 定义日期选择框，用户可以根据预定的格式输入日期、时间等

    <input type="submit" value="查询" style="background-color: #108ee9;width: 100px;height: 30px;color: #FFFFFF;border:none;border-radius: 5px  " onclick="get()"/>&nbsp;&nbsp;
    <input type="reset" value="重置"  style="background-color: #108ee9;width: 100px;height: 30px;color: #FFFFFF;border:none;border-radius: 5px  " onclick="location.reload()"/>

7.table定义表格，thead对应表头，tr-行，td-单元格，
table属性，方法：https://www.runoob.com/jsref/dom-obj-table.html
style：align，bgcolor，border，cellpadding，cellspacing，frame，rules，summary，width

<table border="10px" width="50%" align="center" cellspacing="0" cellpadding="5 px" bgcolor="aqua" >
	<tr>
		<td> 1 </td> <td> 1 </td> <td> 1 </td>				
	</tr>
	<tr>
		<td> 1 </td> <td> 1 </td> <td> 1 </td>
	</tr>
	<tr>
		<td> 1 </td> <td> 1 </td> <td> 1 </td>
	</tr>
</table>

8.Document方法https://www.runoob.com/jsref/dom-obj-document.html
常用：
document.createElement()创建节点
document.getElementById()通过元素id找节点
document.getElementsByName()通过name找节点
document.getElementsByTagName()通过tagname找节点
document.querySelector()通过id查找
document.write()写入html

        var table=document.querySelector("table");

        function get(){
            //获取 输入框的值
            var type=document.getElementById("info").value;
            var mydata=document.getElementById("data").value;
  
  var td=document.createElement("td");  //创建单元格

9.调用document.createElement(）创建表格的元素后，一定要用Object.appendChild();append到子节点里面

                        var th=document.createElement("th");  //创建单元格
                        tr.appendChild(th);
                        th.innerHTML=heads[i]; //把对象里面的属性值 datas[i][k]给td
                        th.class="head"
                        th.style.border="1px solid gray";
                        th.style.height="30px"

10 文本样式

效果：
定义粗体文本
定义着重文字
定义斜体字
定义小号字
定义加重语气
_{定义下标字
^{定义上标字}}
定义插入字
定义删除字

        .name1{
        	font-family:'Microsoft Yahei';/*字体*/
            font-style: oblique;     /*微微倾斜*/
            letter-spacing: 30px;     /*字母间距*/
            word-spacing: 100px;    /*单词间距*/
            line-height: 30px;    /*行高*/
            text-indent: 60px;     /*首行缩进*/
            text-decoration: underline; /*字体下划线*/
            font-weight: bold;/*字体加粗*/
            margin-top: 10px;/*上边距*/
			margin-bottom: 10px;/*下边距*/
            
        }

目前我用到的就是以上总结的这些方法，调整样式类似python的plt figure画布的调整，熟能生巧，在于日常的积累，对于经常测试web页面的测试来说，也算知己知彼，百战不殆，在跟研发、产品沟通上也显得更专业

参考：菜鸟