一、几个基本概念:
HTML ------> 内容(标签)
CSS ------> 外观(选择器,属性)
javaScript --------> 给HTML网页增加动态功能
Web开发的本质:
1、浏览器给服务端发了一个消息
2、服务端拿到消息
3、服务端返回消息
4、浏览器展示页面
----------客户端和服务端消息的格式是约定好的
----------http协议:浏览器和服务器之间约定好的消息格式===>“put|xxxx.avi|1024”
----------WEB本质: 服务器,浏览器,HTML文件
二、HTML (学标签)
<标签名>—>标记语言(HTML,XML)
标签分类:双标签,单标签
例:
<h1></h1> 双标签
<img> 单标签
<a></a> 双标签
1、HTML文件结构
1).规范:
<!DOCTYPE html> #声明标签
<html lang="zh-CN"> #语言设置
<head>
<meta charset="UTF-8"> #编码格式,定义网页原信息
<title>我的第一个HTNL网页</title>> #定义网页标题
</head>
<body> #主体
</body>>
</html>
2).注释:
<!--xxxxxx-->
3).标签分类:
—块级标签:h1~h6、div、p、hr
----------默认占浏览器宽度
----------内设置长和宽
—内联标签(行内标签):a、img、u、s、i、b、span
----------根据内容决定长度
----------不能设置长度
3).语义化的HTML
4).标签的嵌套规则
-----(1).行内标签不能嵌套块级标签
-----(2).P标签不能嵌套块级标签
三、标签的基本功能
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!--<meta name="keywords" content=""><!–关键字–>-->
<!--<meta name="description" content=""><!–网页输入时跳出显示的内容–>-->
<!--<meta http-equiv="refresh" content="2;URL=https//www.baidu.com"><!–隔几秒跳转–>-->
<!--<meta http-equiv="x-ua-compatible" content="IE=edge"><!–以最高浏览器渲染–>-->
<title>我的第一个HTNL网页</title>>
<!--<style>-->
<!--a{-->
<!--color:red;-->
<!--}-->
<!--</style>-->
<!--<script>-->
<!--</script>-->
</head>
<body>
<!--字体大小-->
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
hello
<!--src:图片地址 alt:若加载不出来提示的文字 title:光标放在上面提示文字-->
<img id="i0" src="http://img0.imgtn.bdimg.com/it/u=1528782847,1470047375&fm=26&gp=0.jpg" alt="xixi" title="佩奇">
<!--href:要跳转的网页,target=:控制是在当前还是新的网页打开-->
<a href="http://www.sogo.com" target="_blank">sogo</a>
<!--href:要跳转的标签-->
<a href="#a2">a跳转a2</a>
<div style="height:100px;background-color:red"></div>
<a href="" id="a2">哈哈哈</a>
<!--加粗-->
<b>嘻嘻</b>
<!--斜体-->
<i>嘻嘻</i>
<!--下滑线-->
<u>嘻嘻</u>
<!--删除-->
<s>嘻嘻</s>
<h1>鹅</h1>
<!--文章段落 <br/>:换行-->
<p>鹅鹅鹅,<br/>下个锅,哈哈哈</p>
<hr><!--水平线-->
<p>鹅鹅鹅,下个锅,哈哈哈</p>
<p>鹅鹅鹅,下个锅,哈哈哈</p>
<<!--显示<>-->
©<!--显示©表示版权-->
<!--显示空格-->
><!--显示>-->
<<!--显示<-->
&<!--显示&-->
¥<!--显示¥-->
®<!--显示注册®-->
<!--无序列表 type:改变前面的格式-->
<ul type="">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<!--有序列表 type:设置序号格式 start:开始序号-->
<ol type="I" start="1">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
<!--border 给表格加边框 cellpadding:内边框 cellspacing:外边框-->
<table border="1" cellpadding="2" cellspacing="2">
<thead>
<!--行-->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<!--列-->
<tr>
<td>小龙</td>
<td>12</td>
<td>学习</td>
</tr>
<tr>
<td>优秀</td>
<td>11</td>
<td>看学习</td>
</tr>
</tbody>
<!--text:输入内容 submit:提交文本 action:告诉数据往哪提交 method:提交方法 enctype:上传文件等其他,选择不同的
autocomplete: "off"(关闭自动补全) "on"(打开自动补全)-->
<form action="http://127.0.0.1:8000/upload/" method="get" enctype="multipart/form-data" autocomplete="on">
<p>用户名:
<!--readonly : 只读,不能改 value:默认的内容 placeholder:默认框内有内容,但是不影响输入
disabled:禁止输入-->
<input name="name" type="text" readonly value="xiao xiao">
<input name="name" type="text" readonly placeholder="xiao xiao">
<input name="name" type="text" readonly placeholder="xiao xiao" disabled>
<!--<input name="name" type="text" readonly value="xiao xiao">-->
</p>
<p>
<!--使用label标签更加规范-->
<label for="i4">用户名:</label>
<input id="i4" name="name" type="text" value="xiao xiao">
</p>
<p>密码:
<input name="password" type="password">
</p>
<p>性别:
<!--radio:选择按钮 checked:默认选项 有label后点文字都可以选中-->
<label for="g1">男</label>
<input id="g1" name="gender" type="radio" value="1">
<label>女
<input name="gender" type="radio" value="0">
</label>
<input checked name="gender" type="radio" value="0">保密
</p>
<p>爱好:
<!--checkbox:多选按钮-->
<input name="hobby" type="checkbox" value="volloball">羽毛球
<input name="hobby" type="checkbox" value="basketball">篮球
<input name="hobby" type="checkbox" value="pingpang">皮乓球
</p>
<p>城市:
<!--下拉选取 multiple:支持多选-->
<select name="from1" id="i1" multiple>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="xa">西安</option>
<option value="hz">杭州</option>
</select>
<select name="from2" id="i2">
<!--子选取-->
<optgroup label="西安">
<!--selected:默认选中这项-->
<option value="ca" selected>长安区</option>
<option value="bq">灞桥区</option>
<option value="yt">雁塔区</option>
<option value="cx">城西</option>
</optgroup>
</select>
</p>
<!--一个大的编辑框-->
<p><textarea name="info" id="i3" cols="10" rows="10">
</textarea></p>
<p>头像:
<!--选择系统文件-->
<input name="wenjian" type="file">
</p>
<p>生日:<input name="birthday" type="date"></p>
<!--邮箱格式提交-->
<p>邮箱:<input name="email" type="email"></p>
<!--隐藏数据,埋下伏笔-->
<p>邮箱:<input name="hidden" type="hidden"></p>
<!--submit:提交按钮-->
<p><input type="submit" value="走你"></p>
<!--button:只是按钮-->
<p><input type="button" value="button"></p>
<!--reset:数据重置-->
<p><input type="reset" value="重置"></p>
</form>
</table>
</body>
</html>
标签属性:
四、form表单相关内容
前后端有数据交互的时候用form表单
form表单提交数据的几个注意事项:
- 所有获取用户输入标签都必须放在form表单里面
- action控制着往哪提交
- input\select\textarea 都需要有name属性
- 提交按钮
<input type="submit">
五、小总结:
1、input
系列:
value:设置默认值
readonly:只读
placeholder 设置占位内容
text
password
radio 单选框
checbox 多选框
date 日期
datetime 时间
file 文件
button 普通按钮,多用JS给它绑定
rest 重置
submit 提交
2、textarea
大段文本
3、select
下拉菜单
4、optgroup
分组的下拉框