前端基础——HTML

前端

目录

  • 前端简介
  • HTTP超文本传输协议
  • HTML简介
  • head内常见标签
  • body内常见标签

前端简介

  • 前端与后端

    计算机 含义
    前端 呈现给用户的操作界面
    后端 呈现给后台工作者执行核心业务逻辑的代码程序

  • 前端核心基础

    核心 理解
    HTML 网页的骨架
    CSS 网页的样式
    JS（JavaScript） 网页的动态

    把页面代码都放到html文档中，用css文件来修饰页面的颜色、大小、布局等，js来修饰网页的动态行为，如：弹窗、动态换转图片等

超文本传输协议

  • 超文本传输协议的步骤

    1. 手写一个服务端程序

    2. 使用浏览器充当客户端

    3. 浏览器端无法直接展示服务端的响应数据

    4. 浏览器需要兼容多种服务端软件，为了实现无障碍沟通交流，产生了HTTP协议、FTP协议、HTTPS协议

    5. 浏览器发送的请求数据格式由于已经被他人提前封装完善肯定不会出现问题，出错的原因是自己写的服务端的响应数据格式

  • HTTP超文本传输协议

    1.HTTP协议的四大特性

    ​ HTTP协议就是超文本协议，专门用于规范服务器端与客户端交互的格式

    特性 理解
    基于请求响应 客户端向服务器发送一个请求，然后得到响应
    基于TCP/IP之上作用于应用层的协议 通信的过程其实是对应数据的入栈和出栈
    无状态 不保存用户信息，每次过来都视为第一次看到
    无/短连接 请求一次回应一次，之后断开连接

    ​ 此外还有一种长连接，长链接就是 在双方建立链接后默认不断开，websocket

    2.HTTP的数据格式

    • 请求数据格式步骤

      1.请求首行 （请求方式:有很多种 协议名称及版本）

      2.请求头 （以k:v 键值对的形式展现）

      3.换行 \r\n（请求数据格式步骤必须要带有换行）

      4.请求体 （携带一些敏感数据，如不展示密码。不是所有的请求都有请求体）

    • 响应数据格式步骤

      1.响应首行(响应状态码)

      2.响应头（以k:v 键值对的形式展现）

      3.换行

      4.响应体(一般情况下就是浏览器要展示给用户看的数据)

    3.响应状态码

    利用数字来表示一些复杂的情况说明(类似于暗号)

    响应状态码 报错类型 报错原因
    1xx 服务端已经接收到你的请求正在处理 你可以继续提交或者等待
    2xx 200 OK服务端给出了相应响应
    3xx 重定向:自动跳转到一个新的URL地址
    4xx 403
    404    		 请求不符合条件
    请求资源不存在
    5xx 500 服务端内部错误

    ​ 重定向是在服务器返回这个状态码后自动跳转到新的URL地址，此地址从相应Location的首部获取

    ​ 3xx中常见的是301，302 .

    ​ 301 是代表旧地址被永久的移除（这个地址不可再被访问）

    ​ 302 是代表暂时性移除，就是旧地址还在，只是临时跳转到新的界面

HTML简介

  • 超文本标记语言

    ​ 是所有浏览器展示的页面必备的!!!

  • 浏览器界面

    ​ 浏览器展示的界面我们也称之为HTML页面 存储HTML语言的文件后缀一般是.html

    HTML没有任何的逻辑 所见即所得

  • HTML注释语法

  • HTML文件结构

    <html>  所有的代码都必须写在html标签内部
<head></head>  head内的数据一般都不是给用户看的
<body></body>  body内的数据就是浏览器展示给用户看的
</html>

  • HTML标签的分类

    html分为单标签和双标签

    1. 单标签(自闭和标签)

    2. 双标签

    HTML代码是不讲究缩进的

head内常见标签

标签 作用
title 控制标签页的小标题
style 内部支持编写CSS
link 引入外部CSS文件
script 内部支持编写JS代码，还可以通过src属性引入外部JS文件
meta 通过内部属性的不同可以有很多功能

  • meta 的部分功能：

    <meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">

body内的标签

  • body基本标签类型

    基本标签 作用
    h1~h6 标题标签
    p 段落标签
    hr 水平分割线
    br 换行符
    u 下划线
    i 斜体
    s 删除线
    b 加粗

    ​ 注: 有很多样式，可能存在多种标签可以实现

  • 块儿级标签与行内标签

    1.块儿级标签

    ​ h1~h6 p hr br 一个标签独占一行

    2.行内标签

    ​ u i s b 内部文本多大自身就占多大

  • body内的基本符号

    基本符号 含义
    &nbsp ; 空格
    &gt ; >
    &lt ; <
    &amp ; &
    &yen ; ￥
    &reg ; 注册
    &copy ; 版权

  • body内布局标签

    布局 标签类型 作用
    div 块儿级标签 可以嵌套任何类型的标签
    span 行内标签 行内标签只能嵌套行内标签

    ​ 1.块儿级标签是可以通过CSS调整为不独占一行

    ​ 2.标签之间很多时候可以嵌套

    ​ 块儿级可以嵌套任何类型的标签，行内标签只能嵌套行内标签

    ​ p标签虽然是块儿级标签 但是不能块儿级标签

  • body内常见标签

    1. a 标签 （链接标签）

      标签 作用
      href 可以填写网址 点击自动跳转
      href还可以填写其他标签的id值 实现锚点功能
      target 可以控制是否新建页面跳转
      _self, _blank

    2. img 标签(图片标签)

      标签 作用
      src 填写图片的地址
      title 鼠标悬浮在图片上就会有提示信息
      alt 图片加载失败提示的信息
      height 调整图片的高度
      width 调整图片的宽度

      图片的高度与图片的宽度是等比例缩放的，只能选择一个调整，不然就会失真

标签

  • 标签的两大重要属性

    ​ 标签的两大属性都是为了快速定位需要操作的标签

    两大属性 理解
    id属性(一对一管理) 类似于身份证号 在同一个html页面上 id值不能重复
    class属性(批量管理) 类似于分组 多个标签可以拥有相同的class值

    ​

  • 列表标签

    列表标签中分为无序列表、有序列表、标题列表

    1. 无序列表

      <ul>
        <li>python</li>
        <li>golang</li>
        <li>linux</li>
    </ul>

      页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
      有序列表

  • 表格标签

    	<ol type="I" start="10">
          <li>第一项</li>
          <li>第二项</li>
          <li>第二项</li>
    </ol>

  • 表单标签

    <dl>
      <dt>标题1</dt>
        <dd>内容1</dd>
      <dt>标题2</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
    </dl>

  • 表格标签

    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>jason</td>
                <td>123</td>
            </tr>
        </tbody>
</table>

  • 表单标签

    表单标签能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器

    • 表单标签的用法

      ​

      action属性: 用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交

      method属性: 用于控制请求的方式(get\post)

    • 实例操作

      <form action="" method="post">
        <p>username:<input type="text"></p>
        <p>password:<input type="password"></p>
        <p>birthday:<input type="date"></p>
        <p>email:<input type="email"></p>
        <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
        </p>
        <p>hobby:
            <input type="checkbox" name="hobby">篮球
            <input type="checkbox" name="hobby">足球
            <input type="checkbox" name="hobby">双色球
        </p>
        <p>file:
            <input type="file">
        </p>
        <p>files:
            <input type="file" multiple>
        </p>
        <p>province:
            <select name="" id="">
                <option value="">上海</option>
                <option value="">北京</option>
                <option value="">深圳</option>
            </select>
        </p>
        <p>GF:
            <select name="" id="" multiple>
                <option value="">小明</option>
                <option value="">小波</option>
                <option value="">小冲</option>
                <option value="">小黄</option>
            </select>
        </p>
        <p>info:
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <input type="submit" value="用户注册">
        <input type="reset" value="重置内容">
        <input type="button" value="普通按钮">
    </form>
posted @ 2022-08-22 18:40  Nirvana*  阅读(36)  评论(0)    收藏  举报