码迷,mamicode.com
首页 > Web开发 > 详细

前端---HTML简介

时间:2019-12-26 21:42:03      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:dex   页面跳转   自动调用   动作   val   --   eset   alt   multiple   

什么是前端?

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

软件开发架构

? --CS --BS (bs 本质就是cs)

web服务的本质

? 浏览器窗口输入一个网址敲回车发生那些事

? 1. 朝着指定的服务端发送请求

? 2.服务端接收相应的请求

? 3.服务端返回相应的响应

? 4.浏览器接收响应 按照特定的规则渲染页面展示给用户看

HTTP协议

? 超文本传输协议

? 规定了浏览器与服务端之间数据传输的格式

  • 1,四大特性

    • 1 ,基于请求响应

      ? 一次请求对应一次响应

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

    • 3,无状态

      ? 不保留客户端的状态,无论你来多少次,我都待你如初恋

    • 4,无连接

      ? 长连接 websocket(类似于http协议的大补丁) 聊天室相关

  • 2,数据格式

    ? 请求格式

    ? - 请求首行(请求方式 协议版本)

    ? - 请求头(一大堆 k,v 键值对)

    - ( 空 一 行 通知服务器一下不再有请求头)

    ? - 请求体(携带的数据 并不是一直都有 有时候可能是空的 取决于你的请求方式)

    ?

    ? 响应状态码

    ? 用数字来表示一大堆提示信息

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

    ? 2XX : 200请求成功 服务端已经返回了你想要的数据

    ? 3XX : 重定向(原本想访问A但是内部自动给你转到了B上面)

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

    ? 5XX : 500服务端内部错误 机房卓火了 宕机 爆炸了

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

请求方式:
  • get请求:

    • 超服务端要资源(获取数据)

      ? 类似于浏览器窗口输入网址获取页面

  • post请求

    • 朝服务端提交请求

      ? 类似于登陆注册功能

HTML

? 超文本标记语言

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

? 浏览器能够识别的语言非常少

? HTML/XML CSS JS

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

? HTML注释:

? 注释是代码之母

  • 单行注释:<!- - 单行 - ->
    多行注释:<!- - 
          多行注释1
          多行注释2
          - ->

? 补充:由于HTML页面结构比较复杂,那日同比较多,不便于后期的维护 修改通常在写页面的时候 习惯用下面的方式来人为的划分代码区域

  • <!--顶部导航条样式开始-->
    
    <!--顶部导航条样式结束-->
    <!--左侧菜单栏样式开始-->
    
    <!--左侧菜单栏样式结束-->
HTML文档结构
  • <html>
      <head></head>:head内存放的内容不是给用户看的,是给浏览器去识别做响应操作的
      <body></body>:body内部存放的内容就是浏览器展示给用户看到的花里胡哨的页面
    </html>

HTML文档打开方式

  • 1.自动调用浏览器打开
  • 2.手动查找路径后选择浏览器打开

标签分类:

  • 双标签
  • 自闭和标签

head内常用标签

  • title:定义网页标题
    
    style:内部支持直接写css代码
    
    link:引入外部的css文件
    
    script:
    
      1.内部可以直接编写js代码
    
      2.可以通过src属性引用外部js代码
    
    meta:
    
      name属性
    
          keywords
    
          description

什么是URL?

  • URL:统一资源定位符

body内常用标签

基本标签:

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

特殊符号:

  • &nbsp;        空格
    <p>a大于b       a &gt; b</p>
    <p>a小于b       a &lt; b</p>
    <p>a&b        a &amp; b</p>
    <p>人民币        &yen;10000000</p>
    <p>版权标识       &copy;</p>
    <p>注册商标       &reg;</p>

常用标签:

  • div       块级标签
    span  行内标签
    两个标签没什么特殊意义,主要用来做前期的页面布局
    img 图片标签
  • src
      1.可以写一个网站图片地址
      2.还可以写一个本地图片地址
      3.url(自动朝该url发送get请求要数据)
    alt
      当图片加载不出来时,默认展示的提示信息
    title
      当鼠标悬浮在图片上时默认展示的提示信息
    width, height
      修改一个另外一个会自动等比例缩放
      也可以两个都自定义修改
    ??链接标签 a 标签
  • href
      1.放一个url
          点击就会跳转到该url所对应的资源
    target
      控制是否在当前页跳转
          默认实在当前页跳转
              _self
          新建页面跳转
              _blank
    锚点功能
      href不单单可以写url 也可以写另外一个a标签id值
      点击就会跳转到该id值所对应的a标签所在的位置 

标签应该具备的属性

  1. id属性:类似于身份证号 用来唯一标识当前html页面中的某一个标签

    ? 在同一个html页面中,id值不能重复

    1. class 属性:类似于面向对象的继承

    ? 直接引用别的类的样式

列表标签

  • 无序列表(用的比较多)
      ul
          li    (ul套li)
          只要页面上出现了比较有规则排列的文本 基本上都可以用无序列表来实现
    ---------------------------
          <p>无序列表</p>
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
    有序列表
      ol
          li
    ---------------------------
          <p>有序列表</p>
            <ol type="i">
                <li>哈哈哈</li>
                <li>呵呵呵</li>
                <li>嘿嘿嘿</li>
            </ol>
    标题列表
      dl
          dt 标题
          dd 内容
    ---------------------------
          <p>标题列表</p>
            <dl>
                <dt>标题1</dt>
                <dd>内容1</dd>
                <dd>内容2</dd>
                <dt>标题2</dt>
                <dd>内容1</dd>
                <dd>内容2</dd>
            </dl>

表格标签(* * * * * )

  • 展示网站数据的时候 一般情况下可以使用表格标签
    <table>
      <thead>
          <tr>
              <th></th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td></td>
          </tr>
      </tbody>
    </table>
    写表格标签  先写结构 然后写数据
    
    一个tr就是一行
    th和tr之分  一个加粗一个不加粗
    通常情况下表头用th, 表单内容用td

表单标签(* * * * * * )

  • form标签

    获取用户输入(输入,选择, 上传文件......)并且将数据打包发送给后端

  • action参数

    用来控制数据提交的路径(到底朝哪个后端服务器提交数据)

    ? 三种写法:

    ? 1. 不写 ,默认就是朝当前该页面所在的地址提交数据

    ? 2. 全路径(https://www.baidu.com)

          3. ?    只写路径后缀 (/index/)
  • method

    控制提交方式

    form表单默认是get请求, method=‘get’

    可以指定post请求, method=‘post’

  • enctype

    控制的数据提交的编码格式

    默认情况下form表单是不能直接发送文件的

    如果你要发送文件 必须将该参数由默认的urlencoded改为formdata

  • 获取用户输入 input标签 该标签是一个行内标签

input 类似于前端的变形金刚

type属性
    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>
        </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标签  聚焦
    
能够触发form表单提交数据的按钮(* * * * * * )
    <input type="submit">
        可以通过value属性来指定按钮文本内容
        <input type="submit" value="注册">
    <button>点我</button>
    
input 获取到的用户输入就类似于字典的value
input 中的name属性就类似于字典的key
注意事项
    1.获取用户输入的标签 都是用value属性来存放用户的输入
        获取用户输入的标签都应该有name属性  就类似于字典的key
        value属性就类似于字典的value
    2.如何给input设置默认
        可以直接给input标签加value属性
    3.input框如何设置提示信息
        username:<input type="text" value="jason" placeholder="用户名">
        
Flask框架
        pip3 install Flask

    get请求能够携带参数 但是参数的携带方式是直接跟在url后面的
        url?xxx=ooo&yyy=bbb&lll=ccc
        特点:
            1.数据全是明文
            2.数据大小有限制   大概应该可能在4KB左右吧...
            3.get请求不应该携带隐私信息
            
<form action="http://127.0.0.1:5000/">,在html文件中添加框架的地址,可以进行连接

标签的分类:

? 1,块儿级标签

? 独占一行 h1~h6 p br hr div

? 块儿级标签内部可以嵌套任意的块儿级标签和行内标签

? 特例:p虽然是块儿级标签, 但是他的内部只能嵌套行内标签 不能嵌套块儿级标签

? 如果嵌套了 没有问题 只是不符合html语法规范

? 2, 行内标签 u s i b span

? 自身文本多大 就占多大

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

前端---HTML简介

标签:dex   页面跳转   自动调用   动作   val   --   eset   alt   multiple   

原文地址:https://www.cnblogs.com/lishuangjian/p/12104212.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!