web前端三大核心技术

1.HTML负责网页的架构
2.CSS 负责网页的样式,美化
3.JS 负责网页的行为

什么是HTML?

是用来描述网页的一种语言，
HTML的主要作用：就是让各大浏览器都能够显示同一样的页面

• HTML 是用来描述网页的一种语言. 即超文本标记语言
• 超:超链接
• 文本
• 标记语言:是一套标记标签
• HTML不是一种编程语言,而是标记语言,HTML用标签来描述网页,HTML文档也称为网页.

Hbuilder简介

新建一个HTML网页
1.下载 Hbuilderx 应用程序
2.新建一个写代码的文件夹
3.鼠标拖拽到工具左侧 ---项目管理器界面中

骨架标签

• 新建的时候默认生成的那些标签
• meta 标签 可以设置网页上的字符集
• title 标签 可以设置网页网站的 标题
• body标签设置网页的主体内容部分

# 单标签，代表html文件类型
#  开始标签 和 结束标签, 这对称为   双标记标签 【根标签：】
          #头部标签
                     #单标签，utf-8：国际编码 可翻译中文
                   
        
        
                     网页的主体内容
        
 

文章标题 标签

h1---h6 分六级，字体依次减小的效果，每个标题都是独占一行
注意：不能自己制造新标签，否则无法运行



	
		
		
	
	
		
我是一级标题
		
我是二级标题
		
我是三级标题
		
我是四级标题
		
我是五级标题
		
我是六级标题
	

空格和回车

空格使用 ；
换行使用
；其他写法也可以实现：
和

	
		
		
	
	
		
	欢迎来到    hello python的世界!!!
	
123 换行
	
456 换行
	
789 换行
	

p标签

负责放文章段落，可以使文本分成若干个段落

	
		
		
	
	
	 
一个p代表一个段落
     
语义化：即代表 标签的含义，在合适的地方使用合理的标签 可以在搜索排名中更靠前
	 
当地时间12日20时，
	 
法国议会选举首轮投票结束。出口民调显示，
	
 现任总统马克龙政党联盟和其主要对手左翼联盟支持率非常接近。

代码注释

• 按 control+/ ：快速注释
• 再按：control+/ ：可以取消注释

注意：软件上线前，要删除全部注释，否则会影响加载速度

	
		
		
	
	
		
		
我是文章段落
	

文字相关标签

1.字体加粗

2.字体倾斜

	
		
		
	
	
	
	  hello python
	
 
	hello python
	
 
	
	hello world
	
 
	hello world
	

3.字体添加删除线


推荐优先使用

	
		
		
	
	
	
	2022年6月11号  原价9.98
	

	2022年6月12号 原价9.97
	

	6月13号今天：现价8.88
	

工具打开浏览器运行代码

方式1

方式2

键值对，KV对，属性名和属性值

1.添加图片

img src=" " 用法

	
		
		
	
	
		
	插入图片步骤：
	

	1.把图片放到和代码同一个文件夹中
	

	2.输入img 按下tab键，在str=" " 中输入图片名称即可
	

		
		
	

2.设置图片长度和宽度
width=" " height=" "用法

	
		
		
	
	
		
	插入图片步骤：
	

	1.把图片放到和代码同一个文件夹中
	

	2.输入img 按下tab键，在str=" " 中输入图片名称即可
	

	3.在第一个键值对后 按空格键 输入宽度和高度即可
	

		
		
	

4.在图片上添加 鼠标悬停 操作

title用法

	
		
		
	
	
		
	插入图片步骤：
	

	1.把图片放到和代码同一个文件夹中
	

	2.输入img 按下tab键，在str=" " 中输入图片名称即可
	

	3.在第一个键值对后 按空格键 输入宽度和高度即可
	

		
		
	

5.设置 图片未正常加载的情况下会显示内容

alt="描述此张图片的信息 " 用法
1.当图片未正常加载的时候，文字才会被别人看到
2.网页阅读器读取此内容给视障用户听，提升用户体验

超链接基础语法

1.打开网址

文本

	
		
		
	
	
		
		点击我 可以百度一下	
	

2.打开本地页面：输入文件名.扩展名

	
		
		
	
			
		
		步骤：
		输入a回车,添加网址即可
		

		点击我 可以百度一下	
	

超链接基础语法进阶

target="_blank"

	
		
		
	
	
	
		点击我，跳转到新窗口打开百度
		
	

空连接

暂时不知道点击之后跳转到哪里，使用空链接占位

补充：测试工作时，如果发现程序员使用#来表达返回顶部效果时，可以提醒程序员使用动画效果实现，用户体验会更好一些

相对路径（重点）

1.同级查找：当前HTML和目标在同级目录中，语法：直接写资源名字即可
2.上级查找：当前HTML和目标在上级目录中，语法：../写资源的名字即可
3.下级查找：当前HTML和目标在下级目录中，语法：文件夹名/写资源名字即可

	
		
		
	
	
		点击我打开
		

		
	
	
	点击我打开上级的文章标题

绝对路径（重点）

目标资源在电脑中具体的位置

列表

1.无序列表 ：在

中嵌套

每一个li就是一个选项 -->

	
			
基础班
			
功能班
			
自动化测试班
			

2.有序列表：

	

		
基础班
		
功能班
		
自动化测试班
	
	

布局的标签

当没有任何语义的时候，可以使用div或span进行布局，目的是后期css代码可以找到对应标签中的内容来设置样式。（语义标签是有应用场景的 如 段落，标题等）

布局标签:无任何语义，方便后期设置内容样式

各标签内容独占一行
标签内容合并成一行

	
		
		
	
	
		我是div
		我是div
		我是div
		特点：多个div独占一整行空间
		

		我是span
		我是span
		我是span
		特点：多个span在同一行显示
	

音频标签

视频标签

音频，视频，测试点

audio 音频 video 视频
测试细节：因历史原因 导致音，视频版本兼容性低，对于测试工作来说需要测试三大主流浏览器是否能够正常运行，音频，视频。
Ie测试低版本（ie7.8.9.10.11）
测试方法：打开ie浏览器，按F12 找到仿真(必须是IE高版本才能测试低版本)
什么时候测试低版本：用户要求的情况下 再测试

表单标签

1.表单基础+密码框
type="text"普通输入框
type="password"密码框

		
		用户名：
		

		
		密码框：

2.单选按钮
type="radio" 单选
checkde="checked" 此属性表示 默认选中状态

性别：
		
		男

		
		女

测试步骤：
1.点击查看是否为单选效果
2.刷新时是否有默认选中的状态
3.点击文字是否可以进行切换

3.多选框
type="checkbox" 多选框，复选框
checked="checked" 默认选中

测试的细节：
1.刷新的时候是否有默认选中的状态
2.点击文字是否可以进行切换
一切测试要看是否满足用户需求 -->

测试


吃饭


睡觉


打游戏

4.下拉菜单

select标签嵌套若干个option标签，每个option标签就代表一个下拉选项
测试细节
1.下拉选中的内容顺序
2.默认选中的状态

默认选中的是：郑州

	   
			北京
			上海
			广州
			深圳
			
			郑州
		

5.文本域

textarea+tab键
测试的细节：
1.测试三大主流浏览器外观大小是否一致
2.提醒程序员禁用拖拽大小的功能

意见:
		
		
		
		

6.按钮

普通按钮:
		
		
		

		重置按钮:
		
		
		

		提交按钮:
		
		

关于表单的用户体验提升

1.添加placeholder=" "属性，可以文本框设置提示文字如下图

用户名：

2.可以给第一个输入框设置一个 默认获取鼠标焦点的属性 ：autofocus 如下图所示

autofocus="autofocus"