html中button属性(button)-阿乐知识网

web前端三大核心技术：1.HTML负责网页的架构;2.css负责网页的风格;3 .JS负责网页的行为。

什么是HTML？它是一种用来描述网页的语言。HTML的主要功能是让所有主流浏览器都能显示同一个页面。

HTML是一种用来描述网页的语言。超文本标记语言Super 3360超链接文本标记语言3360是一组标记标签。HTML标签用来描述网页。HTML文档也称为网页。Hbuilder简介创建新的HTML网页1。下载Hbuilderx应用程序2。为编写代码3创建一个新文件夹。将鼠标拖动到工具-项目管理器界面的左侧。

创建骨架时默认生成的meta标签可以设置网页上的字符集，title标签可以设置网站的标题，body标签可以设置网页的主要内容！DOCTYPE html#单个标签，指示html文件类型html# html开始标签和/html结束标签。这一对叫做双标签[根标签3360] \ n head # header标签\ n metacarset=’ UTF-8′ #单标签，utf-8:国际代码可以翻译中文\ n title title/title \ n/head \ n body \ n body web content \ n/body \ n/html

文章的标题标签h1-h6分为六级，字体依次递减。每个标题都有自己的一行。注意：不能自己做新标签，不然运行不了！doctype HTML \ n HTML \ n \ thead \ n \ t \ t Metacarset=’ UTF-8 ‘ \ n \ t title/title \ n \ t/head \ n \ t body \ n \ t \ TH1我是一级职称/h1 \ N4我是四级职称/h4\t\th5我是五级职称/h5\t\th6我是六级职称/H6 \ n \ t/body \ n/HTML

空格和回车空格;使用换行符br/;也可以实现其他写入方法：br和br。

！DOCTYPE html \ nhtml \ n \ thead \ n \ t \ t meta charset=’ utf-8 ‘ \ n \ t \ t title/title \ n \ t/head \ n \ t body \ n \ t \ t！-空格使用换行符，br/-\ n \ t欢迎来到hello python的世界！\tbr /123换行\tbr /456换行\tbr /789换行\t/bodyl

t;/html

p标签

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

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t <p>>一个p代表一个段落</p>> <p>>语义化：即代表标签的含义，在合适的地方使用合理的标签可以在搜索排名中更靠前</p>>\t <p>>当地时间12日20时，</p>>\t <p>>法国议会选举首轮投票结束。出口民调显示，</p>>\t<p>> 现任**马克龙政*联盟和其主要对手****支持率非常接近。</p>></body>></html>>

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

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

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t\t<!–control+/快速注释以下代码实现的一个段落的效果 –>>\t\t<p>>我是文章段落</p>>\t</body>></html>>文字相关标签

1.字体加粗<b>></b>><strong>></strong>>

2.字体倾斜<i>> </i>><em>> </em>>

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t<!– 普通文字 –>>\t<b>> hello python</b>>\t<br />

> \t<strong>>hello python</strong>>\t<br />

> \t<!– 文字倾斜 –>>\t<i>>hello world</i>>\t<br />

> \t<em>>hello world</em>>\t</body>></html>>

3.字体添加删除线<!– 添加删除线 –>><s>></s>><del>></del>> 推荐优先使用

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t<!– 添加删除线 –>>\t<s>>2022年6月11号原价9.98</s>>\t<br>>\t<del>>2022年6月12号原价9.97</del>>\t<br>>\t6月13号今天：现价8.88\t</body>></html>>

工具打开浏览器运行代码

方式1

方式2

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

1.添加图片

img src=" " 用法

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t\t\t插入图片步骤：\t<br>>\t1.把图片放到和代码同一个文件夹中\t<br>>\t2.输入img 按下tab键，在str=" " 中输入图片名称即可\t<br>>\t\t<!– 键值对，KV对，属性名和属性值 –>>\t\t<img src="25.png" alt="">>\t</body>></html>>

2.设置图片长度和宽度width=”360px”,height=”auto” />

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t\t\t插入图片步骤：\t<br>>\t1.把图片放到和代码同一个文件夹中\t<br>>\t2.输入img 按下tab键，在str=" " 中输入图片名称即可\t<br>>\t3.在第一个键值对后按空格键输入宽度和高度即可\t<br>>\t\t<!– 键值对，KV对，属性名和属性值 –>>\t\t<img src="25.png" width=”360px”,height=”auto” />

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

title用法<img src="25.png" width=”360px”,height=”auto” />

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t\t\t插入图片步骤：\t<br>>\t1.把图片放到和代码同一个文件夹中\t<br>>\t2.输入img 按下tab键，在str=" " 中输入图片名称即可\t<br>>\t3.在第一个键值对后按空格键输入宽度和高度即可\t<br>>\t\t<!– 键值对，KV对，属性名和属性值 –>>\t\t<img src="25.png" width=”360px”,height=”auto” />

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

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

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t\t<img src="5.png" width=”360px”,height=”auto” />

超链接基础语法

1.打开网址

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t\t<!– 超链接用法 –>>\t\t<a href="https://www.baidu.com/">>点击我可以百度一下</a>>\t\t</body>></html>>

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

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t\t\t\t<!– 超链接用法 –>>\t\t步骤：\t\t输入a回车,添加网址即可\t\t<br>>\t\t<a href="文章标题.html">>点击我可以百度一下</a>>\t\t</body>></html>>超链接基础语法进阶

<!– 新窗口打开链接 –>> target="_blank"

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t<!– 新窗口打开链接 target="_blank" –>>\t\t<a href="http://www.baidu.com" target="_blank">>点击我，跳转到新窗口打开百度</a>>\t\t\t</body>></html>>空连接

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

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

相对路径（重点）

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

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t\t<a href="文章标题.html">>点击我打开</a>>\t\t<br>>\t\t<!– 打开图片文件夹下的25.png图片 –>>\t<img src="图片/25.png" alt="">>\t</body>>\t<a href="../文章标题.html">>点击我打开上级的文章标题</a>></html>>绝对路径（重点）

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

列表

1.无序列表：在<ul>></ul>>中嵌套<li>></li>>每一个li就是一个选项 –>>

\t<u1>>\t\t\t<li>>基础班</li>>\t\t\t<li>>功能班</li>>\t\t\t<li>>自动化测试班</li>>\t\t</u1>>\t

2.有序列表：<!– 有序列表ol 嵌套若干个li –>>

<!– 有序列表ol 嵌套若干个li –>>\t<ol>>\t\t<li>>基础班</li>>\t\t<li>>功能班</li>>\t\t<li>>自动化测试班</li>>\t</ol>>\t布局的标签

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

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

<div>>各标签内容独占一行</div>><span>>标签内容合并成一行</span

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t\t<div>>我是div</div>>\t\t<div>>我是div</div>>\t\t<div>>我是div</div>>\t\t<div>>特点：多个div独占一整行空间</div>>\t\t<br>>\t\t<span>>我是span</span>>\t\t<span>>我是span</span>>\t\t<span>>我是span</span>>\t\t<span>>特点：多个span在同一行显示</span>>\t</body>></html>>音频标签

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t\t<audio src="音频.mp3" controls="controls">></audio>>\t</body>></html>>视频标签

<!DOCTYPE html>><html>>\t<head>>\t\t<meta charset="utf-8">>\t\t<title>></title>>\t</head>>\t<body>>\t\t<video src="视频.mp4" controls="controls" height="200" width=”360px”,height=”auto” />

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

表单标签

<!– form 标签里面就是所有用户填写的表单数据 –>>

<!– method="post" 传递数据的方式，post隐式传递，get明文传递 –>>

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

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

性别：\t\t<input type="radio" name="xb" checked="checked" id="nan">>\t\t<label for="nan">>男</label>>\t\t<input type="radio" name="xb"id="nv">>\t\t<label for="nv">>女</label>>

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

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

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

4.下拉菜单

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

默认选中的是：郑州

\t <select name="" id="">>\t\t\t<option value="">>**</option>>\t\t\t<option value="">>上海</option>>\t\t\t<option value="">>广州</option>>\t\t\t<option value="">>深圳</option>>\t\t\t<!– 默认选中郑州的状态 –>>\t\t\t<option value="" selected="selected">>郑州</option>>\t\t</select>>

5.文本域

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

意见:\t\t<!– 禁用文本域拖拽大小功能 –>>\t\t<style type="text/css">>\t\t textarea{resize:none;}\t\t</style>>\t\t\t\t<textarea name="" id="" cols="30" rows="10">></textarea>>

6.按钮

普通按钮:\t\t<!– type="button" 普通按钮需要js配合才能实现效果\t\tvalue属性设置的是按钮身上的文字 –>>\t\t<input type="button" value="按钮">>\t\t<br>>\t\t重置按钮:\t\t<!– type="reset" 点击后让表单恢复默认值\t\tvalue属性设置的是按钮身上的文字 –>>\t\t<input type="reset" value="重置">>\t\t<br>>\t\t提交按钮:\t\t<!– type="submit"点击后可以把表单提交给指定后台处理\t\tvalue属性设置是按钮上的文字\t\t测试时只关注数据库中的内容是否正常添加即可 –>>\t\t<input type="submit" value="提交">>

关于表单的用户体验提升

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

用户名：<input type="text" placeholder="请输入用户名">>

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

autofocus="autofocus"

html中button属性(button)

站长推荐