前端简介:

  什么是前端?

  任何与用户直接打交道的操作界面都可以被称为前端,如:网页界面,手机界面....

前端的学习历程和内容:

要学习的内容:

 三大重点: 

1、Web服务的本质:

  浏览器中敲入网址回车发送了几件事?
   1.浏览器超服务端发送请求
   2.服务端接收请求
   3.服务端返回相应的响应
   4.浏览器接收响应  根据特定的规则渲染页面展示给用户看

服务端:连接htlm在页面展示

  1. import socket
  2. server= socket.socket()
  3. server.bind(('127.0.0.1',8080))
  4. server.listen(5)
  5. while True:
  6. conn,addr= server.accept()
  7. data = conn.recv(1024)
  8. print(data)
  9. conn.send(b'HTTP/1.1 200 ok\r\n\r\n')
  10. conn.send("hell world!".encode('utf-8'))
  11. with open('a.txt','rb') as f:
  12. res=f.read()
  13. conn.send(res)
  14. conn.close()

web需遵循的协议

2、HTTP协议

   超文本传输协议,规定了浏览器与服务端之间消息传输的数据格式

HTTP的四大特性:

  1.基于请求响应

  2.基于TCP/IP之上的作用于应用层的协议

  3.无状态(服务端无法保存用户的状态,一个人来一千次 我都记不住 还当你如初见)

  4.无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了)

websocket 相当于是HTTP协议的一个大的补丁,它支持长连接

只写服务端,遵循HTTP协议,在网页url处绑定ip+端口,就可以实现客户端的请求

Djdigo内容及一些概念知识:

数据格式:

  请求数据格式

  1.请求首行(标识HTTP协议版本,当前请求方式)

  2.请求头(一大堆k,v键值对)

请求体(携带的是一些敏感信息比如 密码,身份证号...)

  响应数据格式

  1.响应首行(标识HTTP协议版本,响应状态码)

  2.响应头(一大堆k,v键值对)

响应体(返回给浏览器页面的数据 通常响应体都是html页面)

  响应状态码

用一串简单的数字来表示一些复杂的状态或者提示信息

1XX:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据

2XX:服务端成功响应 你想要的数据(请求成功200)

3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面  301 302)

4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)

5XX:服务器内部错误(500)

  请求方式

1.get请求

  朝服务端要资源(比如浏览器窗口输入www.baidu.com)

2.post请求

  朝服务端提交数据(比如用户登录 提交用户名和密码)

URL:统一资源定位符(就是指网址)

HTLM部分:

  htlm:超文本标记语言,要想让你的页面能够正常被浏览器显示出来,所写的页面就必须遵循htlm标记语法

浏览器只识别:htlm css js

pycharm修改标签字体颜色:

web本质:浏览器/服务器

文件(后缀名是.htlm结尾的文件,也就意味着,只要看到.htlm,那么它就是一个前端页面文件)

文件的后缀名仅仅是给人看的,计算机无所谓,因为都是二进制

HTLM注释:

  <!--单行注释-->

  <!--

  多行注释

  多行注释

  -->

HTLM是什么?

  是超文本标记语言,是一种用于创建网页的标记语言

  扩展名:.htlm或.htm

HTLM不是什么?

  HTLM是一种标记语言,它不是一种编程语言

最基本的HTLM文档:

  1. <!DOCTYPE htlm>
  2. <htlm lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>css样式优先级</title>
  6. </head>
  7. </body>
  8. </htlm>
  9. </!doctype>

解释:

  1:<!DOCTYPE htlm>  声明为HTLM5文档

  2:<htlm>、</htlm> 是文档的开始标记和结束的标记。是HTLM页面的跟元素,在它们之间是文档的头部(head)和主体(body)。

  3:<head>、</head> head内的标签,不是用来展示给用户看的,而是定义一些配置,主要是给浏览器看的。

  4:<title>、</title>定义了网页标题,在浏览器标题栏显示。

  5:<body>、</body> body内的标签 就是浏览器展示给用户看的内容

在pycharm里输入title直接按住TAB键 <title>、</title>

注意:对于中文网页需要使用<meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,

则你需要设置为 <meta charset="gbk">。

打开htlm页面的两种方式:

 1.找到文件路径 选择浏览器打开
   2.pycharm快捷方式直接打开  

HTLM标签格式  

.HTLM标签是由尖括号包围的关键字,如<htlm>、<div>等

.HTLM标签通常是成对的出现的,比如:<div>和<div>,第一个标签开始,第 二个标签是结束符,结束符会由斜线。

标签的语法:

.<标签名 属性1=“属性值1” 属性2=“属性值2”....>内容部分</标签名>

.<标签名 属性1=“属性值1”  属性2=“属性值2”..../>

head内常用标签:

  title:用来显示网页标题

  style:用来控制样式的,内部支持写css代码

  script:内支持写js代码,也支持导入外界的js文件

  link:专门用来引入外部的css文件

标签的分类:

 1.双标签(<h1></h1> <a></a>)
  2.单标签(自闭和标签 <img/>)

(1).快儿级标签(独占浏览器一行)

    div   p    h

  1.块儿级标签可以修改长度

  2.块儿级标签内部可以嵌套任意的块级标签

  总结:

    只要是块儿级标签,都是可以嵌套行 内的标签

    p标签只能嵌套行内,其他块儿级可以嵌套任意的块儿级标签

(2).行内标签(自身文本多大就占多大)

    sapn b s i u

div和span 通常都是用来构建网页布局的

body内常用的标签

  基本标签:

  h 标签:标题标签

  p标签:段落标签

  1. <b>加粗</b>
  2. <i>斜体</i>
  3. <u>下划线</u>
  4. <s>删除</s>
  5.  
  6. <p>段落标签</p>
  7.  
  8. <h1>标题1</h1>
  9. <h2>标题2</h2>
  10. <h3>标题3</h3>
  11. <h4>标题4</h4>
  12. <h5>标题5</h5>
  13. <h6>标题6</h6>
  14.  
  15. <!--换行-->
  16. <br>
  17.  
  18. <!--水平线--><hr>

 符号标签

内容 对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

  常用标签:

   div  span  p

p标签不能包含块级标签,p标签也不能包含p标签。

div标签和span标签

  div标签用来定义一个块级元素,并无实际意义,主要通过CSS样式为其赋予不同的表现。

  span 标签用来定义内联(行内)元素,并无实际意义......

 <img>标签:

   src存放的是图片的路径(该路径可以是本地的也可以是网上的)

    1.也可以是url(会自动请求该url获取相应数据)

    2.也可以直接存放图片的二进制数据,会自动转换成图片

    alt 当图片加载不出来的时候,显示的提示信息  

    title 当鼠标悬浮在图片上 提示信息

    height、width  当你指定一个参数的时候,另一个会等比例缩放

  <a>标签:超链接标签

    href 后面存放 url 的时候  点击跳转到该 url

    (如果该连接没有被点过,那么默认是蓝色,只要点过一次之后都是紫色)

    target   默认是_self  当前页面跳转

    _blank 新建页面跳转

    锚点功能(回到顶部)

      _href  还可以写另一个a标签的id值,点击就会跳转到id对应的a标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="jQuery-3.4.1.js"></script>
  7. </head>
  8. <body>
  9. <h1></h1>
  10. <h2></h2>
  11. <h3></h3>
  12. <h4></h4>
  13. <h5></h5>
  14. <h6></h6>
  15. <h7></h7>
  16. <h8></h8>
  17. <h9></h9>
  18. <h10></h10>
  19. <h11></h11>
  20. 孟母三迁
  21. <b>加粗</b>
  22. <i>斜体</i>
  23. <u>下划线</u>
  24. <s>删除</s>
  25. <p>人生得意需尽欢,莫使金樽空对月</p>
  26. <p>人生得意需尽欢,莫使金樽空对月</p>
  27. <p>人生得意需尽欢,莫使金樽空对月</p>
  28. 等你下课 超人不会飞
  29. <p>人生得意需尽欢,莫使金樽空对月</p>
  30. <br>
  31. <p>人生得意需尽欢,莫使金樽空对月</p>
  32. <hr>
  33. <p>人生得意需尽欢,莫使金樽空对月</p>
  34. </body>
  35. </html>

特殊符号:

每一个标签都应该有三个比较重要的属性

1.id值 该值就类似于人的身份证号 在用一个html文档id应该保证唯一不重复
   2.class值  该值就类似于面向对象里面的继承  可以写多个
   3.style(不是必备)  支持在标签内直接写css代码 属于行内样式 优先级最高
   补充 任何标签都支持自定义属性 !

常用的标签:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="jQuery-3.4.1.js"></script>
  7. </head>
  8. <body>
  9. <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2215934588,2652507557&fm=26&gp=0.jpg" alt="校花">
  10.  
  11. <stript>
  12. <p><a href="http://xiaohuar.com"> 点击有你好看哦!</a></p>
  13. </stript>
  14.  
  15. <div>div
  16. <div>div1</div>
  17. <div>div2
  18. <p>p
  19. <a href="https://www.luffycity.com">a</a>
  20. </p>
  21. </div>
  22. </div>
  23. <span>span</span>
  24. <a href="" id="d1">顶部</a> <!-->
  25. <div style="height: 100px;background-color: black"></div>
  26. <a href="" id="d2" class="c1">中间</a>
  27. <div style="height: 200px;background-color: green"></div>
  28. <a href="#d2">会到中间</a>
  29. <div style="height: 150px;background-color: yellow"></div>
  30. <a href="#d1" username="jason" password="123">点我回到顶部</a>
  31. </body>
  32. </html>

网页效果:

列表标签:

1.无序列表 

  1. <ul type="disc">
  2. <li>第一项</li>
  3. <li>第二项</li>
  4. </ul>

type属性:

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式)

2.有序列表

  1. <ol type="1" start="2">
  2. <li>第一项</li>
  3. <li>第二项</li>
  4. </ol>

type属性:

  • 1 数字列表,默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

3.标题列表

  1. <dl>
  2. <dt>标题1</dt>
  3. <dd>内容1</dd>
  4. <dt>标题2</dt>
  5. <dd>内容1</dd>
  6. <dd>内容2</dd>
  7. </dl>

HTLM示例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="jQuery-3.4.1.js"></script>
  7. </head>
  8. <body>
  9. <p>无序列表</p>
  10. <!--<ul>type="circle"</ul>-->
  11. <ul>type="square"
  12. <li>aaa</li>
  13. <li>bbb</li>
  14. <li>ccc</li>
  15. <li>ddd</li>
  16. <li>eee</li>
  17. </ul>
  18. <p>有序列表</p>
  19. <ol> type="I" start="2"
  20. <li>aa</li>
  21. <li>bb</li>
  22. <li>cc</li>
  23. </ol>
  24. <p>标题列表</p>
  25. <dl>
  26. <dt>标题1</dt>
  27. <dd>内容1</dd>
  28. <dt>标题2</dt>
  29. <dd>内容1</dd>
  30. <dd>内容2</dd>
  31. </dl>
  32. </body>
  33. </html>

演示页面效果:

 表格标签:

  表格的基本结构:固定成套出现的几对标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="jQuery-3.4.1.js"></script>
  7. </head>
  8. <body>
  9. <table border="20" cellpadding="10" cellspacing="10">
  10. <thead>
  11. <tr>
  12. <th>username</th>
  13. <th>password</th>
  14. <th>hobby</th>
  15. </tr>
  16. </thead>
  17. <tbody>
  18. <tr>
  19. <td colspan="2">jack </td>
  20. <td>123</td>
  21. <td rowspan="2">running</td>
  22. </tr>
  23. <tr>
  24. <td>rose</td>
  25. <td>123</td>
  26. <td>睡觉</td>
  27. </tr>
  28. <tr>
  29. <td>Django</td>
  30. <td>123</td>
  31. <td>万能王</td>
  32. </tr>
  33. </tbody>
  34. </table>
  35. </body>
  36. </html>

 <table>
    <thead></thead>
    <tbody></tbody>
   </table>
   tr表示一行
   th和td都是文本
    建议在thead内用th
    tbody内用td
   
   colspan表示的水平方向
   rowspan表示的竖直方向

属性设置:

  1. border: 表格边框.
  2. cellpadding: 内边距
  3. cellspacing: 外边距.
  4. width: 像素 百分比.(最好通过css来设置长宽)
  5. rowspan: 单元格竖跨多少行
  6. colspan: 单元格横跨多少列(即合并单元格)

form表单:用于交数据(***)

  表单用于向服务器传输数据,从而实现用户与Web服务器的交互,

表单能够包含inout系列标签,比如文本字段,复制框、单选框、提交框等

表单还可以包含:textarea、select、fieldset、label标签

表单属性:

属性 描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。

action控制数据提交的目的地

  1、不写的情况下,默认提交到当前页面所在的路径

  2、写全路径(http://www.baidu.com)

  3、路径后缀(/index/)

表单元素:HTLM表单是htlm元素较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能结合,所以它是制作动态网站很重要的内容

input 标签

  <input> 元素会根据不同的 type 属性,变化为多种形态。

  text:普通单行输入文本  --- <input type=text" />

  password:密码输入框  不展示明文  --- <input type="password"  />

  date:日期 ---  <input type="date" />

  submit:触发提交动作 ---<input type="submit" value="提交" />

  button:普通的按钮  没有实际意义 但是可以通过js绑定事件实现自定义动作   --<input type="button" value="普通按钮"  />

  reset:重置表单内容 --- <input type="reset" value="重置"  />

  radio:单选框    可以通过checked控制默认选择  -- <input type="reset" value="重置"  />

  checkbox:复选框   同上可以设置默认值   ---<input type="checkbox" checked="checked"  />

  file:获取用户上传的文件 ---  <input type="file"  />

select标签:

  默认是单选,可以通过multiple变成多选,如果想默认选择,用selected (selected="selected")

  1. <form action="" method="post">
  2. <select name="city" id="city">
  3. <option value="1">北京</option>
  4. <option selected="selected" value="2">上海</option>
  5. <option value="3">广州</option>
  6. <option value="4">深圳</option>
  7. </select>
  8. </form>
  9.  
  10. 属性说明:
  11. multiple:布尔属性,设置后为多选,否则默认单选
  12. disabled:禁用
  13. selected:默认选中该项
  14. value:定义提交时的选项值

textarea标签:

  1. <textarea name="memo" id="memo" cols="30" rows="10">
  2. 默认内容
  3. </textarea>

  属性说明:name:名称  rows:行数  cols: 列数  disabled: 禁用

获取用户输入的大段文本

from表单默认是get请求 你需要通过method参数,换成post提交

属性说明:

  1. name:表单提交时的“键”,注意和id的区别
  2. value:表单提交时对应项的值
  3. type="button", "reset", "submit"时,为按钮上显示的文本年内容
  4. type="text","password","hidden"时,为输入框的初始值
  5. type="checkbox", "radio", "file",为输入相关联的值
  6. checkedradiocheckbox默认被选中的项
  7. readonlytextpassword设置只读
  8. disabled:所有input均适用

label标签

  定义:<label> 标签为 input 元素定义标注(标记)。

  说明:

  1. label 元素不会向用户呈现任何特殊效果。
  2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
  1. <form action="">
  2. <label for="username">用户名</label>
  3. <input type="text" id="username" name="username">
  4. </form>

from表单中,想要触发提交动作

1:input标签type指定成submit

2:直接写button 标签

  

  

  

  

 

  

  

  

  

  

    

  

  

前端-HTLM的更多相关文章

  1. 前端之BOM与DOM-JQuery

    一.前端基础之BOM和DOM: 1: JavaScript分为 ECMAScript,DOM,BOM BOM:指的是浏览器对象模型,它使JavaScript有能力与浏览器进行“对话” DOM:是指文档 ...

  2. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  3. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  4. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  5. 总结:Mac前端开发环境的搭建(配置)

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  6. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  7. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  8. Fis3的前端模块化之路[基础篇]

    Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

  9. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

随机推荐

  1. 开源Git代码托管平台

    开源Git代码托管平台主要参考有以下4个: 1.GitHub 很多开源项目都来自GitHub,但是GitHub只能新建公开的Git仓库,私有 仓库要收费.GitHub地址:https://github ...

  2. 吴裕雄--天生自然 PHP开发学习:PHP编程基础知识

    <?php $x=5; $y=6; $z=$x+$y; echo $z; ?> <?php $txt="Hello world!"; $x=5; $y=10.5; ...

  3. 2020/1/30 PHP代码审计之CSRF漏洞

    0x00 CSRF漏洞 CSRF(Cross-site request forgery)跨站请求伪造:也被称为"One Click Attack"或者Session Riding, ...

  4. Codeforces 1296E1 - String Coloring (easy version)

    题目大意: 给定一段长度为n的字符串s 你需要给每个字符进行涂色,然后相邻的不同色的字符可以进行交换 需要保证涂色后能通过相邻交换把这个字符串按照字典序排序(a~z) 你只有两种颜色可以用来涂 问是否 ...

  5. 读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript

    1 <script>的6个属性 async  立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer  文档显示之后再执行脚本,只对外部脚本有效 lan ...

  6. 洛谷 P1964 【mc生存】卖东西(多重背包)

    题目传送门 解题思路: 题目里有,多重背包. AC代码: #include<iostream> #include<cstdio> #include<map> usi ...

  7. nginx log 切割

    /logs/nginx/*/*access.log { daily rotate 30 missingok dateext #compress notifempty sharedscripts pos ...

  8. spark与Scala版本对应问题

    在阅读一些博客和资料中,发现安装spark与Scala是要严格遵守两者的版本对应关系,如果版本不对应会在之后的使用中出现许多问题. 在安装时,我们可以在spark的官网中查到对应的Scala版本号,如 ...

  9. 2019.3.11 JavaScript课上笔记

    ---恢复内容开始--- 字面值写到左边 var  x= "1"; ++x .x++ // 都有隐式类型转换 x += 1; // 是字符串的拼接 === 判断引用的对象是不是同一 ...

  10. 19.3.8 HTML+css 课程

    form 归属于 form 通过id产生联系 ​<form id = "testform" method = "get" action = "s ...