学习目标:
- 能够说出常见的html标签(10+)的作用
- 项目(登录)测试
一、html介绍
1、
html: 超文本标记语言,由一套标记标签组成
标签:
- 单标签: <标签名 />
- 双标签: <标签名></ 标签名>
- 属性: 描述某一特征,示例: <a 属性名=“属性值”>
2、html骨架标签
- html:根标签,所有的内容都应该放到html标签中
- head:头部标签
- body:身体标签(代码编写区域)
3、注释
- 作⽤:描述的内容不会被浏览器执⾏
- 说明:解析程序给程序员看
- 快捷键:ctrl+/
- 测试点:前端⻚⾯上线之前检查注释描述或去除注释
4、标签
①标题: h1~h6
说明:h1最⼤,h6最⼩
示例:
<h1>我是h1</h1>
<h6>我是h6</h6>
②段落:p
特点:语义化、独占⼀块(换⾏)
示例:
<p>我是段落</p>
③超链接: a
说明: 点击⽂本跳转到指定⻚⾯
语法:
<a href=“http://www.baidu.com”>文本</a>
属性:
- href: 跳转的地址或⽂件
- target:打开窗⼝模式。新窗口:target="_blank"
④图片:
说明:在⻚⾯中插⼊⼀张图⽚
测试点:必须有title属性(悬停和未加载显示)
示例
<!-
图像标签:img
属性:
src:图⽚路径
title:悬停显示⽂字
width:宽100px px:像素
height:⾼
alt:图⽚未加载显示-->
<img src="011.jpg" title="希望在⽥野" width="100px" height="200px"
alt="此处有⼀张⽥野照⽚"/>
⑤空格与换⾏
空格: &->shift+7
换⾏: < br />
⑥布局标签
布局:设置⻚⾯布局,便于排版列表
- ⼤盒⼦:div、独占⼀⾏
- ⼩盒⼦:span、⼀⾏可以放多个
⑦列表
- script:js标签
- style:css标签
- link:外部加载css标签
⑧input标签
⽂本框:<input type="text" />
密码框:<inpt type="password" />
单选按钮:
复选框:
按钮:
- 普通:type=button
- 提交:type=submit
- 重置: type=rese
<!--
按钮测试点:统⼀使⽤value进⾏赋值
提示:普通按钮默认没有执⾏效果,需要配合Js来实现。
-->
⑨form标签
作用: 提交页面输入数据到指定页面或后台。
<!-
form
作⽤:将⻚⾯输⼊的数据提交到后台或指定⻚⾯
属性:
action: 指定将数据提交到那个⻚⾯。
method:提交参数的⽅法(get、post)
get:查询使⽤
1、参数url明⽂显示
2、提交速度快
3、提交参数有⻓度限制
post:提交数据、登录、注册
1、⾮明⽂显示
2、提交速度慢
3、提交参数的⻓度⽆限制
-->
<form action="10-接受数据.html" method="get">
⽤户名:<input type="text" name="username"/>
<br />
密码框:<input type="password" name="password"/>
<br />
<!-
单选效果:
1、相同⼀组的radio才能做单选。
2、设置相同(组名)name属性值为⼀组。
-->
性别:
<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="submit" />
<input type="reset" />
<input type="button" value="点我试试"/>
</form>