HTML基础
一、HTML(超文本标记语言)
html代码实际上就是一套能够被浏览器所识别的规则代码,由一个个标签组成。html代码就是一大长串字符串,而这种字符串的格式正好能够被浏览器所识别,也就有了我们的WEB页面。
后端与前端交互方式:
1、后端通过直接返回浏览器能够识别的html代码
2、后端返回数据,前端替换html种的指定数据
二、前端三把利器
1、HTML:赤裸的一个人
2、CSS:华丽的衣服
3、JS/JavaScript:赋予这个人的行为,也就是动起来
三、最初的HTML文件:
1、每个html文件最顶部有一个:<!DOCTYPE html> 这是告诉我们这是一个标准的html文件
2、一个页面只有一个html
3、有head头部
4、有body身体
<!DOCTYPE html><!-- 规定标准的html --> <!--一个页面只有一个html标签--> <!--标签的属性 指定英文--> <html lang="en"> <head><!-- html head标签的开始 --> <!--头部当中大部分标签是不可见的--> <!--自闭合标签--> <meta charset="UTF-8"> <!--主动闭合标签--> <title>Title</title> </head> <!-- html body标签的开始 --> <body><!-- html body标签的开始 --> </body><!-- html body标签的结束 --> </html>
四、HTML 头部 head标签
1、自闭和标签:只有开头没有结尾的标签:<meta charset="UTF-8">
2、主动闭合标签:有开头标签、结尾标签: <title>Title</title> 、<a></a>
3、头部head当中大部分标签不可见,唯一title标签可见,页面的标题更改浏览器tab的名字
4、meta标签添加属性:
1)<meta http-equiv="refresh" content="1">:每隔一秒钟刷新一次页面
2)<meta http-equiv="refresh" content="2;url=http://www.baidu.com">每隔两秒刷新一下并且跳转到百度
3)<meta name="keywords" content="天气真好">关键字检索
4)<meta name="description" content="测试工程师">网站描述
5)<meta http-equiv="X-UA-Compatible" content="IE=edge"> ie打开时以最高的兼容模式打开
5、link标签:超链接标签
<link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> <!--rel 代表link做什么用,href代表路径-->
<!DOCTYPE html> <!-- 规定标准的html --> <!--一个页面只有一个html标签--> <!--标签的属性 指定英文--> <html lang="en"> <head> <!--头部当中大部分标签是不可见的--> <!--自闭合标签--> <meta charset="UTF-8"> <!--每隔一秒钟刷新一次页面--> <!--<meta http-equiv="refresh" content="1">--> <!--每隔两秒刷新一下并且跳转到百度--> <!--<meta http-equiv="refresh" content="2;url=http://www.baidu.com">--> <!--主动闭合标签--> <!--更改浏览器tab的名字--> <title>测试一下</title> <!--rel 代表link做什么用,href代表路径--> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> </head> <body> </body> </html>
截图:
五、HTML 头部body标签
1、标题标签:h标签,有六个,<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>,h1最大,h6最小
2、段落标签:
1)块级标签:<p></p>,行之间有间隔,即使文字没有一行,但每一行占页面的整行,可以跟span块级标签做对比
<p>年轻,就是拿来折腾的。让自己具备独立生活的能力,具备一技之长的资本</p>
2)行内标签:span :<span>年轻,就是拿来折腾的。让自己具备独立生活的能力,具备一技之长的资本</span>
备注:<span></span>是最基础的白板标签,没有任何的css样式,p标签增加了上边距下边距,但是span没有,可以通过CSS进行装饰变成任何一种标签
3、伪白板标签:div标签,因为能占满整行
块级标签,整满整行 div是HTML中出场率的标签,特点是没有任何属性,可以通过css进行装饰后成为任何一种标签
4、input标签
1)type属性:代表指定是一个什么框,text代表输入框,password密码框,button按钮,checkbox多选框、radio单选框、file上传文件、submit提交按钮、reset重置按钮
2)name属性:相当于前端请求给后端的那个key
3)value:默认值
4)placeholder属性:提示文案,当鼠标点击时消失:input type="text" placeholder="请输入用户" name="useranme" value="admin">
5)checked="checked"默认勾选
<!DOCTYPE html> <!-- 规定标准的html --> <!--一个页面只有一个html标签--> <!--标签的属性 指定英文--> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试一下</title> <!--rel 代表link做什么用,href代表路径--> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> </head> <body> <!--value="admin"默认值为admin--> <input type="text" placeholder="请输入用户名" name="username" value="admin"><br> <input placeholder="请输入密码" type="password" name="password"><br> <!--勾选框--> <!--checked="checked"默认勾选--> <input type="checkbox" name="xxx" checked="checked"><span>是否记住登录</span> <div>性别</div> <!--两个input添加name="sex",说明两个input互斥,选择了男就不能选择女--> <span>男</span><input type="radio" checked="checked" name="sex"> <span>女</span><input type="radio" name="sex"><br> <input type="file" name="file"> <!--button是需要和js连用,通过js进行提交操作--> <!--<input type="button" value="提交">--> </body> </html>
5、表单标签:form标签
form相当于一个承载体,form就相当于一个载体白纸,input 相当于往这个白纸上写东西,请求是通过from标签统一处理,拿到数据发送给后端
区分:submit如果和form连用,直接提交form表单,而点击button却没有任何作用,是需要通过js处理。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试一下</title> <!--rel 代表link做什么用,href代表路径--> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> </head> <body> <form action="http://www.baidu.com" method="post"> <input type="text" value="admin" name="username"> <input type="reset"> <!--submit如果和form连用,直接提交form表单--> <input type="submit" value="提交"> <input type="button" value="登录"> </form> </body> </html>
from属性:
1)、action:与后端交互的时候一定要知道后端的接口或者url,action就是响应的接口或者URL
2)、method属性:请求方式,post请求或者get请求
备注:现在很少用submit提交数据,现在前端开发都是用ajax请求,用绑定按钮的方式去请求 。为什么不用submit方式是因为
例如如果注册用户,填写一堆注册数据,其中有一个出错,submit一点登陆刷新了整个页面,所有input框都被清空,所有数据得重新输入一遍,,而button登录采用用ajax异 步提交,前端页面不动,前端通过js向后端偷偷发送请求,拿出他的请求结果之后,如果邮箱的规则不正确,直接将返回结果渲染到界面上,能保证页面输入的数据不被清空。
6、标题标签:label标签
label 标题标签 与input联合运用,增加input的点击范围 可直接点击文字就输入 for:映射到input的id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试一下</title> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> </head> <body> <!--label扩展了input的可点击范围--> <label for="i1">用户名</label><input id="i1" type="text" value="admin"> <span>密码</span><input type="password"> </body> </html>
7、多行文本标签:textarea,有name属性跟后端进行交互
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试一下</title> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> </head> <body> <!--多行文本--> <textarea name="text">sss</textarea> </body> </html>
8、下拉框:select标签<select></select>
先创建一个下拉框select,2、下拉选项option
1)默认选中:option中添加selected="selected"
2)后端交互:每个option设置value参数,例如北京代表1,在select中设置name属性为:city ,city:1这样拼成的参数传给后端
3)size:下拉框显示几个数据,例如设置:size=2,表示该下拉框显示两个数据,多余数据下拉查看
4)多选multiple="multiple"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试一下</title> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> </head> <body> <select name="city" size="3" multiple="multiple"> <option value="1">北京</option> <option value="2" selected="selected">广州</option> <option value="3">深圳</option> <option value="4">深圳2</option> </select> </body> </html>
9、分组下拉框:<select></select>
1、先创建一个下拉框select,2、分组optgroup 3、option组成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试一下</title> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> </head> <body> <select name="city" size="3" multiple="multiple"> <option value="1">北京</option> <option value="2" selected="selected">广州</option> <option value="3">深圳</option> <option value="4">深圳2</option> </select> <select> <optgroup label="黑龙江"> <option>牡丹江</option> <option>哈尔滨</option> </optgroup> <optgroup label="河北"> <option>石家庄</option> <option>唐山</option> </optgroup> </select> </body> </html>
10、超链接标签:<a></a>
1)跳转到网址链接:<a href="http://www.baidu.com">百度一下</a>,直接点击百度一下就跳转到百度首页
2)锚点跳转,<a href=#li>跳转</a> <div id="#li">sssss</div>, a标签内添加:href=#li,直接会跳转到对应 id号为 li 的div附近
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试一下</title> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> </head> <body> <!--超链接标签--> <a href="http://www.baidu.com">百度一下</a> <a href=#li>跳转</a> <div id="#li">sssss</div> </body> </html>
11、列表便签:
1)· 形式的列表 ul标签(以点位开头):外层为ul标签,里层 li 标签
2)数字形式列表 ol 标签(以数字为开头):外层为ol标签,里层 li 标签
3)分层列表 dl标签:最外层dl标签,第一层 dd 标签 第二层 dt 标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试一下</title> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> </head> <body> <ul> <li>大连</li> <li>秦皇岛</li> </ul> <ol> <li>大连</li> <li>秦皇岛</li> </ol> <dl> <dt>黑龙江</dt> <dd>黑龙江</dt> <dd>牡丹江</dd> </dl> </body> </html>
11、表格标签:table标签
1)包含表头thead:表头分行:tr ,每一列 : th
2)表体tbody:表头分行:tr ,每一列 : td
3)边框:border border="1"边框为1
4)colspan="2":表示占两列
5)rowspan="3":表示占三行
6)如果修改可跳转直接加个a标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试一下</title> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> </head> <body> <table border="1"> <thead> <!--tr代表行,th代表表头的列--> <tr> <th>id</th> <th>请求方式</th> <th>参数</th> <th>接口</th> <th colspan="2">操作</th> </tr> </thead> <tbody> <!--tr代表行,td代表表头的列--> <tr> <td>1</td> <td rowspan="3">post</td> <td>{'name':'sex'}</td> <td rowspan="3">/login</td> <td><a herf="updata"></a>修改</td> <td>删除</td> </tr> <tr> <td>1</td> <!--<td >post</td>--> <td>{'name':'sex'}</td> <!--<td>/login</td>--> <td>修改</td> <td>删除</td> </tr> <tr> <td>1</td> <!--<td>post</td>--> <td>{'name':'sex'}</td> <!--<td>/login</td>--> <td>修改</td> <td>删除</td> </tr> </tbody> </table> </body> </html>
12、图片标签:img标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试一下</title> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> </head> <body> <img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="失败时展示的文字" title="悬浮时显示的文字123"> </body> </html>
小工具:
1、推荐谷歌浏览器,有时候刷新不清除缓存,浏览器右键点击检查,然后右键点击刷新按钮,点击清空缓存并硬性重新加载
2、获取网页图片地址:谷歌浏览器右键点击检查--》Network--》刷新页面-->找到图片img--》点击Headers--》request url
3、空格:  大于号:> 小于号 < 记住常用的这三个,其他的用时百度