HTML5教程

前端开发

本文主要是介绍前端开发，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

  • 前端简介

  • HTTP简介

  • HTTP协议

  • HTML简介

  • head内常见标签

  • body内基本标签

  • body内特殊符号

  • body内常见标签

  • 标签的两大重要参数

  • 列表标签

  • 表格标签

 

前端简介

# 1.什么是前端 什么是后端
    前端
    任何与用户直接打交道的界面都可以称之为前端
        eg:淘宝页面 游戏页面 操作页面
  后端
    不直接与用户打交道的用于执行真正业务逻辑的代码
        eg:python代码 java代码 c++代码
# 2.前端的学习路径
  知识脉络:
    HTML CSS JavaScript jQuery(框架) Bootstrap(框架)
    只要学习前端看到要学'前端三剑客'>>>:HTML CSS JavaScript
  比喻说明:
    HTML:网页的骨架
        蜡笔小新不穿衣服 赤裸裸的(难看)
    CSS:网页的样式
        穿上衣服 化好妆(好看)
    JavaScript:网页的动态效果
      扭起来 跳起来 动起来(生动)
​

HTTP简介

# 可以充当客户端的有哪些?
    1.自己写的python代码(TCP客户端)
  2.别人写的浏览器
  '''cs架构与bs架构:bs本质也是cs'''
​
# 问题
    我们自己写的TCP服务端与浏览器之间通信了 但是浏览器不识别服务端数据
​
# 推导
    不同的服务端数据的组织策略千差万别 但是浏览器却需要做到能够统一处理
  最佳的解决措施是统一规定一个标准>>>:HTTP协议
​
# HTTP协议
    规定了服务端与浏览器之间的数据交互格式及其他事项
  """
  如果服务端遵循HTTP协议 就可以被浏览器正常访问并展示内容
  如果服务端不遵循HTTP协议 浏览器就不会正常访问和展示 但是不影响服务端
    如果这个应用特别火爆 那么完全可以让用户下载专属的客户端(app)
  """

HTTP协议

# 1.四大特性
    1.基于请求、响应
    服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应
  2.基于TCP/IP作用于应用层之上的协议
    应用层协议:HTTP HTTPS FTP ...
  3.无状态
    服务端不保存客户端状态(纵使见她千百遍 我都当她如初见)
  4.短连接
    不保持客户端与服务端之间的链接导通
        补充:websocket(长连接) 主要用于加好友聊天等业务
​
# 2.数据格式
    请求格式:客户端给服务端发送消息应该遵循的数据格式
    1.请求首行(请求方法 协议版本)
    2.请求头(一大堆k:v键值对)
    3.(换行不能省略)
    4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有
    
  响应格式:服务端给客户端发送消息应该遵循的数据格式
    1.响应首行(响应状态码 协议版本)
    2.响应头(一大堆k:v键值对)
    3.(换行不能省略)
    4.响应体(给浏览器展示给用户看的页面内容)
​
# 3.响应状态码
    用数字来表示一串中文意思(简化理解)
    1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
    2XX:200 OK  表示请求成功 服务端给出了响应
    3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面)
    4XX:403请求不合法(权限不够)  404请求资源不存在
    5XX:都是服务端错误  与客户端无关(代码bug、机房炸了...)
  在工作中还会自定义状态码(因为默认的不够)
    自定义状态码一般都是从10000开始
        # 以后我们进公司写后端也需要给前端提供一个手册
        eg:聚合数据

HTML简介

<h1>hello big baby</h1>
<a href="https://www.sogo.com">click me</a>
<img src="111.jpg"/>
# 上述语法就是HTML 用于构建网页的骨架(所有的网页都是由HTML组成)
1.存放HTML代码的文件后缀名一般都是.html
    
2.HTML:超文本标记语言
    它没有任何的逻辑 固定搭配 """所见即所得"""
​
3.HTML文档结构
    <html>
    <head>给浏览器看的数据</head>
    <body>给用户看的数据</body>
  </html>
​
4.HTML标签的分类
    1.双标签:有头有尾      内容写在中间
        <h1></h1>   <html></html>
  2.自闭合标签:单标签
        <img/>              一般有特殊功能
  
5.HTML注释语法
    <!--单行注释-->
  <!--
  多行注释
  -->
  '''html由于标签非常的多 所以可以通过注释区分页面区域'''

补充

1.如何打开html标签
    1.查找并右键选择打开方式
  2.pycharm快捷方式(重要)
    html文件内容区右上方浏览器图标
 
2.html标签其实没有缩进的概念
    之所以缩进是因为我们习惯了 更加美观
​
3.在pycharm中的html文件内
    编写标签只需要写表名名称即可 按tab键自动补全
 
4.在pycharm中的html文件内
    注释的快捷键也是ctrl+?

head内常见标签

# head标签内编写的标签一般都是给浏览器看的
    title标签         控制网页小标题
  style标签           内部支持编写css代码
  link标签            引入外部css文件
  script标签      内部支持编写js代码 也可以通过src属性引入外部js文件
  meta标签            功能非常多
                                keywords:搜索引擎查询关键字
                                description:用于展示页面搜索结果的文本描述
"""
正常的业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合
"""

body内基本标签

"""相同的样式可能存在多种标签 区别在于语义不一样(后面再说)"""
1.标题系列
    h1~h6(1到6级标题)
2.字体系列
    <i>斜体</i>
  <b>加粗</b>
  <u>下划线</u>
  <s>删除线</s>
3.文本段落
    <p></p>
4.其他
    hr  水平分割线
  br    换行符

body内特殊符号

&nbsp;      空格
&gt;            大于号
&lt;            小于号
&amp;           &符号
&yen;           羊角符
&copy;      版权  
&reg;           商标

body内常见标签

"""
标签的类别
    块儿级标签:h1~h6 p   div
        默认独占浏览器一行内 
    行内标签:s i u b span
        自身内部文本多大就占多大
    
标签之间支持嵌套(最好是布局类相关标签参与)
    块儿级标签可以嵌套任意标签
        不属于布局标签的块儿级标签不建议嵌套块儿级标签
    行内标签只能嵌套行内标签
"""
1.布局标签
    div
  span
  # 页面的编写首先就是先用布局标签占位 之后填充内容即可
  ps:课下随便找几个网站查看一些div的使用
​
2.图片标签
    img
    src         图片路径
    title       鼠标悬浮自动展示提示信息
    alt     当图片无法正常展示自动提示的信息
    height  自定义图片高度
    width   自定义图片宽度
    # height和width调整一个另外一个自适应调节 单位是px(像素)
    
3.链接标签
    a
    href      点击跳转到位置
                        可以写网址
                        <a href='网址'></a>
                    也可以写标签id值
                    <a href='页面上某个标签id值'></a>
    target  控制是否当前页跳转
                        默认_self当前页
                    设置_blank新建页

标签的两大重要参数

1.id
    类似于身份证号 同一个html页面上标签的id值不允许重复
  用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)
2.class
    类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)

列表标签

# 无序列表
    <ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
    </ul>
"""
无序列表是使用频率最高的列表标签
    页面上只有是有规则排列的横向或者竖向内容 几乎使用的都是无序列表
"""

表格标签

<table >
    <thead>
        <tr>  <!--tr表示一行-->
            <th>编号</th>  <!--th加粗文本-->
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>  <!--表头字段-->
    <tbody>
        <tr>
            <td>1</td>  <!--td普通文本-->
            <td>jason</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>tony</td>
            <td>28</td>
        </tr>
        <tr>
            <td>3</td>
            <td>kevin</td>
            <td>38</td>
        </tr>
    </tbody>  <!--表单数据-->
</table>

 

 

这篇关于前端开发的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航