前言：
当前兄弟们对“html空格怎么表示”大致比较重视，各位老铁们都想要知道一些“html空格怎么表示”的相关内容。那么小编同时在网上网罗了一些有关“html空格怎么表示””的相关文章，希望各位老铁们能喜欢，我们一起来学习一下吧！web前端三大核心技术
1.HTML负责网页的架构
2.CSS 负责网页的样式,美化
3.JS 负责网页的行为
什么是HTML?
是用来描述网页的一种语言，
HTML的主要作用：就是让各大浏览器都能够显示同一样的页面
HTML 是用来描述网页的一种语言. 即超文本标记语言超:超链接文本标记语言:是一套标记标签HTML不是一种编程语言,而是标记语言,HTML用标签来描述网页,HTML文档也称为网页.Hbuilder简介
新建一个HTML网页
1.下载 Hbuilderx 应用程序
2.新建一个写代码的文件夹
3.鼠标拖拽到工具左侧 ---项目管理器界面中
骨架标签新建的时候默认生成的那些标签meta 标签 可以设置网页上的字符集title 标签 可以设置网页网站的 标题body标签设置网页的主体内容部分
<!DOCTYPE html># 单标签，代表html文件类型<html># <html>开始标签 和</html> 结束标签, 这对称为 双标记标签 【根标签：】 <head> #头部标签 <meta charset="utf-8"> #单标签，utf-8：国际编码 可翻译中文 <title>标题</title> </head> <body> 网页的主体内容 </body> </html>文章标题 标签
h1---h6 分六级，字体依次减小的效果，每个标题都是独占一行注意：不能自己制造新标签，否则无法运行<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>我是一级标题</h1> <h2>我是二级标题</h2> <h3>我是三级标题</h3> <h4>我是四级标题</h4> <h5>我是五级标题</h5> <h6>我是六级标题</h6> </body></html>空格和回车
空格使用 ；
换行使用<br /> ；其他写法也可以实现：<br> 和<br >
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 空格使用 换行使用<br /> --> 欢迎来到 hello python的世界!!! <br />123 换行 <br />456 换行 <br />789 换行 </body></html>p标签
<p></p> 负责放文章段落，可以使文本分成若干个段落
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>一个p代表一个段落</p> <p>语义化：即代表 标签的含义，在合适的地方使用合理的标签 可以在搜索排名中更靠前</p> <p>当地时间12日20时，</p> <p>法国议会选举首轮投票结束。出口民调显示，</p> <p> 现任总统马克龙政党联盟和其主要对手左翼联盟支持率非常接近。</p></body></html>代码注释按 control+/ ：快速注释再按：control+/ ：可以取消注释
注意：软件上线前，要删除全部注释，否则会影响加载速度
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!--control+/快速注释 以下代码实现的一个段落的效果 --> <p>我是文章段落</p> </body></html>
文字相关标签
1.字体加粗
<b></b>
<strong></strong>
2.字体倾斜
<i> </i>
<em> </em>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 普通文字 --> <b> hello python</b> <br /> <strong>hello python</strong> <br /> <!-- 文字倾斜 --> <i>hello world</i> <br /> <em>hello world</em> </body></html>
3.字体添加删除线
<!-- 添加删除线 -->
<s></s>
<del></del> 推荐优先使用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 添加删除线 --> <s>2022年6月11号 原价9.98</s> <br> <del>2022年6月12号 原价9.97</del> <br> 6月13号今天：现价8.88 </body></html>
工具打开浏览器运行代码
方式1
方式2
键值对，KV对，属性名和属性值
1.添加图片
img src=" " 用法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> 插入图片步骤： <br> 1.把图片放到和代码同一个文件夹中 <br> 2.输入img 按下tab键，在str=" " 中输入图片名称即可 <br> <!-- 键值对，KV对，属性名和属性值 --> <img src="25.png" alt=""> </body></html>
2.设置图片长度和宽度
width=" " height=" "用法
<img src="25.png" width="200" height="200">
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> 插入图片步骤： <br> 1.把图片放到和代码同一个文件夹中 <br> 2.输入img 按下tab键，在str=" " 中输入图片名称即可 <br> 3.在第一个键值对后 按空格键 输入宽度和高度即可 <br> <!-- 键值对，KV对，属性名和属性值 --> <img src="25.png" width="200" > </body></html>
4.在图片上添加 鼠标悬停 操作
title用法
<img src="25.png" width="200" title="鼠标悬停 出现文字">
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> 插入图片步骤： <br> 1.把图片放到和代码同一个文件夹中 <br> 2.输入img 按下tab键，在str=" " 中输入图片名称即可 <br> 3.在第一个键值对后 按空格键 输入宽度和高度即可 <br> <!-- 键值对，KV对，属性名和属性值 --> <img src="25.png" width="200" title="鼠标悬停 出现文字"> </body></html>
5.设置 图片未正常加载的情况下会显示内容
alt="描述此张图片的信息 " 用法
1.当图片未正常加载的时候，文字才会被别人看到
2.网页阅读器读取此内容给视障用户听，提升用户体验
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="5.png" width="200" title="鼠标悬停 出现文字" alt="图片未正常加载"> </body></html>
超链接基础语法
1.打开网址
<a href=" 网址 "> 文本</a>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 超链接用法 --> <a href=";>点击我 可以百度一下</a> </body></html>
2.打开本地页面：输入文件名.扩展名
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 超链接用法 --> 步骤： 输入a回车,添加网址即可 <br> <a href="文章标题.html">点击我 可以百度一下</a> </body></html>
超链接基础语法进阶
<!-- 新窗口打开链接 -->
target="_blank"
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 新窗口打开链接 target="_blank" --> <a href="; target="_blank">点击我，跳转到新窗口打开百度</a> </body></html>
空连接
暂时不知道点击之后跳转到哪里，使用空链接占位
补充：测试工作时，如果发现程序员使用#来表达返回顶部效果时，可以提醒程序员使用动画效果实现，用户体验会更好一些
相对路径（重点）
1.同级查找：当前HTML和目标在同级目录中，语法：直接写资源名字即可
2.上级查找：当前HTML和目标在上级目录中，语法：../写资源的名字即可
3.下级查找：当前HTML和目标在下级目录中，语法：文件夹名/写资源名字即可
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="文章标题.html">点击我打开</a> <br> <!-- 打开图片文件夹下的25.png图片 --> <img src="图片/25.png" alt=""> </body> <a href="../文章标题.html">点击我打开上级的文章标题</a></html>绝对路径（重点）
目标资源在电脑中具体的位置
列表
1.无序列表 ：在<ul></ul>中嵌套<li></li>每一个li就是一个选项 -->
<u1> <li>基础班</li> <li>功能班</li> <li>自动化测试班</li> </u1>
2.有序列表：<!-- 有序列表ol 嵌套若干个li -->
<!-- 有序列表ol 嵌套若干个li --> <ol> <li>基础班</li> <li>功能班</li> <li>自动化测试班</li> </ol>布局的标签
当没有任何语义的时候，可以使用div或span进行布局，目的是后期css代码可以找到对应标签中的内容来设置样式。（语义标签是有应用场景的 如 段落，标题等）
布局标签:无任何语义，方便后期设置内容样式
<div>各标签内容独占一行</div>
<span>标签内容合并成一行</span
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div>我是div</div> <div>我是div</div> <div>我是div</div> <div>特点：多个div独占一整行空间</div> <br> <span>我是span</span> <span>我是span</span> <span>我是span</span> <span>特点：多个span在同一行显示</span> </body></html>音频标签
<audio src="音频.mp3" controls="controls"></audio>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <audio src="音频.mp3" controls="controls"></audio> </body></html>视频标签
<video src="视频.mp4" controls="controls" height="200" width="200"></video>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <video src="视频.mp4" controls="controls" height="200" width="200"></video> </body></html>音频，视频，测试点
audio 音频 video 视频
测试细节：因历史原因 导致音，视频版本兼容性低，对于测试工作来说需要测试三大主流浏览器是否能够正常运行，音频，视频。
Ie测试低版本（ie7.8.9.10.11）
测试方法：打开ie浏览器，按F12 找到仿真(必须是IE高版本才能测试低版本)
什么时候测试低版本：用户要求的情况下 再测试
表单标签
<!-- form 标签里面就是所有用户填写的表单数据 -->
<!-- method="post" 传递数据的方式，post隐式传递，get明文传递 -->
1.表单基础+密码框
type="text"普通输入框
type="password"密码框
<form action="" method="post"></form> <!-- input+tab键 type="text"普通输入框 --> 用户名：<input type="text"> <br> <!-- type="password"密码框 --> 密码框：<input type="password" >
2.单选按钮
type="radio" 单选
checkde="checked" 此属性表示 默认选中状态
性别： <input type="radio" name="xb" checked="checked" id="nan"> <label for="nan">男</label> <input type="radio" name="xb"id="nv"> <label for="nv">女</label>
测试步骤：
1.点击查看是否为单选效果
2.刷新时是否有默认选中的状态
3.点击文字是否可以进行切换
3.多选框
type="checkbox" 多选框，复选框
checked="checked" 默认选中
测试的细节：
1.刷新的时候是否有默认选中的状态
2.点击文字是否可以进行切换
一切测试要看是否满足用户需求 -->
<input type="checkbox" id="cs"><label for="cs">测试</label><input type="checkbox" id="cf"><label for="cf">吃饭</label><input type="checkbox" id="sj"><label for="sj">睡觉</label><input type="checkbox" id="dyx"><label for="dyx">打游戏</label>
4.下拉菜单
select标签嵌套若干个option标签，每个option标签就代表一个下拉选项
测试细节
1.下拉选中的内容顺序
2.默认选中的状态
默认选中的是：郑州
<select name="" id=""> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> <option value="">深圳</option> <!-- 默认选中郑州的状态 --> <option value="" selected="selected">郑州</option> </select>
5.文本域
textarea+tab键
测试的细节：
1.测试三大主流浏览器外观大小是否一致
2.提醒程序员禁用拖拽大小的功能
意见: <!-- 禁用文本域拖拽大小功能 --> <style type="text/css"> textarea{resize:none;} </style> <textarea name="" id="" cols="30" rows="10"></textarea>6.按钮
普通按钮: <!-- type="button" 普通按钮 需要js配合才能实现效果 value属性设置的是按钮身上的文字 --> <input type="button" value="按钮"> <br> 重置按钮: <!-- type="reset" 点击后让表单恢复默认值 value属性设置的是按钮身上的文字 --> <input type="reset" value="重置"> <br> 提交按钮: <!-- type="submit"点击后可以把表单提交给 指定后台处理 value属性设置是按钮上的文字 测试时 只关注数据库中的内容是否正常添加即可 --> <input type="submit" value="提交">
关于表单的用户体验提升
1.添加placeholder=" "属性，可以文本框设置提示文字如下图
用户名：<input type="text" placeholder="请输入用户名">
2.可以给第一个输入框设置一个 默认获取鼠标焦点的属性 ：autofocus 如下图所示
autofocus="autofocus"
标签： #html空格怎么表示 #css兼容性查询
