静态页面HTML
概念
- HTML（Hyper Text Markup Language）超文本标记语言
- 是做网站页面的最基础的开发语言
- 网页中的元素类型可以超过文本内容
- 标记语言: HTML中提供了大量标记/标签,开始标签和结束标签
入门案例
<!DOCTYPE html>
<!--是文档声明行,用来声明这是一个HTML文件 -->
<html>
<!-- HTML文件里的根元素-->
<head>
<!-- 网页中的头部分,优先于body加载,用来设置网页的属性-->
<meta charset="utf-8">
<!-- 设置网页的编码 -->
<title>你好,HTML</title>
<!-- 设置网页的标题 -->
</head>
<body>
<!-- 网页的体部分,放展示的数据 -->
hell o html~ hello html~ <br></br>
<!-- br标签是换行
表示一个空格
-->
hello html~ hello html~ hello html~ hello html~
</body>
</html>
二、HTML中常见的标签
1.标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试 标题标签</title>
</head>
<body>
<!-- 1.标题标签 h1大~h6小 自动换行 -->
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
</body>
</html>
效果
2.列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试 列表标签</title>
</head>
<body>
<!-- 2.列表标签
有序列表orderlist: ol是定义列表 li定义列表项
无序列表unorderlist: ul是定义列表 li定义列表项
-->
<ul>
<li>vue框架学习</li>
<li>Javascript高级编程</li>
<li>React全家桶</li>
</ul>
<ol>
<li>vue框架学习</li>
<li>Javascript高级编程</li>
<li>React全家桶</li>
</ol>
</body>
</html>
效果
3.图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试 图片标签</title>
</head>
<body>
<!-- 3.图片标签
src属性用来指定图片的位置(先保证图片资源和网页在同一级目录)
width属性用来指定图片的宽度,单位是像素px
height属性用来指定图片的高度,单位是百分比
-->
<img src="images/cat.jpg" width="300px" height="50%" />
</body>
</html>
效果
4.超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试 超链接标签</title>
</head>
<body>
<!--1.超链接标签-->
<!-- 1.超链接标签
href属性表示可以被点击
target属性表示用什么方式打开
默认值是_self当前窗口,_blank是在新窗口打开
-->
<a href="http://www.baidu.com/" target="_blank">百度一下</a>
<!-- 锚定:回到固定位置 -->
<a name="top">我是顶部</a>
<h1>你好</h1>
<h1>你好</h1>
<h1>你好</h1>
<h1>你好</h1>
<a href="#top">点我,回去顶部</a>
<!--通过#获取name属性的值-->
</body>
</html>
效果
5.输入框标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试 输入框标签</title>
</head>
<body>
<!-- 2.input输入框 -->
密码输入框:<input type="password" />
普通输入框:<input type="text" />
数字输入框:<input type="number" />
日历输入框:<input type="date" />
日历输入框:<input type="week" />
单选框:<input type="radio" />男
多选框:<input type="checkbox" />Marry
普通按钮: 没有提交数据的功能,只能点点<input type="button" value="注册" />
<button>登录</button>
提交按钮:把用户在浏览器输入的数据提交给后端的java程序处理<input type="submit" />
<button type="submit">提交</button>
</body>
</html>
效果
6.表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试 表格标签</title>
</head>
<body>
<!-- 1.准备表格
结构:table里包含行tr,tr里包含列td
属性:border设置边框,width宽度,bgcolor背景色
cellspacing单元格的距离
colspan是列合并:把多个列合并成一个大列,值是指合并几个
rowspan是行合并:把多个行合并成一个大行,值是指合并几个
-->
<table border="1px" width="500px" cellspacing="0px" bgcolor="yellowpopur">
<tr>
<td colspan="2">11</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</body>
</html>
效果
练习表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>各种标签</title>
</head>
<body>
<!-- 练习1
标签：table是表格，tr是行，td是列，th是表头，h1是标题
属性：border是边框，bgcolor是背景色，cellspacing是单元格间隔
colspan是列合并，column列 -->
<h1>流量调查表</h1>
<table border="1px" bgcolor="chartreuse" cellspacing="0px">
<tr>
<th>总页面流量</th>
<th>攻击来访</th>
<th>会员</th>
<th>游客</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>平均每人浏览</td>
<td colspan="3">1.58</td>
</tr>
</table>
</body>
</html>
效果
7.表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试 表单</title>
</head>
<body>
<!-- 表单标签，用来提交数据
标签：form表单，table表格，tr行，td列，th表头，h2标题
select是下拉框，option是下拉选项，textarea是文本域
属性：type="file"是浏览文件，type="email"是邮箱，align是元素的位置
提交数据的要求：必须用form标签 + 必须有submit按钮 + 必须有name属性
提交的数据都在地址栏：被拼接在?之后
file:///E:/webDaNei/day01/test6.html?user=jack&pwd=123
name属性的值=浏览器上输入的值
4.name用来手机用户从浏览器填的数据，value用来设置提交的值
5.数据提交的方式！！！：get和post
get方式：默认的就是get方式，数据拼接在地址栏中，缺点是不安全，长度受限
post方式：好处是安全，数据大小没有要求，但是数据不在地址栏展示了
6.method属性用来设置数据的提交方式，默认是get
action属性用来指定是哪段java程序来处理这次提交的数据
-->
<form action="#" method="get">
<table bgcolor="pink" border="2px" cellsaping="0px" align="center">
<tr>
<th colspan="2">
<h2>注册表单</h2>
</th>
</tr>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="user">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd">
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" name="repwd">
</td>
</tr>
<tr>
<td>昵称：</td>
<td>
<input type="text" name="nick">
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="email" name="mail">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="1">篮球
<input type="checkbox" name="hobby" value="2">足球
<input type="checkbox" name="hobby" value="3">乒乓球
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<!-- select是定义下拉框，option是定义下拉选项 -->
<select name="city" id="">
<option value="">--请选择--</option>
<option value="1">上海</option>
<option value="2">广东</option>
<option value="3">深圳</option>
<option value="4">西安</option>
</select>
</td>
</tr>
<tr>
<td>头像：</td>
<td>
<!-- file表示上传文件 -->
<input type="file">
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text">
<img src="images/a.jpg" alt="" width="80px" height="35px">
<button>点我换一张</button>
</td>
<tr>
<td>自我描述：</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</tr>
</table>
</form>
</body>
</html>
效果
提交之后：
扫一扫
800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
