1.标题
eg:<h1>一号标题</h1>
加tab变标签 从h1-h6依次增大字号。
自己造标题不好用的啦,无法运行的。
2.空格和回车不能直接用键盘的,要用代码
一个空格
一个换行,一个回车 <br />
3.测试细节以浏览器最终效果为主
4.p标签:负责放文章段落
标签语义化:在合适的地方使用合理的标签,就叫满足标签语义化。考研在搜索引擎排名中排名更靠前,点击率更高,带来更高的收益。
5.代码注释
快捷键:Ctrl + ?取消注释再按一次(单行)
6.测试要注意
项目上线之前,要求程序员删除注释内容,目的是加快网页加载速度。还有注意细节hhh
7.b和strong 都可以代表加粗
后者代表特别强调
i和em都是字体倾斜,后者还代表一般强调语义
8.s要被del所替代!
都可以实现删除线效果
9.键值对儿
k(key)v(value)对儿,属性名和属性值
10.加入图片步骤
一 把图片准备好复制到当前html文件同一级文件夹中
二src代表资源,他后面的值应该写想要加载的那张图片的名字
img代表插入图片
<img src="图片名字" width="200" height="200" />
只改变宽高的一个,另一个保持原值
width代表宽度 横向
height代表高度 纵向
title 鼠标悬停时候的提示文字
alt 作用一 当图片未正常加载的时候,文字才会被人看到
作用二 网页阅读器读取此内容给视障用户听,提升用户体验
描述此张图片就Ok啦
11.超链接 :点击之后实现页面内容的跳转
href属性对应的属性值应该设置成带有http:// 才可以打开网站
如果想打开本地页面,只需要把目标文件和当前文件放在同一个目录中,在href属性中写目标文件的名字即可
12.新窗口打开链接
默认超链接都是在当前窗口打开。如果想在新窗口打开,需要添加target属性。
13.空链接
暂时不知道点击之后跳转到哪,使用空链接占位。知道要跳转那了再来更改。
<a href="#">点我不知道去哪里了哈哈</a>
14.测试工作时候的一个小tip
发现程序员使用#来表达返回顶部效果,用户体验不好,提醒他用个动画实现。
15.路径:写想要找到的资源的位置
一 相对路径:相当于当前html文件去找其他资源的方式
1同级查找:当前html和目标在同一级目录中;语法:直接写资源名字即可
<img src="tutu1.jpg" width="500" height="500" title="波吉国王" alt="国王排名"/>
2上级查找:当前html和目标在上级目录中;语法:…/写资源的名字即可
<img src="../tutu2.jpg" alt="" />
3下级查找:当前html和目标在下级目录中;语法:文件夹名/写资源的名字

二 绝对路径:资源在电脑的具体位置
<img src="C:\Users\ZongZiQ\Desktop\STUDY\A代码\tutu1.jpg" alt="" />
复制电脑中具体位置的时候别忘了加这个资源的具体名字以及斜杠。从文件直接点开运行而不是快捷键运行。
注意:在前端语法中,绝对路径不推荐写哦~
只要遇到找资源,就可以利用路径的语法规则来实现。
16.列表
无序列表:ul嵌套若干个li,每个li就是一个选项
有序列表:ol嵌套若干个li,每个li就是一个选项
17.布局标签
当没有任何语义的时候,就可以使用div或span来进行内容的包裹,目的是后期css代码可以找到对应标签中的内容来设置样式。
div 独占一行称之为大盒子,span一行可以放多个称之为小盒子~
18.音频标签audio 视频标签video
测试细节:历史发展原因,音视频标签 兼容性很差,对于测试工作,需要测试三大主流浏览器是否能正常运行音视频
IE测试低版本(ie7,8,9,10,11)
测试方法:打开ie,F12,找到仿真(高版本才能测试低版本)
什么时候测低版本:用户要求再测试。
19.form表单标签
里面就是所有用户填写的表单数据
20.action=“xxx.jsp”
把表单数据提交给哪一个后台程序去处理
21.method=“post”
传递数据时候的方式方法,post代表隐式提交数据;get明文传从数据。
中文的冒号,防治生成代码错误
22.生成代码
Input + tab
23.普通的输入框
type="text"
24.密码框
type="password"
25.单选框
type="radio"
单选name=""
默认选中状态checked="checked"
测试细节:
1.点击查看是否为单选效果
2.刷新时是否有默认选中的状态
3.点击文字是否可以进行切换
26.多选框复选框
type="checkbox"
checked="checked"
默认选中
测试细节:
1.刷新的时候是否有默认选中
2.点击文字是否可以切换
注意:用户体验最重要~~
27.下拉菜单
select标签嵌套若干个option标签 每一个option是一个下拉菜单
测试细节:
1.内容的顺序
2.默认选中的状态 selected="selected"
3.内容的条数
28.文本域
textarea
测试细节:
1.外观大小是否一致
2.提醒程序员不要拖拽大小功能
29.普通按钮
input type="button" value=""
type ="reset"
点击后可以让表单数据恢复默认值
30.提交按钮
input type ="submit"
点击后提交给指定后台处理
value属性设置按钮身上的名字
点击后无论是否报错都与我们无关,最终测试的时候看数据库内容是否正常添加即可。
31.文本框设置提示文字
placeholder=“请输入用户名”
32.表单用户体验提升
可以给第一个输入框设置一个默认获取鼠标焦点的属性autofocus