html

it2022-05-08 9

前端

前端 1.什么是前端？任何直接能够跟用户打交道的交互界面都可以称之为前端 2.为什么要学前端？因为我们是Python全栈开发软件开发架构 c/s架构 b/s架构本质上b/s也是c/s架构浏览器输入网址发送了几件事？ 1.输入网址 2.朝服务端发送请求 3.服务器接收请求并查询浏览器想要的数据返回给浏览器 4.浏览器拿到数据展示页面 HTTP协议超文本传输协议客户端服务端在数据交互的时候都必须遵循这套协议文件的后缀名到底是给谁看的？文件的后缀并不是给计算机看的，而仅仅是给人看的 HTML(hyper text makeup language) 超文本标记语言服务端客户端文件(html页面) 在python中写的服务端然后启动服务端在浏览器输入127.0.0.1:8080 就会获取到服务端发送来的信息 import socket server = socket.socket() server.bind(('127.0.0.1', 8080)) server.listen(5) while True: conn,addr = server.accept() data = conn.recv(1024) conn.send(b'HTTP/1.1 200 OK \r\n\r\n')# 表示遵循http协议 conn.send(b'<h1>hello baby</h1>') conn.close() ''' herf 链接,超链接 ''' 文本文件内容(标题,网站链接,图片链接) <h1>hello baby</h1> <a href='https://www.luffycity.com'>click me to some color to see</a> <img src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh=600,800/sign=b6ca7f749a2bd4074292dbfb4bb9b269/5fdf8db1cb134954b6cd09385b4e9258d0094a9f.jpg'> 服务端(pycharm) import socket server = socket.socket() server.bind(('127.0.0.1', 8080)) server.listen(5) while True: conn,addr = server.accept() data = conn.recv(1024) conn.send(b'HTTP/1.1 200 OK \r\n\r\n')# 表示遵循http协议 with open('a', 'rb')as f: for line in f: conn.send(line) conn.close() 读取文本信息发送给浏览器显示

浏览器也就是客户端输入一个网址,就是给服务端发送消息,消息基于http协议,服务端也是基于http协议把数据解开,解开之后才知道你想要某一个资源,所以会去对应的地方找某一个资源,读出来,再发回客户端.基于网络传输就是二进制浏览器拿到的是二进制,在浏览器把数据按照固定的格式解开对应的图片等等.(这个固定的格式就是html)(所有服务端都是按照这个标准来的) <!DOCTYPE html> # 文档文件类型HTML <html> <head> head存放的内容用户是看不到的,主要是给浏览器和收索引擎看的 <head> <body> 用户能够看见的内容都在body里面   <body> <html> html的内容 <!DOCTYPE html> <html lang="en"> #默认语言为英文 <head> <meta charset="UTF-8"> <title>丫丫</title> </head> <body> <h1>hello baby</h1> <a href='https://www.luffycity.com'>click me to some color to see</a> <img src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh=600,800/sign=b6ca7f749a2bd4074292dbfb4bb9b269/5fdf8db1cb134954b6cd09385b4e9258d0094a9f.jpg'> </body> </html> 打开html文件返回给浏览器 import socket server = socket.socket() server.bind(('127.0.0.1', 8080)) server.listen(5) while True: conn,addr = server.accept() data = conn.recv(1024) conn.send(b'HTTP/1.1 200 OK \r\n\r\n')# 表示遵循http协议 with open(r'E:\untitled1\前端\html.html', 'rb')as f: for line in f: conn.send(line) conn.close() html文件打开方式方式1：找到改文件选择浏览器打开方式2：pycharm内自动打开 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>yaya</title> <style> #标签的样式,写css代码 h1{ color:green; # 标签的颜色 } </style> <script> #内部可以直接写js代码，也可以通过src属性,引入外部js代码文件 alert('hello baby') </script> </head> <body> <h1>hello baby</h1> <a href='https://www.luffycity.com'>click me to some color to see</a> <img src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh=600,800/sign=b6ca7f749a2bd4074292dbfb4bb9b269/5fdf8db1cb134954b6cd09385b4e9258d0094a9f.jpg'> </body> </html>

这是我的前端页面

alert('hello baby')

03 mycess.css文件里存的内容 ''' h1 { color:pink; } # h1表示标题的颜色改变 # a是锚点的颜色改变 a { color:lightpink; } ''' html.html文件中的内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>yaya</title> <script> alert('hello baby') </script> <link rel="stylesheet" href="03 mycess.css"> # 是你的文件名有空格 # link是连接到css文件中,css文件是HTML元素的属性,如标签的颜色 </head> <body> <h1>hello baby</h1> <a href='https://www.luffycity.com'>click me to some color to see</a> # a代表anchor 锚点, href超链接, <img src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh=600,800/sign=b6ca7f749a2bd4074292dbfb4bb9b269/5fdf8db1cb134954b6cd09385b4e9258d0094a9f.jpg'> </body> </html>

head内常用标签(以上举例) title:页面标题 style：写css代码 (定义内部样式表) script:内部可以直接写js代码，也可以通过src属性引入外部js代码文件 link:通过href引入外部css文件(引入外部样式表文件或网站图标)

js.js文件的内容 alert('hello baby') html.html文件里的内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>yaya</title> <script src="js.js"></script> #引入外部的js.js文件 <link rel="stylesheet" href="03 mycess.css"> </head> <body> <h1>hello baby</h1> <a href='https://www.luffycity.com'>click me to some color to see</a> <img src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh=600,800/sign=b6ca7f749a2bd4074292dbfb4bb9b269/5fdf8db1cb134954b6cd09385b4e9258d0094a9f.jpg'> </body> </html> body内标签基本标签 h1~h6：标题标签 p:段落标签(paragraph) s:划掉字体(删除线)(subline) u:下划线(unberline) i:斜体(italic) b:加粗(bold) br:换行(break row) hr:分隔线(horizontal rule) 特殊符号 1<a (1<a)(smaller than) 3>2 (3>2)(bigger than) ¥ (¥) ©© ®® <p>苍茫的天涯是我的爱绵绵的青山脚下一片海</p>　　　空格标签分类2（******）：块儿级标签 div h1~h6 p hr br (div:division) 独占一行块儿级标签能够嵌套块儿级标签和行内标签 p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签块儿级标签能够设置长宽行内标签 span a img i s b u 自身内容有多的就占多大行内标签不能设置长宽常用标签(******) div span p a img 什么是URL？ URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。 URL举例 http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.html URL地址由4部分组成第1部分：为协议：http://、ftp://等第2部分：为站点地址：可以是域名或IP地址第3部分：为页面在站点中的目录：stu 第4部分：为页面名称，例如 index.html 各部分之间用“/”符号隔开。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>yaya</title> <script src="js.js"></script> <link rel="stylesheet" href="03 mycess.css"> </head> <body> <h1>hello</h1> <h2>hello</h2> <h3>hello</h3> <h4>hello</h4> <h5>hello</h5> <h6>hello</h6> <p>鹅鹅鹅</p> <p>曲项向天歌</p> <p>白毛浮绿水</p> <p>红掌拨清波</p> <s>打折啦</s> <br> <u>下划线</u> <hr> <i>斜体</i> <b>加粗</b> 1<a 2>3 ¥ © ® <p>苍茫的天涯是我的爱绵绵的青山脚下一片海</p> # non-breaking space </body> </html> a标签:链接标签可以通过href跳转到指定的网址锚点功能:回到顶部 <a href="" id="a1">top</a> <a href="#a1">bottom</a> ps：target属性用来控制是否在当前页面跳转默认是_self当前页也可以指定成_blank新建页面跳转所有的html标签都应该有一个id属性，用来唯一标识当前标签为后续的DOM操作提供基础也就意味着同一份html中标签的id不能重复，不写id属性也是可以的 img标签 src图片路径:即可以是网络上的图片地址也可以是本地的图片地址 alt当图片加载失败之后自动展示的提示信息 title鼠标悬停在图片上时显示的文本图片调节长宽的时候只需要调节一个另外一个参数自动等比例缩放 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>div1 <div> div2 <div> div3 </div> </div> </div> <div>div</div> <span>span</span> <span>span</span>    #id是唯一的     图片地址可以是浏览器上复制的,也可以是本地的src(source) <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1914461969,1034806639&fm=26&gp=0.jpg" alt=""> <img src="12423.jpg" alt="jason女朋友"> <img src="1.jpg" alt="jason女朋友" title="我女朋友好看吧" width="400"> </body> </html> 列表标签 ul:无序列表 (unorder list) ol：有序列表 (order list) dl：标题列表 (definition list) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>  (disc 表示圆点(默认),circle 表示白圆点,square正方形,none什么都没有)              ('A':大写英文字母排序,'i':小写的罗马数字排序,'I':大写罗马数字排序,'a':小写的英文字母排序,'1':阿拉伯数字排序,默认)        <dl> <dt>标题1</dt> (definition title) <dd>内容1</dd> (definition description) <dd>内容2</dd> <dd>内容3</dd> <dt>标题2</dt> <dd>内容2</dd> <dt>标题3</dt> <dd>内容3</dd> </dl> </body> </html> 表单标签固定就以下面的格式书写 <table> <thead></thead> <tbody></tbody> </table> tr 一个tr表示一行 border调整列表的边框 cellspacing 调单元格与外边框之间的距离 cellpadding 调文本与单元格之间的距离 rowspan 垂直方向合并 colspan 水平方向合并 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>name</th> <th>age</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td>jason</td> <td>18</td> <td rowspan="2">学习</td> </tr> <tr> <td>egon</td> <td>73</td>  </tr> <tr> <td>nick</td>  <td colspan="2">戴帽子</td> </tr> </tbody>     </table> </body> </html> form表单功能:获取用户输入(手动输入/选择/默认值)，并将获取到的用户信息发送给后端 form表单中只有input的type类型为submit才会触发提交信息的动作如果不想通过input标签来触发提交动作那么可以直接写一个<button>button按钮</button> input 通过控制type的类型从而实现不同的获取用户输入的标签样式 text 普通文本 password 密文 date 日历 radio 单选框 checkbox 多选框 file 获取文件 submit 触发提交数据的行为 button 普通的按钮 reset 重置form表单内容 select 选择框默认是单选的可以通过multiple参数将单选变为多选一个option就是一个选项 textarea 获取用户大段文本值 form表单中几个重要的属性 action:用来控制数据到底提交给谁写url来指定提交给谁 form表单默认是get请求可以通过method属性修改提交方法 form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型你可以将name属性当做字典的key 用户输入的当做字典的value 并且你可以手动设置value值 form表单发送文件需要修改enctype属性的值默认是urlencoded不支持传输文件需要将其修改为multipart/form-data GET请求与POST请求 get请求:获取想要的数据 post请求:提交数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>用户注册</h3> <form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data"> <p>username:<input type="text" name="username" value="jason"></p> <p>password:<input type="password" name="password"></p> <p>birth:<input type="date" name="birthday"></p> <p>gender: 男<input type="radio" name="gender" value="0"> 女<input type="radio" name="gender" value="1" > 保密<input type="radio" name="gender" checked value="2"> </p> <p>hobby: <input type="checkbox" checked name="hobby" value="basketball">篮球 <input type="checkbox" checked name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="doublecolorball">双色球 </p> <p>province默认单选: <select name="province" id=""> <option value="beijin">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select> </p>                           <p>info: <textarea name="info" id="" cols="30" rows="10"></textarea> </p> <p>file: <input type="file" name="file"> </p> <input type="submit" value="注册"> <input type="button" value="普通按钮"> <input type="reset" value="重置"> <button>button按钮</button> </form> </body> </html>

总结:

前端HTML 超文本标记语言注释   ps:写HTML的时候，注释一般都是成双成对的即   文件的后缀名 head内常用标签(不是给用户看的) title 定义网页标题 style 内部写css样式代码 link 引入外部css样式文件 script 可以在内部直接写js代码也支持src属性导入外部js文件 meta 定义网页原信息 name='keywords' content="......" name='description' content="......" body内常用标签(body内标签才是给用户看的) 基本标签 h1~h6 p u i s b br hr 特殊符号 < > © ® & ¥ 常用标签 div span a href='url' 跳转到指定网址锚点功能一个a调到另一个a标签具体案例:回到顶部 target 默认是在当前页面跳转 _self 指定成_blank新建页面跳转 img src 放图片地址(可以是本地的也可以是网络上的) alt 当图片加载失败时可以指定显示的提示信息 title 鼠标悬停上之后显示的提示信息 width 长宽在设置的时候只需要设置一个另一个自动等比例缩放 heigth 列表标签无序列表 ul>li 可以通过ul内type属性来控制无序的标识有序列表 ol>li 可以通过ul内type属性来控制有序的标识(1,a,A,I,i) 标题列表 dl dt 标题 dd 内容表格标签 <table> 可以通过type参数设置边框 <thead> <tr> <th>name</th> <th>age</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td>jason</td> <td>18</td> <td>训人</td> </tr> <tr> <td>egon</td> <td>84</td> <td>被训</td> </tr> <tr> <td>kevin</td> <td>30</td> <td>看热闹</td> </tr> </tbody> </table> table标签内可以设置的属性 type cellspacing 设置单元格与边框之间的距离 cellpadding 设置文本值域单元格之间的距离单元格标签可以设置的属性 rowspan 垂直方向 colspan 水平方向 form表单以用户注册为例 input type属性可以变幻的值 text password date radio checked 如果属性名和属性值相等那么可以简写 checkbox checked file form表单上传文件需要修改两个参数的值 1.将method由默认的get改为post 2.将enctype编码格式由默认的urlencoded改为formdata submit 提交按钮触发form表单提交数据的动作 button 上面功能都没有。就是一个普通按钮 reset 重置用户填写的信息 select 选择标签默认是单选的可以通过设置multiple参数改为多选一个个的option就是一个个的选项 textarea 大段文本框 button标签也可以出发form表单的提交动作总结: 1 获取用户输入的标签都必须有一个name属性用户输入的值会被存放到标签的value属性中你可以理解为name属性对应是字典的key 用户输入的被value属性获取的到值是字典的value 2 label标签通常是和input标签组合使用 <form action=""> <label for="i1">username:<input type="text" id="i1" name="username"></label> <label for="i2">password: <input type="password" name="pwd" id="i2"></label> <input type="submit"> </form> 请求方法: get请求:朝服务端获取资源(可以携带参数供服务端校验) 不推荐携带敏感型的参数 get请求携带的参数是有大小限制的大概4KB 可以携带一些不重要的参数 post请求:朝服务端提交数据敏感性的信息都应该采用post提交方式标签分类1: 双标签:h1~h6 a p div span table ul ol dl 自闭和标签: img br hr input 标签分类2: 块儿级标签独占一行块儿级标签可以嵌套块儿级标签和行内标签 p标签虽然是块儿级标签但是不能嵌套任何的块儿级标签只能嵌套行内标签可以设置长宽行内标签大小取决于内容大小不能设置长宽

转载于:https://www.cnblogs.com/huangxuanya/p/10947018.html

专利

最新回复(0)