HTML-标签
Html-标签
web服务
浏览器窗口输入一个网址发生的事情
- 朝着指定的服务端发送请求
- 服务端接收相应的请求
- 服务端返回相应的响应
- 浏览器接收响应 按照特定的规则渲染页面展示给用户看
HTTP协议
超文本传输协议,规定了浏览器与服务端之间数据传输的格式
一、四大特性
- 基于请求响应，一次请求一次响应；
- 基于TCP/IP作用于应用层之上的协议；
- 无状态
- 不保留用户状态，无论你来多少次，我都待你如初见;
- 所以用到了: cookies; session; token;
- 无连接
- 长连接，websocket(类似于HTTP协议的打补丁) 聊天室相关
二、数据格式
-
请求格式
-
请求行头（请求方式，协议版本）
1.get请求: 朝服务端要资源(获取数据) 类似于浏览器窗口输入wwww.baidu.com获取百度页面 2.post请求: 朝服务端提交数据 类似于注册登录功能 -
请求头（一堆key，values键值对）
-
请求体（携带的数据，并不是一直都有，有时候可能是空的，取决于你的请求方式）
-
-
响应格式
-
响应行头（响应状态码）
用数字来表示一大堆提示信息; 1XX:服务端已经成功接收客户端的数据正在处理 你可以继续提交(一般响应时间很短,用户没有感觉); 2XX:200请求成功,服务端已经返回了你想要的数据; 3XX:重定向,原本想访问A,但是内部自动给你转到了B界面(比如访问某个功能,用户未登录导致跳转登录界面); 4XX:404请求资源不存在,403你当前不具备请求资源的条件; 5XX:500服务端内错误,---机房着火,爆炸,恐怖袭击等; 补充:公司也可以自定自己的响应状态码 -
响应头（一堆key, values键值对）
-
响应体（浏览器展示给用户看的数据）
-
HTML
一、浏览器能识别的语言
HTM/XML---(XML也可以写前端页面,主要用户odoo框架中,书写企业内部管理软件(ERP))
CSS
JS
二、注释
- 注释是代码之母
单行注释：
多行注释:<!–多行
多行
-->
补充:由于html页面结构比较复杂,内容比较多,不便于后期的维护,修改;通常在写页面的时候,习惯用下面的方式来认为划分代码区域
<!--顶部导航条样式开始-->
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
<!--左侧菜单栏样式结束-->
- HTML文档打开方式
- pycharm自动调用浏览器打开(推荐)
- 手动查找路劲之后会选择浏览器打开
三、标签
标签分类一
-
双标签
-
自闭和标签
-
head内常用标签
-
title:定义网页标题
-
style:内部支持直接写css代码
-
link:引入外部的css文件
-
script: 1.内部可以直接编写js代码 2.可以通过src属性引用外部js代码
-
meta： name属性 keywords description
-
-
什么是URL？
- URL:统一资源定位符
-
body内常用标签
-
基本标签
h1~h6:标题标签 s:删除线 b:加粗 u:下划线 i:斜体 p:独占一行 br:换行 hr:分割线 -
特殊符号
空格 <p>a大于b a > b</p> <p>a小于b a < b</p> <p>a&b a & b</p> <p>人民币 ¥10000000000</p> <p>版权标识 ©</p> <p>注册商标 ®</p> -
常用标签
1. div 块儿级标签 2. span 行内标签 本身没有任何特殊意义 但是这两个确实使用最多的 这两个标签是用来做前期的页面布局的 3. img 图片标签 src 1.可以写一个网站图片地址 2.还可以写本地的图片地址 3.url(自动朝该url发送get请求要数据) alt 当图片加载不出来的时候 默认展示的提示信息 title 当鼠标悬浮在图片上的时候 展示的提示信息 width,height 修改一个 另外一个会自动等比例缩放 如果两个都修改图片就会失真 4. a 链接标签 href 1.放一个url 点击就会跳转到该url所对应的资源 target 控制是否在当前页跳转 默认是在当前页跳转 _self 新建页面跳转 _blank 锚点功能 href不单单可以写url 也可以写另外一个a标签id值 点击就会跳转到该id值所对应的a标签所在的位置 -
标签应该具备的属性
1.id属性:类似于身份证号 ,用来唯一标识当前html页面中的某一个标签 ,在同一个html页面中 id值不能重复; 2.class属性:类似于面向对象的继承,直接引用别的类的样式; -
列表标签
无序列表(较多) ul li 只要页面上出现了比较有规则排列的文本 基本上都可以用无序列表来实现 有序列表 ol li 标题列表 dl dt标题 dd内容 -
表格标签(******)
展示网站数据的时候 一般情况下可以使用表格标签 <table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> 先表格标签 先写结构 然后写数据 一个tr就是一行 th和td之分 一个加粗一个不加粗 通常情况下表头用th,表单内容用td -
表单标签(*******)
1. form标签 获取用户输入（输入，选择，上传文件....）并且将数据打包发送给后端 action参数 用来控制数据提交的路径(到底朝哪个后端服务器提交数据) 三种写法: 1.不写 默认就是朝当前该页面所在的地址提交数据 2.全路径(https://www.baidu.com) 3.只写路径后缀(/index/) 获取用户输入 input标签 该标签是一个行内标签 2.input类似于前端的变形金刚 type属性 text 普通文本 password 密文 date 日期 radio 多选一 checkbox 多选多 默认选种 checked="checked" 当标签的属性名和属性值相同的时候 可以只写属性名 女<input type="radio" name="gender" checked="checked"> 简写 女<input type="radio" name="gender" checked> reset 重置 button 普通按钮 submit 触发form表单提交动作 file 获取文件 3. select标签 下拉框 一个个选项就是一个个option标签 默认是单选的 可以加一个multiple该成多选 <select name="" id="" multiple> <option value="">新垣结衣</option> <option value="">明老师</option> <option value="">嫖老师</option> <option value="">波老师</option> </select> 如何让option标签默认选中 加selected="selected" <select name="" id="" multiple> <option value="" selected="selected">新垣结衣</option> <option value="">明老师</option> <option value="" selected>嫖老师</option> <option value="">波老师</option> </select> 4. textarea标签 获取大段文本 label通常是配合input一起使用的 for用来填写对应的input标签id值 点击label标签内的内容 会自动让对应的input标签 聚焦 能够触发form表单提交数据的按钮(******) <input type="submit"> 可以通过value属性来指定按钮文本内容 <input type="submit" value="注册"> <button>点我</button> input获取到的用户输入就类似于是字典的value input中的name属性就类似于是字典的key
-
标签的分类二
-
块儿级标签
独占一行 h1~h6 p br hr div
- 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
- 特列:p虽然是块儿级标签 但是它的内部只能嵌套行内标签， 不能嵌套块儿级标签；如果嵌套了 不会报错，只是知识不符合html语法规范 （报黄）
-
行内标签 u s i b span
自身文本多大 就占多大
内部不能嵌套块儿级标签和行内标签
ps:书写标签的时候 你只需要写标签的名字 之后tab键就可以自动补全 emmet插件
标签示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>红卫集团</title>#网页标题
<meta http-equiv="refresh" content=";url=https://www.mzitu.com/tag">跳转网页地址，可选择秒数
<style>
h1{color:red}#字体颜色
</style>
<link rel="stylesheet" href=mycss.css"">#导入样式表颜色
<!-- <script>-->
<!-- alert('SB胡灯灯,澳门赌场在线发牌了')-->#网页提示确定信息
<!-- </script>-->
<!--<script src="myjs.js"></script>-->#网页提示确定取消信息
</head>
<body>
<h1>请选择房间号</h1>#网页内容，一级标题（六级可选）
<img src="https://i.meizitu.net/thumbs/2019/12/216914_23b13_236.jpg" alt="">#存放图片地址
<a href="https://www.mzitu.com">1号房间---点击进入</a>#点击文字进入链接
<a href="https://www.mzitu.com">2号房间---点击进入</a>
<a href="https://www.mzitu.com">3号房间---点击进入</a>
<h3>游戏规则</h3>
<s>字体加横线</s>#字体加横线
<u>下划线</u>#下划线
<b>加黑</b>#加粗
<i>斜体</i>#斜体
<p>把月亮戳到天上，天就是我的 </p>#一行字； 代表空格
<br>#空一行
<hr>#分割线
<p>a大于b a > b</p>
<p>a小于b a < b</p>
<p>a&b a < b</p>
<p>人名币 ¥10000000000</p>
<p>版权表示 © </p>
<p>注册商标 ® b</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<img src="图片地址" alt="描述信息" title="指针在图片上显示的信息" width="200px图片宽度" height="200px图片高度">-->
<img src="https://i.meizitu.net/thumbs/2018/04/129740_14c08_236.jpg" alt="胡灯灯艳照" title="啊！哥哥" width="200px" height="200px">
<a href="https://www.mzitu.com/tag" target="_self" id="" class="">带我玩啊</a>
<!--<a href="https://www.mzitu.com/tag" target="_self代表在当前页打开，_blank代表新创建页面打开" id="" class="">描述链接的信息，点击可进入</a>-->
<a href="" id="d1">首页</a>
<!--<a href="" id="d1">首页</a>-->
<div style="height: 1000px;background-color: yellow"></div>
<!--<div style="height高度: 10px;background-color页面背景色: yellow"></div>-->
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: aquamarine"></div>
<a href="" id="d3">底部</a>
<div style="height: 1000px;background-color: antiquewhite"></div>
<a href="#d1">回到顶部</a>
<a href="#d2">回到中间</a>
<a href="#d3">回到底部</a>
</body>
</html>
列表标签3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>无序列表</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<p>有序列表</p>
<ol type="A">
<!--<ol type="A可选大小字母，数字，等">-->
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<p>标题列表</p>
<d1>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</d1>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="50" bordercolor="#007" >
<thead>
<tr>
<th>用户名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>朱礼鹏</td>
<td>18</td>
<td>美女</td>
</tr>
<tr>
<td rowspan="1">朱礼鹏</td>
<!-- <td rowspan="1">朱礼鹏</td>-->单元格竖合并
<td>73</td>
<td colspan="2">好帅啊</td>
<!-- <td colspan="3">好帅啊</td>-->单元格横合并
</tr>
<tr>
<td>sean</td>
<td>40</td>
<td>rmb</td>
</tr>
</tbody>
</table>
form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>注册功能</p>
<form action="">
<p>
<label for="d1">用户名：<input type="text" id="d1" name="username"></label>
</p>
<p>密码：<input type="password" name="password"></p>
<p>出生日期：<input type="date"></p>
<p>性别：
男<input type="radio" name="gender">
女<input type="radio" name="gender" checked>
其他<input type="radio" name="gender">
</p>
<p>爱好：
篮球：<input type="checkbox" name="hobby">
足球：<input type="checkbox" checked>
双色球<input type="checkbox">
大球：<input type="checkbox">
</p>
<p>前女友：
<select name="" id="" multiple>
<option value="">新垣结衣</option>
<option value="">苍老师</option>
<option value="">坦克老师</option>
</select>
</p>
<p>上传个人简历
<input type="file">
</p>
<p>
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="按钮">
<button>啊啊啊</button>
</p>
</form>
</body>
</html>
我把月亮戳到天上
天就是我的
我把脚踩入地里
地就是我的
我亲吻你
你就是我的
