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，一经查实，立即删除！

相关文章

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…
阅读更多...
RabbitMQ 快速入门

RabbitMQ 快速入门

目录 什么是MQ 为什么要使用 MQ MQ 的分类 MQ 的选择 认识 RabbitMQ RabbitMQ 的核心部分 安装 脚本安装 docker 安装 启动 web 管理界面 创建用户 创建消息队列 基本概念 消息应答 持久化 预取值 发布确认 交换机 Exchange 概念 死信队列 死信的来源 延迟…
阅读更多...
深度学习03-神经网络01-什么是神经网络？

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

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

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

随着互联网技术的快速发展&#xff0c;电商行业不断创新&#xff0c;探索更加高效、有趣的用户参与机制。其中&#xff0c;卷轴模式作为一种新兴的商业模式&#xff0c;以其独特的积分兑换和任务系统&#xff0c;在淘客系统开发中得到了广泛应用。本文将从技术角度&#xff0c;…
阅读更多...
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…
阅读更多...
通信工程学习：什么是VPN虚拟专用网络

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

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

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

文章目录 TCP核心机制TCP核心机制四: 滑动窗口为啥要使用滑动窗口?滑动窗口介绍滑动窗口出现丢包咋办? TCP核心机制五: 流量控制 TCP核心机制 上一篇文章 JavaEE: 深入探索TCP网络编程的奇妙世界(三) 书接上文~ TCP核心机制四: 滑动窗口 为啥要使用滑动窗口? 之前我们讨…
阅读更多...
stm32单片机个人学习笔记6（EXTI外部中断）

stm32单片机个人学习笔记6（EXTI外部中断）

前言 本篇文章属于stm32单片机&#xff08;以下简称单片机&#xff09;的学习笔记&#xff0c;来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记&#xff0c;只能做参考&#xff0c;细节方面建议观看视频&#xff0c;肯定受益匪浅。 STM32入门教程-2023版 细…
阅读更多...
thinkphp8 从入门到放弃（后面会完善用到哪里写到哪）

thinkphp8 从入门到放弃（后面会完善用到哪里写到哪）

thinkphp8 从入门到放弃 引言 thinkphp* 大道至简一、 thinkphp8 安装安装Composerthinkphp 安装命令(tp-项目名称)多应用安装&#xff08;一个项目不会只有一个应用&#xff09;安装完文件目录如下本地部署配置伪静态好了项目可以run 二、架构服务&#xff08;Service&#xf…
阅读更多...
【数学分析笔记】第3章第4节闭区间上的连续函数（1）

【数学分析笔记】第3章第4节闭区间上的连续函数（1）

3. 函数极限与连续函数 3.4 闭区间上的连续函数 3.4.1 有界性定理 【定理3.4.1】 f ( x ) f(x) f(x)在闭区间 [ a , b ] [a,b] [a,b]上连续&#xff0c;则 f ( x ) f(x) f(x)在闭区间 [ a , b ] [a,b] [a,b]上有界。 【证】用反证法&#xff0c;假设 f ( x ) f(x) f(x)在 [ …
阅读更多...
Java项目: 基于SpringBoot+mybatis+maven中小型医院网站管理系统(含源码+数据库+开题报告+毕业论文)

Java项目: 基于SpringBoot+mybatis+maven中小型医院网站管理系统(含源码+数据库+开题报告+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismaven中小型医院网站管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、…
阅读更多...
MySql数据库---子查询，多表连接查询，自连接查询，串联查询，数学函数，字符串函数，时间日期函数，判断分支语句

MySql数据库---子查询，多表连接查询，自连接查询，串联查询，数学函数，字符串函数，时间日期函数，判断分支语句

思维导图 子查询[分步走] 1:一个sql的查询结果当做另一个sql的查询条件. 2:内层的那个sql语句要先执行 -- todo --------------子查询---(嵌套查询)--------------- -- 例如&#xff0c;使用命令完成&#xff1a; -- &#xff08;1&#xff09;使用数据库班级db_product3下的商…
阅读更多...
html TAB、table生成

html TAB、table生成

1. 代码 <!DOCTYPE html> <head> <meta charset"UTF-8"> <title>Dynamic Tabs with Table Data</title> <style> /* 简单的样式 */ .tab-content { display: none; border: 10px solid #ccc; padding: 30px; mar…
阅读更多...
音视频生态下Unity3D和虚幻引擎（Unreal Engine）的区别

音视频生态下Unity3D和虚幻引擎（Unreal Engine）的区别

技术背景 好多开发者跟我们做技术交流的时候&#xff0c;会问我们&#xff0c;为什么有Unity3D的RTMP|RTSP播放模块&#xff0c;还有RTMP推送和轻量级RTSP服务模块&#xff0c;为什么不去支持虚幻引擎&#xff1f;二者区别在哪里&#xff1f;本文就Unity3D和虚幻引擎之间的差异…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023