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.xdnf.cn/news/1543250.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

【无人机设计与控制】基于蜣螂优化算法求解多无人机集群路径规划问题

【无人机设计与控制】基于蜣螂优化算法求解多无人机集群路径规划问题

摘要 本文基于蜣螂优化算法&#xff08;Dung Beetle Optimization, DBO&#xff09;研究了多无人机路径规划问题。目标是优化多无人机的飞行轨迹&#xff0c;在避免障碍物的同时&#xff0c;尽量减少能量消耗并保持集群内的通信。为提高搜索效率和准确性&#xff0c;对DBO进行…
阅读更多...
国庆长假出游带什么好？这五款智能设备让你玩得更尽兴

国庆长假出游带什么好？这五款智能设备让你玩得更尽兴

随着国庆长假的临近&#xff0c;许多人已经开始规划他们的旅行计划&#xff0c;期待在这段时间里放松身心&#xff0c;享受假期的乐趣。然而&#xff0c;旅行不仅仅是关于目的地的美景和文化体验&#xff0c;它同样关乎旅途中的舒适度和便利性。在科技日新月异的今天&#xff0…
阅读更多...
JAVA工具类

JAVA工具类

JAVA工具类_常用 下划线转驼峰POI 导出Excel工具类POI 导入Excel工具类下划线转驼峰 /*** 下划线转驼峰* 字符串 "USER_NAME" 会被转换为 "userName"* 字符串 "user_name" 会被转换为 "userName"* @param underscoreStr* @return*/pub…
阅读更多...
五类ip地址的区别是什么

五类ip地址的区别是什么

IP地址是用于唯一标识网络设备的数字标签&#xff0c;根据网络ID的不同&#xff0c;IP地址可以分为A类、B类、C类、D类和E类五类。本文将详细解析这五类IP地址的区别是什么&#xff0c;帮助读者更好地理解和应用IP地址。 一、A类IP地址 A类IP地址以0开头&#xff0c;其第一段号…
阅读更多...
米壳AI：自媒体如何获取高清原画质！真8K视频是这样下载的！

米壳AI：自媒体如何获取高清原画质！真8K视频是这样下载的！

作为一名新手自媒体博主&#xff0c;你是不是也在各种短视频平台上疯狂搜索保存外网视频的方法和软件呢&#xff1f;&#x1f603;然而&#xff0c;真正能下载真 4K 视频的却寥寥无几。 别苦恼啦&#xff01;今天我就来给大家分享一个小编亲测过后真实好用的工具 —— 米壳 AI。…
阅读更多...
图解VMware通过NAT模式实现互联互通案例

图解VMware通过NAT模式实现互联互通案例

一、概述 在VMware中安装虚拟主机&#xff0c;其中一项重要的任务就是实现互联连互通&#xff0c;达成以下目标&#xff1a; 虚拟主机实现能够随时上互联网。虚拟主机与宿主机之间互联访问。虚拟主机之间互联访问。 其实VMware不仅具有虚拟主机功能&#xff0c;还具有虚拟网络…
阅读更多...
Windows X86 远线程注入问题解惑

Windows X86 远线程注入问题解惑

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…
阅读更多...
一.python入门

一.python入门

gyp的读研日记&#xff0c;哈哈哈哈&#xff0c;&#x1f642;&#xff0c;从复习python开始&#xff0c; 目录 1.python入门 1.1 Python说明书 1.2 Python具备的功能 1.3 学习前提 1.4 何为Python 1.5 编程语言 2.Python环境搭建 2.1 开发环境概述 2.2 Python的安装与…
阅读更多...
STM32F407ZGT6-HAL-FreeRTOS-信号量示例

STM32F407ZGT6-HAL-FreeRTOS-信号量示例

本程序创建了一个二进制信号量&#xff0c;然后创建2个任务&#xff1a;一个用于释放信号量&#xff0c;另一个用于获取信号 量&#xff1b; 发送任务、接收任务的代码和执行流程如下&#xff1a; A&#xff1a;发送任务优先级高&#xff0c;先执行。连续3次释放二进制信号量&…
阅读更多...
一文搞懂offset、client、scroll系列及案例

一文搞懂offset、client、scroll系列及案例

目录 一、offset 1-1、offset系列属性 1-2、offset与style区别 1-3、案例 1-3-1、计算鼠标在盒子内的坐标 1-3-2、拖动模态框 二、client 2-1、client系列属性 三、scroll 3-1、scroll系列属性 3-2、案例 3-2-1、滚动页面一定距离后固定侧边栏 一、offset offset是…
阅读更多...
【WRF工具】服务器上使用conda安装NCL

【WRF工具】服务器上使用conda安装NCL

【WRF工具】服务器上使用conda安装NCL NCL概述使用conda下载NCL安装conda安装NCL另&#xff1a;当使用NCL时&#xff0c;则需要激活ncl_stable环境 参考 NCL概述 NCAR Command Language&#xff08;NCL&#xff09; 是由美国大气研究中心&#xff08;NCAR&#xff09;推出的一…
阅读更多...
Spring Boot 中实现任务后台处理的几种常见方式

Spring Boot 中实现任务后台处理的几种常见方式

​ 博客主页: 南来_北往 系列专栏&#xff1a;Spring Boot实战 前言 在现代应用程序中&#xff0c;后台处理对于处理发送电子邮件、处理文件、生成报告等任务至关重要。 Spring Boot 提供了多种机制来高效地实现后台任务。本文探讨了在 Spring Boot 中处理后台处理的各…
阅读更多...
大数据新视界 --大数据大厂之 Vue.js 与大数据可视化：打造惊艳的数据界面

大数据新视界 --大数据大厂之 Vue.js 与大数据可视化：打造惊艳的数据界面

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…
阅读更多...
java节假日工具类，判断一个日期是否是法定节假日

java节假日工具类，判断一个日期是否是法定节假日

java节假日工具类&#xff0c;判断一个日期是否是法定节假日 1.HolidayUtil工具类2.工具类生成的日期json文件3.结果展示 无需链接数据库&#xff0c;无需手写节假日集合列表 1.HolidayUtil工具类 import com.alibaba.fastjson.JSONObject; import com.fasterxml.jackson.data…
阅读更多...
0-10V 电压转光纤

0-10V 电压转光纤

型号&#xff1a;MS-F155-VM(CE /ISO9001&#xff09; 功能概述 MS-F155-VM是将0-10V电压转为光纤信号的模块&#xff0c;分发送和接收两个设备发送模块将电流或者电压信号转变为光信号&#xff0c;通过光纤传输&#xff0c;接收端将光信号还原为电流或者电压信号。可以延长通信…
阅读更多...
2024源代码加密软件分享TOP10丨保护源代码安全很重要！

2024源代码加密软件分享TOP10丨保护源代码安全很重要！

在如今的数字时代&#xff0c;源代码是企业的核心资产之一。无论是开发软件、应用程序&#xff0c;还是自动化系统&#xff0c;源代码都是技术的根基&#xff0c;决定了公司的核心竞争力。然而&#xff0c;源代码泄露或被盗可能会给企业带来巨大的安全风险和经济损失。因此&…
阅读更多...
03-Docker下载加速

03-Docker下载加速

03-Docker下载加速 docker下载加速 方式1&#xff1a;使用 网易数帆、阿里云等容器镜像仓库进行下载。 网易数帆官网&#xff1a;https://sf.163.com/ 例如&#xff0c;下载网易数帆镜像中的mysql。&#xff08;网易数帆的地址为 hub.c.163.com&#xff0c;网易数帆对dockerh…
阅读更多...
光控资本：沪指涨0.72%，煤炭、银行板块拉升，车路云概念活跃

光控资本：沪指涨0.72%，煤炭、银行板块拉升，车路云概念活跃

23日早盘&#xff0c;沪指盘中强势上扬&#xff0c;深证成指亦走高&#xff0c;场内超3100股飘红。 到午间收盘&#xff0c;沪指涨0.72%报2756.39点&#xff0c;深证成指涨0.58%&#xff0c;创业板指微涨0.09%&#xff0c;上证50指数涨0.73%&#xff1b;两市估计成交3657亿元。…
阅读更多...
TLV解码 - 华为OD统一考试(E卷)

TLV解码 - 华为OD统一考试(E卷)

2024华为OD机试&#xff08;E卷D卷C卷&#xff09;最新题库【超值优惠】Java/Python/C合集 题目描述 TLV编码是按 [Tag Length Value] 格式进行编码的&#xff0c;一段码流中的信元用Tag标识&#xff0c;Tag在码流中唯一不重复&#xff0c;Length表示信元Value的长度&#xff…
阅读更多...
不敲一行代码！助你快速搭建属于自己的官网博客！-VitePress保姆级教程

不敲一行代码！助你快速搭建属于自己的官网博客！-VitePress保姆级教程

文章目录 前言项目搭建首页修改项目配置 前言 我们在阅读官方文档时&#xff0c;经常看到一些项目的文档非常简约精美&#xff0c;并且布局高度相似&#xff0c;其实这些官网是基于vitepress搭建&#xff0c;例如&#xff1a; Vite官方文档 Vue-Use SnowAdmin 这些官网…
阅读更多...
最新文章

Copyright @ 2022~2023