0
点赞
收藏
分享

微信扫一扫

【HTML】html基本操作

小磊z 2022-02-12 阅读 40
html前端

1.标题

eg:<h1>一号标题</h1>
加tab变标签 从h1-h6依次增大字号。
自己造标题不好用的啦,无法运行的。

2.空格和回车不能直接用键盘的,要用代码

&nbsp; 一个空格
一个换行,一个回车 <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

举报

相关推荐

HTML概述与基本操作

HTML基本结构

html基本标签

HTML 基本标签

HTML——基本标签

HTML基本标签

HTML基本内容

0 条评论