背景
运用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)
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"属性
每个表格从一个 table 标签开始。
2)内部样式表 -在HTML文档头部区域使用元素来包含CSS
h1 {color:red;}
p {color:blue;}
3)外部引用 - 使用外部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标签
数字代码:
2.input输入框只准输入数字
//借助于οninput="value=value.replace(/[^\d]/g,''只能输入数字
3.同一行内两个标签间有空格
数字代码:
//借助于span可以设置两个标签间空格
4.隐藏html元素
其他模块
1.注释说明:
2.框架iframe:一个浏览器文档窗口中一般只能显示一个网页文件,但是,使用框架标签就可以将一个浏览器文档窗口分割成多个子窗口,每个子窗口中都可以显示一个独立的网页文件
3.引用超链接:访问百度页面会在新窗口打开文档
4.表格用table标签定义
5.列表用ul标签定义