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