码农知识堂 - 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. 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等

        在这里插入图片描述

      • 相关阅读:
        二手车商城交易网站平台(Java+SSM+MySQL)
        php反序列化个人笔记
        adb shell pm path packageName
        (51单片机)习题:TM1640驱动数码管并用任意矩阵键盘调节显示参数
        latex
        shell_77.Linux在函数中使用变量
        Kubernetes(K8S) kubesphere 安装
        three.js——通过顶点和顶点索引创建集合体
        OpenCV 相机相关函数
        权限认证[还是有问题]
      • 原文地址:https://blog.csdn.net/weixin_44064728/article/details/126106700
        • 最新文章
        • 攻防演习之三天拿下官网站群
          数据安全治理学习——前期安全规划和安全管理体系建设
          企业安全 | 企业内一次钓鱼演练准备过程
          内网渗透测试 | Kerberos协议及其部分攻击手法
          0day的产生 | 不懂代码的"代码审计"
          安装scrcpy-client模块av模块异常,环境问题解决方案
          leetcode hot100【LeetCode 279. 完全平方数】java实现
          OpenWrt下安装Mosquitto
          AnatoMask论文汇总
          【AI日记】24.11.01 LangChain、openai api和github copilot
        • 热门文章
        • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
          奉劝各位学弟学妹们,该打造你的技术影响力了!
          五年了,我在 CSDN 的两个一百万。
          Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
          面试官都震惊,你这网络基础可以啊!
          你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
          心情不好的时候,用 Python 画棵樱花树送给自己吧
          通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
          13 万字 C 语言从入门到精通保姆级教程2021 年版
          10行代码集2000张美女图,Python爬虫120例,再上征途
        Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
        正则表达式工具 cron表达式工具 密码生成工具

        京公网安备 11010502049817号