HTML基础
html的骨架标签
骨架标签：新建的时候可以生成的那些标签
meta 标签可以设置网页的字符集（utf-8）
title 标签设置网页的标题
body 标签设置的主题内容部分
文章的标题标签
h1到h6分六级，一次减小效果，每个标题都是独占一行空间
例如：
注意：不能自己造标签，因为无法正常运行
空格和回车
空格和回车在代码红直接使用不准确；
必须使用代码来实现：
一个空格：  ；
一个换行、一个回车：
注意：html代码应为历史原因，导致语法较为松散：测试细节的时候，以浏览器最终运行效果为准
p标签和标签的语义化
p就是负责放文章段落的；
语义化:在核实的地方使用合理的标签，就叫做满足标签的语义化；可以在搜索引擎排名中更靠前！点击率就会更高，带来更高的收益
代码注释
程序员给自己代码的提醒文字，浏览器不会直接显示；
快捷键： ctrl+？ 再按一次会取消注释
测试要注意：项目上线之前，要求程序员删除注释的内容，目的是为了加快网页的加载速度
例如：
只有查看源代码才可以看到
文字相关标签
b标签和strong标签都都可以代表加粗，后者代表特别强调的语义；
i和em标签都可以实现让字体倾斜，但后者代表一般强调语义；
s标签和del标签都可以实现删除线的效果，后者即将替代前者，w3c明确说了，将来s标签要被del标签，所新项目建议都用del标签最新写法来表示删除线的效果
img图片标签
键值对、kv对、属性名和属性值
例如：身高 = "180" 年龄 = "18" 体重 = ”120“
步骤：
1：先把图片准备好，放在与当前html文件的目录下
2：src代表资源，他后面的值应该写想要加载那张图片的名字
例如：<img src="1.png" alt="" />
3：width代表宽度（横向距离），height代表高度（纵向距离）；注意：宽或高只设置一个属性，则另外一个会按照原图的比例去进行缩放显示；如果宽和高都不设置，图片会按照原本大小去显示
4：alt属性，（1）在当图片未正常加载出来的时候，文字才会被别人看到 （2）网页阅读器可以读取此内容（为方便视障人员，写此张图片的描述信息）
总结：<img src="想要加载的图片名字” width="宽度” height="高度” title=”鼠标悬停的提示文字”alt="未加载图片时候的提示文字;可以读给网页阅读器听”/>
超链接的语法
1：超链接：点击之后可以实现页面的跳转，herf属性对应的属性值应该设置成带有https：//，才可以打开线上的网站
例如：点击我可以打开百度官网
2：如果想打开本地（自己的电脑）的页面，只需要把目标文件和当前文件放在同一个目录下在href属性中写目标文件的名字即可
例如：点击我可以打开本地的页面
3：空链接：暂时不知道点击之后会跳转到哪里，使用空连接来占位
例如：点击喔可以打开老王的页面
4:新窗口打开链接：默认超链接都是在当前的窗口打开，如果想在新的窗口打开，需要添加target属性
5:测试工作的时候，如果发现程序员使用#来表达返回顶部的效果，一定要提示程序员，要用动画效果来实现，用户体验感才更好
路径
路径：写想要找到的资源位置
1.相对路径：相对于当前html文件去找其他资源的方式
（1）同级查找：当前html和目标在同一级目录中；语法直接写资源的名字即可
例如：<img src = "ti.gif" "alt = "" />
（2）上级查找：当前html和目标在上级目录中；语法：../写资源的名字
例如：
这是相对路径的上级查找的语法
以此类推 ../../加资源名字，返回上两级查找资源
（3）下级查找：当前html和目标在下级目录中；语法：文件夹名字/写资源的名字
例如：<img src = "tu/ti.gif" "alt = "" />
2：绝对路径：资源在电脑中的具体位置（复制电脑中的具体位置时，别忘了加上这个资源的具体位置，以及斜杠\）
例如：
注意：在前端的语法中，绝对路径不推荐写！！！！
只要是寻找资源，就可以利用路径的语法规则来实现！
列表
无序列表：ul嵌套若干li，每一个li就是一个选项
例如：
<ul>
<li>周杰伦</li>
<li>陈奕迅</li>
<li>陶喆</li>
<li>林俊杰</li>
</ul>
有序列表：ol嵌套若干li，每个li就是一个选项
例如：
<ol>
<li>周杰伦</li>
<li>林俊杰</li>
<li>蔡徐坤</li>
<li>陶喆</li>
</ol>
布局标签
布局标签：当没有任何语义的时候，就可以使用div或span来进行内容的包裹
目的是后期css代码可以找到对应标签中的内容来设置样式
div独占一整行空间，称为大盒子
span：一行可以可以放置多个，称之为小盒子
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<!-- div独占一整行空间，称为大盒子 -->
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<!-- span：一行可以可以放置多个，称之为小盒子 -->
音视频标签
因为历史发展原因，导致音、视频标签兼容性很差，对于测试工作来讲，需要测试三大主流浏览器是否能正常运行音、视频
标签：
<video src="普通朋友.mp4" controls = "controls">
</video>
音视频测试点
测试细节：因为历史发展原因，导致音、视频标签兼容性很差，对于测试工作来讲，需要测试三大主流浏览器是否能正常运行音、视频
ie测试低版本（ie7、8、9、10、11）
测试方法：打开ie，点击f12，找到仿真（必须是ie的高版本才能测试ie低版本）
什么时候测试低版本：用户要求再测试！如果不说就不测，这就是行业规矩！
浙公网安备 33010602011771号