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.rhkb.cn/news/369107.html

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

相关文章

云桌面运维工程师

一 深信服驻场工程师 1 深信服AC、AF、AD、NGAF、WOC Atrust、WAF项目实施经验者优先考虑。 负责云桌面POC测试 部署和配置&#xff1a;设置云桌面基础设施&#xff0c;包括虚拟化平台、云桌面管理软件和相关组件。确保正确配置网络、存储和安全设置。 用户体验&#xff1…

k8s离线安装安装skywalking9.4

目录 概述资源下载Skywalking功能介绍成果速览实践rbacoapoap-svcuiui-svc 结束 概述 k8s 离线安装安装 skywalking9.4 版本&#xff0c;环境&#xff1a;k8s版本为&#xff1a;1.27.x 、spring boot 2.7.x spring cloud &#xff1a;2021.0.5 、spring.cloud.alibab&#xff1…

滚动表格(vue版本)【已验证可正常运行】

演示图 注&#xff1a;以下代码来自于GPT4o&#xff1a;国内官方直连GPT4o 代码 <template><div><div class"alarmList-child" ref"alarmList" mouseenter.stop"autoRoll(1)" mouseleave.stop"autoRoll()"><div…

无服务器【Serverless】架构的深度剖析:组件介绍、优缺点与适用场景

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《未来已来&#xff1a;云原生之旅》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、云计算的发展趋势 2、无服务器计算简介 二、无服务…

外挂级OCR神器:免费文档解析、表格识别、手写识别、古籍识别、PDF转Word

TextIn Tools是一款免费的在线OCR工具&#xff0c;支持快速准确的文字和表格识别&#xff0c;手写、古籍识别&#xff0c;提供PDF转Markdown大模型辅助工具&#xff0c;同时支持PDF、WORD、EXCEL、JPG、PPT等各类格式文件的转化。 TextIn Tools特点 免费&#xff1a;所有产品提…

Mysql 的第二次作业

一、数据库 1、登陆数据库 2、创建数据库zoo 3、修改数据库zoo字符集为gbk 4、选择当前数据库为zoo 5、查看创建数据库zoo信息 6、删除数据库zoo 1&#xff09;登陆数据库。 打开命令行&#xff0c;输入登陆用户名和密码。 mysql -uroot -p123456 ​ 2&#xff09;切换数据库…

Git学习(常用的一些命令)

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 配置相关&#xff1a; 创建与克隆仓库&#xff1a; 基本操作&#xff1a; 分支操作&#xff1a; 远程仓库操作&#xff1a…

深度学习基准模型Transformer

深度学习基准模型Transformer 深度学习基准模型Transformer&#xff0c;最初由Vaswani等人在2017年的论文《Attention is All You Need》中提出&#xff0c;是自然语言处理&#xff08;NLP&#xff09;领域的一个里程碑式模型。它在许多序列到序列&#xff08;seq2seq&#xf…

金融(基金)行业信创国产化特点及统一身份认证解决方案

金融业在政策支持及自主驱动下&#xff0c;金融信创取得快速发展。从2020年开始&#xff0c;三期试点已扩容至5000余家&#xff0c;进入全面推广阶段。而基金行业信创建设与银行、证券、保险这些试点行业相比&#xff0c;进展较为缓慢。 基金行业信创当前面临的问题 与多家基…

React Native 和 Flutter 的开发对比

React Native (RN) 和 Flutter 都是用于构建跨平台移动应用程序的流行框架。两者都具有各自的优势和劣势&#xff0c;选择哪个框架取决于您的具体需求和项目。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 以下是一些 RN 和 Flutter…

WPF在.NET9中的重大更新:Windows 11 主题

在2023年的2月20日&#xff0c;在WPF的讨论区&#xff0c;WPF团队对路线的优先级发起了一次讨论。 对三个事项发起了投票。 第一个是Windows 11 主题 第二个是更新的控件 第三个是可空性注释 最终Windows 11 主题得票最高&#xff0c;WPF团队2023-2024的工作优先级就是Windows…

Hadoop页面报错Permission denied: user=dr.who, access....

1、临时解决 hdfs dfs -chmod -R 777 /这种方法&#xff0c;存在一个不足&#xff0c;就是后面重新创建的文件夹&#xff0c;页面进行删除的时候&#xff0c;依然报这个错。 但是&#xff0c;对于应付紧急客户需求&#xff0c;可以临时用一下。 2、永久解决 查看页面的Owner…

python-图像旋转(赛氪OJ)

[题目描述] 输入一个 n 行 m 列的黑白图像&#xff0c;将它顺时针旋转 9090 度后输出。输入&#xff1a; 第一行包含两个整数 n 和 m&#xff0c;表示图像包含像素点的行数和列数。1≤n≤100&#xff0c;1≤m≤100。 接下来 n 行&#xff0c;每行 m 个整数&#xff0c;表示图像…

Vue3从入门到精通(三)

vue3插槽Slots 在 Vue3 中&#xff0c;插槽&#xff08;Slots&#xff09;的使用方式与 Vue2 中基本相同&#xff0c;但有一些细微的差异。以下是在 Vue3 中使用插槽的示例&#xff1a; // ChildComponent.vue <template><div><h2>Child Component</h2&…

51单片机-让一个LED灯闪烁、流水灯(涉及:自定义单片机的延迟时间)

目录 设置单片机的延迟&#xff08;睡眠&#xff09;函数查看单片机的时钟频率设置系统频率、定时长度、指令集 完整代码生成HEX文件下载HEX文件到单片机流水灯代码 (自定义延迟时间) 设置单片机的延迟&#xff08;睡眠&#xff09;函数 查看单片机的时钟频率 检测前单片机必…

介绍 pg_later:受 Snowflake 启发的 Postgres 异步查询#postgresql认证

#PG培训#PG考试#postgresql培训#postgresql考试 为什么要使用异步查询&#xff1f; 想象一下&#xff0c;您启动了一项长期维护工作。您在执行过程中离开&#xff0c;但回来后发现&#xff0c;由于笔记本电脑关机&#xff0c;该工作在几个小时前就被中断了。您不希望这种情况…

大学生竞赛管理系统-计算机毕业设计源码37276

大学生竞赛管理系统的设计与实现 摘 要 随着教育信息化的不断发展&#xff0c;大学生竞赛已成为高校教育的重要组成部分。传统的竞赛组织和管理方式存在着诸多问题&#xff0c;如信息不透明、效率低下、管理不便等。为了解决这些问题&#xff0c;提高竞赛组织和管理效率&#x…

FPGA基本资源介绍

文章目录 FPGA资源介绍1.可编程输入输出单元(IOB)2.可配置逻辑块(CLB)3.数字时钟管理模块(DCM)4.嵌入式块RAM(BLOCK RAM / BRAM)4.1其他ram 5.丰富的布线资源6.底层内嵌功能单元7.内嵌专用硬核软核、硬核、以及固核的概念 FPGA资源介绍 1.可编程输入输出单元(IOB) 可编程输入…

树莓派4B学习笔记17:RBG_LED全色域灯的驱动模块编写

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: ​ Python 版本3.7.3&#xff1a; ​ 今日学习&#xff1a;RBG_LED全色域灯的驱动模块编写…

笑麻了|4款让人心疼的电脑软件,由于免费又实用,常被同行挤压

有好多小众软件&#xff0c;不仅免费&#xff0c;还特别好用&#xff0c;而且一点广告都没有&#xff0c;这些软件因为太良心了&#xff0c;反而被排挤&#xff0c;真是让人感叹不已。 格式工厂 这是一款80后应该都不陌生的老牌国产软件&#xff0c;叫做格式工厂&#xff0c;…