文章目录
一.HTML1. 概述2.入门案例3.使用HBuilder二.常用标签1.概述2. 常用标签3.表格标签4.表单标签form5,无法提交的问题6.练习表单标签一.HTML
1. 概述
专门用来制作网页的技术，是超文本标记语言
超文本：比文本的功能更强大，网页中可以插入图片，音频，视频等
标记：也叫做标签用<???> ,不同的标签有不同的功能
结构
文档声明，用来声明HTML文档所遵循的HTML规范。
头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
体部分，用来存放网页要显示的数据。
声明网页标题
用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。
2.入门案例
<!doctype html><html><head></head><body>he llo html~ hello html~hello html~ <br>hello html~hello html~hello html~</body></html>
3.使用HBuilder
新建项目-选中项目-新建-XX.html文件
二.常用标签
1.概述
使用不同的标签,实现 在网页中 插入不同类型的元素
HTML属性HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。如：<a href="" target="" name="" id=""></a>注意：不能交叉嵌套！如何在网页中做空格和换行换行：\<br/\>空格：在HTML中，多个空格会被当成一个空格来显示。
2. 常用标签
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><!-- 1.标题标签:在网页中插入标题 h1~h6 --><h1>风雨有我在 人民请放心</h1><h2>国家有力量 人民有希望</h2><h3>国家有力量 人民有希望</h3><h4>国家有力量 人民有希望</h4><h5>国家有力量 人民有希望</h5><h6>国家有力量 人民有希望</h6><!--列表标签：ul（unorderlist）+li ol（orderlist）+li--><!--2.ul（unorderlist）+li 无序列表--><ul><li>北京严控中高风险地区</li><li>北京严控中高风险地区</li><li>北京严控中高风险地区</li><li>北京严控中高风险地区</li><li>北京严控中高风险地区</li><li>北京严控中高风险地区</li></ul><!--3.ol（orderlist）+li有序列表 --><ol><li>北京严控中高风险地区</li><li>北京严控中高风险地区</li><li>北京严控中高风险地区</li><li>北京严控中高风险地区</li><li>北京严控中高风险地区</li><li>北京严控中高风险地区</li></ol><!--4.图片标签img:通过src属性指定图片的位置width：修饰图片的宽度height：修饰图片的高度（单位是像素）--><img src ="a.jpg" width="192px" height="108px"><img src ="a.jpg" width="192px" height="108px"><!--5.超链接指定标签ahref：指定跳转到哪个网站target：是以什么方式打开，(默认是_self当前窗口打开),_blank是新窗口打开--><a href="/" target="_blank">百度一下</a><a href="/s?cl=3&tn=baidutop10&fr=top1000&wd=31%E7%9C%81%E5%8C%BA%E5%B8%82%E6%96%B0%E5%A2%9E%E6%9C%AC%E5%9C%9F%E7%A1%AE%E8%AF%8A55%E4%BE%8B&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">31省区市新增本土确诊55例</a><a name="top">顶部</a><h2>广东富婆通讯录</h2><h2>广东富婆通讯录</h2><h2>广东富婆通讯录</h2><h2>广东富婆通讯录</h2><h2>广东富婆通讯录</h2><h2>广东富婆通讯录</h2><h2>广东富婆通讯录</h2><h2>广东富婆通讯录</h2><h2>广东富婆通讯录</h2><h2>广东富婆通讯录</h2><!--锚定:回到一个固定位置--><a href="#top">点我，回顶部</a><br><!--获取top的位置，像书签--><!-- 6.输入框-->账户：<input type="text" /><br>密码：<input type="password" /><br />单选框：<input type="radio" />男多选框：<input type="checkbox" />杨幂<br /><input type="checkbox" />冯绍峰<br /><input type="checkbox" />范彬彬<br />邮箱：<input type="email" />数字值：<input type="number" /><br />日历：<input type="date" /><br />周：<input type="week" /><br /><input type="datetime" /><br />按钮：<input type="button" value="点我"/><br />提交按钮：<input type="submit" /><br /><input type="text" placeholder="手机号"/></body></html>
运行结果如图：
3.表格标签
<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试 表格标签</title></head><body><!--1.table向网页中插入表格tr：表示表格里的行元素td：表示行里的列元素/th：跟td一样，只不过加粗，居中width/height ：宽度/高度 border：边框 bgcolor：背景颜色colspan：跨列（合并列）columnrowspan：跨行(合并行)row0cellspacing：单元格间距align:设置对齐方式（位置）--><table border="3px" bgcolor="pink" align="center" width="300px" height="40px" cellspacing="0px"><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><table border="3px" width="300px" height="50px" cellsapcing="0px" align="center"><tr><th align="center" colspan="4">流量调查表</th></tr><tr><th>总页面流量</th><th>共计来访</th><th>会员</th><th>游客</th></tr><tr><td>123</td><td>456</td><td>789</td><td>101</td></tr><tr><td>012</td><td>322</td><td>456</td><td>123</td></tr><tr><td>456</td><td>789</td><td>123</td><td>456</td></tr><tr><td>平均每人浏览量</td><td colspan="3">456</td></tr></table></body></html>
运行结果如图：
4.表单标签form
本质就是一个表格,表单 比表格 多了 数据提交的 功能
<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试 表单标签</title></head><body><!--表单标签form本质就是一个表格 表单 比表格多了数据提交的功能--><!--创建表单下拉框：select(下拉)+option（选项）select name="city"><option >北京</option><option >上海</option></select>文件上传：<input type="file" />文本信息;<textarea >描述信息~</textarea></td>--><form ><!-- <h1 align="center">注册表单</h1> --><table border="1px" cellspacing="0px" bgcolor="azure"><tr align="center" ><th colspan="2">注册表单</th></tr><tr><td align="center" >用户名</td><td ><input type="txt" name="user"/></td></tr><tr><td align="center">密码</td><td><input type="password" name="pwd"/></td></tr><tr><td align="center">确认密码</td><td><input type="password" name="repwd"/></td></tr><tr><td align="center">昵称</td><td><input type="text" name="nick"/></td></tr><tr><td align="center">邮箱</td><td><input type="email" name="mail"/></td></tr><tr><td align="center">性别</td><td><!-- 想单选就必须设置name属性，而且值必须相同 --><input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="0"/>女</td></tr><tr><td align="center">爱好</td><td><input type="checkbox" name="hobby" value="lq"/>篮球<input type="checkbox"name="hobby" value="zq"/>足球<input type="checkbox"name="hobby"value="ppq"/>乒乓球</td></tr><tr><td align="center">城市</td><td><!--加value提高效率--><select name="city"><option value="1">北京</option><option value="2">上海</option><option value="3">南京</option><option value="4">广州</option><option value="5">深圳</option></select></td></tr><tr><td align="center">头像</td><td ><input type="file" name="pictures" value="file" /></td></tr><tr><td align="center">验证码</td><td ><input type="text" name="t" placeholder="请输入验证码:"/><input type="image" src="imgs/b.png" width="100px" height="50px"/><input type="button" value="点我换一张" align="center"/></td></tr><tr ><td align="center" >自我描述</td><td name="message"><textarea placeholder="描述信息~" ></textarea></td></tr><tr align="center"><td colspan="2"><input type="submit"value="提交" /><input type="submit" value="重置" /></td></tr></table></form></body></html>
运行结果如图：
5,无法提交的问题
步骤:
1.把提交的按钮必须改成submit类型
2.给标签加name属性
3.当提交数据时,会把用户输入的信息jack提交给服务器
http://127.0.0.1:8848/cgb2106/test03.html?user=jack
http://127.0.0.1:8848/cgb2106/test03.html?user=12&abc=123&age=18
4.改造网页文件
作业
1.完善现在的form表单,能够提交数据
2.练习学生管理系统的表单
<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试学生管理系统</title></head><body><h1>学生信息管理系统MIS</h1><form ><b>姓名：</b><br /><input type="text" placeholder="请输入姓名……" name="user" /><br /><b>年龄：</b><br /><input type="text" placeholder="请输入年龄……" name="age"/><br /><b>性别：</b><input type="radio" name="sex" value="1" />男<input type="radio" name="sex" value="0"/>女<br /><b>爱好：</b><input type="checkbox" name="hobby1"/>乒乓球<input type="checkbox" name="hobby2" />爬山<input type="checkbox" name="hobby3" />唱歌<br /><b>学历：</b><select name="education"><option value="1">本科</option><option value="2">大专</option><option value="3">硕士</option><option value="4">博士</option></select><br /><b>入学日期：</b><input type="date" name="datetime" /><br /><input type="submit"value="保存" style="background: skyblue;"/><input type="submit" value="取消"style="background: hotpink;"/></form></body></html>
6.练习表单标签
<!DOCTYPE html><html><head><meta charset="utf-8"><title>练习表单标签</title></head><body><!--其他标签--><div>大家好</div><div>大家好</div><div>大家好</div><p>NICE</p><p>NICE</p><p>NICE</p><span>hello</span><span>hello</span><span>hello</span><!--form可以提交数据，而且数据默认采用get方式，就在此地址栏中展示的http://127.0.0.1:8848/cgb2106/HTML/test04.html?user=tarena&age=45&sex=0&hobby=1&edu=2&datetime=-07-29#不好：长度受限，不安全可以改成post提交数据，而且可以指定，交给哪段程序处理数据action面试题：get和post提交数据的区别get方式：是默认的提交方式，但是不安全（都展示在地址栏），长度受限post方式：安全，数据不在地址栏展示，看不见，提高安全性--><form method="post" action="#"><table><tr><td><h1>学生信息管理系统MIS</h1></td></tr><tr><td>姓名：</td></tr><tr><td><input type="text" name="user" placeholder="请输入姓名……" /></td></tr><tr><td>年龄：</td></tr><tr><td><input type="text" name="age" placeholder="请输入年龄……" /></td></tr><tr><td>性别：(单选框)<input type="radio" name="sex"value="1" />男<input type="radio" name="sex"value="0" />女</td></tr><tr><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>学历：(下拉框)<select name="edu"><option value="1">本科</option><option value="2">专科</option><option value="3">硕士</option></select></td></tr><tr><td>入学日期：<br><input type="date" name="datetime" /></td></tr><tr><td><input type="submit" value="保存" style="background-color: blue;"/><input type="button" value="取消" style="background-color: pink;"/></td></tr></table></form><!--使用h5的播放音频 视频--><form ><audio controls="controls"><source src="res/a.mp3"></source></audio><br><video controls="controls"loop="loop"><source src="res/c.mkv"></source></video></form></body></html>
注：前端–CSS选择器，盒子模型学习
