【前端】HTML&CSS

已于 2022-08-15 20:30:02 修改
阅读量246 收藏 1
点赞数
分类专栏： 前端(H5） 文章标签： 前端 html5
于 2022-08-11 14:16:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52869979/article/details/126284439
版权

目录

一、HTML

（一）简介

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

（二）模板解释

注释语句：注释语句，是不会影响代码的执行！只是为了方便调试和阅读！注释的内容是不会显示到网页中的
在html中注释的语法规则：
1、快速生成注释语句块， ctrl+/
2、注释语句中不能嵌套注释语句

<!-- 文档的声明使用，告诉浏览器，明确文档类型，必须位于第一行  -->
<!DOCTYPE html>

<!-- html根元素，所有的html标签都应该在根元素中 -->
<html lang="en">

<!-- head标签是用于存放，文档的元数据，元数据是不被用户所见的,以及加载对应文档所需要的文件 -->
<head>
    <!-- meta标签是定义元数据的信息 -->
    <meta charset="UTF-8">

    <!-- 定义ie8浏览器独有的标注,如果使用是ie浏览器,用最高版本的ie浏览器进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 定义移动端的页面的视口比例设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 文档的标题,SEO搜索引擎,便于被搜索引擎捕捉 -->
    <title>Document</title>
</head>
<body>
    <!-- body标签是作为页面的主体部分,用户所有可见的内容都应该放到body中 -->
</body>
</html>

（三）标签

（1）介绍（标签&属性）

  • 标签(标记):
    就是由w3c提前制定好的一些针对于html文档的标记符号,这些符号是具备各自的含义的
    具体在html中的变现形式由 < > 括起来的对象 比如: html head body
  • 注意:
    1.标签通常是成对出现的,但也有极少部分只有开始标签,没有结束标签 称作 单标签或者空标签 比如:meta
    2.一个标签完整组成部分是分为3个部分 开始标签 结束标签 内容部分
    <开始标签>内容部分</结束标签>
    3.标签是允许嵌套的,但是要符合嵌套的标准
    4.每一个标签都具备其对应含义
    通常,我们也会将标签称作为元素 根元素 head元素
  • 属性:
    属性是额外的对标签进行描述的信息
  • 属性的格式:
    通常格式是: key=value键值对的形式
    少部分情况下格式: 只有key没有value值 它的值是逻辑值 true 或者 false
    一个标签是可以拥有多个属性的, 多个属性之间通过空格分隔
    属性是写在开始标签的<>中
  • 属性可以分成两大类:
    全局属性:任何元素都具备的属性,叫做全局属性。常见的全局属性:id 、 class 、 style、 hidden
    局部属性(特定属性):只能某一些元素能够使用

（2）常见语义化标签

语义化:对应标签做对应的事情,语义不被样式所影响的!
常见语义化标签：

  • 标题标签：h1-h6
    标题有6个等级,通常是使用前三个就足够了
    便于搜索引擎检索,以及爬虫搜索
  • 段落标签: p标签
    表示文档内容部分
  • 斜体标签:i标签
    表示内容重要,不同
  • 表示语义强调: em标签 语调加重 斜体
  • 表示粗体: b标签
  • 粗体:strong强调重要内容
  • 表示引用的标签: blockquote长引用 q标签 段引用 通常浏览器会自动高加上引号
  • 下标标签: sub
  • 上标标签: sup
  • 删除线: del
  • 插入线: ins

空标签:

  • br换行标签
  • hr水平线

快捷键整理文档 shift+alt+F

实体字符:
格式:&编码;
html中有一些特殊的字符,无法被识别 比如空格 > <
对于这些特殊的字符,只能通过字符编码进行书写

  • 空格: &nbsp;
  • 小于: &lt;
  • 大于: &gt;
  • 版权符号:&copy;

（3）列表标签

列表：用于展示一项一项的内容。
在html中是可以创建列表的，列表有三种！

  • 有序列表：使用ol标签来创建的
    列表中的每一项是通过li标签来代表
  • 无序列表（用的多）：使用ul标签来创建的，它是无序的，没有顺序标号
    无序列表中的每一项也是通过li标签来代表的
  • 定义列表：使用dl标签来创建的
    使用dt来表示定义的内容，小标题
    使用dd来对小标题解释说明

注意：

  • ol和ul创建列表后，他们的子项应该是li元素，而不是其他的元素
  • li元素中是可以嵌套任何类型的元素的！
  • 列表是可以相互嵌套的

总结：
1.ul和ol都是块级元素，通常作为布局容器使用
2.ul和ol的子项应该是li元素
3.li元素是块级元素，可以嵌套任何其他元素

（4）超链接标签

超链接标签，就是 a 标签
作用：
1.可以访问到外部网络的资源
2.可以访问本地网页资源
3.可以作为锚点，在当前页面指定位置进行定位跳转
超链接就是让我们从一个页面跳转到其他页面，将各个单独的网页进行关联

html中使用a标签来定义超链接：
属性：

  • href 指定跳转的目标资源路径
    值可以是外部网站地址
    值可以是内部页面的地址
  • target 定义新网页的打开方式
    _blank 在一个新窗口中打开页面
    _self(默认值) 在当前窗口中打开该页面

a标签是一个行内元素
注意： a标签比较特殊，a标签中可以嵌套除自身以为的任何元素

a标签有三种跳转方式：
1、通过href属性跳转到外部网络资源 百度网站

<a href="http://www.baidu11111111.com"  >百度一下</a>

2、通过href属性跳转到内部，本地的网页资源

<a href="xxx.html">01_列表标签</a>

3、通过超链接跳转到当前页面的指定位置,该方式叫做锚点跳转
配合id属性，进行跳转，在指定元素的位置设置id值，通过href属性定位到该id值所在的元素

<a href="#my_x">跳转到id为my_x处</a>

4、特殊情况，通过javascript:;来进行占位使用，防止页面重刷

<a href="JavaScript:;">跳转</a>

文件路径
    绝对路径：与当前的文件是没有联系的，不是根据当前该文件所处的位置去访问对应的资源
    相对路径：从当前文件出发去寻找其他的资源，当前的位置为中心
        ./ 代表当前目录下的资源，如果访问同级目录资源./可以省略
        ../ 上一级目录的资源
        ../../上两级目录下的资源

（5）img标签

img标签：用于渲染，图片资源的标签
属性：
    src： 指定外部的图片资源路径，或者本地图片资源路径
    alt：对图片额外信息的描述，方便SEO检索到该图片
当图片无法加载时，显示alt中信息，提示用于，该图片的大致内容
    width：设置图片的宽度，单位px
    hight：设置图片的高度，单位px
    注意：一般只设置宽度或者高度，两者选一即可，另一个属性让它自适应
img元素是行内块元素（替换元素），空标签

_href和src的区别？
相同点：href和src都是指向外部资源地址或者本地资源地址
不同点：
href属性

  • 1.通过该属性去关联另一份外部资源文件
  • 2.如果被关联的资源文件，在页面渲染时需要用到该资源中的内容时，它会下载该资源，
  • 3.如果需要下载资源文件内容时，并行下载的方式，不会阻塞页面的渲染

src属性：

  • 1.通过该属性去访问到对应的外部资源，并替换掉该标签的内容
  • 2.src属性肯定是会下载对应路劲的资源的
  • 3.src的下载不是并行下载，在页面渲染时如果遇到src那么会将该资源全部下载完毕并且解析后，才会继续渲染页面后续的内容
    src会阻塞页面的渲染

（6）div&span标签

  • div标签是块级元素：
    1、具备块级元素的特征
    2、典型的块级元素，可以嵌套任何元素
    3、div没有任何的语义
    4、通常作为页面布局的容器使用
  • span标签是行内元素：
    1、具备行内元素的特征
    2、典型的行内元素，通常用存放文本，其他的行内元素
    3、span没有任何的语义
    4、作为行内容器使用

（四）元素

元素,通过在页面中的展示以及对于元素特性,可以分为三大类:

  • 块元素(block element)
    特点:
    1.块元素具有布局特点,一般常用页面的整体布局
    2.块元素独占(其父元素)页面的一行
    3.块元素可以嵌套任何类型的元素(除p元素以外,p元素中不能嵌套任何的块元素)
    4.块元素可以设置宽,高 默认的宽度是其父元素的宽度
    5.块元素默认高度是由内容决定的
  • 行内元素(inline element)
    特点:
    1.正常情况下,行内元素是不会换行的
    2.行内元素会在一行排不下时进行换行
    3.行内元素不能设置宽 高 行内元素的宽和高都是由其内容决定的
    4.行内元素一般不会嵌套块级元素,大多数是嵌套文本或者其他的行内元素
  • 行内块元素(inline-block element)
    特点:
    1.行内块元素不会独占一行,在一行排列
    2.可以设置宽高(默认是内容的宽 高)

注意:以上各类元素的特点都是在页面正常情况下存在的!遵循的!

二、CSS

一个的网页是由三部分组成的

  • HTML 结构
  • CSS 样式
  • avaScript 行为

CSS（层叠样式表）：主要用于设置网页整体的布局，以及元素的样式设置
负责网页的美观

（一）引入方式

行内式
每一个元素都具备style属性，通过该属性可以设置元素的相关样式
缺点：
1.复用性不高、样式更新麻烦
2.不符合网页标准 因为html是属性结构文件，负责的网页的结构
不推荐使用！

<div style="width: 100px; height:100px;  background-color: red;" ></div>

内联样式
通过style标签，在html中设置当前网页所需要的css样式内容
style标签不是用户所见的内容，通常放在 head标签中
缺点：
1.复用性不高
2.还是存在模块没有分离，相互耦合，并不独立
在学习阶段、教学阶段使用比较多

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

外联样式
将css的内容，保存为一份独立的文件
该文件可以被任何的页面进行引用
在html中通过 link标签去引入外部样式文件
该方式是最优的选择！

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

（二）基础语法

css主要是两部分组成： 选择器 声明块

选择器1 {
    key:value;
    key:value;
    key:value;
}
选择器2 {
    key:value;
    key:value;
    key:value;
}

要为元素设置某种样式，前提是找到、选中这个元素，然后才能对其设置样式属性

（三）选择器

（1）基础选择器

元素选择器
通过元素的名字去选择对应的元素 如：div span p ul

div {
     width: 100px;
     height: 100px;
     background-color: pink;
     }       
span {
     color: red;
     }

id选择器
语法 #id值 每一个元素都具备id属性 id值是唯一的

#box01 {
            width: 200px;
            height: 100px;
            background-color: yellow;
        }

类选择器
语法 .类名 每一个元素都具备class属性 类名是可以重复的

.box {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

通配符选择器
语法： * 选中页面中所有的元素

* {
            color: red;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

（2）复合选择器

复合选择器：是由两个或多个基础选择器组成

复合选择器分为两种类型：
交集选择器： 选择器1选择器2选择器3
被选中的元素需要满足所有的选择器条件，才会被选中

div.box {
            width: 100px;
            height: 100px;
            background-color: red;
        }

并集选择器： 选择器1,选择器2,选择器3
被选中的元素只需要满足其中一个选择器条件，就会被选中

div,.box,.myspan {
            color: red;
        }

（3）关系选择器

html元素与元素之间存在哪些关系：

  • 父子关系
  • 祖先后代关系
  • 兄弟关系

父元素：直接含有被嵌套元素的元素，可以称作为父元素
子元素：被父元素包裹的元素，可以称作为子元素,子元素也是特殊的后代元素
兄弟元素：拥有同一个元素的元素，可以称作为兄弟元素
祖先元素：间接包含着后代的元素称为 祖先元素
后代元素：被某个元素间接包裹的，称为该元素的后代元素

子代选择器
选择器1>选择器2>选择器3

.box1>p {
            color: red;
        }

后代选择器
选择器1 选择2 选择3

.box1 span {
            color: yellow;
        }

兄弟选择器
    选择器1+选择器2 选中某个元素后的第一个兄弟元素
    选择器1~选择器2 选中某个元素后的所有的兄弟元素

        #li+li {
            color: red;
        }

        #li1~p {
            color: red;
        }

（4）属性选择器

属性选择器，是通过元素的属性值来选择对应的元素
title属性 全局属性 额外对该元素的描述信息
属性选择器语法：
    [属性名] 只要拥有该属性的元素都会被选中
    [属性名=值] 只要拥有该属性并且值是一样的
    [属性名^=值] 拥有该属性，并且值是以某些字符开头的
    [属性名$=值] 拥有该属性，并且值是以某些字符结尾的
    [属性名*=值] 拥有该属性，并且值里面包含特定的字符

     <div title="test">123</div>
     <span title="test02">456</span>
     <p title="test03">789</p>
     <b title="test">xxxx</b>

（5）伪类（元素）选择器

伪类：不存在的类，假的
在css中可以将伪类分为两种：
①结构型伪类 （html元素结构有关）
②动态伪类（用户交互有关）
语法：:伪类名
注意：通常情况下，伪类选择器不会单独使用会和其他选择器配合使用，因为这样没意义

结构伪类
first-child 父元素下的第一个子元素
last-child 父元素下的最后一个子元素
nth-child 父元素下任意的顺序子元素
以上三个伪类，顺序的排列不是某个类型之间的排列，是将父元素下的所有不同类型的子元素进行排列的
:first-of-type
:last-of-type
:nth-of-type
这三个伪类就是在同类型之间进行排序
动态伪类
link 表示未被访问过的超链接 （只能用于a标签）
visited 表示已经被访问过的超链接 （只能用于a标签）
active 表示被用户点击的元素 （用于任何元素）
hover 鼠标移入到某个元素 (用于任何元素)

伪元素选择器
表示页面中一些特殊的元素，这些元素并不是 常规的标签元素 或者 元素中特别的位置等
伪元素通常使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行的文字
::selection 表示被选中的内容信息

::before 元素最开始的位置
::after 元素结束的位置
以上两个伪元素，单独使用没有任何的效果,必须配合content属性使用

（四）CSS三大特性

层叠性：当有多个相同选择器或者同类型的选择器选中同一个元素，并且为该元素设置同一个样式属性，但是属性值设置的不一样
①拉架（解决样式冲突问题）
②会优先使用，靠近元素的选择器所设置的样式
注意：当选择器权重（优先级）不同时，无法通过层叠性解决样式冲突
优先级（权重）：
*通配符选择器 没有权重 权重最低
元素选择器 0,0,0,1
类/伪类 0,0,1,0
id选择器 0,1,0,0
行内样式（style） 1,0,0,0
!important 无限大 谨慎使用
选择器最终的优先级是变化，可以进行叠加的！但是只能在最高位的值，不能突破等级！
继承性：css规定一些通用的样式属性，不需要频繁的去写，通过继承性实现即可
①不是所有的css属性都能够被后代元素继承
②可以被继承的css属性： 字体相关 、字体颜色、 列表相关的、文本相关的等

（五）文档流&盒模型

（1）文档流

网页是一个多层的结构，一层叠着一层的，在整个网页中有个最底层（原始层），最底层就是我们文档流，默认情况下，所有的元素都是在文档流中遵循其规则进行排列的

基于文档流概念，元素就会有两种状态：
1、元素在文档流中时（默认情况）：

  • 块级元素：
    1.独占其父元素的一行
    2.可以设置宽高
    3.默认高度由内容决定，或者子元素决定
    4.默认宽度是其父元素的100%
    5.占据页面实际的位置
  • 行内元素：
    1.不会独占一行，在一行水平依次排列，直到排不下自动换行
    2.不可以设置宽高
    3.默认高度和宽度都是由内容决定
    4.占据页面实际的位置

2、元素脱离文档流
①一旦元素脱离文档流，将不再占据文档流中的位置
②脱离文档流后，元素不再有任何的区分，统一视作一致的，没有区分
③脱离文档流的元素可以设置宽高，不会独占一行

（2）盒模型

盒模型：内容区 + 边框 + 内边距 + 外边距
①页面中所有的元素，其本质都是一个矩形盒子
②页面的本质就是一个一个的矩形盒子组成的
③写网页的布局就是把这些盒子摆放到正确的位置上

标准盒模型
内容区： 由width属性 和 hight属性决定
边框：border 属性可以设置盒子的边框 边框会影响可见框的大小。设定边框需要指定3部分： 边框的大小、 边框的样式 、 边框的颜色

border-width  边框的大小
border-style  边框的样式
border-color  边框的颜色

border 简写属性 ： 设置三个值   边框的大小、 边框的样式 、 边框的颜色

内边距（padding）：padding属性设置盒子的内边距，内容区到边框之间的距离就是内边距，内边距也会影响盒子可见框的大小

每一盒子具备4个方向的内边距
padding-top
padding-bottom
padding-left
padding-right

简写属性 padding 同时指定四个方向的padding  
4个值   上 右 下 左
3个值   上 左右 下
2个值   上下  左右
1个值    上下左右

外边距 （margin）：margin属性设置盒子与盒子之间的间隙，不属于盒子内部，它不会影响盒子可见框的大小，只会影响盒子实际占据位置

margin同padding用法一致
margin-top
margin-bottom
margin-left
margin-right

margin： 简写属性，4个值，3个值，2个值，1个值
（margin属性支持负数值）

margin: 0 auto;
可以通过该方式设置已知宽度的块元素，在父元素中水平居中

IE盒模型（怪异模型）
正常情况下都是标准盒模型，但是可以通过css的属性 box-sizing 更改盒模型的种类
IE盒模型下： 盒子可见框的大小 = widgth + hight

        .box1 {
            box-sizing: border-box;
            border: 10px solid black;
            padding: 20px;            
        }

（3）外边距折叠问题

（六）元素

（1）元素转换

CSS通过display属性，可以进行元素特性的转换！

display

  • block 将元素转换为块元素
  • inline 将元素转换为行内元素
  • inline-block 将元素转换为行内块元素
  • none 元素无任何状态，通常使用该方式对元素进行隐藏（不存在）

除了display：none；可以隐藏元素、显示元素，css还提供了一个属性 visibility visibility: hidden;

display:none 和 visibility: hidden 不同：
①display：none是直接让元素消失，不再占据文档流中的位置，该属性会影响其他元素的布局
②visibility: hidden 只是让元素隐藏，本身还是在文档流中占据着位置，并不会影响其他元素的布局

布局小技巧
需求1 ： 如何将一个块元素在父元素中水平居中？
margin：0 auto
需求2： 如何将行内元素在父元素中水平居中？
text-align: center;
需求3： 如何将行内元素在父元素中水平垂直居中？
line-height: 与父元素高度值一样;

（2）元素的浮动

元素可以通过设置float属性，让一个子元素向其父元素的左侧或则右侧移动

float：
- none 默认值 ，元素不浮动，正常状态
- left 元素向左浮动
- right 元素向右浮动

float属性，最开始设计并不是为了水平布局排列的，最开始只是为了实现文字的环绕效果，但是在后续的使用过程发现float可以使得块元素水平排列！但是也带来了很多的问题！

浮动元素的特点：
-1、元素一旦设置float后，它将会脱离文档流，不再占据文档流中的位置，以至于后续的正常元素会自动向上移动，填满空隙
-2、设置浮动以后，元素会向父元素的左侧或者右侧移动
-3、浮动元素默认情况下不会从父元素中移出，不会逃离父元素的掌控
-4、浮动元素向左或者向右移动时，不会超过它前边的浮动元素
-5、如果浮动元素的上边是一个没有浮动的正常块元素，则浮动元素会停止上移
-6、如果浮动元素的后边是一个正常没有浮动的块元素，则正常元素会自动上移

（3）浮动元素高度塌陷问题

（4）元素的背景相关属性

1、 background-color 设置背景颜色
2、background-image 设置背景图片
- url（） 引入背景图片的地址，可以网络地址也可以是本地地址
- 可以同时这种背景图片和背景颜色，背景颜色就会办成图片的背景色
- 如果背景的图片大小小于元素的大小，背景图片会自动平铺，填满整个元素
- 如果背景的图片大于元素，则背景无法全部显示，只能显示部分，其余部分被自动裁剪
- 如果背景图片和元素一样大，那么正常显示
3、background-repeat 用于设置背景的重复方式
- 可选值：
- repeat 默认值 背景会沿着x轴和y轴进行双向重复
- repeat-x 沿着x轴方向重复
- repeat-y 沿着y轴方向重复
- no-repeat 背景图片不重复
4、background-position 用来设置背景图片的位置
- 通过方位词 top left right bottom center
- 通过设置具体的数值 0px 0px
5、background-clip 设置背景的范围
- 可选值：
- border-box 默认值 ，背景会出现在边框的下方
- padding-box 背景不会出现在边框，只出现在内容去，内边距
- content-box
6、background-size 设置背景图片的大小
- 设置具体值 宽度 高度
- cover 图片的比例不变，将元素铺满
- contain 图片的比例不变，将图片在元素中完整显示

以上的属性都可以采用简写属性 background 设置

（七）定位

定位（position）：
- 定位是一种更高级的布局手段
- 通过定位可以将元素摆放到页面的任意位置
- 通过css的属性 position 为元素设置定位

position：
static 默认值，元素是没有开启定位的，静止的
relative 为元素开启相对定位
absolute 为元素开启绝对定位
fixed 为元素开启固定定位
sticky 为元元素开启粘滞定位

偏移量：
- 通过css提供的方位属性，对开启定位的元素设置，偏移量
- top left right bottom
- 注意：一般只需要设置两个方位即可对元素进行定位，偏移量也支持负数值

（1）相对定位

相对定位：元素相对于自身本身的位置！最开始占据文档流的位置来进行定位
relative（相对定位）：当元素的position属性值设置为relative则为该元素开启了相对定位

相对定位的元素具备以下特点：
1、元素开启相对定位后，不设置偏移量元素是不会发生任何的位置变化
2、相对定位是参照元素自身在文档流中的位置进行定位的
3、相对定位会提升元素的层级关系
4、相对定位的元素不会脱离文档流，元素的特性不会被改变，块还是块，行内还是行内

（2）绝对定位

绝对定位：元素相对于其最近的开启了定位的包含块元素为基准进行定位
absolute(绝对定位)：当元素的position属性值设置为absolute，则为该元素开启了绝对定位

绝对定位的特点：
1、开启绝对定位后，如果不设置偏移量元素的位置不会发生改变
2、开启绝对定位后，元素会脱离文档流，不再占据页面的实际位置，会影响其他正常元素的布局
3、绝对定位会改变元素的性质，不再区分行，块，行内块的概念
4、绝对定位会提高元素的层级
5、绝对定位的元素是相对于最近的开启了定位的包含块来进行定位的

一般会为子元素设置绝对定位，给他的父元素设置相对定位，（子绝父相）
包含块：正常情况下，包含块指的就是该元素的父元素（祖先元素）

（3）固定定位

将元素的position属性设置为fixed则开启了元素的固定定位
固定定位也是一种绝对定位，所有固定定位的大部分特点与绝对定位是一样的
唯一不同的是定位的参照基准不一样，并且固定定位的元素不会随着网页的滚动条进行滚动
固定定位是相对于浏览器的视口进行定位的

（4）粘滞定位

当元素的position属性设置位sticky则开启了 粘滞定位：
粘滞定位和相对定位的特点基本一致
不同点是粘滞定位可以在元素到达某个点时将其固定

（八）表格&表单

（1）表格（table）

标准的一个表格分为三部分：头部（thead）、主体（tbbody）、底部（tfoot）
th 表示头部的单元格
tr 表示行
td 表示正常的单元格

表格相关样式属性：
border-spacing 指定表格边框之间的距离
border-collaps 设置边框是否合并
注意：tr标签不是table的子元素，即使tbody省略的情况下，浏览器会自动加上tbosy标签，并且把tr放在里面

如何合并单元格：
rowspan 纵向单元格的合并
colspan 横向单元格的合并

（2）表单

Uaena.&
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用HTML&CSS创建一个网页课程表
qq_45915712的博客
11-05 1万+
使用HTML&CSS创建一个网页课程表整体布局加入表头数据合并上下单元格并加入课表信息美化页面最终效果 整体布局 对于课程表，其实就是一个表格，其中加入CSS样式。 因此，我们先创建一个九行八列的表格（以我的课表为例）。 <table border="1"> <tr> <td> </td> <td> </td> <td> </td> <td> </t
学成在线**静态网页项目**前端html&css&flex
03-12
运用了html，css，flex布局等知识，适用于前端初学者练习静态网页的制作，以便于熟练掌握前端基础知识的运用。这个项目还可以帮助初学者理解网页布局和样式设计的基本原则，同时提供了一个实践的机会来加强对HTML和...
web前端——HTML+CSS
m0_64378422的博客
02-10 3194
web前端——HTML+CSS
使用 HTML & CSS 编辑静态网页
weixin_60808029的博客
03-14 5986
文章目录一、HTML 概念概述二、HTML 语法使用说明三、CSS 概念概述四、CSS 中的选择器和属性 一、HTML 概念概述 HTML 是最基础的网页开发语言。是 Hyper Text Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。 超文本 是指用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。 标记语言 是指由标签构成的语言。语法格式：<标签名称>。标记语言不是编程语言，是没有任何逻辑性的。 html文档后缀名 .html 或者.
新闻列表案例（前端html，css）
gou1791241251的博客
09-19 6364
新闻列表案例（前端html，css）
Web前端 | HTML引入CSS样式的三种方式
m0_61933976的博客
10-04 1万+
HTML引入CSS样式的三种方式
揭秘VSCode魔法工具箱：HTML5 & CSS3 超强插件集合 + Css Reset与Normalize.css的终极对决
小z的博客
04-20 2304
23(24)(25)-1(2)- HTML、CSS 常用的vscode插件 +Css reset 和Normalize.css
基于前端HTML+CSS+JS实现2022城市新年贺卡特效
java李阳勇的博客
01-20 1万+
一款超级炫酷的2022新年快乐html网页特效，霓虹的城市夜景和绚烂的烟花很是特别，该html页面还有交互效果，点击鼠标就会呈现烟花绽放的特效，唯美不过如此。图片可以换成自己喜欢的夜景或人物都可以。...
前端技术—CSS常用代码大全
qq 2903359018博客
06-08 6663
各位读者好，今天广州蓝景小编带你探讨前端技术（HTML+CSS）入门之CSS常见代码大全，希望通过阅读本篇文章后大家有所收获，对前端知识有更深入的了解。HTML+CSS 可以很方便的进行网页的排版布局，还能减少很多不必要的代码。...
Html&css&js 图片轮播，加箭头
qq_44331253的博客
03-04 1万+
轮换图箭头案例 方向箭头在图片上，应该使用绝对定位 父级盒子应该使用相对定位 Html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <link href="../css/imgmove.css" rel="stylesheet"/> </head> <body> <div
web前端基础（一）——HTML+CSS
热门推荐
广龙宇的博客
08-18 13万+
系列文章目录 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装 4. vscode 的插件卸载 5. 设置字体大小 6. 设置颜色主题 7. 设置默认浏览器[可选] 初识常用的HTML标签 1. 常用的 ..
前端开发三件套HTML&CSS&JavaScript
02-23
0 前端三件套 HTML CSS JavaScript 1.HTML 1HTML常见文本标签 2HTML属性 3HTML块元素与行内元素 4HTML表单 2.CSS 5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位 3.JavaScript 11JS导入方式...
HTML&CSS的思维导图笔记
04-12
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是前端开发的基石，用于构建和呈现网页内容。这份“HTML&CSS的思维导图笔记”无疑是对这两个核心技术的全面梳理，对于初学者和进阶者都是极好的...
HTML&CSS.zip
04-13
前端开发是现代互联网产品设计的关键部分，HTML和CSS是这个领域不可或缺的基础。理解并熟练掌握这两门技术，不仅可以创建出符合设计要求的网页，还能提高开发效率和用户体验。随着Web技术的不断发展，HTML5和CSS3的...
HTML&CSS自学笔记大全
04-09
根据W3C标准,一个网页分为三个部分: 1. 结构(HTML):用于描述页面的结构,类似于人体的骨架 2. 表现(CSS):用于控制页面中元素的样式,类似于人类的长相,所有看见的都是表现 ...这里的笔记是html和css的重难点
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 937
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
Javafx利用fxml变换场景的小细节
最新发布
2301_80311013的博客
07-09 517
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
HTML_表单 和 表单案例
secret010的博客
07-05 279
【代码】HTML_表单 和 表单案例。
vue父子组件通信实现模糊搜索功能
某站同名 专注毕设项目和免费教程分享
07-09 512
模糊搜索功能 每个网站都要用得到

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值