页面HTML
概念
超文本标记语言，专门用来制作网页。
结构
<!DOCTYPE html>
<html>
<!-- head部分，用来描述网页的属性 -->
<head>
<!-- 设置网页的编码 -->
<meta charset="utf-8">
<!-- 设置网页的标题 -->
<title>html</title>
</head>
<!-- 身体部分 -->
<body>
html haha
</body>
</html>
标签
标题标签
<h1>hahahah</h1>
<h2>hahahah</h2>
<h3>hahahah</h3>
<h4>hahahah</h4>
<h5>hahahah</h5>
<h6>hahahah</h6>
列表标签
无序列表
<ul>
<li>你好啊</li>
<li>扣你吉瓦</li>
<li>哈你哈塞优</li>
</ul>
有序列表
<ol>
<li>你好啊</li>
<li>扣你吉瓦</li>
<li>哈尼啊塞优</li>
</ol>
图片标签
<!-- 图片标签 -->
<!-- border 边框
width 宽度
height 高度
-->
<img src="123.png" border="10px" width="50%" height="50%" />
超链接标签
如果不想跳转就#，跳转就添加网址
<!-- 超链接-->
<a href="#">百度一下</a> <br />
<a href="https://www.baidu.com/">百度一下</a><br />
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
target的属性值
1.使用新窗口打开
4.默认当前窗口打开
锚定：从一个位置直接回到另一个指定位置
<!--锚定：从一个位置回到指定的另一个位置 -->
<a name="top">我是顶部</a>
<h2>看看看</h2>
<h2>看看看看</h2>
<h2>看看看看看</h2>
<h2>看看看看看啊</h2>
<h2>看看看卡看看</h2>
<a href="#top">回顶部</a>
input标签
普通文本框：<input type="text" /><br />
密码：<input type="password"/><br />
数字值：<input type="number" /><br />
日历：<input type="week"/><br />
日期：<input type="date" /><br />
单选框：<input type="radio" /><br />
多选框：<input type="checkbox"/>吃饭<br />
提交按钮：把用户在浏览器输入的数据，提交给后端的Java程序处理
<input type="button" value="点我一下" />
提交按钮：把用户在浏览器输入的数据，提交给后端的Java程序处理
<input type="submit" value="提交数据" />
表格标签
<!-- 表格标签 -->
<!--
cellspacing="0px" 单元格的距离设置
<th>是表头效果:加粗居中
合并单元格：
合并行/行合并：rowspan
合并列/列合并：colspan
-->
<table border="1px" bgcolor="pink" width="500px" cellspacing="0">
<h2>流量调查表</h2>
<tr>
<th>总页面流量</th>
<th>共计来访</th>
<th>会员</th>
<th>游客</th>
</tr>
<tr>
<td colspan="2">221</td>
<td>223</td>
<td>224</td>
</tr>
<tr>
<td >333</td>
<td>334</td>
<td rowspan="2">335</td>
<td>336</td>
</tr>
<tr>
<td>444</td>
<td>445</td>
<td>447</td>
</tr>
<tr>
<td>555</td>
<td colspan="3">556</td>
</tr>
</table>
代码效果：
表单标签
- 表单标签
1.要求：必须使用form标签+必须要写name属性+必须要有提交按钮
2.效果：实现了数据提交，数据都在地址栏进行了拼接，多组数据使用&连接
3.数据提交方式：属性名+属性值
属性名：是网页上name属性的值，属性值是用户在浏览器中输入的数据
4.数据提交方式：get和post
get方式提交：在地址栏拼接数据，可以方便查看数据，但是不安全，长度受限
post方式提交：安全，数据大小不受限，不好找数据
5.form标签的属性：
method属性用来指定数据提交方式，默认是get
action属性用来指定数据提交给哪段Java程序来处理
<form method="post" action="#">
<h1>注册表单</h1>
<table bgcolor="pink" border="1px" width="500px" cellspacing="0">
<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="like" value="lq" />篮球
<input type="checkbox" name="like" value="zq" />足球
<input type="checkbox" name="like"/value="tq">台球 </td> </tr> <tr>
<td>城市：</td>
<td>
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="2">广州</option>
<option value="2">深圳</option>
</select>
</td>
</tr>
<tr>
<td>头像：</td>
<td>
<input type="file" name="path" />
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text" />
<img src="123.png" width="60px" height="20px" />
<button>点击换一张</button>
</td>
</tr>
<tr>
<td>自我描述</td>
<td>
<textarea>请在这里写。。。</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
其他标签
//块级
<div>大家好</div>
<p> Nice</p>
//行级
<span> hello</span>
网页中加入音频和视频
<!-- 在网页中加入音频 -->
<audio controls="controls">
<source src="xx.mp3"></source>
</audio>
<!-- 加入视频 -->
<video controls="controls">
<source src="45.mp4"></source>
</video>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
