cgb2110-day07

文章目录

- 一,HTML
- - --1,概述
  - --2,入门案例
- 二,HTML的常用标签
- - --1,标题 & 列表 & 图片标签
  - --2,a & input 标签
  - --3,table 标签
- 三,form 表单标签
- - --1,概述
  - --2,测试
  - --3,添加name,提交数据

一,HTML

–1,概述

是超文本标记语言,专门用来完成网页的制作
是由大量的标记/标签组成的,<???>
结构: 文档声明行, 头部分使用head标签, 体部分使用body标签(控制浏览器要展示的内容)

–2,入门案例

<!DOCTYPE html>  <!-- 文档声明行,表示这是一个HTML网页 -->
<html>    <!-- HTML网页文件里的,根元素/标签,成对儿出现的标签 --><head> <!-- 网页的头部分,用来描述网页的信息  --><meta charset="utf-8">  <!-- 网页要使用的编码,防止中文乱码 --><title>hello</title> <!-- 网页的标题 --></head><body><!-- 网页的体部分,用来控制网页中即将展示的数据  -->test html~~ 你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好 <br />test html~~ 你好test html~~ 你好test html~~ 你好<!-- br是HTML中的换行符,&nbsp;是HTML里的空格 --></body>
</html>

二,HTML的常用标签

–1,标题 & 列表 & 图片标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 常用标签</title></head><body>	<!-- 3.图片标签 总结:src属性用来指定图片的路径,width属性用来指定图片的宽度,单位是像素px,height属性用来指定图片的高度--><img src="3.jpg" width="200px" height="20%"/><img src="3.jpg" width="200px" height="20%"/><img src="3.jpg" width="200px" height="20%"/><!-- 2.列表标签  有序:ol li  无序:ul li 有序:ol li ,ol用来定义有序列表orderlist ,li是列表项无序:ul li ,ul用来定义无序列表unorderlist ,li是列表项--><ol> <li>我是1号元素</li><li>我是1号元素</li><li>我是1号元素</li></ol><ul> <li>我是2号元素</li><li>我是2号元素</li><li>我是2号元素</li></ul><!-- 1.标题标签 h1大~h6小,自动换行,字体加粗. --><h1>我是1号标题</h1><h2>我是1号标题</h2><h3>我是1号标题</h3><h4>我是1号标题</h4><h5>我是1号标题</h5><h6>我是1号标题</h6></body>
</html>

–2,a & input 标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 常用标签</title></head><body><!-- 4.input标签:输入框 -->普通输入框:<input type="text"/> <br />密码输入框:<input type="password"/> <br />日期输入框:<input type="date"/> <br />星期输入框:<input type="week"/> <br />数字输入框:<input type="number"/> <br />邮箱输入框:<input type="email"/> <br />普通按钮:<input type="button" value="保存"/><button>保存</button><br />提交按钮:可以提交数据,指把前端的数据提交给后端<input type="submit" value="提交"/><button type="submit">提交</button><br />单选框:<input type="radio" />男   <br />多选框:<input type="checkbox" />杨幂<br /><br /><br /><!-- 1.超链接标签href属性用来指定跳转路径,target属性用来指定打开方式(默认是当前窗口_self)--><a href="http://www.baidu.com" target="_blank">百度一下</a><!-- 2.锚定:回到指定的位置,通过#获取name属性的值 --><a name="top">我是顶部</a><h3>北京富婆通讯录</h3><h3>北京富婆通讯录</h3><h3>北京富婆通讯录</h3><h3>北京富婆通讯录</h3><h3>北京富婆通讯录</h3><h3>北京富婆通讯录</h3><h3>北京富婆通讯录</h3><h3>北京富婆通讯录</h3><h3>北京富婆通讯录</h3><h3>北京富婆通讯录</h3><h3>北京富婆通讯录</h3><h3>北京富婆通讯录</h3><a href="#top">点我,回到顶部</a><!-- 3.实现图片的点击跳转 --><a href="http://www.baidu.com"><img src="3.jpg" width="100px" height="80px"/></a></body>
</html>

–3,table 标签

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 常用标签</title></head><body><!-- 2.练习表格: th:表头标签(加粗.居中) ,colspan:列合并, rowspan:合并行--><table border="1px" bgcolor="yellow" cellspacing="0"><tr><th>总页面流量</th><th>共计来访</th><th>会员</th><th>游客</th></tr><tr><td>平均每人浏览</td><td colspan="3">1.58</td></tr></table><!-- 1.表格标签总结:table是向网页中添加表格,tr是表格里的行,td是行里的列元素属性:border用来设置边框,width设置宽度,height高度,cellspacing单元格的间距 ,bgcolor是背景色--><table border="2px" width="500px" height="100px"cellspacing="0" bgcolor="pink"><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>

三,form 表单标签

–1,概述

只有form标签可以提交数据. 表单标签form比表格标签多了提交功能.

–2,测试

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 常用标签</title></head><body><form><h1>注册表单</h1><table width="500px" border="1px"bgcolor="lightgray" cellspacing="0"><tr><td>用户名:</td><td><input type="text" /></td></tr><tr><td>密码:</td><td><input type="password" /></td></tr><tr><td>确认密码:</td><td><input type="password" /></td></tr><tr><td>昵称:</td><td><input type="text" /></td></tr><tr><td>邮箱:</td><td><input type="email" /></td></tr><tr><td>性别:</td><td><input type="radio" />男<input type="radio" />女</td></tr><tr><td>爱好:</td><td><input type="checkbox" />篮球<input type="checkbox" />足球<input type="checkbox" />乒乓球</td></tr><tr><td>城市:</td><td><!-- 下拉框 select option --><select><option>请选择</option><option>北京</option><option>上海</option></select></td></tr><tr><td>头像:</td><td><input type="file" /></td></tr><tr><td>验证码:</td><td><input type="text" /><img src="a.png" /><button>点我换一张</button></td></tr><tr><td>自我描述:</td><td><textarea>这是文本域~</textarea></td></tr><tr><td colspan="2"><button type="submit">提交</button><button type="reset">重置</button></td></tr></table></form></body>
</html>

–3,添加name,提交数据

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 常用标签</title></head><body><!-- 1.表单标签用来提交数据: a,要求:必须用表单标签 + 必须有提交按钮 + 必须有name属性b,提交的数据的格式:http://127.0.0.1:8848/cgb2110/test05.html?user=jack&pwd=123c,?user=jack&pwd=123这些是数据,都别拼接在?之后user和pwd是网页上name属性的值 ,jack和123是用户在网页中输入的数据d,提交数据的两种方式? method属性, get 和 postget方式:是method的默认值,把数据不在地址栏展示了,不安全,数据大小受限.post方式: method="post"即将使用post方式来提交数据,解决了get的问题.e,action属性.指定这次的数据交给谁处理呢?可以写一个路径是一个程序的访问方式--><form method="post" action="#"><h1>注册表单</h1><table width="500px" border="1px"bgcolor="lightgray" 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"/>男<input type="radio" name="sex"/>女</td></tr><tr><td>爱好:</td><td><input type="checkbox" name="like"/>篮球<input type="checkbox" name="like"/>足球<input type="checkbox" name="like"/>乒乓球</td></tr><tr><td>城市:</td><td><!-- 下拉框 select option --><select name="city"><option>请选择</option><option>北京</option><option>上海</option></select></td></tr><tr><td>头像:</td><td><input type="file" /></td></tr><tr><td>验证码:</td><td><input type="text" /><img src="a.png" /><button>点我换一张</button></td></tr><tr><td>自我描述:</td><td><textarea>这是文本域~</textarea></td></tr><tr><td colspan="2"><button type="submit">提交</button><button type="reset">重置</button></td></tr></table></form></body>
</html>