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


    学习视频来自B站:
    https://www.bilibili.com/video/BV1Kg411T7t9?p=11&spm_id_from=pageDriver&vd_source=51d15aaa7e2e1f72f87356e06140ae6b

    1、web标准

    在这里插入图片描述
    HTML决定了框架与结构,CSS决定样式,JavaScrpt使网页有动态效果等

    2、HTML:超文本标记语言

    (1)构建基本网页
    使用记事本构建html文件:

    新建一个txt文件,修改后缀名为.html
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    (2)HTML骨架结构规则:
    <html>与</html>表示网页主体
    <head>与<body>表示网页的头与身体
    在这里插入图片描述
    HTML骨架标签:
    在这里插入图片描述

    3、VS Code的使用

    新建网页并添加骨架:
    新建网页后缀名设置为html,输入感叹号后回车,自动添加骨架代码
    在这里插入图片描述
    白色圆点表示没有保存
    在这里插入图片描述
    安装插件 open in brower
    在这里插入图片描述
    之后再在新建的文件中右键可以看到使用默认浏览器打开的标签,快捷键为alt+b
    在这里插入图片描述
    在这里插入图片描述

    4、HTML语法规则

    (1)注释
    快捷键:ctrl+/
    (2)标签的构成
    双标签:开始标签+内容+结束标签
    有些特殊标签为单标签,无法包裹内容,例如<br>用来换行

    标签的关系可以分为兄弟标签(并列关系)与父子标签(嵌套关系)

    1 标题标签:
    h系列标签
    在这里插入图片描述
    只有六级标题标签
    在VS中只输入h,不用输入:<h1></h1>会自动形成标题标签

    例如:选中标题标签中的数字3,CTRL+D多次,可以同时修改选中的内容为4
    ctrl+d连选相同的数字
    在这里插入图片描述
    在这里插入图片描述

    2 段落标签:p

    <p>段落标签</p>
    
    • 1

    VS中可以自动换行,在查看工具栏

    3 换行标签
    br标签
    4 横线标签
    hr
    --------------------------------------------------------------------
    5 文本格式化标签
    在这里插入图片描述
    在代码编写过程中,如果要突出重要性的强调语境,一般是使用右边的代码,这样其他程序员或者自己再看代码时,就能知道这里的强调语境。但是左右两种代码在网页上的表现样式是完全一样的。
    ----------------------------------------=------------------
    6 媒体标签

    在这里插入图片描述
    src是标签属性,表示路径和图片名。./表示当前文件夹,如果图和网页文件在同一个路径,可以使用./也可以直接添加图片文件名。如果图和文件不在一个文件夹中,使用文件的路径+文件全名的方式
    在这里插入图片描述
    alt是替换文本,当图片不能正常显示的时候,就会显示alt中的文本

    title是提示属性,当用户的鼠标悬停在图片上时,就会显示悬停的文字
    width和height可以控制图片的高和宽,只设置一个会自动等比例缩放

  • 相关阅读:
    阿里云“汽车云”亮相云栖大会,小鹏、一汽、长城、地平线等均已上云
    ERC20学习
    上海计算机学会 2024年4月月赛 丙组T1 最大公约数
    Android解析自定义属性实现视差动画效果
    Hbuilder x学习1-Hbuilder x下载
    获取dubbo源码编译并导入idea以及启动入门项目dubbo-demo
    IEC101规约总结
    有奖提问|《新程序员》专访“Apache之父”Brian Behlendorf
    操作系统知识点学习
    SpringBoot SpringBoot 原理篇 1 自动配置 1.14 自动配置思想
  • 原文地址:https://blog.csdn.net/weixin_43416590/article/details/125362373
  • 最新文章
  • 沪漂五周年了:我越来越迷茫了
    Agentic Skill Routing 实战:别再把所有 Skill 塞进 AI Agent 上下文
    MySQL-Seconds_behind_master的精度误差
    [MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
    AI的至暗历史:从万众期待到被政府撤资,AI的两次死亡徘徊
    Agent OS :五种驯服不确定性的范式
    PortSwigger SQL注入LAB11
    数据库即时编译JIT
    [Begin]AI Learn Data Day 0
    深度学习进阶(二十七)现代 LLM 的核心架构设计其二:SwiGLU
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号