Java开发的前端学习笔记 day01 HTML+CSS

Html主要负责网页的内容,CSS负责网页格式。

Vscode 中感叹号快速生成html页面

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
</head>
<body>
    <h1 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
    <a href="https://news.cctv.com/" target="_blank">央视网</a>
</body>
</html>

那在上述我们用到的两个标签,一个是标题标签 <h1></h1>,另一个是超链接标题 <a></a>。这两个标签的具体用法如下:

**:**h1为一级标题,字体也是最大的 ; h6为六级标题,字体是最小的。

注意: HTML标签是预定义好的,不能随意定义,也就以为着,标题标签就只有这六个,没有 <h7>

超链接 a 标签:标签:<a href="....." target=".....">央视网</a>

属性:href: 指定资源访问的url

  • target: 指定在何处打开资源链接

    • _self: 默认值,在当前页面打开

    • _blank: 在空白页面打开

  1. CSS
  • 布局标签:实际开发网页中,会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

  • 标签:<div> <span>

  • 特点:

  • <div>标签:

    • 一行只显示一个(独占一行)

    • 宽度默认是父元素的宽度,高度默认由内容撑开

    • 可以设置宽高(width、height)

  • <span>标签:

    • 一行可以显示多个

    • 宽度和高度默认由内容撑开

    • 不可以设置宽高(width、height)

  1. js

JavaScript (简称:JS) 是一门跨平台、面向对象的脚本语言,是用来控制网页行为的,实现人机交互效果。JavaScript 和 Java 是完全不同的语言,不论是概念还是设计。但是基础语法类似。

  • 组成:

    • ECMAScript: 规定了JS基础语法核心知识,包括变量、数据类型、流程控制、函数、对象等。

    • BOM:浏览器对象模型,用于操作浏览器本身,如:页面弹窗、地址栏操作、关闭窗口等。

    • DOM:文档对象模型,用于操作HTML文档,如:改变标签内的内容、改变标签内字体样式等。

备注:ECMA国际(前身为欧洲计算机制造商协会),制定了标准化的脚本程序设计语言 ECMAScript,这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的(ES2024是最新版本)。

元素的底部,可改善显示速度"

  • 注意1:demo.js中只有js代码,没有<script>标签

  • 注意2:通过<script></script>标签引入外部JS文件时,标签不能自闭合,如:<script src="js/demo.js" />

对于字符串类型的数据,除了可以使用双引号("...")、单引号('...')以外,还可以使用反引号 (``)。 而使用反引号引起来的字符串,也称为 模板字符串

  • 模板字符串的使用场景:拼接字符串和变量。

  • 模板字符串的语法:

    • `...` :反引号 (英文输入模式下键盘 tab 键上方波浪线 ~ 那个键)

    • 内容拼接时,使用 ${ } 来引用变量

具体示例如下:

相关推荐
止观止2 分钟前
深入学习前端 Proxy 和 Reflect:现代 JavaScript 元编程核心
前端·javascript·学习
鲁子狄3 分钟前
[笔记] 动态 SQL 查询技术解析:构建灵活高效的企业级数据访问层
java·spring boot·笔记·sql·mysql·mybatis
ChongYu重玉4 分钟前
【node/vue】css制作可3D旋转倾斜的图片,朝向鼠标
javascript·css·vue.js·经验分享·笔记·node.js·vue
yuanmenglxb20049 分钟前
浏览器渲染原理
前端·面试·浏览器渲染原理
薛定谔的算法9 分钟前
猜你想不到SPA相比于传统页面的6个特点
前端·javascript·react.js
ui设计前端开发老司机9 分钟前
从数据洞察到设计创新:UI前端如何利用数字孪生提升产品交互体验?
前端·ui·交互
3Katrina15 分钟前
《解锁现代Web开发:SPA核心原理与性能优化实战》
前端·javascript
伍哥的传说18 分钟前
React强大且灵活hooks库——ahooks入门实践介绍
前端·react.js·前端框架·ahooks·useclickaway·userequest·usedebouncefn
EndingCoder19 分钟前
图算法在前端的复杂交互
前端·算法·图算法
Attacking-Coder23 分钟前
前端面试宝典---项目难点2-智能问答对话框采用虚拟列表动态渲染可视区域元素(10万+条数据)
开发语言·前端·javascript