背景
运用Django框架编写一个测试工具的过程中，会涉及到前端部分学习。本文重点说明哈借用bootstrap框架来编写html的一些心得体会。
注：bootstrap框架的访问地址https://v4.bootcss.com/docs/components/input-group/
HTML模块
1.基本框架，一个基本的HTML页面有如下几个部分组成
1)<!DOCTYPE html>声明是HTML5文档
2)<html></html>html页面的根元素
3)<head></head>html页面的元(meta)元素，Django中可通过request.META获取这部分的元素
4)<body></body>html页面的可见页面内容，只有此区域的内容在浏览器中可见
2.常用的标签
1)<div></div>块级元素，实际上就是一个区域，主要用于容纳其他标签。比如可以在div区域内放置input/label/select标签
2)<span></span>行内元素，主要用于容纳文字。比如需要在一行内两个标签中增加一个*/文字/空格
3)<form></form>表单元素，用来与用户交互并提交数据，编写小工具的中需重点关注的一个标签。含有如下子标签：
a)<input>输入标签，输入类型由type属性定义，常用的如下：
文本域通过<input type="text"> 标签来设定：<input type="text" name="firstname">
密码字段通过标签<input type="password">来设定，<input type="password" name="pwd">，注:密码字段字符不会明文显示，而是以星号或圆点替代。
单选按钮通过标签<input type="radio">来设定，
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
复选框通过标签<input type="checkbox">来设定，
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
b)<button></button>按钮元素，常用onclick绑定事件，与JavaScript进行交互
c)<select></select>下拉框元素，可创建单选或多选菜单，常与<option>标签用于定义列表中的可用选项。
d)<label></label>不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。<label for="控件id名称">，label标签内点击文本，就会触发此控件
3.常用的属性，为html元素提供附加信息，一般描述于开始标签，而且属性会以名称/值对的形式出现
1)class：定义一个标签或多个标签同一个类名
2)id：定义一个标签的元素id，整个html页面中id无法重复，即一个标签一个id
3)style：规定标签的行内样式
4.与CSS交互，对html页面不同标签渲染不同的样式
html提供了3种方式：
1)内联样式- 在HTML元素中使用"style"属性
<p style = "color:blue">每个表格从一个 table 标签开始。</p>
2)内部样式表 -在HTML文档头部区域使用元素来包含CSS
<head>
<meta charset="utf-8">
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
3)外部引用 - 使用外部CSS文件
<head><link rel="stylesheet" type="text/css" href="theme.css"></head>
注：为了减少html和css代码的耦合，建议使用方式3完成CSS样式的引用
id和class的差别，可见https://www.jianshu.com/writer#/notebooks/48547308/notes/80227535
5.与JavaScript交互，对html页面的不同标签进行操作，从而达到前端和后端数据交互
html提供了2种方式：
1)使用<script></script>标签放置于<body>的最下面，避免影响页面渲染
2)外部引用 - 使用外部Js文件
<head><script src="text/javascript.js"></script></head>
注：为了减少html和js代码的耦合，建议使用方式2完成js的引用
html元素与js的一些小工具编写过程中的一些详见文件链接，待补充
6.文件对象模型(DOM)
HTML页面中所有标签抽象出来的一个对象，如下图所示，JavaScript能够很好的操控DOM，从而能够在客户端呈现各种效果。
实战中一些收获点，持续补充
1.想把两个标签放在同一行，比如label和input标签
<div class="form-inline row" style="display:none"> //借助于form-inline row字段可以将两个标签放置再同一行
<label class="form-label col-form-label">数字代码:</label>
<input id="input" type="text" class="form-control" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字">
2.input输入框只准输入数字
<input id="input" type="text" class="form-control" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字">
//借助于oninput="value=value.replace(/[^\d]/g,''只能输入数字
3.同一行内两个标签间有空格
<label class="form-label col-form-label">数字代码:</label>
<span style="margin-left:30px;"></span> //借助于span可以设置两个标签间空格
<input id="input" type="text" class="form-control" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字">
4.隐藏html元素
<div class="form-inline row" style="display:none"> //借助于style="display:none"可隐藏html元素
其他模块
1.注释说明：<!-- 这是一个注释 -->
2.框架iframe：一个浏览器文档窗口中一般只能显示一个网页文件，但是，使用框架标签就可以将一个浏览器文档窗口分割成多个子窗口，每个子窗口中都可以显示一个独立的网页文件
3.引用超链接：<a href="https://www.baidu.com/" target="_blank" >访问百度页面</a>会在新窗口打开文档
4.表格用table标签定义
5.列表用ul标签定义
网友评论