HTML+CSS学习笔记

目录

HTML

1.开发环境

2.创建HTML文件

3.HTML元素

3.1HTML文件结构

3.2HTML标签

3.3HTML属性​编辑​编辑

3.4HTML区块

3.4.1块元素

3.4.2行内元素

3.5HTML表单

CSS

1.CSS简介

2.CSS语法​编辑

3.CSS三种导入方式

内联样式

内部样式

外部样式

 4.选择器​

 5.CSS常用属性

 6.CSS盒子模型

 7.CSS浮动

 8.定位​编辑

HTML

1.开发环境

在VSCode中安装HTML CSS Support、Live Serve（可实时预览页面变化）、Auto Rename Tage(在修改HTML标签的时候，同步修改与之匹配的另一个标签)

2.创建HTML文件

--新建html文件

--在第一行输入！+Tab键，就会生成一个完整的HTML文档结构

--点击鼠标右键->Open with Live Server 可以在浏览器中观察页面

3.HTML元素

3.1HTML文件结构

<html>//用来标记HTML文档的开始<head>    //用来标记HTML文档头部的开始</head>   //用来标记HTML文档头部的结束<body>    //用来标记HTML文档主体的开始</body>   //用来标记HTML文档主体的结束
</html>       //用来标记HTML文档的结束

3.2HTML标签

在body中添加代码！

以下为一些常用标签

<h1>一级标题标签</h1><h2>二级标题标签</h2><h3>三级标题标签</h3><p>这是一个段落标签</p><p>更改文本样式：<b>字体加粗</b>、<strong>加粗</strong>、<i>斜体</i>、<u>下划线</u>、<s>删除键</s></p> 
​<ul><li>无序列表元素1</li><li>无序列表元素2</li><li>无序列表元素3</li></ul>​
    <ol><li>有序列表元素1</li><li>有序列表元素2</li><li>有序列表元素3</li></ol>

这个为表格标签，table为外标签（border为边框属性），tr（table row）代表行，td（table data）代表每一行每一列的具体数据，th（table head）代表每一列的标题

<table border="1"><tr><th>列标题 1</th><th>列标题 2</th><th>列标题 3</th></tr><tr><td>元素 1</td><td>元素 2</td><td>元素 3</td></tr><tr><td>元素 11</td><td>元素 12</td><td>元素 13</td></tr><tr><td>元素 21</td><td>元素 22</td><td>元素 23</td></tr></table>

实现效果：

3.3HTML属性

    <a href="https://docs.geeksman.com">这是一个超链接 </a><br> <!--<p> br 是换行标签</p>--><hr> <!--<p> hr 是水平分割线</p>--><a href="https://docs.geeksman.com" target="_blank">这是第二个超链接</a><!--<p> target是超链接的属性，表示怎么到这个链接，_blank为在新窗口打开</p>--><img src="" alt=""><!-- img 标签是用于在网页中嵌入图像 从而实现图像的显示和呈现src可以是路径也可以是urlalt是用于定义图像的替代文本(图片显示不了时显示的文本)-->

3.4HTML区块

3.4.1块元素

3.4.2行内元素

--div是一个块标签 没有任何语意  经常用于创建页面的布局结构

--.nav+Tab可以创建属性class为nav的div块元素,#nav+Tab可以创建属性id为nav的div块元素

--span把一小段文本包装起来,以便于对它们使用CSS,JS

3.5HTML表单

form标签是表单的容器  （创建表单与创建表格差不多）

label与span作用差不多,但label仅限于与input一同使用

form标签属性action为提交到何处 需要服务器 需要后端提供的API

单选对应type是radio,对属性name一致的起作用;

多选对应的type是checkbox,对属性name一致的起作用

for属性 可以把label标签绑定到input元素

    <form action=""><label>用户名：</label><input type="text" placeholder="请输入用户名" ><br><br><label for="pwd">密码：</label><input type="password" id="pwd" placeholder="请输入密码"><br><br><label>性别</label><input type="radio" name="gender"> 男<input type="radio" name="gender"> 女<br><br><label>爱好：</label><input type="checkbox" name="hobby">唱歌<input type="checkbox" name="hobby">跳舞<input type="checkbox" name="hobby">RAP <br><br><input type="submit" value="提交"></form>

实现效果：

CSS

1.CSS简介

2.CSS语法

3.CSS三种导入方式

内联样式

<h1 style="color:red;">一级标题,使用内联样式</h1>

内部样式

（在head中写）

    <style>p{color: blue;font-size: 16px;}h2{color:green;}</style>

外部样式

在项目下新建一个CSS文件夹，新建css文件

在HTML的head中加入link标签，herf为css文件路径

<link rel="stylesheet" href="./CSS/style.css">

然后可以直接使用 

<h3>三级标题，应用外部样式</h3>

 4.选择器

    <style>/*元素选择器*/h2{color:aqua;}/* 类选择器 */.highlight{background-color: yellow;}/* ID选择器 */#header{font-size: larger;}/* 通用选择器 */*{font-family: 'KaiTi';}/* 子元素选择器 */.father > .som{color:green}/* 后代选择器 */.father p{color:brown}/* 相邻元素选择器 *//* 只对h3下面的p标签起作用 */h3 + p{background-color: red;}/* 伪类选择器 *//* hover为悬停触发 first-child nth-child 第1、n个子元素触发 */#element:hover{background-color: purple;}/* 伪元素选择器创建虚拟的元素::after::before */</style>
    <div class="father"><p class="son">子元素选择器</p><div><p class="grandson">后代选择器</p></div></div><p>这是一个普通的p标签</p><h3>这是一个相邻兄弟选择器</h3><p>这是另一个p标签,相邻元素选择器只渲染这个p</p><h3 id="element">伪类选择器</h3>


5.CSS常用属性

    <h1 style="font:bolder 50px 'KaiTi';">这是一个 font 复合属性示例</h1><p style="line-height: 40px;">这是一段很长的文本,line-height可以改变行高，行与行间隔</p><div class="block">这是一个块级标签</div><span class="inline">这是一个行内标签</span><img src="" alt="" class="inline-block">
    <style>/* 块级元素有高、宽属性 */.block{background-color: aqua;width:200px;height:2;}/* 行内元素无高、宽属性 */.inline{background:brown;}/* 行内块不独占据一行，有高、宽属性 */.inline-block{width:100px;height:150px;}</style>
    <div style="display: inline;"></div> <!-- display可以将元素转换为块级 行内元素 -->

6.CSS盒子模型

    <style>.boder-demo{background-color: yellow;width:300px;height:200px;/* border属性可更细化 */border-style: soild;border-width: 10px;/* 参数可以是1~4个 */border-color: blueviolet;}.demo{background-color: aqua;display:inline-block;border: 5px soild yellowgreen;/* border为复合属性 */}</style>

7.CSS浮动

    <style>.father{background-color: aqua;height:150px;}.left-son{width: 100px;height: 100px;background-color: yellow;float:left;}.right-son{width: 100px;height: 100px;background-color: yellowgreen;float:right;}</style>
    <div class="father"><div class="left-son">左浮动</div><div class="right-son">右浮动</div></div>
        .father{background-color: aqua;height:150px;overflow: hidden;} /* 清除浮动 上下两种方式*/.father::after{content:"";display:table;clear:both}

8.定位

        .box-relative{position:relative;/* 相对定位，不脱离正常的文档流 */position:absolute;/* 绝对定位，脱离正常的文档流 */position:fixed;/* 固定定位，固定在web一个位置 */}

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

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

相关文章

低代码中实现数据映射的必要性与方案

低代码中实现数据映射的必要性与方案

在数字化转型的浪潮中&#xff0c;低代码平台因其快速开发和灵活性而受到越来越多企业的青睐。然而&#xff0c;随着业务需求的复杂化&#xff0c;单纯依赖低代码工具往往难以满足企业在数据处理和业务逻辑上的要求。数据映射作为连接不同数据源和业务逻辑的桥梁&#xff0c;显…
阅读更多...
sheng的学习笔记-AI-时序差分学习

sheng的学习笔记-AI-时序差分学习

AI目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 强化学习&#xff1a;sheng的学习笔记-AI-强化学习&#xff08;Reinforcement Learning, RL&#xff09;-CSDN博客 蒙特卡罗强化学习&#xff1a; sheng的学习笔记-AI-蒙特卡罗强化学习-CSDN博客 什么是时序差分学习 时序…
阅读更多...
解锁HTML的力量：从基础标签到完整网页构建

解锁HTML的力量：从基础标签到完整网页构建

在整个学习编程技能的过程中&#xff0c;我们会始终基于编程的本质&#xff1a;输入-》函数处理-》输出 和编程语言的本质&#xff1a;语法糖、变量、基础函数&#xff0c;去理解各种编程技术和学习相关的技能。 今天开始学习编程的第一个技能点&#xff1a;HTML。正如编程的本…
阅读更多...
国内可用ChatGPT-4中文镜像网站整理汇总【持续更新】

国内可用ChatGPT-4中文镜像网站整理汇总【持续更新】

一、GPT中文镜像网站 ① yixiaai.com 支持GPT4、4o以及o1&#xff0c;支持MJ绘画 ② chat.lify.vip 支持通用全模型&#xff0c;支持文件读取、插件、绘画、AIPPT ③ AI Chat 支持GPT3.5/4&#xff0c;4o以及MJ绘画 二、模型知识 o1/o1-mini&#xff1a;最新的版本模型&am…
阅读更多...
汇量科技大数据面试题及参考答案

汇量科技大数据面试题及参考答案

如何在 SQL 中处理三个字段完全一样的去重？在 Scala 中又该如何实现？ 在 SQL 中，可以使用多种方法来处理三个字段完全一样的去重。一种常见的方法是使用 DISTINCT 关键字结合多个字段来实现。例如，假设有表 table_name，包含字段 field1、field2 和 field3，可以使用以下 S…
阅读更多...
RabbitMQ 快速入门

RabbitMQ 快速入门

目录 什么是MQ 为什么要使用 MQ MQ 的分类 MQ 的选择 认识 RabbitMQ RabbitMQ 的核心部分 安装 脚本安装 docker 安装 启动 web 管理界面 创建用户 创建消息队列 基本概念 消息应答 持久化 预取值 发布确认 交换机 Exchange 概念 死信队列 死信的来源 延迟…
阅读更多...
【工具】Java Excel转图片

【工具】Java Excel转图片

【工具】Java Excel转图片 package com.yj.luban.modules.office.excel;import org.apache.poi.ss.usermodel.*; import org.apache.poi.xssf.usermodel.XSSFWorkbook;import javax.imageio.ImageIO; import java.awt.Color; import java.awt.Font; import java.awt.*; import …
阅读更多...
深度学习03-神经网络01-什么是神经网络？

深度学习03-神经网络01-什么是神经网络？

神经网络的基本概念 人工神经网络&#xff08;Artificial Neural Network&#xff0c;ANN&#xff09;&#xff1a; 是一种模仿生物神经网络的计算模型。由多个神经元&#xff08;或称为节点&#xff09;组成&#xff0c;这些节点通过不同的连接来传递信息。 每个神经元可以接…
阅读更多...
淘客系统开发之卷轴模式系统源码功能分析

淘客系统开发之卷轴模式系统源码功能分析

随着互联网技术的快速发展&#xff0c;电商行业不断创新&#xff0c;探索更加高效、有趣的用户参与机制。其中&#xff0c;卷轴模式作为一种新兴的商业模式&#xff0c;以其独特的积分兑换和任务系统&#xff0c;在淘客系统开发中得到了广泛应用。本文将从技术角度&#xff0c;…
阅读更多...
C#基础（16）实践：学生成绩管理系统

C#基础（16）实践：学生成绩管理系统

简介 通过基础部分的学习&#xff0c;我们已经能进行一些实际应用的开发&#xff0c;学生成绩系统我相信是大家基本在大学期间上程序课必定会经历的一个小项目。 这个小项目看上去简单&#xff0c;但是思考量却不少。 这里就不带着大家一步一步讲解了&#xff0c;因为里面涉…
阅读更多...
美团测开OC！

美团测开OC！

大家好&#xff0c;我是洋子&#xff0c;最近测试社区里面的一个25届同学参加秋招&#xff0c;已经拿到美团测开offer&#xff0c;今天来分享一下他的求职经历&#xff0c;文末附面经 他求职目前的进展如下&#xff1a; 互联网大厂&#xff1a;字节&#xff0c;阿里&#xff…
阅读更多...
shell配置文件介绍

shell配置文件介绍

~/.bash_profile 和 ~/.zshrc 是两种不同的 shell 配置文件，分别用于配置 Bash 和 Zsh shell 的环境。它们的主要功能是初始化 shell 环境、设置环境变量、别名、函数等，并在启动 shell 时自动加载。 1. ~/.bash_profile 作用: ~/.bash_profile 是 Bash shell 的启动配置文件…
阅读更多...
Kafka-Manager安装及操作

Kafka-Manager安装及操作

文章目录 一、kafka-manager介绍二、kafka-manager安装三、Kafka-Manager操作 一、kafka-manager介绍 CMAK (Cluster Manager for Apache Kafka, previously known as Kafka Manager) CMAK (previously known as Kafka Manager) is a tool for managing Apache Kafka cluster…
阅读更多...
LeetCode 每周算法 6（图论、回溯）

LeetCode 每周算法 6（图论、回溯）

LeetCode 每周算法 6&#xff08;图论、回溯&#xff09; 图论算法&#xff1a; class Solution: def dfs(self, grid: List[List[str]], r: int, c: int) -> None: """ 深度优先搜索函数&#xff0c;用于遍历并标记与当前位置(r, c)相连的所有陆地&…
阅读更多...
切换淘宝最新npm镜像源

切换淘宝最新npm镜像源

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;前端工程师 文章目录 一、&#x1f30e;前言二、&#x1f30e;切换淘宝最新npm镜像源2.…
阅读更多...
[Linux] Linux操作系统 进程的状态

[Linux] Linux操作系统 进程的状态

标题&#xff1a;[Linux] Linux操作系统 进程的状态 个人主页&#xff1a;水墨不写bug &#xff08;图片来源于网络&#xff09; 目录 一、前置概念的理解 1.并行和并发 2.时间片 3.进程间具有独立性 4.等待的本质 正文开始&#xff1a; 在校的时候&#xff0c;你一定学过《…
阅读更多...
9.25度小满一面

9.25度小满一面

1.map的底层 2.unorder_map哈希表有自己实现过吗&#xff1f;哈希冲突 3.poll和epoll和select的优缺点、 4.线程同步机制是用来做什么的? 5.五子棋项目问题-- 算法题: 6.LeetCode.重排链表 给定一个单链表 L 的头节点 head &#xff0c;单链表 L 表示为&#xff1a; L0…
阅读更多...
LeetCode 滑动窗口 最少交换次数来组合所有的 1 II

LeetCode 滑动窗口 最少交换次数来组合所有的 1 II

最少交换次数来组合所有的 1 II 交换 定义为选中一个数组中的两个 互不相同 的位置并交换二者的值。 环形 数组是一个数组&#xff0c;可以认为 第一个 元素和 最后一个 元素 相邻 。 给你一个 二进制环形 数组 nums &#xff0c;返回在 任意位置 将数组中的所有 1 聚集在一起需…
阅读更多...
通信工程学习：什么是VPN虚拟专用网络

通信工程学习：什么是VPN虚拟专用网络

VPN：虚拟专用网络 VPN（Virtual Private Network），即虚拟专用网络，是一种通过公共网络（如互联网）建立私有网络连接的技术。以下是关于VPN的详细解释： 一、VPN虚拟专用网络的定义与原理 VPN通过公共网络（通常是互联网）建立一个临时的、安全的连接，形…
阅读更多...
JavaEE: 深入探索TCP网络编程的奇妙世界(四)

JavaEE: 深入探索TCP网络编程的奇妙世界(四)

文章目录 TCP核心机制TCP核心机制四: 滑动窗口为啥要使用滑动窗口?滑动窗口介绍滑动窗口出现丢包咋办? TCP核心机制五: 流量控制 TCP核心机制 上一篇文章 JavaEE: 深入探索TCP网络编程的奇妙世界(三) 书接上文~ TCP核心机制四: 滑动窗口 为啥要使用滑动窗口? 之前我们讨…
阅读更多...
最新文章

Copyright @ 2022~2023