html

什么是html

HTMLTestRunner不生成测试报告_加载


骨架标签

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

1、⻚⾯的内容必须在body编写
2、html为根标签,所有的标签必须在根标签中。
3、head标签为头部标签,⼀般放title和搜索相关知识。

测试点:前端⻚⾯注释,上线(项⽬发布)之前,必须检查或删除。

<!--
 国际通⽤快捷键:ctrl+/
 作⽤:描述信息给程序员看,不要被浏览器执⾏。
-->

标题标签

作⽤:⽂章标题
提示:默认的标题标签是以下⼏个,也可以通过css来调整任何标签的字体大小

<!--
 标题标签:h1~h6 h1最⼤
-->
 <h1>我是h1</h1>
 <h2>我是h2</h2>
 <h3>我是h3</h3>
 <h4>我是h4</h4>
 <h5>我是h5</h5>
 <h6>我是h6</h6>

段落标签

作⽤:标识⼀个段落

<!--
 段落标签:p
 特点:
 1、独占⼀⾏
 2、做换⾏使⽤
 3、语义化(浏览器)
-->
 <p>我是段落3</p>
 <p>我是段落4</p>

超链接标签

作⽤:点击⽂本跳转到指定⻚⾯。

<!--
 超连接标签:a
 作⽤:点击⽂本跳转到指定⻚⾯。
 属性:
 href:点击⽂本跳转链接地址
 target:值为_blank时,在新窗⼝打开。
-->
 <a href="http://www.baidu.com" target="_blank">点我去百度</a>
 <a href="baidu.html">点我打开百度</a>

图⽚标签

作⽤:在⻚⾯中插⼊图⽚

<!--
 图⽚标签:img
 作⽤:插⼊图⽚
 属性:
 src:加载图⽚的路径
 width:宽
 height:⾼
 alt:图⽚未加载时,显示信息。
 title:图⽚加载,⿏标悬停显示信息。图⽚未加载,显示信息(优先级低于alt)
 测试点:图⽚必须有title属性(原因:体验感好。)
-->
 <img src="02.jpg" width="200px" height="300px" alt="此处有匹帅⻢!"
title="名字:⼩帅"/>

路径

重点:相对路径:相对当前执⾏⽂件所在位置来说

HTMLTestRunner不生成测试报告_h5_02

路径: 
 1、同级:./
 2、上⼀级:../
<img src="../img/02.jpg" width="200px" height="300px" alt="此处有匹帅⻢!"
title="名字:⼩帅"/>

换⾏与空格

换⾏:

空格:  

布局标签

HTMLTestRunner不生成测试报告_前端_03

<!--
 div:⼤盒⼦,独占⼀⾏。
 span:⼩盒⼦,⼀⾏放多个
-->

input标签

HTMLTestRunner不生成测试报告_html_04

<!--
 input:变形⾦刚 type属性值不同
 text:⽂本框
 password:密码框
 radio:单选
 如何做到单选效果:相同⼀组才能单选,相同的name属性值为⼀组。
 checkbox:多选框
 button:普通按钮
-->
⽤户名:
 <input type="text" />
 <br />
 密码:
 <input type="password" />
 <br />
 性别:
 <input type="radio" name="one"/> 男
 <input type="radio" name="one"/> ⼥
 <br />
 您的爱好:
 <input type="checkbox" /> 测试
 <input type="checkbox" /> 吃饭
 <input type="checkbox" /> 睡觉
 <input type="checkbox" /> 打⾖⾖
 
 <br />
 <input type="button" value="点我试试"/>
来⾃:
 <select>
 <option>北京</option>
 <option>上海</option>
 <option>⼴州</option>
 <option>深圳</option>
 </select>
 
 <br />
 <!--
 cols:列(默认的宽度)
 rows:⾏(默认的⾼)
 -->
 意⻅:
 <textarea cols="1" rows="1"></textarea>

form标签

HTMLTestRunner不生成测试报告_html_05

<form action="提交⻚⾯.html" method="get">
</form>

扩展:抓包

HTMLTestRunner不生成测试报告_html_06


列表标签

<!--
 列表标签:li
 有序:
 ol>li
 ⽆序:
 ul>li
-->
 <ol>
 <li>⾹蕉</li>
 <li>橘⼦</li>
 </ol>
 <ul>
 <li>北京</li>
 <li>上海</li>
 </ul>

常⽤标签

1、<script>js语句</script> 2、<style>css样式</style> 3、<link src=“http://www.xxx.xxx/xx.css”/>`

总结

知道常⻅HTML标签的作⽤

HTMLTestRunner不生成测试报告_加载_07