前端——基础和常用标签

Posted aheng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端——基础和常用标签相关的知识，希望对你有一定的参考价值。

前端

什么是前端？

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

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

以上是关于前端——基础和常用标签的主要内容，如果未能解决你的问题，请参考以下文章

关于js----------------分享前端开发常用代码片段

前端基础CSS 属性

前端——基础和常用标签

markdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发

前端开发常用代码片段（中篇）

前端开发常用js代码片段