HTMLCSS(入门)

news2024/10/7 7:31:28

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.coloradmin.cn/o/1883411.html

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

相关文章

汽车零部件材料耐候性测试氙光太阳辐射系统试验箱

概述 汽车零部件等领域的材料耐候性测试是一项关键的质量控制环节&#xff0c;它关乎汽车部件在各种气候条件下的性能表现和寿命。塑料件光照老化实验箱&#xff0c;即氙灯老化试验箱&#xff0c;在其中扮演着至关重要的角色。通过模拟自然环境中的光照、温度、湿度等条件&…

分享一个在 WinForm 桌面程序中使用进度条展示报表处理进度的例子,提升用户体验

前言 在有些比较消耗时间的业务场景中&#xff0c;比如生成报表等&#xff0c;如果没有在操作的过程中向用户反馈操作进度&#xff0c;会让用户以为程序 “死” 掉了&#xff0c;用户体验非常不好。 WinForm 桌面程序项目与 Console 项目不一样&#xff0c;如果 Console 项目…

农村程序员陈随易2024年中总结

今天是 2024年7月1日&#xff0c;时间如白驹过隙&#xff0c;今年已去其一半。 总结一下今年上半年的情况&#xff0c;给大家提供一些参考和建议。 希望大家关注一下公众号 陈随易&#xff0c;有些内容只在公众号发表。 先看看我的年初计划&#xff0c;这个在今年年初的时候&…

【解锁未来:深入了解机器学习的核心技术与实际应用】

解锁未来&#xff1a;深入了解机器学习的核心技术与实际应用 &#x1f48e;1.引言&#x1f48e;1.1 什么是机器学习&#xff1f; &#x1f48e;2 机器学习的分类&#x1f48e;3 常用的机器学习算法&#x1f48e;3.1 线性回归&#xff08;Linear Regression&#xff09;&#x1…

141个图表,完美展示数据分类别关系!

本文介绍使用Python工具seaborn详细实现分类关系图表&#xff0c;包含8类图141个代码模版。 分类关系图表用于展示数字变量和一个或多个分类变量之间的关系&#xff0c;可以进一步分为&#xff1a;箱形图&#xff08;box plot&#xff09;、增强箱形图&#xff08;enhanced bo…

C++进阶 | [4.3] 红黑树

摘要&#xff1a;什么是红黑树&#xff0c;模拟实现红黑树 红黑树 &#xff0c;是一种 二叉搜索树 &#xff0c;但 在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是 Red 或 Black 。 通过对 任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树…

创建XCOM窗体和跳转连接

Xcom 窗体&#xff1a; (groupBox组合框&#xff0c;comboBox下拉框) xcom代码&#xff1a; namespace _01_作业 {// 1kb 1024B 1200B// 1MB public partial class Form1 : Form{public List<string> botelv new List<string> { "600","1200&…

基于Tools体验NLP编程的魅力

大模型能理解自然语言&#xff0c;从而能解决问题&#xff0c;但是就像人类大脑一样&#xff0c;大脑只能发送指令&#xff0c;实际行动得靠四肢&#xff0c;所以LangChain4j提供的Tools机制就是大模型的四肢。 大模型的不足 大模型在解决问题时&#xff0c;是基于互联网上很…

图像大模型中的注意力和因果掩码

AIM — 图像领域中 LLM 的对应物。尽管 iGPT 已经存在 2 年多了&#xff0c;但自回归尚未得到充分探索。在本文中&#xff0c;作者表明&#xff0c;当使用 AIM 对网络进行预训练时&#xff0c;一组图像数据集上的下游任务的平均准确率会随着数据和参数的增加而线性增加。 要运…

Android 大话binder通信

戳蓝字“牛晓伟”关注我哦&#xff01; 用心坚持输出易读、有趣、有深度、高质量、体系化的技术文章 由于 Android 大话binder通信(上) 和 Android 大话binder通信(下) 分为两篇阅读体验不好&#xff0c;顾合并为一篇。 本文摘要 用故事的方式把binder通信的整个过程都描述…

机械原理介绍

机械原理介绍 1 介绍1.1 概述1.2 资料书籍在线资料 2 [机械原理知识整理](https://tomm.muzing.top/) 【muzing整理编写】1 绪论2 机构的结构分析2-2 机构的组成及分类2-3 机构运动简图2-4 机构具有确定运动的条件及最小阻力定律2-5 2-6 机构自由度的计算2-7 平面机构的组成原理…

【深度学习】图生图img3img论文原理,SD EDIT

https://arxiv.org/abs/2108.01073 摘要 引导图像合成技术使普通用户能够以最小的努力创建和编辑逼真的图像。关键挑战在于平衡对用户输入&#xff08;例如&#xff0c;手绘的彩色笔画&#xff09;的忠实度和合成图像的真实感。现有的基于GAN的方法试图通过使用条件GAN或GAN反…

64.WEB渗透测试-信息收集- WAF、框架组件识别(4)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;63.WEB渗透测试-信息收集- WAF、框架组件识别&#xff08;3&#xff09;-CSDN博客 我们在…

面经-计算机基础

1.计算机⽹络 1.1 OSI与TCP/IP各层的结构与功能,都有哪些协议? 计算机网络体系结构 应⽤层 应⽤层 (application-layer &#xff09;的任务是通过应⽤进程间的交互来完成特定⽹络应⽤。 应⽤层协议定 义的是应⽤进程&#xff08;进程&#xff1a;主机中正在运⾏的程序&…

便签 Pro(Mac 智能便签工具)专业版怎么样,值得购买吗?

使用 Mac 的小伙伴平时都是怎么记录工作生活中的碎片信息&#xff1f;用聊天软件&#xff0c;还是系统备忘录呢&#xff1f; 实际体验下来&#xff0c;其实都难以称得上好用。 赶紧来了解一下 Mac 多彩思维速记工具便签 Pro&#xff01;拥有智能边框大小、iCloud 同步、历史记…

昇思25天学习打卡营第1天|MindSpore 全流程操作指南

目录 MindSpore 库相关操作的导入指南 处理数据集 网络构建 模型训练 保存模型 加载模型 MindSpore 库相关操作的导入指南 首先&#xff0c;我们导入了 MindSpore 这个库的整个模块。然后&#xff0c;从 MindSpore 库中引入了 nn 模块&#xff0c;一般来说&#xff0c;它是…

JavaEE—什么是服务器?以及Tomcat安装到如何集成到IDEA中?

目录 ▐ 前言 ▐ JavaEE是指什么? ▐ 什么是服务器&#xff1f; ▐ Tomcat安装教程 * 修改服务端口号 ▐ 将Tomcat集成到IDEA中 ▐ 测试 ▐ 结语 ▐ 前言 至此&#xff0c;这半年来我已经完成了JavaSE&#xff0c;Mysql数据库&#xff0c;以及Web前端知识的学习了&am…

ROS2在rviz2中实时显示轨迹和点

本文是将《ROS在rviz中实时显示轨迹和点》博客中rviz轨迹显示转为ROS2环境中的rviz2显示。 ros2的工作空间创建这里就不展示了。 包的创建 ros2 pkg create --build-type ament_cmake showpath --dependencies rclcpp nav_msgs geometry_msgs tf2_geometry_msgsshowpath.cpp…

【微服务网关——Websocket代理】

1.Websocket协议与原理 1.1 连接建立协议 1.1.1 客户端发起连接请求 客户端通过 HTTP 请求发起 WebSocket 连接。以下是一个 WebSocket 握手请求的例子&#xff1a; GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key…

python 中的 下划线_ 是啥意思

在 Python 中&#xff0c;_&#xff08;下划线&#xff09;通常用作占位符&#xff0c;表示一个变量名&#xff0c;但程序中不会实际使用这个变量的值。 目录 忽略循环变量&#xff1a;忽略函数返回值&#xff1a;在解释器中使用&#xff1a;举例子1. 忽略循环变量2. 忽略不需…