前端——基础和常用标签

前端

什么是前端？

任何与用户直接打交道的操作界面都可以称之为是一个前端

web服务的本质

浏览器窗口输入一个网址按下回车都发生了那些事情

  • 朝着指定的服务端发送请求
  • 服务端接收相应的请求
  • 服务端返回相应的响应
  • 浏览器接收响应，按照特定的规则渲染页面展示给用户看

HTTP协议

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

HTTP协议的四大特性

  1. 基于请求响应（一次请求对应一次响应）
  2. 基于TCP/IP作用于应用层之上的协议
  3. 无状态（不保留客户端的状态）
  4. 无连接

    长链接 websocket(类似于HTTP协议的大补丁) 聊天室相关

数据格式

? 请求格式

? ①：请求首行（请求方式 协议版本）

? ②：请求头（一大堆k,v键值对）

? ③：空行

? ④：请求体（携带的数据，并不是一直都有，有时候可能是空的，取决于请求方式）

? 响应格式

? ①：响应首行（响应状态码）

? ②：请求头（一大堆k,v键值对）

? ③：空行

? ④：响应体（浏览器展示给用户看的数据）

响应状态码（用数字来表示一大堆提示信息）

? 1XX：服务端已经成功接收到客户端的数据正在处理，你可以继续提交

? 2XX：200 请求成功，服务端已经反悔了你想要的数据

? 3XX：重定向（原本想访问A页面但是内部自动给转到了B页面）

? 4XX：404 请求资源不存在 ，403你当前不具备请求该资源的条件

? 5XX：500 服务端内部错误（有可能是机房着火了 宕机了 也可能爆炸了）

? PS：公司内部可以自己定制自己的响应状态码

请求方式

1.get请求

? 向服务端获取数据（类似于浏览器窗口输入www.baidu.com获取百度首页）

2.post请求

? 向服务端提交数据

? 类似于登录注册功能

HTML（超文本标记语言）

? 如果想让你的页面能够被浏览器识别并展示出好看的样子，你就必须手写HTML代码

? 浏览器能够识别的语言很少只有：HTML/XML、CSS、JS

? PS：XML也可以写前端页面，主要用于odoo框架中，书写企业内部管理软件

HTML注释

? 注释是代码之母

? 单行注释：<!- -单行- ->

? 多行注释：<!- -多行注释1- ->

? 多行注释2- ->

由于HTML页面结构比较复杂，内容比较多，不便于后期的维护，修改通常在写页面的时候通常用下面的方式来人为的划分代码区域

例如：

<!--顶部导航栏开始-->

<!--顶部导航栏结束-->
<!--左侧菜单栏开始-->

<!--左侧菜单栏结束-->

HTML文档结构

<html>
    <head></head>:head内存放的内容不是给用户看的，是给浏览器去识别相应的操作的
    <body></body>:body内存放的内容就是浏览器展示给用户看到的花里胡哨的页面
</html>

HTML文档打开方式

1.pycharm自动调用浏览器打开（推荐）

2.手动查找路径之后选择浏览器打开

标签的分类1

? 1.双标签

? 2.自闭合标签

标签的分类2

? 1.块级标签

? 独占一行 h1-h6、p、br、hr、div

? ①：块级标签内可以嵌套任意的块级标签和行内标签

? ②：特例：p虽然是块级标签，但是他的内部只能嵌套行内标签，不能嵌套块级标签

? 如果嵌套了没有关系，只是不符合HTML语法规范

? 2.行内标签

? 自身文本多大，就占多大 u、s、i、b、span

? 行内标签内部不能嵌套块级标签和行内标签

PS：书写标签的时候，只需要写标签的名字，之后Tab键就可以自动补全（emmet插件）

emmet插件：专门补全HTML代码的插件

head内常用的标签

  • title：定义网页标题
  • style：内部支持直接写CSS代码
  • link：引入外部的CSS文件
  • script：①：内部可以直接编写js代码 ②：可以通过src属性引用外部js代码
  • meta：name属性
    • keywords

      description

URL（统一资源定位符 就是网页地址）

body内常用的标签

基本标签

  • h1-h6：标题标签
  • s：删除线
  • b：加粗
  • u：下划线
  • i：斜体
  • p：独占一行
  • br：换行
  • hr：分割线

特殊符号

  • & nbsp; 空格
  • & gt; 大于
  • & lt； 小于
  • & amp; 与
  • & yen; 人民币
  • & copy; 版权标识
  • & reg; 注册商标

常用标签

  • div 块级标签
  • span 行内标签
    • 本身没有任何特殊意义

      但是这两个确实是使用最多的，用来做前期的页面布局的

  • img 图片标签
    • src

      • 可以写一个网站的图片地址
      • 可以写本地图片地址
      • url（自动向该url发送get请求获取数据）
    • alt
      • 当图片加载不出来的时候，默认展示的提示信息
    • title
      • 当鼠标悬停在图片上的时候，展示的提示信息
    • width,height
      • 修改一个属性，另一个也会随之等比例缩放（当值图片失真）
      • 强行修改两个属性，图片会失真
  • a 链接标签
    • href

      • 放一个url，点击就会跳转到该url所对相应的资源
    • target
      • 控制是否在当前页面跳转

        • 默认是在当前页面跳转

          • _self
        • 新建页面跳转
          • _blank
    • 锚点功能
      • href不单单可以写url，也可以写另外一个a标签id值
      • 点击就会跳转到该id值所对应的a标签所在的位置

标签应该具备的属性

  • id属性：类似于身份证号 用来唯一标识当前HTML页面中的 某一个标签

    • 在同一个HTML页面中 id值不能重复
  • 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

表单标签

  • form标签

    获取用户输入（输入，选择，上传文件……）并且将数据打包发送给后端

  • action参数

    用来控制数据提交的路径（到底是哪个后端服务器提交数据）

    三种写法

    • 不写 默认就是向当前页面所在的地址提交数据
    • 全路径 （https://www.baidu.com）
    • 只写路径后缀（/index/）
  • input标签：获取用户输入
    • typ属性

      • 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 获取文件
  • 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>
  • textarea标签：获取大段文本
  • label标签

    通常配合input一起使用的

    属性“for”用来填写对应的input标签id值

    点击label标签内的内容 会自动让对应的input标签聚焦

能够触发from表单提交数据的按钮

<input type="submit">
<!--可以通过value属性来指定按钮文本内容-->
<input type="submit" value="注册">
<button>点我</button>

input获取到的用户输入就类似于是字典的value

inpu中的name属性就类似于是字典的key

原文地址：https://www.cnblogs.com/aheng/p/12098580.html

时间： 2024-10-10 06:39:53

前端——基础和常用标签的相关文章

前端基础-HTML常用标签介绍

前端基础-HTML常用标签介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML是什么 1>.超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则: 2>.浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容.但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性): 3>.静态网页文件扩展名:".html "或 &qu

49、html基础认识&amp;常用标签（1）

从今天期我们进入前端的学习,先学习html,没有任何复杂难懂的逻辑需要烧脑,只需要记忆.练习.练习.练习. 一.HTML初识 1.web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8081)) sock.listen(5) while True: print("server is working.....")

前端基础：HTML标签(下)

前端基础HTML标签(下) 1.表单 表单的功能主要用于向服务器传输数据,从而实现客户端与Web服务器的交互.表单能够包含input系列标签,比如:文本字段.复选框.单选按钮.提交按钮等:表单还包含textarea.select和label标签: 表单的属性:action,将表单数据提交到指定服务器的某个程序,程序收到表单提交过来的数据(即表单数据)做相应处理,比如:https://baidu.com:**method**,表单的提交方式get/post/update等,默认为get: 注意 f

前端基础之操作标签—文档处理

一.操作标签 1.文档处理   <1>添加到指定元素内部的后面 $(A).append(B) // 把B追加到A后面 $(B).appendTo(A) // 把B追加到A后面   <2>添加到指定元素内部的前面 $(A).prepend(B); // 把B添加到A的前面 $(B).prependTo(A); // 把B添加到A的前面   <3>添加到指定元素外部的后面 $(A).after(B) // 把B放到A外部的后面 $(B).insertAfter(A) //

web前端基础：常用网页元素命名规范

网页元素名称的规范性有助于团队内部成员的沟通,同时还能够提高后期的维护性,网页元素的命名主要是针对id和class进行的,针对网页元素的命名没有业界标准,但有一些大家公认的规则. 一般情况下id我们通常采用camelCase命名规则(首字母小写,其它单词首字母大写),比如:studentName和fontColor等.针对Class的命名,我们不难发现,很多开源框架都使用短横线分割小写单词,比如:ui-widget-header和content-right,除了遵守这样的规则外,一个有意义的名称

HTML基础之常用标签

<!DOCTYPE html> #标记语言文档类型声明<html lang="en"><head> #头部标签 <meta charset="UTF-8"> #字符集 <title>Title</title> #head标签内可以定义网页关键字和描述,刷新,跳转,字符集,图标等,</head> html标签按占位分为行内标签和块级标签,按使用分为闭合标签和自闭和标签: 列如:块级标签

HTML基础（一）——一般标签、常用标签和表格

第一部分  HTML <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body> 页面显示的内容 </body> </html>    --结束标签 <!--注释内容--> 注释 body的属性: bgcolor                 页面背景色 text                    文字颜色(规定所有文

Web前端入门学习（2）——HTML常用标签

HTML标签 a标签 a标签是一个超链接标签,用于从一个页面链接到另一个页面.在<Web前端入门学习(1)>有提到过4个伪类,分别是a:link.a:visited.a:hover.a:active. a:link代表的是未访问过的链接,当访问者首次打开网页未点击链接时,所表现的形式: a:visited代表的是访问过的链接,相对于link,是访问者点击了连接后,所表现的形式: a:hover代表的是当鼠标经过链接上面时所表现的形式,鼠标经过后,链接会有所变化: a:active代表的是当用户

smarty前端常用标签

{* {extends file='blockparent.tpl'} *} {*必须放在模板的第一行,如果要用子模板来扩展父模板,那么它只能有{block}的区域任何其他模板的内容将被忽略*} {config_load file='config.conf'}{*载入配置文件*} <html> <head> <meta charset='utf-8' /> <style type="text/css"> .nav{ margin-left