Web前端开发学习笔记07--HTML和CSS

最新推荐文章于 2024-09-17 22:13:17 发布
最新推荐文章于 2024-09-17 22:13:17 发布
阅读量343 收藏
点赞数
分类专栏： 前端开发学习 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51569535/article/details/121404705
版权

HTML和CSS的提升

1、CSS的高级技巧

1.1 精灵图

精灵技术主要是针对于背景图片使用，就是把多个小背景图片整合到一张大图片中

  1. 移动背景图片时，可以只用background-position
  2. 移动的距离就是这个目标图片的x 和y 坐标
  3. 数值为负值
  4. 使用精灵图时要精确测量，每个背景图片的大小和位置

1.2 字体图标

字体图标展示的是图标，本质属于字体

优点：

  • 轻量级：一个图标字体要比一系列的图像要小，只要字体加载了图标就会渲染出来，减少了服务器请求
  • 灵活性：本质是文字，可以随意更改颜色、大小、透明效果等
  • 兼容性：几乎支持所有的浏览器

（1）字体图标的下载：

下载网站：

  • icomoon字库：https://icomoon.io/
  • 阿里 iconfont 字库：http://www.iconfont.cn/

步骤：

  1. 打开网站，点击IcoMoon App,选中图标，点击cenerate font
  2. 点击download

（2）字体图标的引入：

  1. 把下载包里面的fonts 文件夹放到页面根目录下
  2. 在CSS样式中全局声明字体（把字体文件通过CSS引入页面）
  3. 在解压缩文件的style.css 文件中获取声明

声明

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?c9i3f2');
  src:  url('fonts/icomoon.eot?c9i3f2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?c9i3f2') format('truetype'),
    url('fonts/icomoon.woff?c9i3f2') format('woff'),
    url('fonts/icomoon.svg?c9i3f2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

具体使用方式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?c9i3f2');
            src: url('fonts/icomoon.eot?c9i3f2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?c9i3f2') format('truetype'), url('fonts/icomoon.woff?c9i3f2') format('woff'), url('fonts/icomoon.svg?c9i3f2#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        span::after {
            font-family: 'icomoon';
        }
    </style>
</head>

<body>
    <span></span>
</body>

span盒子中的图标，为复制下图右下角图标：

在这里插入图片描述

（3）字体图标的追加：

步骤：

  1. 打开网站，点击IcoMoon App,选中图标
  2. 点击import Icons，选择 selection.json 文件打开
  3. 选定需要追加的图标，点击cenerate font
  4. download
  5. 删除旧文件，把新下载的文件加入

1.3 CSS的三角形

（1）等腰三角

语法示例：

div {
     width: 0;
     height: 0;
     line-height: 0;   /*照顾兼容性*/
     font-size: 0;
     border: 10px solid transparent;  
     border-left-color: red;    /*左侧三角*/
}

效果：
在这里插入图片描述

（2）直角三角形

语法示例：

div {
     width: 0;
     height: 0;
     border-color: transparent red transparent transparent;
     border-style: solid;
     border-width: 20px 8px 0 0;  /*将上边框增大，左下边框设为0*/
}

效果：

在这里插入图片描述

1.4 用户界面样式

用户界面样式：更改一些用户操作样式

（1）更改用户鼠标样式

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标的形状

语法示例：

li { cursor: pointer;}
属性值描述
default小白（默认）
pointer小手
move移动
text文本
not-allowed禁止

（2）取消表单轮廓线和防止拖拽文本域

取消表单轮廓线：

  • 给表单添加outline： 0; 或者 outline：none; 可以去掉默认的蓝色边框
input {outline: none;}

防止拖拽文本域：

  • 给文本域添加热size：none; 可以防止拖拽文本域
textarea { resize: none; }

1.5 行内块和文字居中对齐

vertical-align 属性：设置图片或表单（行内元素）和文字垂直对齐

注意：只对行内元素或行内块元素有效

语法：

vertical-align: baseline | top | middle | bottom ;
值描述
baseline默认值，元素放置在父元素的基线上
top把元素的顶端与行中的最高元素的顶端对齐
middle把元素放置在父元素的中部
bottom把元素的顶端与行中最低的元素的顶端对齐

在这里插入图片描述
特别注意：图片底侧空白缝隙的解决方案

  1. 给图片添加vertical-align：middle | top | bottom 等
  2. 把图片转化为块级元素 display：block；

1.6 溢出文字的省略号显示

（1）单行文本溢出显示省略号

white-space: nowrap;     /*强制一行内显示文本*/
overflow: hidden;        /*超出部分隐藏*/
text-overflow: ellipsis; /*用省略号代替超出的部分*/

（2）多行文本溢出显示省略号

多行文本溢出显示省略号有较大的兼容性问题，适合于webKit 浏览器或移动端

overflow: hidden;        /*超出部分隐藏*/
text-overflow: ellipsis; /*用省略号代替超出的部分*/
display: -webkit-box;   /*弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2;  /*限制在一个块元素的文本的行数*/
-webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/

1.7 常见的布局技巧

（1）margin 负值的运用

  1. 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
  2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位，如果有定位，则加z-index）
li:hover {
   position: relative;   /*相对定位*/
   border: 1px solid red;
}

或：

li:hover {
   z-index: 1;
   border: 1px solid red;
}

（2）文字围绕浮动元素巧妙运用

浮动元素不会压住文字

图片盒子左浮动效果图：
在这里插入图片描述

（3）行内块元素的巧妙运用

  • 两个行内块元素中间默认有距离，本身有大小
  • 行内块元素给父级添加text-align: center; 可以使整个行内块元素水平居中

效果：
在这里插入图片描述

1.8 CSS的初始化

示例：

/*把所有标签的内外边距清零*/
* {
  margin: 0;
  padding: 0;
}
/*斜体的文字不倾斜*/
em,
i {
  font-style: normal;
}
/*去掉li的小圆点*/
li {
   list-style: none;
}
img {
   border: 0;               /*照顾低版本浏览器：图片包含链接的边框问题*/
   vertical-align: middle;  /*取消图片底侧有空白缝隙的问题*/
}
/*定义鼠标经过button按钮时鼠标的样式为 pointer*/
button {
   cursor: pointer;
}
/*所有链接的颜色、取消下划线*/
a {
  color: #666;
  text-decoration: none;
}
/*鼠标经过链接变成绿色*/
a:hover {
  color: green;
}
/*所有button、input指定字体*/
button,
input {
  font-family:Microsoft YaHei,Hei ti SC;
}
/*指定body的一些元素样式*/
body {
  -webkit-font-smoothing: antialiased; /*抗锯齿性，让文字显示更加清晰*/
  background-color: #fff;
  font: 12px/1.5 Microsoft YaHei;
  color
}
/*清除浮动*/
.clearfix: after {
   content: "";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}
.clearfix {
          *zoom: 1;    /*IE6、7 专有*/
}

2、CSS的新特性

注意：

  • 新增的CSS3 特性有兼容性问题，IE9+才支持
  • 移动端支持优于PC端
  • 现阶段主要学习：新增选择器和盒子模型以及其他特性

2.1 选择器

（1）属性选择器

属性选择器可以根据元素特定属性的来选择元素，可以实现不借助类或id选择器实现功能。

选择符说明
E[att]选择具有 att 属性的 E 元素
E[att=“val”]选择具有 att 属性且属性值等于 val 的 E 元素
E[att^=“val”]选择具有 att 属性且属性值以 val 开头的 E 元素
E[att$=“val”]选择具有 att 属性且属性值以 val 结尾的 E 元素
E[att*=“val”]选择具有 att 属性且属性值中含有 val 的 E 元素

注意：

  • 类选择器、属性选择器、伪类选择器，权重都为10

（2）结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素。

选择符说明
E:first-child匹配父元素中的第一个子元素 E
E:last-child匹配父元素中的最后一个 E 元素
E:nth-child(n)匹配父元素中第 n 个子元素 E
E:first-of-type指定类型 E 的第一个
E:last-of-type指定类型 E 的最后一个
E:nth-of-type(n)指定类型 E 的第 n 个

nth-child(n)：

  • n 可以是数字，关键字和公式
  • n 如果是数字，就是选择第 n 个子元素，里面数字从 1 开始
  • n 可以是关键字：even 偶数，odd 奇数
  • n 可以是公式：如果 n 是公式，则从 0 开始计算，但是第 0 个元素或超出元素的个数会被忽略

nth-child(n) 和 nth-of-type(n) 的区别：

  • nth-child(n) 会把所有盒子都排列序号，执行时先看 nth-child(n)，然后回去看nth-child(n)前面的盒子，如果匹配，则可以选择，如果不匹配则不选择
  • nth-of-type(n) 会把指定元素的盒子排列序号，执行时先找出左右指定元素的第 n 个

（3）伪元素选择器

伪元素选择器可以帮助我们利用 CSS 创建新标签元素，而不需要 HTML 标签，简化HTML结构。

语法：

element::before{}

基本使用：

div::before {
   display: inline-block;   /*为了可以使盒子可以定义宽高*/
   content: '';             /* '' 中间可以内容可自由编辑*/
   width: 30px;
   height: 30px;
   background: pink;
}
选择符说明
::before在元素内部的前面插上内容
::after在元素内部的后面插上内容
  • before 和 after 创建一个元素，但是不属于行内元素
  • 新创建的这个元素在文档树中是找不到的
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
  • 伪元素在父元素选择器和标签选择器一样，权重为 1

2.2 盒子模型 border-box

CSS3 可以通过 box-sizing 来指定盒模型，有 2 个值：content-box、border-box。使得计算盒子大小的方式发生变化。

  • box-sizing: content-box 盒子大小为 width + padding + border
  • box-sizing: border-box 盒子大小为 width
  • 如果盒子模型我们改为了 box-sizing：border-box ，那 padding 和 border 就不会撑大盒子（前提是padding 和 border 不会超过 width 宽度）

开发中使用：

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

2.3 filter 和 calc

（1）图片变模糊
CSS 滤镜filter：将模糊或颜色偏移等图形效果运用于元素

语法：

filter: 函数();

示例：

filter: blur(5px);  /* blur函数：模糊处理，数值越大越模糊*/

（2）计算盒子宽度 width: clac 函数

calc函数：在声明 CSS 属性值时执行一些计算

语法：

width: calc(100% - 20px);  /*可以使用 + - * / 来进行计算*/

2.4 过渡 transition

transition 属性让 CSS 具有动画的效果，常与 :hover 搭配使用。

语法：

transition: 要过渡的属性 花费时间 运动曲线 何时开始;
  • 属性：想要变化的 CSS 属性，宽度高度、背景颜色、内外边距都可以，如果想要所有属性都变化过渡写一个 all 就可以
  • 花费时间：单位是秒，必须写
  • 运动曲线：默认为 ease ，可以省略。linear 匀速、ease 逐渐慢下来、ease-in 加速、ease-out 减速、ease-in-out 先加速后减速
  • 何时开始：单位是秒，默认为 0s，可以省略

3、常用的HTML5的新特性

HTML5 的新增特性都有兼容性问题，基本上是IE9+ 以上的版本才支持

3.1 标签

（1）语义化标签

  • 这些标签主要是针对搜索引擎
  • 在页面中可以使用多次
  • 在IE9 中，需要把这些元素转换为块级元素
  • 移动端无兼容性问题
<header>：头部标签
<nav>： 导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

在这里插入图片描述

（2）视频标签video

在不使用插件的情况下，可以原生的支持视频格式文件播放

视频标签：video 的兼容性

浏览器MP4WebMOgg
Internet Exploreryesnono
Chromeyesyesyes
Firefoxyes（从Firefox 21 版本开始）yesyes
Safariyesnono
Operayesyesyes

语法：

<video src="文件地址" controls="controls"></video>

兼容性写法：

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

video 常见属性：

属性值描述
autoplayautoplay视频就绪自动播放（谷歌浏览器需要添加 muted 属性）
controlscontrols想用户显示播放控件
width像素设置播放器宽度
height像素设置播放器高度
looploop循环播放
preloadauto（预先加载视频），none（不应加载视频）规定是否预加载视频（如果有autoplay 就忽略该属性）
srcurl视频URL地址
posterimgurl加载等待的画面图片
mutedmuted静音播放

（3）音频标签audio

音频标签兼容性：

浏览器MP3WavOgg
Internet Exploreryesnono
Chromeyesyesyes
Firefoxyesyesyes
Safariyesyesno
Operayesyesyes

语法：

<audio src="文件地址" controls="controls"> </audio>

兼容性写法：

<audio controls="controls">
    <source src="happy.mp3" type="audio/mpeg">
    <source src="happy.ogg" type="audio/ogg">
</audio>

audio 常见属性：

属性值描述
autoplayautoplay音频就绪自动播放
controlscontrols想用户显示播放控件
looploop循环播放
srcurl音频URL地址

3.2 input 表单

input 类型：

属性值说明
type=“email”限制用户输入必须为Email类型
type=“url”限制用户输入必须为URL类型
type=“date”日期类型
type=“time”时间类型
type=“month”月类型
type=“week”周类型
type=“number”数字类型
type=“tel”手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单

表单属性：

属性值说明
requiredrequired表单拥有该属性表示某内容不能为空
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
autocompleteoff / on当用户在字段开始键入时，浏览器基于之前输入过的值，应该显示出在字段中填写的选项。默认已经打开，需要放在表单内，加上name属性，同时成功提交
multiplemultiple可以多选文件提交
wi...
关注
专栏目录
Web前端html5+css3前端开发入门学习笔记
m0_62516225的博客
10-16 2074
Web前端html5+css3前端开发入门学习笔记
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4729
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
【Web前端学习笔记】-CSS3-文本属性(text)
weixin_46681936的博客
04-27 545
学习了CSS3中有关文本属性的四大知识点
Web前端开发学习笔记
qq_41622776的博客
02-02 2665
自学笔记，仅供参考
【Web前端学习笔记】-CSS3-字体属性(font)
weixin_46681936的博客
04-21 977
学习了CSS3中有关字体属性的五大知识点，包括：颜色 color字号 font-size粗细 font-weight样式 font-style字体类型 font-family。
Web前端开发之CSS学习笔记3—颜色和背景
qq_45709187的博客
04-30 3059
目录 1.CSS的颜色表达 1.1前景色color 1.2背景色background-color 2.背景 2.1 background-image:url()设置背景图; 2.2 background-repeat属性设置是否及如何重复背景图像 2.2.1 background-repeat: no-repeat设置背景图不重复 2.2.2 background-repeat: space / repeat-x的区别 2.3background-position属性设置背景图像的..
Web前端开发之CSS学习笔记8—居中和自适应
qq_45709187的博客
05-24 2170
目录 1.居中 1.1水平居中 1.2垂直居中 2.单列布局 3.双列布局 3.1双列自适应 3.2半边固定半边自适应 3.三列布局 3.1浮动法 3.2绝对定位法 3.3margin负值法 4.经典布局 4.1双飞翼布局 4.2圣杯布局 4.3瀑布流布局 1.居中 ①文本水平居中：text-align: center; ②文本垂直居中line-height：line-height是一种文本属性，指示行高，浏览器默认的行高较小，通常使段落文字显得比较密集，增加行高可以
H5大前端（Web前端）学习笔记（二）-CSS部分
weixin_71370424的博客
01-02 1954
CSS概念CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。CSS文件后缀名为.css。CSS用于HTML文档中元素样式的定义使用CSS的目的就是让网页具有美观一致的页面语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）选择器通常是您需要改变样式的HTML元素每条声明由一个属性和一个值组成属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
【web前端HTML+CSS+JS】--- CSS学习笔记02
m0_67357141的博客
07-07 746
如果有多个选择器共同作用的话，只有优先级最高那层样式决定最终的效果。
Web前端学习课程笔记之HTML+CSS
Ghlys的博客
10-20 1749
Web前端学习课程笔记之HTML、CSS
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
超详细的web前端基础学习笔记
06-28
#### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**：HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构与内容。它如同网页的骨架，为网页提供基本框架。 - **CSS**：CSS ...
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1418
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
HTML、CSS实现树状图
p_s_p的博客
09-09 699
【代码】HTML、CSS实现树状图。
css父容器溢出隐藏 子容器溢出滚动
u010234868的专栏
09-13 352
parent 容器设置了固定的宽度和高度，并且通过 overflow: hidden;隐藏了溢出的 .child 容器内容。如果 .child 容器的内容确实超出了其设定的宽度和高度，则会显示滚动条，允许用户滚动查看所有内容。在父容器上设置 overflow: hidden;可以隐藏溢出的内容。如果你想要在子容器溢出时出现滚动条，可以设置 overflow: auto;
【CSS in Depth 2 精译_032】5.4 Grid 网格布局的显示网格与隐式网格（上）
最新发布
PeacefulWinter的博客
09-17 706
本篇为《CSS in Depth》全新第2版5.4小节的上篇，主要介绍了 Grid 网格布局中的显示网格（explicit grid）与隐式网格（implicit grid）的基本概念，并通过引入一个新的示例页面，详细演示并讲解了基础网格布局的实现过程，为后续隐式网格的用法做铺垫。建议收藏，并跟随本篇上传的同步源代码在本地进行验证。
基于less和scss 循环生成css
k0933的博客
09-14 382
【代码】基于less 循环生成css。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值