HTML+CSS超详细讲解+超详细思维导图 超浅显易懂 复习、学习小助手

最新推荐文章于 2024-05-11 15:28:44 发布
最新推荐文章于 2024-05-11 15:28:44 发布
阅读量6.9k 收藏 238
点赞数 44
分类专栏： 思维导图 CSS HTML 文章标签： css css3 html html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45625194/article/details/109476411
版权
思维导图 同时被 3 个专栏收录
3 篇文章 7 订阅
订阅专栏
CSS
1 篇文章 2 订阅
订阅专栏
HTML
1 篇文章 1 订阅
订阅专栏

HTML（结构）

在这里插入图片描述

1.文档声明

格式： <!doctype html>
作用： 便于浏览器识别其网页版本

2.注释

格式： < !-- – >
作用： 在网页中显示出来 提高可读性，便于编程人员阅读
注意： 不能在注释中嵌套注释

3.标签（元素）

01 根标签

格式： < html > < /html >
作用： 网页中所有内容都写在根标签里面

02 子标签

head标签

格式： < head > < /head >
作用： 不会在网页中显示出来，主要帮助浏览器或搜索引擎解析网页

title标签

格式： < title > < /title >
作用： 显示在浏览器的标题栏，搜索引擎主要根据title判断网页主要内容

meta标签

格式： < meta >
作用： 设置网页元数据

body标签

格式： < body > < /body >
作用： 网页主体 在浏览器中显示出来

4.属性（名值对）

属性： 在标签里面通过名值对方式实现 修饰渲染网页

5.实体（转义字符）

格式: &实体名字;
&nbsp ;(空格) 在浏览器中，多个空格情况被浏览器解析为一个空格
& gt;大于号
& lt;小于号
& copy;版权符号

6.语义化标签

在这里插入图片描述
标题标签： < h1 > – < h6 > 标签越来越不重要 （搜索引擎越来越不关注）

块元素 独占一行标签 (block element) ， 主要对网页进行布局

行内元素 不会独占一行元素 ，主要来包裹文字

在这里插入图片描述
列表（list）：

  1. 有序列表 ol
  2. 无序列表 ul
  3. 定义列表 dl

超链接(a)： 超链接让我们从一个页面到其它页面或页面中其它位置,超链接是行内元素 （可以嵌套块元素）不能嵌套自身，其它都可以嵌套

图片(img)： 向当前页面引入一个图片

7.内联样式

格式： 内联框架 < iframe src="">< /iframe>
作用： 向当前页面引入了其他页面

8.音视频

在这里插入图片描述

CSS（表现）

CSS思维导图1：
在这里插入图片描述
CSS思维导图2：
在这里插入图片描述
CSS思维导图3：
在这里插入图片描述
CSS思维导图4：
在这里插入图片描述

1.设立样式方式

内联样式(行内样式)： 在标签内通过style属性设置元素样式 例：< p style=“color:red; font_size:30px;”>

内部样式表： 将样式编写在head的style标签里，然后通过CSS选择器来选中元素并设置各种样式 例： < style> p{color:red;}
好处： 可以同时为多个标签设置样式，并且修改时只需要改一处

外部样式表： 可以将CSS样式编写在一个外部的CSS文件中，然后通过link标签引入CSS文件 例： < link rel=“stylesheet” href="">
好处： 外部样式表通过link标签引入，只有想使用的网页就可以使用，可以在不同页面之间进行复用。将样式编写到CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验

2.注释

注释： /* */ 多行注释

3.选择器

  1. 元素选择器
    作用： 根据标签名选定指定元素
    语法： 标签名{}
    例子： p{} h1{} div{}

  2. id选择器
    作用： 根据元素的id属性值选中一个元素
    语法： #id属性值{}
    例子: #red{} #box{}

  3. 类选择器
    class: class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组
    作用: 根据元素的class属性值选中一组元素
    语法: .class属性值{}
    例子: .blue{} .red{}

  4. 通配选择器
    作用： 选中页面所有元素
    语法: *｛｝

  5. (复合)交集选择器
    作用: 选中同时符合多个条件的元素
    语法: 选择器1选择器2选择器3…选择器n{}
    注意点: 交集选择器中如果有元素选择器，元素选择器放在开头
    例子： div.red.a{}

  6. （复合）选择器分组(并集选择器)
    作用: 同时选择多个选择器对应的元素
    语法： 选择器1,选择器2, …选择器n{}

  7. 关系选择器
    在这里插入图片描述

  8. 属性选择器

  9. 伪类选择器
    在这里插入图片描述

  10. 伪元素选择器

4.像素/百分比/em/rem

像素： 屏幕（显示器）实际上是由一个一个小点点构成

百分比： 百分比可以设置属性相对父元素的百分比

em: 相对元素字体大小来计算 1em=font-size = 16px(一般情况)

rem: 相对于根元素字体大小 < html font-size >

5.颜色单位

在这里插入图片描述

6.盒子模型

在这里插入图片描述

7.浮动

在这里插入图片描述

8.高度塌陷和BFC

在这里插入图片描述

9.定位

在这里插入图片描述

10.背景

在这里插入图片描述

11.字体

在这里插入图片描述

12.过渡效果

在这里插入图片描述

13.动画效果

在这里插入图片描述

14.变形

在这里插入图片描述

15.弹性盒

在这里插入图片描述

鱼小子
关注
  • 44
    点赞
  • 踩
  • 238
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
HTML基础思维导图（Web前端开发技术）
03-12
web前端开发技术第二章思维导图（学习笔记自用）
html5+css3 思维导图
02-02
分享了 html5+css3 思维导图 xmind格式欢迎下载
HTML&CSS讲义
copyright0501的博客
06-06 342
HTML&CSS 第1章 HTML概述 HTML(Hyper Text Markup Language):超文本标记语言 语言: 也是一门语言 标记: HTML主要是由标签组成(预定义好的) 超文本(富文本): 除了展现文字之外,还展现图片,视频,音频等 第2章 HTML基础 2.1 html入门案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
Flex弹性布局
最新发布
m0_74284133的博客
05-11 737
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
HTML思维导图
IT_Tea的博客
03-15 2691
HTML思维导图
适合小白的HTML的思维导图
m0_61307468的博客
02-10 1456
然后学习编程，有良好的逻辑架构非常的重要，下面分享一下我自己做的思维导图。HTML作为前端的入门第一课，是很多小白接触前端的第一课。
HTML+CSS详细知识点（上）
qq_52108058的博客
11-25 896
标签分类1、双标签 和 2、单标签
HTML全部知识点总结——思维导图（请自行放大查看）
TKY666的博客
03-01 2077
readonly="readonly"—只读文本 不可修改在<input type=" ">中使用 移动电话： <input type="text" name="yddh" value="13603430739" readonly="readonly" /> <span style="color: red;">手机号不可修改</span> 效果： disabled不可用状态 <input type="submit" ...
前端学习之HTML5+CSS5经典视频资源，讲解超详细
08-20
适合前端从业者或希望从事前端行业的同学，优质资源持续更新中。
HTML+CSS思维导图
04-30
6张思维导视图让你清楚地明白HTML和CSS的结构，特点，帮助开发者快速学习H5知识。
网页制作-HTML+CSS+JAVAscript详细手册.zip
05-04
网页制作-HTML+CSS+JAVAscript详细手册： CSS2.0中文手册.chm Html和css网页标准指南.chm JavaScript使用手册.chm JavaScript参考手册.chm JavaScript参考手册中文版.chm Javascript高级教程.CHM 样式表中文手册2.0....
html基础
热门推荐
qq_40181206的博客
10-03 2万+
HTML html骨架结构 <!--声明文档类型，告诉浏览器按照哪个版本的html解析--> <!DOCTYPE html> <html lang='en'> <!--lang=zh-CN 用于搜索引擎看的--> <head> <meta charset='UTF-8'> <!--元信息 不是...
HTML新人基础笔记总结加“思维导图”
J3259392566的博客
03-08 748
结构。
HTML（一天学完）总结。附上html思维导图
lokk111的博客
03-24 1397
初学。适合后端开发者学习
如何使用html，包括css，js 画思维导图？有哪些可用的方法？
Itmastergo的博客
08-07 1818
上面的代码只是一个非常简单的示例，最终效果并不美观，只是用于演示思维导图的绘制过程。你可以根据自己的需求和设计风格进行修改和扩展，使其符合你的实际应用场景。将HTML文件、CSS文件和JavaScript文件放在同一目录下，然后在浏览器中打开HTML文件，即可看到绘制出的思维导图。首先，创建一个新的HTML文件，可以使用任何文本编辑器。在文件中添加必要的标签和结构来定义网页的内容和布局。的CSS文件，用于定义思维导图的样式。的JavaScript文件，用于实现思维导图的绘制逻辑。在同一目录下创建一个名为。
【CSS基础知识篇-思维导图】
qq_46505401的博客
04-11 179
更新于2023-04-11。
【HTML】HTML的基础语法(附思维导图)
一名在读学生
05-17 2002
HTML基础语法（附思维导图）
讲解HTML和CSS（超详细）
Jinmuyan_的博客
05-06 1万+
讲解HTML和CSS（超详细）一、初始HTML和CSS1.html的发展历史2.html3.css二、HTML1.基本框架2.HTML5常用的标签和属性三、CSS1.css的使用2.css选择器总结 提示：以下是我的一些经验之谈，下面案例可供参考 一、初始HTML和CSS 1.html的发展历史 HTML 1.0 超文本标记语言(第一版) – 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准) HTML 2.0 – 1995年11月作为RFC 1866发布，在RFC 2854于2
HTML+CSS知识点总结
weixin_30439131的博客
02-13 799
HTML一、概述 1、什么是 HTML：超文本标记语言，使用一对尖括号括起来，实现特殊的效果定义，用于编写网页（后缀为.html、.htm的文件） 2、编辑：文本编辑工具，都可以编写 HTML页面 记事本、editplus、ultraedit、DW、webstorm、apanta... 运行：浏览器 IE、firefox、chrome、opera、safari 3、HTML是一种解释...
html + css +javascript 实现思维导图
11-25
实现思维导图可以通过HTML，CSS和JavaScript来实现。首先，可以使用HTML来构建思维导图的基本结构，例如使用<ul>和<li>标签来表示导图的节点和分支。通过嵌套列表的方式来表示思维导图的层级结构。 接着，可以利用CSS来美化思维导图，包括节点的样式、颜色、文本大小、边框等。通过设定不同的CSS样式来区分不同的节点类型，以及连接线的样式，使得思维导图看起来更加美观和清晰。 最后，可以利用JavaScript来实现思维导图的交互功能，比如展开和收缩节点、拖拽调整节点位置、添加新节点等。通过监听用户的操作事件，比如点击、拖拽等，来对思维导图进行动态的更新和操作。 总之，利用HTML来构建节点，CSS来美化样式，JavaScript来实现交互功能，即可实现思维导图的功能。当用户与思维导图交互时，JavaScript可以实现实时更新和响应，从而提供更好的用户体验。这样的思维导图不仅可以在网页上实现，也可以应用到各种项目管理工具中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值