当前位置: 首页 > ops >正文

网页前端开发(基础)

        前端开发三件客:HTML,CSS,JavaScript。

        web标准,也称网页标准,由3个组成部分。1.HTML,管理页面的元素和内容。2.CSS,负责网页的表现(页面元素的外观,位置等页面样式。如:元素的颜色,元素的尺寸等等)3.JavaScript,负责网页的行为(交互效果)。

HTML

        html超文本标记语言(超文本:超越文本的限制,比普通文本更加强大,还可以定义图片,音频,视频等等),html使用标记语言(标记语言由标签‘<标签名>’构成的语言)。

HTML文件的定义:

        1.新建文本文件,将文件后缀名改为.html。

        2.使用Visual Studio Code软件,编写html的基本骨架。(运行HTML需要添加插件)

        3.在<body>中填写网页内容。

html基本骨架

html基本骨架 可以使用“!”快速生成。

HTML骨架的分析:

        HTML使用标签语言,使用<html>   </html>包含整个代码(标签有开头与结尾,使用</"标签名">表示标签结束)。

        HTML骨架的<head>  </head>用于存储网页的基本信息(如html的字符类型,body中元素的格式)。<head>中的内容主要提供给浏览器,用户只会看到浏览器处理之后的结果。

        HTML<body>  </body>用于存储网页的各个元素(如:网页之中的视频,图片,文字)。用户可以在网页中直观看到的元素的内容。

        <body>用于存储网页的元素,而 <head>可以存储<body>中元素的格式(如颜色,尺寸等等)。两者之间相互合作,使用户可以看到完整的网页界面。

html标签的特点:
1.HTML标签不区分大小写(建议使用小写)

2.HTML标签的属性值可以使用单引号或双引号(建议使用双引号)

3.HTML语言结构松散,但是建议规范书写。(<“标签名”> 表示标签的开始,</“标签名”>表示标签的结束)

HTML网页内容编写:

        HTML<body>  </body>用于存储网页的各个元素。

        因此,在<body>  </body>内编写网页内容。

标题的定义:
<body>

        <!-- 定义一个一级标题-->

        <h1>html快速入门</h1>

        <!-- 标题使用<h1>~~<h6>

                <h1>定义一个一级标题

                <h2>定义一个二级标题

                .........

                <h6>定义一个六级标题

                最高是<h6>,<h7>不存在

        -->

</body>

超链接的定义:

<body>

        <!-- 定义一个超链接-->

        <a href="https://tv.cctv.com/" target="_blank">央视网</a>

        <!-- 超链接使用<a href="  " target="  ">*****</a>

                href="  ",双引号之间可填写网站。

                *****可以填写文字,点击此文字,跳转至herf的网址。

                target="  " 表示跳转时在新窗口打开或在本窗口打开。

                target="_blank" 在新窗口打开

                target="_self" 在此窗口打开

        -->

-</body>

点击央视网,可以跳转到央视网官网。

http://www.xdnf.cn/news/7513.html

相关文章:

  • WIFI信号状态信息 CSI 深度学习篇之CNN(Python)
  • Typescript学习教程,从入门到精通,TypeScript 继承语法知识点及案例代码(8)
  • Kotlin 协程 (三)
  • vivado fpga程序固化
  • 学习黑客数据小包的TLS冒险之旅
  • Java 07异常
  • 将 Workbook 输出流直接上传到云盘
  • Apollo10.0学习——planning模块(8)之Frame类
  • 使用VGG-16模型来对海贼王中的角色进行图像分类分类
  • python打卡day31
  • SQLynx 团队协作实践:提升数据库开发效率的解决方案​
  • 4-5月份,思科,华为,微软,个别考试战报分享
  • Axure中使用动态面板实现图标拖动交换位置
  • C++23 新增扁平化关联容器详解
  • 微小店推客系统开发:构建全民营销矩阵,解锁流量增长密码
  • Java EE进阶1:导读
  • Spring Cloud Gateway深度解析:原理、架构与生产实践
  • 根据当前日期计算并选取上一个月和上一个季度的日期范围,用于日期控件的快捷选取功能
  • MySQL 8.0 OCP 英文题库解析(七)
  • 在 Git 中添加子模块(submodule)的详细步骤
  • kotlin 将一个list按条件分为两个list(partition )
  • 漏洞检测与渗透检验在功能及范围上究竟有何显著差异?
  • iOS Runtime与RunLoop的对比和使用
  • 基于flask+vue的电影可视化与智能推荐系统
  • PostgreSQL架构
  • HTML应用指南:利用POST请求获取全国申通快递服务网点位置信息
  • 华为云鲲鹏型kC2云服务器——鲲鹏920芯片性能测评
  • 【EI会议火热征稿中】第二届云计算与大数据国际学术会议(ICCBD 2025)
  • 程序运行报错分析文档
  • 使用 adb 命令截取 Android 设备的屏幕截图