一、web服务本质
1、浏览器输入网址并回车都发生了什么?
a)、浏览器 给服务端 发送了一个消息
b)、服务端拿到消息
c)、服务端返回消息
d)、浏览器展示页面
2、趋势
C/S架构->B/S架构
3、web的本质
1)、服务端
2)、浏览器
3)、html文件
二、html简介
1、html是什么？
html超文本标记语言(markup language)
2、格式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
<!DOCTYPE html> 设置html5
<head></head> 定义了网页的头部，包含标题格式设置等
</meta> 设置默认编码
<title></title> 网页的标题
<body></body>设置网页的具体内容
三、head中的常用标签
1、meta
<meta charset="UTF-8"> <!--设置默认编码--> <meta name="keywords" content="内容"> <!--关键字索引--> <meta name="description" content="内容"> <!--描述-->
四、body中的常用标签
1、标题 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> 2、段落 <p>段落内容</p> 3、文字格式 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <br> <!-- 换行 --> <hr> <!-- 水平线 -->
五、特殊字符
<!-- 空格 --> > <!-- 大于 --> < <!-- 小于 --> © <!-- 版权 --> ® <!-- 注册 -->
五、div和span
<div>块级元素</div> <span>内联(行内)元素</span> 块级标签： 特点：可以设置宽度和高度 <h1></h1>到<h6></h6> <p></p> <div></div> <hr> 行内标签： 特点：不能设置宽度和高度 <b></b> <i></i> <u></u> <s></s> <br> <span></span> <img src="" alt=""> <a href=""></a> 注意：行内标签不能嵌套块级标签 p不能嵌套块级标签，包含他自己
六、img
<img src="http://b-ssl.duitang.com/uploads/item/201706/16/20170616185536_GPBdZ.jpeg" alt="桥本环奈正在骑马来的路上" title="女神">
scr 图片路径：本地路径、网络路径
alt 提示：当网络速度缓慢是，图片的位置会有文字提示
title悬浮显示：鼠标移到图片的位置，有悬浮说明
七、a
<a href="https://baike.baidu.com/item/%E6%A1%A5%E6%9C%AC%E7%88%B1/5332?fr=aladdin" target="_blank">桥本爱简介</a>
href 网址
target 默认值为_self，不打开新的tab，target='_blank'，打开新的tab
八、列
<ul type=""> <li>one</li> <li>teo</li> </ul> type的值为 circle空心圆 none 为空 square 正方向 有序列表 <ol type="A" start="3"> <li>python</li> <li>mysql</li> </ol> type 设置序号的格式 标题列表 <dl> <!-- 自定义列表 --> <dt>自定义标题</dt> <dd>自定义细节</dd> </dl>
九、表格
<table> <!-- 表格 --> <thead> <!-- 表头 --> <tr> <!-- 表行 --> <th>name</th> <th>age</th> </tr> </thead> <tbody> <!-- 表身 --> <tr> <!-- 表行 --> <td>tom</td> <td>24</td> </tr> </tbody> </table>
10、form表单、select和textarea
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>form表单</title> </head> <body> <!-- 表单的作用，用户向服务端提交数据--> <form action="" method="get" enctype="multipart/form-data" autocomplete="off" novalidate> <!-- 1、action 传递服务端的地址url--> <!-- 2、method 是获取还是post,默认get,有file用post--> <!-- 3、enctype 编码类型--> <!-- 4、autocomplete 自动完成，默认值是on--> <!-- 5、novalidate 没有检测，如不检查邮件的格式--> <!-- name相当于字典中的key，value相当于字典中的value--> <p> <label> 姓名： <input name="username" type="text" value="tom"> </label> </p> <!-- text输入文本框，value设置默认值，label点名字就可以到位置--> <p> <label> 姓名2： <input name="username" type="text" placeholder="tom" disabled> </label> <!-- disable 禁用--> </p> <p><label>密码： <input name="password" type="password"> </label></p> <!-- password 密码--> <p>性别： <input name="gender" id="g2" value="男" checked type="radio"> <label for="g2">男</label> <input name="gender" value="女" id="g1" type="radio"> <label for="g1">女</label> </p> <!-- radio 单选框，name 相通，只能选一个,checked 默认选项，label的另一中添加方式--> <p><label for="w1">生日：</label> <input type="date" name="birthday" id="w1"></p> <!-- date 日期--> <p> <label for="w2">邮箱：</label> <input type="email" name="email" id="w2"> </p> <!-- email 邮箱 tml自动检测邮箱的格式--> <p>爱好： <input name="hobby" type="checkbox" value="basketball" id="h1"> <label for="h1">篮球</label> <input name="hobby" type="checkbox" value="football" id="h2"> <label for="h2">足球</label> <input name="hobby" type="checkbox" value="girls" checked id="h3"> <label for="h3">女人</label> </p> <!-- checkbox 多选课，name相同可以选多个 checked 默认选项--> <p> <input type="hidden" name="1234"> </p> <!-- hidden 隐藏，在浏览器不可见，用于不想被用户修改，又很重要的数据--> <select name="from" id="s1"> <optgroup label="北京"> <option value="sh">沙河</option> <option value="dc">东城</option> <option value="cy">朝阳</option> </optgroup> <optgroup label="江苏"> <option value="xz" selected>徐州</option> <option value="wx">无锡</option> <option value="cz">常州</option> </optgroup> <optgroup label="上海"> <option value="fd">浦东</option> </optgroup> </select> <!-- select 下拉选框，option 选项 optgroup 选项组 别忘记label selected 默认选项--> <select name="from" id="s2" multiple> <optgroup label="北京"> <option value="sh">沙河</option> <option value="dc">东城</option> <option value="cy">朝阳</option> </optgroup> <optgroup label="江苏"> <option value="xz" selected>徐州</option> <option value="wx">无锡</option> <option value="cz">常州</option> </optgroup> <optgroup label="上海"> <option value="fd">浦东</option> </optgroup> </select> <!-- multiple 多选--> <p> <textarea name="info" id="t1" cols="30" rows="10">自我介绍</textarea> </p> <!-- textarea 比较多的文本框--> <p> 头像： <input type="file" name="photo" id="p1"> </p> <!-- file 上传文件 --> <p> <input type="submit" value="提交"> </p> <!-- submit提交按钮--> <p> <label> <input type="reset" name="reset" value="重置"> </label> </p> <!-- reset 重置按钮--> <p> <input type="button" value="按钮"> </p> <!-- button 普通按钮--> </form> </body> </html>
总结
一、总述
1、浏览器向服务端提交数据用form表单
2、input select textarea 都必要要有name属性，name相当于字典的key
3、action 提交到那个地方
4、所有获取用户输入的标签都必须放在form表单里
二、input
text 文本
password 密码
radio 单选框，注意name相等
checkbox 多选框
date 时间
email 邮件
hiddle 隐藏
submit 提交
reset 重置
button 按钮
三、select
option 选项
optgroup 选项组，注意 label
四、label
作用：优化代码