HTML
HTML介绍
-
web前端三大核心技术
- HTML 负责网页的架构
- CSS 负责网页的样式、美化
- JS 负责网页的行为
-
描述网页的语言
-
Html标签
- 单标签
- 双标签
<b>内容</b> - 属性格式 属性名="属性值"
<a href="http://www.jd.com">京东</a>
html
<!DOCTYPE html> <!--声明这个文档是html-->
<html> <!--根标签-->
<!--国际注释快捷键（ctrl+/）-->
<head>
<meta charest="UTF-8">
<title>第一个网页</title>
</head>
<body>
第一个网站
</body>
</html>常用标签
-
标题标签
html<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> -
段落标签
html<p></p> -
超链接标签(target用于在新窗口打开)
html<a href="网址" target="_blank">百度</a> -
图片标签
图片路径请了解绝对路径和相对路径
- 相对路径：相对于当前执行文件位置来说
- 上一级：.../
- 同级：./
- 绝对路径：不推荐
如果只写一个高或者宽则会等比例缩放
alt(图片未加载)
title（鼠标悬浮在图片上的提示信息）
对于我们测试人员来说，必须有title
html<img src="logo.jpg" width="200px" height="200px" title="标签名" alt="此处有一张图片"> - 相对路径：相对于当前执行文件位置来说
-
换行和空格
<br/>换行 //<br>与<br/>的区别在于html的版本不同<br />是XHTML1.1的写法，也是XML写法，在Html5中，都是被承认的，在Html5的代码规范上为<br>不加斜杠，在w3school中<br />为规范。 空格 -
布局标签
- 说明：页面布局使用，常用（div和span）
- 大盒子：div 独占一行
- 小盒子：span一行放多个
- 说明：页面布局使用，常用（div和span）
-
列表标签
html<!--列表标签--> <li></li> <!--有序--> <ol></ol> <!--无序--> <ul></ul> -
表单标签
html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- action:将指定数据提交给那个页面 method:提交方法 1、get:明文提交，所有参数在url可见，速度快，提交内容有长度限制 2、post:非明文提交，速度慢，无长度限制 --> <from action="1.html" method="post"><!--1.html这个网页来接受数据--> <!--用户名,输入类型是文本--> 用户名：<input type="text" name="name"/> <br/> <!--密码，--> 密码：<input type="password" name="password"/> <br/> <!--单选框--> 性别： <input type="radio"/>男 <input type="radio"/>女 <!--复选框，多选--> 爱好： <input type="checkbox"/>苹果 <input type="checkbox"/>梨子 <input type="checkbox"/>香蕉 <!--提交按钮---> <input type="submit"/> <!--重置按钮--> <input type="reset"/> <!--在按钮上显示文字--> <input type="button",value="点我"?/> </from> </body> </html>