HTMLCSS(入门)

HTML

<html> <head><title>第一个页面</title></head><body>键盘敲烂,工资过万</body>
</html>

<!DOCTYPE>文档类型声明,告诉浏览器使用哪种HTML版本显示网页

<!DOCTYPE html>当前页面采取的四HTML5版本来显示网页

位于<html>标签之前

不是一个HTML标签,只是文档类型声明标签

lang语言:定义当前文档显示的语言

标题段落标签

标题标签<h1> - <h6> 作为标题使用,重要性递减

段落标签<p><p/> (Alt+z 自动换行)段落之前会有空隙

换行标签<br /> 强制换行,单标签,换行后不会增加垂直间距

文本格式化标签

加粗标签<strong>加粗</strong>

倾斜标签<em>倾斜<em/>

删除线标签<del>删除线<del/>

下划线标签<ins>下划线<ins/>

盒子标签

<div>和<span>标签

div标签单独占一行,一行只能有一个div

span标签一行可以放多个span

图像标签和路径

图像标签

路径
相对路径

绝对路径

超链接标签

链接标签<a href="lianjie" target="...">文本或图像</a>

target是打开窗口的凡是,默认值为_self

_self表示在此窗口中打开链接

_blank表示在新窗口中打开

注释标签和特殊字符

表格

表格是用来展示数据的

表格基本用法

表头单元格标签(<th><th/>)

表格属性

不详细叙述,之后在css详细学习

表格结构标签

表格头部区域<thead> </thead>

表格主体区域<tbody> </tbody>

合并单元格

列表

分为三类:无序列表,有序列表,自定义列表

无序列表(<ul></ul>)

有序列表(<ol></ol>)

自定义列表

未完待续。。。

表单

目的为了收集信息

表单的组成

表单域,表单控件,表单信息

表单域(<form></form>)

包含元素的区域

表单控件
<input>输入表单元素

<select>下拉表单元素

定义下拉列表

<textarea>文本域元素

输入内容较多,用于定义多行文本输入的控件

查阅文档

W3C:w3school 在线教程

MDN:https://developer.mozilla.org/zh-CN/docs/Web

CSS

CSS美化HTML,实现结构和样式的分离

CSS:由选择器和一条或多条声明组成

CSS基础选择器

选择器用来选择标签

标签选择器

类选择器
基本使用

口诀:

样式点定义

结构类调佣

一个或多个

开发最常用

特殊使用:多类名

优点:

(1)可以把一些标签元素相司的样式(共同的部分)放到一个类里面,

(2)这些标签都可以调用这个公共的类然后再调用自己独有的类

(3)从而节省CSS代码,统一修改也非常方便

id选择器

通配符选择器

CSS字体属性

字体系列

字体大小

字体粗细

文字样式

字体复合属性

CSS文本属性

文本颜色(color)

对齐文本(text-align)

装饰文本(text-decoration)

文本缩进(text-indent)

行间距(line-height)

CSS的引入方式

按照CSS样式书写的位置(或者引入的方式)分类:

行内样式表(行内式)

内部样式表(嵌入式)

外部样式表(链接式)

内部样式表(style放在html中)

行内样式表(放在具体标签中)

外部样式表(引入html外的css文件)

Chrome调试工具

摘自黑马pink

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

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

相关文章

php如何实现秒杀活动功能

随着电商、移动支付等行业的发展&#xff0c;商品的秒杀活动越来越受到消费者们的欢迎。而后台技术支持的php作为非常流行&#xff0c;广泛应用的开发语言&#xff0c;也被越来越多的企业采用用来实现秒杀活动。 那么&#xff0c;在PHP中&#xff0c;如何实现秒杀活动呢&#…

Android C++系列:JNI常见问题

1. 背景 本文整理了JNI开发中常见的问题和解决方案。 2. 编译时指定SDK版本问题 智能语音交互SDK工程模块编译时指定的ANDROID_PLATFORM统一是23:-DANDROID_PLATFORM=23,ndk使用的是版本是17,在手上现有设备跑的都没问题,但是在一个新采购的temi移动机器人上跑不起来,定…

(2024)docker-compose实战 (6)部署前端项目(react, vue)

前言 本次仅使用nginx搭建单一的前端项目, 前端项目可以是html, react, vue.项目目录中需要携带nginx的配置文件(conf/default.conf).前端文件直接拷贝到项目目录中即可.如果不确定镜像的配置文件目录, 可以通过 docker inspect 镜像名 来查看具体的配置信息.使用docker-compos…

D - Intersecting Intervals(abc355)

题意&#xff1a;有n个区间&#xff0c;找出俩俩区间相交的个数 分析&#xff1a; 设初始俩俩相交&#xff0c;找出不相交的&#xff08;不同区间l>r)&#xff0c;减去即可 #include<bits/stdc.h> using namespace std; typedef long long ll; int main(){ ios:…

【前端CSS3】一篇搞懂各类常用选择器(黑马程序员)

文章目录 一、前言&#x1f680;&#x1f680;&#x1f680;二、正文&#xff1a;2.1 基础选择器2.1.1 标签选择器2.1.2 类选择器2.1.3 id选择器2.1.4 通配符选择题2.1.5 类选择器与id选择器区别☀️☀️☀️2.1.6 基础选择器总结&#x1f680; 2.2 复合类选择器2.2.1 后代选择…

Linux系统编程:信号

目录 1.信号概念 2.信号产生 2.1 终端 2.2 系统调用 2.3 硬件异常 2.4 软件条件 2.5 小结 3. 进程退出时的核心转储问题 4. 信号捕捉初识 5. 阻塞信号 5.1 相关概念 5.2 在内核中的表示 6. 信号捕捉 6.1 知识铺垫 6.2 信号捕捉流程 6.3 sigset_t 6.4 信号集操…

CTFHUB-SSRF-上传文件

通过file协议访问flag.php文件内容 ?urlfile:///var/www/html/flag.php 右键查看页面源代码&#xff0c;发现需要从内部上传一个文件这样才能正常获取到flag ?urlhttp://127.0.0.1/flag.php 发现无提交按钮&#xff0c;构造一个 <input type"submit" name&qu…

RabbitMQ 之 延迟队列

目录 ​编辑一、延迟队列概念 二、延迟队列使用场景 三、整合 SpringBoot 1、创建项目 2、添加依赖 3、修改配置文件 4、添加 Swagger 配置类 四、队列 TTL 1、代码架构图 2、配置文件代码类 3、生产者 4、消费者 5、结果展示 五、延时队列优化 1、代码架构图 …

白骑士的Python教学高级篇 3.4 Web开发

系列目录 上一篇&#xff1a;白骑士的Python教学高级篇 3.3 数据库编程 在现代软件开发中&#xff0c;Web开发占据了重要的一席之地。通过Web开发&#xff0c;我们可以创建从简单的个人博客到复杂的电子商务网站等各种应用。在Python的生态系统中&#xff0c;Flask和Django是两…

Python番外篇之责任转移:有关于虚拟机编程语言的往事

编程之痛 如果&#xff0c;你像笔者一样&#xff0c;有过学习或者使用汇编语言与C、C等语言的经历&#xff0c;一定对下面所说的痛苦感同身受。 汇编语言 将以二进制表示的一条条CPU的机器指令&#xff0c;以人类可读的方式进行表示。虽然&#xff0c;人类可读了&#xff0c…

Java后端开发的最佳工程实践与规范

Java后端开发的最佳工程实践与规范 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨Java后端开发中的最佳工程实践与规范&#xff0c;这些实践可以…

使用deep修改前端框架中的样式

目录 1.deep的作用 2.使用方式 3.特别说明 scoped 的实现原理&#xff1a; !important 1.deep的作用 /deep/、::v-deep 和 :deep 都是用于穿透组件作用域的选择器。它们的主要目的是允许开发者在父组件中直接选择并样式化子组件内部的元素&#xff0c;即使这些元素被封装在…

拓扑学习系列(1)拓扑球与拓扑环面与同胚

拓扑球与拓扑环面 在拓扑学中&#xff0c;"Topological Sphere" 和 "Topological Torus" 是两种不同的拓扑空间&#xff0c;它们具有特定的拓扑性质和几何特征。 Topological Sphere&#xff08;拓扑球&#xff09;&#xff1a; 拓扑球是一个二维曲面&…

JVM原理(九):JVM虚拟机工具之可视化故障处理工具

1. JHSDB:基于服务性代理的调试工具 JHSDB是一款基于服务性代理实现的进程外调试工具。 服务性代理是HotSpot虚拟机中一组用于映射Java虚拟机运行信息的、主要基于Java语言实现的API集合。 2. JConsole:Java监视与管理控制台 JConsole是一款基于JMX的可视化监视、管理工具。…

电脑有线网卡和无线网卡的MAC地址

电脑上的无线网卡和有线网卡是两种不同类型的网络接口卡&#xff0c;它们各自有不同的功能和连接方式。 无线网卡&#xff1a; 功能&#xff1a;无线网卡允许计算机通过无线信号连接到网络&#xff0c;通常是Wi-Fi网络。连接方式&#xff1a;无需物理电缆&#xff0c;通过无线…

编程与教学的奇妙交织:探索未来的教育模式

编程与教学的奇妙交织&#xff1a;探索未来的教育模式 在当今快速发展的科技时代&#xff0c;编程与教学之间的融合已经不再是遥不可及的梦想&#xff0c;而是逐渐成为教育领域的一股新浪潮。本文将从四个方面、五个方面、六个方面和七个方面深入探讨编程与教学的奇妙交织&…

Mac批量替换文件夹下所有文件内容

今天接了一个小需求&#xff0c;将文件夹下字段为% XXDM %替换成#{XXDM} 在苹果系统&#xff08;macOS&#xff09;下&#xff0c;可以使用命令行工具find结合sed来实现对A文件夹下所有文件内容的批量替换。具体操作步骤如下&#xff1a; 1、打开终端&#xff08;Terminal&am…

千益畅行,旅游卡,如何赚钱?

​ 赚钱这件事情&#xff0c;只有自己努力执行才会有结果。生活中没有幸运二字&#xff0c;每个光鲜亮丽的背后&#xff0c;都是不为人知的付出&#xff01; #旅游卡服务#

springboot拦截器,ThreadLocal(每个线程的公共区域)

拦截器 配置信息&#xff08;拦截所有请求&#xff09; 其实这种可以作为springAOP作日志记录

Spring 框架中都用到了哪些设计模式:单例模式、策略模式、代理模式

Spring 框架是一个功能强大的企业级应用开发框架&#xff0c;它使用了多种设计模式来提高代码的可维护性、可扩展性和可重用性。以下是 Spring 框架中常见的几个设计模式&#xff0c;并简要说明它们的应用场景&#xff1a; 1. 单例模式&#xff08;Singleton Pattern&#xff…