HTML
HTML:负责网页架构
CSS:负责网页的样式，美化
JS:负责网页的行为
HTML标签
单标签<html>
双标签<b> 内容 </b>
-----------------------------
骨架标签
一. HTML介绍
1.1前端三大核心
- html：超文本标记语言，由一套标记标签组成
- 标签：
- 单标签：<标签名 />
- 双标签：<标签名></标签名>
- 属性：描述某一特征 示例：<a 属性名=“属性值”>
1.2html骨架标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>传智播客黑马程序员</title>
</head>
<body>
-------------->
代码编写区域
-------------->
</body>
</html>
1.html:根标签
2.head:头部标签
3.body:身体标签（代码编写区域）
1.3注释
-
作用：描述的内容不会被浏览器执行
-
说明：解析给程序员看
-
快捷键ctrl+/
-
测试点：前端页面上线之前检查注释是否全部去除
1.4标签
-
标题：h1~h6
-
h1最大，h6最小
-
示例：
1.<h1>我是h1</h1> 2.<h6>我是h6</h6>
-
-
段落: P
-
特点：语义化，独占一块
-
示例：
1 <P> 我是段落 </P>
-
超链接标签
-
说明：超链接是通过标签进行定义的
-
示例：
<body> <a href="http://www.baidu.com"target="_blank">百度</a> </body> -
属性：
- href：跳转地址
- target：新窗口打开
图片标签
- 说明：在页面中加载一张图片
- 测试点：必须有title属性（悬停和未加载显示）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
图片标签：img
属性：
src：图片路径
测试点：必须有title属性（悬停和未加载显示）
-->
<img src="logo.jpg" title="希望在田野" width="100px" height="" alt="此处有一张田野照片"/>
<!--
src：图片路径
title:悬停显示文字
width，height 高和宽只写一个属性，等比缩放
alt:当图片未加载出来时就会出现 alt="此处有一张田野照片" 的文字
-->
</body>
</html>
扩展
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
需求：加载img/02.jpg
路径：
1.相对路径：“相对当前执行文件所在位置作为起点 ”
上一级：../
同级：./
2.绝对路径：不推荐
-->
<img src="../img/02.jpg"/>
<img src="../lx/01.jpg"/>
<img src="./01.jpg"/>
</body>
</html>
空格与换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
1.空格： ；一个 代表一个空格
2.换行：<br />
-->
键盘 敲烂，月薪 过万！
键盘敲烂，<br />月薪过万！
</body>
</html>
布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d1 {background: red;}
.d1 {background: green;}
p {background: yellow;}
.s1 {background: blue;}
</style>
</head>
<body>
<!--
1.大盒子- div布局 ， 独占一行
<div> div1 </div>
<div> div2 </div>
<div> div3 </div>
2.小盒子- span布局 一行可以多个
-->
<div class="d1">大盒子1</div><div class="d2">大盒子2</div><div class="d3">大盒子3</div>
<span class="d1">小盒子1</span><span class="d2">小盒子2</span><span class="d3">小盒子3</span>
<p>黑马软件<span class="s1">测试</span></p>
</body>
</html>
列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
列表标签： <li></li>
<oi>1.有序列表标签 </oi>
<ui>无序列表标签
-->
<ol>
<li>甘肃</li>
<li>武汉</li>
<li>上海</li>
<li>深圳</li>
<li>北京</li>
</ol><br />
<ul>
<li>河北</li>
<li>厦门</li>
<li>珠海</li>
<li>广州</li>
<li>香港</li>
</ul>
</body>
</html>
表单标签
单选按钮：<input type="radio" name="one"/>
<!--
单选效果：
1.相同一组的radio才能做单选
2.设置相同（组名）name属性值为一组，当name属性值 相同 才能单独选择
-->
如： 男<input type="radio" name="one"/>
女<input type="radio" name="one"/>
保密<input type="radio" name="one"/>
复选框：<input type="checkbox"/>
用户名：<input type="text"/>
密码：<input type="password"/>
提交：<input type="submit"/>
重置：<input type="reset"/>
普通按钮：<input type="button" value="点我试试"/> //内部必须有值（value）才能显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
用户名：<input type="text"/>
<br />
密码：<input type="password"/>
<br />
<!--
单选效果：
1.相同一组的radio才能做单选
2.设置相同（组名）name属性值为一组
-->
性别：男<input type="radio" name="one"/>
女<input type="radio" name="one"/>
保密<input type="radio" name="one"/>
<br />
您的爱好：赚钱：<input type="checkbox"/>
吃饭：<input type="checkbox"/>
睡觉：<input type="checkbox"/>
<br />
<input type="submit"/>
<input type="reset"/>
<input type="button" value="点我试试"/>
<br />
<input type="file" />
</body>
</html>
- 效果
form标签
- 提交页面输入的数据到指定后台
- 内容必须写在 内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
form:
作用：将页面输入的数据提交到后台或指定页面
属性：
action：指定将数据提交到哪个页面
method:提交参数的方法（get、post）
get：（查询使用）
1.参数在url中明文显示
2.提交速度快
3.提交参数有长度限制.
post:（提交数据、登陆、注册、敏感数据）
1.非铭文显示
2.提交速度慢
3.提交参数的长度无限制
-->
<form action="10-接收数据.html" method="post">
用户名：<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"/>
保密<input type="radio" name="one"/>
<br />
您的爱好：赚钱：<input type="checkbox"/>
吃饭：<input type="checkbox"/>
睡觉：<input type="checkbox"/>
<br />
<input type="submit"/>
<input type="reset"/>
<input type="button" value="点我试试" οnclick="alert('点我干啥')"/ >
<!--
普通按钮：
默认没有执行效果，需要配合JS来实现
-->
</form>
<br />
</body>
</html>
按钮测试点
1.加value值，统一内容
2.普通按钮： <input type="button" value="点我试试" οnclick="alert('点我干啥')"/ >
<!--
普通按钮：
默认没有执行效果，需要配合JS来实现
-->
303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
