JavaWeb前端——HTML/CSS

news2024/10/5 22:24:37

HTML/CSS概述

HTML:学习标签,CSS:学习样式

HTML

1. 不区分大小写。

2. 属性可以使用单引号/双引号

3. 在记事本/编辑器中编写html语言,通过浏览器解析渲染语言

4. 语法结构松散(编写时要尽量严谨)

VScode中后缀为html的文件中直接敲 ! + Enter:可自动生成html格式

绝对路径/相对路径:

推荐使用:相对路径

相对路径:. / 可以省略,. . / 不可以省略

图片:

宽度和高度:一般只设置一个,另一个等比例缩放

举例父元素:body

<span></span>标签:没有语义的标签,用于包裹行内元素​​​​​​​

HTML正文标签

HTML超链接标签

 

HTML表格标签

举例: 

HTML表单标签

 

表单项

 

 

HTML 和 XML 对比

XML:可扩展标记语言,类似HTML

XML设计宗旨:传输数据,HTML设计宗旨:显示数据

HTML 标签都是预定义好的,XML标签没有被预定义

相比于 XML,目前更加常用的是 JSON 用于传输数据

CSS

CSS 引入方式:

外联样式:

外部文件:

引入方式:

rel:relationship

herf:hypertxt reference

举例演示:

!!注意:样式间使用分号!!

颜色表示形式:

代码演示:

小 tips:使用识色器可以拿到颜色的 rgb 表示法

盒子模型

盒子不包含 margin

 页面布局常借用两个标签:<div>标签,<span>标签

<div>标签默认是父元素宽度:例如是<body>宽度,此时 <div> 标签元素会独占一行

<div>标签

使用<div>时:

1. 使用<div>标签将所有内容包裹起来 

2. 给该<div>设置id,在样式里面指定该 id 的属性

 <span>标签

行内标签,一行内可以使用多个<span>标签

CSS 选择器

 优先级:id选择器>类选择器>元素选择器

快捷键:

ctrl + shift + / :注释

alt + B:使用浏览器打开文件

ctr + alt + l:格式化

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1426813.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

github请求超时解决方法

github请求超时解决办法 我使用windows执行如下git命令,提示超时 git clone xxxxx命令行提示如下&#xff1a; Failed to connect to github.com port 443: Timed out问题排查 可我Chrome可以正常访问github甚至ChatGPT&#xff0c;但是为什么在命令行里面却无法访问&#…

AI大模型开发架构设计(7)——人人都需要掌握的AI编程及应用案例实战

文章目录 人人都需要掌握的AI编程及应用案例实战1 AI代码生成模型与AI编程助手介绍程序设计方式的发展自动代码生成AI编程工具 2 AI编程助手的代码生成模型架构剖析以 CodeGeeX 为例-发展过程以 CodeGeeX 为例-训练过程以 CodeGeeX 为例-大规模代码数据处理以 CodeGeeX 为例-模…

『C++成长记』string使用指南

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;C &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、string类介绍 二、string类的常用接口说明 &#x1f4d2;2.1string类对象的常…

线下店铺的商品如何查价

品牌渠道主要分为线上和线下&#xff0c;线上的价格查价方式可以通过系统完成&#xff0c;系统筛选不同平台的数据&#xff0c;然后做价格的比较&#xff0c;输出是否破价的监测报表&#xff0c;这个过程多依赖系统去操作&#xff0c;但线下店铺的产品价格查价方式则没有固定的…

Windows下Cloudreve WebDAV挂载失败解决方法

如果你正在使用Windows的资源管理器挂载WebDAV&#xff0c;并且发现挂载失败&#xff0c;无论你如何去配置他 首先&#xff0c;Cloudreve 中可以为每个用户组单独设置“是否允许使用WebDAV访问”的开关&#xff0c;但是这玩意儿默认是开启的&#xff0c;所以如果不小心手残关掉…

机器学习系列——(六)数据降维

引言 在机器学习领域&#xff0c;数据降维是一种常用的技术&#xff0c;旨在减少数据集的维度&#xff0c;同时保留尽可能多的有用信息。数据降维可以帮助我们解决高维数据带来的问题&#xff0c;提高模型的效率和准确性。本文将详细介绍机器学习中的数据降维方法和技术&#…

解锁文档处理的全新维度:ONLYOFFICE 文档开发者版

前言 相信大家对于 ONLYOFFICE 这款办公软件可能已经有所耳闻&#xff0c;最近因工作需要&#xff0c;我在众多办公协作工具中选择了 ONLYOFFICE&#xff0c;原因主要是它开源经济实惠&#xff0c;可以部署在自己的服务器上并且能够轻松集成到我们的平台中。在数字化信息时代&…

10、数据结构与算法——堆

一、什么是堆 堆是一种特殊的树形数据结构&#xff0c;通常实现为完全二叉树或满二叉树。堆又分为两种类型最大堆&#xff08;Max Heap&#xff09; 和 最小堆&#xff08;Min Heap&#xff09; 1.1、什么是二叉树 二叉树是一种数据结构&#xff0c;它是由n&#xff08;n≥0&a…

Python 计算两个时间之间的耗时

博主按照自己的需求写的一个可以计算程序耗时的函数&#xff0c;各位有需要的自行改写哈 实现的大致功能 功能1 记录开始时间&#xff0c;返回一个时间字典。数据包括&#xff1a;开始时间的日期格式、文本格式 功能2 记录结束时间和耗时&#xff0c;返回一个时间字典。数据包…

Web3智能合约:重新定义商业合作的未来

随着区块链技术的飞速发展&#xff0c;Web3时代正逐渐到来&#xff0c;而其中的智能合约成为推动商业合作变革的关键力量。本文将深入探讨Web3智能合约的概念、特点以及对商业合作未来的巨大影响。 什么是Web3智能合约&#xff1f; 智能合约是一种以代码形式编写、自动执行合同…

Oracle 面试题 | 05.精选Oracle高频面试题

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Flask 入门4:Flask 模板

1. 前言 Flask 拥有丰富的扩展方法&#xff0c;且都有统一的特点&#xff1a;简单和即学即用。当我们要实现某个功能之前&#xff0c;可以提前去搜一搜这个功能包是否已经存在&#xff0c;这样也能帮助我剩下很多时间。那么要去哪里找到这些扩展包呢&#xff0c;这里推荐两个方…

Android:RecyclerView跨行跨列的LayoutManager:Spannedgridlayoutmanager

前言&#xff1a; RecyclerView可以使用GridLayoutManager实现跨行&#xff0c;但是不能跨列&#xff1b;瀑布流布局可以跨列但是又不能跨行。原生自带的各个LayoutManager中并没有可以又跨行又能跨列的。网上搜寻了一番&#xff0c;找到了一个亲测可行好用的三方库&#xff1…

微信小程序可以一个人开发么?

随着移动互联网的飞速发展&#xff0c;微信小程序已经成为了人们日常生活中不可或缺的一部分。它以其便捷性和高效性赢得了广大用户的青睐。对于许多有志于进入小程序领域的开发者来说&#xff0c;一个常见的问题是&#xff1a;微信小程序可以一个人开发吗&#xff1f;答案是肯…

2024 Flutter 重大更新,Dart 宏(Macros)编程开始支持,JSON 序列化有救

说起宏编程可能大家并不陌生&#xff0c;但是这对于 Flutter 和 Dart 开发者来说它一直是一个「遗憾」&#xff0c;这个「遗憾」体现在编辑过程的代码修改支持上&#xff0c;其中最典型的莫过于 Dart 的 JSON 序列化。 举个例子&#xff0c;目前 Dart 语言的 JSON 序列化高度依…

【笔记】React-Native Navigation页面导航

/** * 须知&#xff1a;a bare React Native Project(not an Expo managed project) * * React官方文档&#xff1a;https://reactnative.dev/docs/navigation * * 当前文档基于6.x * React Navigation文档&#xff1a;https://reactnavigation.org/docs/getting-started * …

C++ Webserver从零开始:基础知识(七)——多进程编程

前言 在学习操作系统时&#xff0c;我们知道现代计算机往往都是多进程多线程的&#xff0c;多进程和多线程技术能大大提高了CPU的利用率&#xff0c;因此在web服务器的设计中&#xff0c;不可避免地要涉及到多进程多线程技术。 这一章将简要讲解web服务器中的多进程编程&#x…

AI与数字孪生

源自&#xff1a;译文 “人工智能技术与咨询”发布 AI和数字孪生 预测分析&#xff1a;网络安全水晶球 面对不断变化的威胁&#xff0c;提供自适应安全防护 自然语言处理&#xff1a;解码威胁语言 先进技术&#xff1a;人工智能作为数字孪生安全的基础 道德考量 …

关于v8垃圾回收机制以及与其相关联的知识点--还没整理版本

对于值类型b来说&#xff0c;就直接释放了其占用的内存&#xff0c;对于引用类型obj来说&#xff0c;销毁的只是变量obj对堆内存地址 1001 的引用&#xff0c;obj的值 { c: 3 } 依然存在于堆内存中。那么堆内存中的变量如何进行回收呢&#xff1f; V8的垃圾回收策略主要是基于…

git将项目的某次签入遴选(Cherry-Pick)另一个项目

需求&#xff1a;将项目Product&#xff0c;分支feature/platform&#xff0c;签入959294ce6b75ee48c5cb22c46d7398654628a896&#xff0c;遴选到项目BRP&#xff0c;分支dev 第一步&#xff1a;使用原签入生成patch文件&#xff08;git format-patch -1 <commit_hash>&a…