码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • web前端学习笔记一


    在这里插入图片描述
    一、VS Code快捷键

    • 代码格式化:Shift+Alt+F
    • 向上或向下移动一行:Alt+Up或Alt+Down
    • 快速复制一行代码:Shift+Alt+Up或Shift+Alt+Down
    • 快速替换:Ctrl+H

    二、标题标签

    定义最大的标题
    定义最小的标题
    生成h1~h6快捷键:h$*6
    在html界面使默认居左的标题居中显示(最好是用css写):

    <h2 align="center">二级标题</h2>
    
    • 1

    三、段落标签
    段落是通过

    标签定义的

    <p>我是一个段落标签</p>
    
    • 1

    四、换行标签
    如果希望在不产生一个新段落的情况下进行换行(新行),可以使用


    元素是一个空的HTML元素

    <p>如果希望在不产生一个<br />新段落的前提下进行换行</p>
    
    • 1

    在这里插入图片描述

    五、水平线标签


    标签在HTML页面中创建水平线

    水平线属性

    1. color:设置水平线的颜色
    2. width:设置水平线的长度
    3. size:设置水平线的高度
    4. align:设置水平线的对齐方式(默认居中),可取值left|right
    <hr color="pink" width="300px" size="5px" align="left">
    
    • 1

    在这里插入图片描述

    六、图片标签
    定义HTML页面中的图像

    图片属性

    1. src:路径(图片地址与名字)
    2. alt:规定图像的替代文本
    3. width:规定图像的宽度
    4. height:规定图像的高度
    5. title:鼠标悬停在图片上给予提示
    <!-- 当图片在页面中无法呈现出来时,将会显示alt的内容
            当鼠标悬停在图片上将显示title的内容 -->
        <img src="0.png" alt="学习笔记一" width="600px" sizes="80px" title="学习笔记">
    
    • 1
    • 2
    • 3

    七、超文本链接
    HTML使用标签来设置超文本链接
    超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以通过点击这些内容来跳转到新的文档或者当前文档中的某个部分

    <a href="http://www.baidu.com">百度</a>
    
    • 1

    常用文本标签
    定义着重文字:
    定义粗体文字:
    定义斜体文字:
    定义加重语气:
    定义删除字:
    元素没有特定的含义:

    	<p>白菜</p>
    	<em>em白菜</em>
    	<b>b白菜</b>
    	<i>i白菜</i>
    	<strong>strong白菜</strong>
    	<span>span白菜</span>
    	<del>del白菜</del>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    八、列表标签
    快捷键:ol(ul)>li*3
    有序列表
    外部用

      标签,内部用
    1. 标签

      type属性

      1. 1 表示列表项目用数字标号(1,2,3)
      2. a 表示列表项目用小写字母标号(a,b,c)
      3. A 表示列表项目用大写字母标号(A,B,C)
      4. i 表示列表项目用小写罗马数字标号(i,ii,iii)
      5. I 表示列表项目用大写罗马数字标号(I,II,III)
      <p>水果</p>
              <!-- 有序列表的展示 -->
          <ol>
              <li>苹果</li>
              <li>橘子</li>
              <li>香蕉</li>
              <li>葡萄</li>
          </ol>
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8

      无序列表
      外部用

        标签,内部用
      • 标签

        type属性

        1. disc:默认实心圆
        2. circle:空心圆
        3. square:小方块
        4. none:不显示
        <!-- 无序列表的展示 -->
                <ul>
                    <li>苹果</li>
                    <li>橘子</li>
                    <li>香蕉</li>
                    <li>葡萄</li>
                </ul>
        
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7

        在这里插入图片描述

        九、表格标签
        快捷键:table>tr2>td2{表格内容}
        表格:


        行:
        单元格(列):

        表格属性

        1. border:设置表格的边框
        2. width:设置表格的宽度
        3. height:设置表格的高度

        合并单元格
        水平合并:colspan
        垂直合并:rowspan

        合并单元格6和7:colspan,合并单元格15和20:rowspan

        单元格1 单元格2 单元格3 单元格4 单元格5
        单元格6.7 单元格8 单元格9 单元格10
        单元格11 单元格12 单元格13 单元格14 单元格15.20
        单元格16 单元格17 单元格18 单元格19
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21
        • 22
        • 23
        • 24
        • 25
        • 26
        • 27
        • 28
        • 29
        • 30
        • 31
        • 32
        • 33

        在这里插入图片描述

        十、表单标签

        • 表单在Web网页中用来给用户填写信息,从而能采用用户信息,使网页具有交互的功能
        • 所有的用户输入内容的地方都用表单来写,如登录注册、搜索框
        • 表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件
        • 1

        属性说明
        action:服务器地址
        name:表单名称

        method中get和post的区别

        1. 数据提交方式,get把提交的数据url可以看到,post看不到
        2. get一般用于提交少量数据,post用来提交大量数据

        表单元素
        一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮
        文本框:
        密码框(密文显示):
        提交按钮:

        • 当用户单击确认按钮时,表单的内容会被传送到另一个文件
        • 表单的动作属性定义了目的文件的文件名
        • 由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
        • 1
        • 2
        • 3
        • 4
        • 5

        在这里插入图片描述

        十一、块级元素与内联元素

        常见块级元素:

        div、form、h1-h6、hr、p、table、ul等
        
        • 1

        常见内联元素:

        a、b、em、i、span、strong等
        
        • 1

        行内块级元素(不换行、能够识别宽高)

        button、img、input等
        
        • 1

        块级元素与内联元素的区别
        在这里插入图片描述

        十二、HTML5新增标签
        HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定
        在HTML5出现之前,我们一般采用DIV+CSS布局完成我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取 (SEO)。为了解决上述缺点,HTML5新增了很多新的语义化标签

        div是容器元素,也是页面中见到的最多的元素

        div实现
        在这里插入图片描述
        H5新标签实现

        1. 头部
        2. 导航
        3. 定义文档中的节,比如章节、页眉、页脚
        4. 侧边栏
        5. 脚部
        6. 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等

        在这里插入图片描述

      • 相关阅读:
        系统学习Python——类(class)代码的编写基础与实例:类通过继承进行定制
        Matlab,Python(Linux):mat文件无法被linux的loadmat识别
        智能合约概述
        基于OpenCV的轮廓检测(3)
        8、学习 Java 中的方法(方法的定义、可变参数、参数的传递问题、方法重载、方法签名)通过官方教程
        销售人员打开Dynamics 365 CRM点击模块弹出Insufficient Permissions提示
        论文翻译:2021_LACOPE: Latency-Constrained Pitch Estimation for Speech Enhancement
        VS创建的aspx文件下没有设计-拆分-源 并且工具箱中的控件为灰色
        资料库的webrtc文件传输
        快速搭建 SpringCloud Alibaba Nacos 配置中心
      • 原文地址:https://blog.csdn.net/weixin_44064728/article/details/126106700
        • 最新文章
        • 【JVM】编译执行与解释执行的区别是什么?JVM 使用哪种方式?
          用 Hashids 优雅解决 C 端自增 ID 暴露问题
          V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容
          LLVM Pass快速入门(四):代码插桩
          milkup:桌面端 markdown AI续写和即时渲染
          基于项目工程构建SBOM(软件物料清单)的研究
          鸿蒙应用开发UI基础第二节:鸿蒙应用程序框架核心解析与实操
          .NET 中如何快速实现 List 集合去重?
          扣子Coze实战:从0到1打造抖音+小红书热点监控智能体
          浅谈数据访问层
        • 热门文章
        • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
          奉劝各位学弟学妹们,该打造你的技术影响力了!
          五年了,我在 CSDN 的两个一百万。
          Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
          面试官都震惊,你这网络基础可以啊!
          你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
          心情不好的时候,用 Python 画棵樱花树送给自己吧
          通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
          13 万字 C 语言从入门到精通保姆级教程2021 年版
          10行代码集2000张美女图,Python爬虫120例,再上征途
        小工具 小游戏
        Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

        京公网安备 11010502049817号