HTML

HTML简介

        HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成
        HTML:超文本标记语言
        # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能
        """
        HTML标签的分类
            1.双标签(有头有尾)
                <a></a>
            2.自闭合标签(单标签)
                <img/>
        """
        # HTML文档结构
            <html>
            <head>编写给浏览器查看的内容</head>
            <body>编写展示给用户查看的内容</body>
          </html>
          '''在使用编程工具创建的时候就会自动编写文档结构'''
        # HTML语法注释
            <!--单行注释-->
          <!--
          多行注释
          多行注释
          -->
          '''在编写的时候 编程工具也有注释快捷键 ctrl+?'''

如何创建和展示

        """
        存档网页骨架的文件后缀名一般都是.html
            该类型文件主要的打开方式为浏览器形式
        """
        1.以pycharm为例
            右键new点击HTML FILE创建即可
        2.如何打开展示
            右上方会提供多种浏览器(注意需要提前下载)

        # 编写HTML标签的时候 不需要自己写大括号小括号 只需要写标签名称+tab键即可自动补全(所有支持编写html文件的工具内部自带的插件语法功能)

Head内常见标签

        title		定义网页标题
        style		内部支持css代码
        script	内部支持编写js代码 还可以通过src属性导入外部js文件
        link		通过href属性引入外部的css文件
        meta		定义网页原信息
                            keywords关键字搜索
                        description网页描述信息
        """
        在html文件中 可以编写html和css以及js
            但是实际工作中三者其实是分开存放的 这样有利于后期维护和扩展
        """

body内基本标签

        h1~h6	     标题标签
        p			段落标签
        b			加粗
        i			斜体
        u			下划线
        s			删除线
        br		    换行
        hr		    水平分割线
        """有时候相同的样式 可能有多种标签可以实现!!!"""

        标签分类
            分类1:单双标签
          分类2:
                块儿级标签		h1~h6 p
                独占一行(后期可以通过css实现不占一行)
              行内标签		u i s b
                自身文本多大就占多大

特殊符号

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

常见标签

        # 网页在制作之前需要提前布局好
        布局标签
            div			块儿级标签
          span		行内标签

        """
        标签是可以嵌套的 但是需要遵循以下规律
            1.块儿级标签 可以无限制的嵌套块儿级标签和行内标签
                特例:p标签虽然是块儿级标签但是也不能嵌套块儿级标签
            2.行内标签不能嵌套块儿级标签 可以嵌套行内标签


        知识点扩展
            页面布局的技巧
                先用div划分区域 之后再考虑填充具体内容
                    可以参考小米官网练习该技巧
        """
        1.a标签>>>:链接标签
            用法1:通过href属性指定网址(URL)点击跳转
                跳转过程中有两种方式
                    1.当前页面跳转	target="_self"  默认
                  2.新建页面跳转	target="_blank"
            用法2:锚点功能
                通过href属性指定标签的id值点击即可跳转到对应位置
        """
        网址其实并不是一个非常专业的名词
            URL:统一资源定位符
        """

        2.img标签>>>:图片标签
          src属性指定图片地址
            可以是本地的地址也可以是网络上的地址
            alt属性编写文本
            用于在图片无法加载出来的情况下的提示信息
          title属性写文本
            用于鼠标悬浮在图片上之后提示的文本信息
          height、width属性写像素
            用于调整图片的尺寸
                需要注意调整的时候 修改一个另外一个自动等比例缩放
              如果同时调整两个 那么可能会造成图片的失真

标签的两大重要属性

        1.id属性		个体查找
            类似于标签的身份证号 在同一个html页面上id不能重复
        2.class属性	群体查找
            类似于python面向对象中的类的继承
            可以将多个标签划为一类
              <h1 class='c1'></h1>
              <p class='c1'></p>
            并且一个标签可以有很多类
              <h1 class='c1 c2 c3'></h1>
              <p class='c1 c8 c9'></p>

列表标签

        1.无序列表(掌握)
            # 前面没有用于标识数字顺序的提示
            <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            </ul>
          """
          网页上有规则排列的多个横向或者竖向内容 几乎都是无序列表
            要想实现需要css相关知识
          """
        2.有序列表(了解)
            <ol>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            </ol>
        3.标题列表(了解)
            <dl>
            <dt>标题1</dt>
              <dd>内容1</dd>
            <dt>标题2</dt>
              <dd>内容1</dd>
              <dd>内容2</dd>
            </dl>

表格标签

        # 当需要展示一些具体固定格式的多条数据的时候可以考虑使用(excel)

        # 表格标签的格式
            <table>
            <thead></thead>     表头
            <tbody></tbody>     表单
            </table>
        # tr标签
            tr就表示一行
        # th标签
            在表头的字段名称
        # td标签
            普通的单元格数据

        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>密码</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>jason</td>
                    <td>123</td>
                    <td>18</td>
                </tr>
            </tbody>
        </table>
        """我们只需要掌握最基本的html标签即可 至于花里胡哨的样式后面学习完前端框架之后  直接cv拷贝即可 都是别人提前写好的"""
        border: 表格边框.
        cellpadding: 内边距
        cellspacing: 外边距.
        width: 像素 百分比.（最好通过css来设置长宽）
        rowspan: 单元格竖跨多少行
        colspan: 单元格横跨多少列（即合并单元格）

form表单(很重要)

        # form表单:获取用户的数据并发送给后端(服务端)
            eg:网站的登录、注册、验证码...

        '''以注册页面为例'''
        1.获取用户数据最为常用的标签就是input标签并且该标签是行内标签
            input标签是前端标签里面的变形金刚
            通过type参数的不同变换不同的表现形式
              text			普通文本
              password	     密码展示
              date			日历展示
              radio			单选>>>:多个选项标签需要有相同的name属性
                                默认选中需要额外配置checked='checked'
                            当属性名与属性值相等的时候可以简写checked
              checkbox	多选>>>:默认选中也是checked属性
              email			邮箱格式
              file			上传文件>>>:默认只支持单个文件
                                如果需要一次性上传多个需要额外配置multiple
              submit		提交按钮>>>:点击出发提交数据的动作
              button		普通按钮>>>:本身没有任何功能 需要绑定(JS)
              reset			重置按钮
                按钮组的提示信息可以通过value属性自定义，如果不自定义那么不同的浏览器可能会展示出不同的提示信息 尤其是submit按钮

          select标签是下拉框选项
                一个个选项就是一个个option标签 默认是单选也可以变为多选
                    multiple
          textarea标签
                获取大段文本内容

        2.直接编写input会出现黄色阴影，原因在于input需要结合lable一起使用
            方式1:lable包裹input并绑定id
                <label for='input标签id值'>input标签</label>
          方式2:label与input单独出现并绑定id
                <label for="d1">username:</label>
                <input type="text" id="d1">

        3.form表单提交数据
            数据的提交地址由form表单的action参数来控制
            action="URL"
                # 不写默认朝当前页面所在的地址提交
            method="数据的提交方式"
                # 数据的提交方式有很多种 这里先忽略(后续讲解)
                get post put delete patch...
        """
        form表单在提交数据的时候 如果含文件则需要指定两个固定参数
            method='post'
            enctype="multipart/form-data"
        """

初次体验前后端交互

        # 代码无需掌握 只看效果即可
        """后端框架:可以简单的理解为别人写好的一个非常牛逼的TCP服务端"""
        以flask框架为例>>>:第三方框架 pip3 install flask


        前端通过标签获取用户数据发送给后端的过程中 标签需要有name属性
            相当于字典的key
            用户输入的数据会存储到标签的value属性中 相当于字典的value
            如果是选择型标签需要自行加上name和value

        from flask import Flask,request
        app = Flask(__name__)
        @app.route('/index/',methods=['GET','POST'])
        def index():
            print(request.form)  # 获取普通数据
            print(request.files)  # 获取文件数据
            # print(request.form.get('name'))
            file_obj = request.files.get('file')  # 获取文件对象
            file_obj.save('xxx.md')  # 保存文件
            return 'flask框架真简单'
        app.run()

__EOF__

本文作者：祈安
本文链接：https://www.cnblogs.com/jyc666/p/15848807.html
关于博主：没有收拾残局的能力，就别放纵善变的情绪
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   丶祈安  阅读(102)  评论(0)  编辑  收藏  举报
相关博文：
·  js基本知识
·  前端类库之jQuery
·  HTML简介
·  前端之HTML
·  HTML简单学习
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
点击右上角即可分享
微信分享提示