测试小工具_Html碎碎念

背景

运用Django框架编写一个测试工具的过程中，会涉及到前端部分学习。本文重点说明哈借用bootstrap框架来编写html的一些心得体会。

注：bootstrap框架的访问地址https://v4.bootcss.com/docs/components/input-group/

HTML模块

1.基本框架，一个基本的HTML页面有如下几个部分组成

1)声明是HTML5文档

2)html页面的根元素

3)html页面的元(meta)元素，Django中可通过request.META获取这部分的元素

4)html页面的可见页面内容，只有此区域的内容在浏览器中可见

2.常用的标签

1)

块级元素，实际上就是一个区域，主要用于容纳其他标签。比如可以在div区域内放置input/label/select标签

2)行内元素，主要用于容纳文字。比如需要在一行内两个标签中增加一个*/文字/空格

3)

表单元素，用来与用户交互并提交数据，编写小工具的中需重点关注的一个标签。含有如下子标签：

a)输入标签，输入类型由type属性定义，常用的如下：

文本域通过 标签来设定：

密码字段通过标签来设定，，注:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮通过标签来设定，

Male

Female

复选框通过标签来设定，

I have a bike

I have a car

b)按钮元素，常用onclick绑定事件，与JavaScript进行交互

c)下拉框元素，可创建单选或多选菜单，常与标签用于定义列表中的可用选项。

d)不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。，label标签内点击文本，就会触发此控件

3.常用的属性，为html元素提供附加信息，一般描述于开始标签，而且属性会以名称/值对的形式出现

1)class：定义一个标签或多个标签同一个类名

2)id：定义一个标签的元素id，整个html页面中id无法重复，即一个标签一个id

3)style：规定标签的行内样式

4.与CSS交互，对html页面不同标签渲染不同的样式

html提供了3种方式：

1)内联样式- 在HTML元素中使用"style"属性

style = "color:blue">每个表格从一个 table 标签开始。

2)内部样式表 -在HTML文档头部区域使用元素来包含CSS

 

3)外部引用 - 使用外部CSS文件

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

注：为了减少html和css代码的耦合，建议使用方式3完成CSS样式的引用

id和class的差别，可见https://www.jianshu.com/writer#/notebooks/48547308/notes/80227535

5.与JavaScript交互，对html页面的不同标签进行操作，从而达到前端和后端数据交互

html提供了2种方式：

1)使用标签放置于的最下面，避免影响页面渲染

2)外部引用 - 使用外部Js文件

注：为了减少html和js代码的耦合，建议使用方式2完成js的引用

html元素与js的一些小工具编写过程中的一些详见文件链接，待补充

6.文件对象模型(DOM)

HTML页面中所有标签抽象出来的一个对象，如下图所示，JavaScript能够很好的操控DOM，从而能够在客户端呈现各种效果。

实战中一些收获点，持续补充

1.想把两个标签放在同一行，比如label和input标签

                      //借助于form-inline row字段可以将两个标签放置再同一行

数字代码:

2.input输入框只准输入数字

                     

//借助于oninput="value=value.replace(/[^\d]/g,''只能输入数字  

3.同一行内两个标签间有空格

数字代码:

                                      //借助于span可以设置两个标签间空格

4.隐藏html元素

                     //借助于style="display:none"可隐藏html元素

其他模块

1.注释说明：

2.框架iframe：一个浏览器文档窗口中一般只能显示一个网页文件，但是，使用框架标签就可以将一个浏览器文档窗口分割成多个子窗口，每个子窗口中都可以显示一个独立的网页文件

3.引用超链接：访问百度页面会在新窗口打开文档

4.表格用table标签定义

5.列表用ul标签定义