HTML5CSS3提高导读

HTML5CSS3提高导读

2024/2/20

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这 些新特性。

声明：

  1. 新特性增加了很多，但是我们专注于开发常用的新特性。
  2. 基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。

HTML5 的新特性

1.1 HTML5 新增的语义化标签

 <header>：头部标签 
 <nav>：导航标签 
 <article>：内容标签 
 <section>：定义文档某个区域 
 <aside>：侧边栏标签 
 <footer>：尾部标签 
注意： 
 这种语义化标准主要是针对搜索引擎的 
 这些新标签页面中可以使用多次  
 在 IE9 中，需要把这些元素转换为块级元素 
 其实，我们移动端更喜欢使用这些标签 
 HTML5 还增加了很多其他标签，我们后面再慢慢学

1.2 HTML5 新增的多媒体标签

新增的多媒体标签主要包含两个：

  1. 音频：<audio>

  2. 视频：<video>

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件

  1. 视频<video>

    当前 <video> 元素支持三种视频格式： 尽量使用 mp4格式

    在这里插入图片描述

​ 常见属性 ：

​ 在这里插入图片描述

  1. 音频<audio>

    当前 <audio> 元素支持三种音频格式：

在这里插入图片描述

​ 常见属性 在这里插入图片描述

  1. 多媒体标签总结

    1.音频标签和视频标签使用方式基本一致  
2.浏览器支持情况不同  
3.谷歌浏览器把音频和视频自动播放禁止了  
4.我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）  
5.视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

1.3 HTML5 新增的 input 类型

在这里插入图片描述

重点记住： number tel search 这三个

1.4 HTML5 新增的表单属性

在这里插入图片描述

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {  color: pink;  }

CSS3 的新特性

2.1 CSS3 的现状

  • 移动端支持优于 PC 端
  • 不断改进中
  • 应用相对广泛
  • 现阶段主要学习：新增选择器和盒子模型以及其他特性

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

  1. 属性选择器
  2. 结构伪类选择器
  3. 伪元素选择器

2.2 伪元素选择器（重点）

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

选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容

注意：

  • before 和 after 创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • 语法： element::before {}
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为 1

2.3 CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们 计算盒子大小的方式就发生了改变。

可以分成两种情况：

  1. box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
  2. box-sizing: border-box 盒子大小为 width

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

2.4 CSS3 过渡（重点）

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画： 是从一个状态 渐渐的过渡到另外一个状态

我们现在经常和 :hover 一起 搭配使用。

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

​ 1.属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都 变化过渡， 写一个all 就可以。

  1. 花费时间： 单位是 秒（必须写单位） 比如 0.5s
  2. 运动曲线： 默认是 ease （可以省略）
  3. 何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）

模块化开发

所谓的模块化：将一个项目按照功能划分， 一个功能一个模块，互不影响

模块化开发具有重复使用、更换方便等优点

HTML页面引入favicon图标：

在html 页面里面的<head></head>元素之间引入代码。

<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>

网站TDK三大标签SEO优化

SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索 引擎内自然排名的方式。

SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签用来符合 SEO 优化。

  1. title 网站标题

    建议：网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）

  2. description 网站说明

    简要说明我们网站主要是做什么的。

  3. keywords 关键字

    keywords 是页面关键词，是搜索引擎的关注点之一。

2024/2/20/15点06分

2D转换

2024/2/21

设置转换中心点transform-origin: x y;参数可以是方位名词、百分比、像素

translate平移

语法：

transform: translate(x,y);

rotate旋转

语法：

transform:rotate(度数);
/*正值为顺时针，度数的单位是deg，比如45deg*/

scale缩小放大

语法：

transform:scale(x,y);
transform:scale(1,1);相当于没有放大
transform:scale(2,2);放大两倍
transform:scale(0.5,0.5);缩小
transform:scale(2,1);宽度放大两倍，高度不变

2D转换综合写法

transform:translate() rotate() scale();

位移必须放到首位

CSS3动画（animation）

1）定义动画

语法：

@keyframes  动画名称 {0%（或from） {样式声明}100%（或to） {样式声明}
}
/*用百分比可以做多个状态的变化keyframs关键帧，里面的百分比要是整数*/
/*比如顺时针旋转一圈，可以设置左上角为0%右上角为25%右下角为50%左下角为75%，左上角为100%*/

2）调用动画

语法：

标签名 {/*调用动画*/animaton-name:动画名称;/*持续时间*/animation-duration:持续时间；
}

2024/2/24/01点46分
0%（或to） {
样式声明
}
}
/用百分比可以做多个状态的变化keyframs关键帧，里面的百分比要是整数/
/比如顺时针旋转一圈，可以设置左上角为0%右上角为25%右下角为50%左下角为75%，左上角为100%/


### 2）调用动画语法：

标签名 {
/调用动画/
animaton-name:动画名称;
/持续时间/
animation-duration:持续时间；
}


2024/2/24/01点46分

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2869267.html

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

相关文章

基于opencv的图像处理系统的设计与实现

基于opencv的图像处理系统的设计与实现

概要 随着计算机技术的飞速发展&#xff0c;图像技术在各领域的研究和应用日渐深入和广泛。opencv是近年来推出的开源、免费的计算机视觉库,利用其所包含的函数可以很方便地实现数字图像处理。本文旨在对opencv进行一个快速全面简介,通过介绍图像处理的相关函数&#xff0c;使读…
阅读更多...
如何重置iPhone的网络设置？这里提供详细步骤

如何重置iPhone的网络设置？这里提供详细步骤

前言 本文介绍如何重置iPhone上的网络设置。该信息适用于iPhone 12到iPhone 6以及iOS 14到iOS 8。 如何在iPhone上重置网络设置 采取以下步骤重置iPhone上的网络设置&#xff1a; 1、在iPhone上&#xff0c;打开设置应用程序。 2、单击通用。 3、滚动到屏幕底部&#xff…
阅读更多...
知名Web3投资基金a16z合伙人Jane Lippencott确认出席Hack.Summit() 2024区块链开发者大会

知名Web3投资基金a16z合伙人Jane Lippencott确认出席Hack.Summit() 2024区块链开发者大会

在区块链技术的风起云涌和Web3生态的蓬勃发展中&#xff0c;知名a16z Crypto的合伙人Jane Lippencott已确认出席即将于2024年4月9日至10日在香港数码港举行的Hack.Summit() 2024区块链开发者大会。作为亚洲首次举办的Hack.Summit()&#xff0c;此次大会将为全球区块链开发者及业…
阅读更多...
智慧城市与数字孪生：共创未来城市的智慧生活

智慧城市与数字孪生：共创未来城市的智慧生活

目录 一、智慧城市与数字孪生的概念与特点 二、智慧城市与数字孪生共创智慧生活的路径 1、城市规划与建设的智能化 2、城市管理与服务的智慧化 3、城市安全与应急管理的智能化 三、智慧城市与数字孪生面临的挑战与对策 四、智慧城市与数字孪生的发展趋势与展望 1、技术…
阅读更多...
HttpServer整合模块设计与实现(http模块五)

HttpServer整合模块设计与实现(http模块五)

目录 类功能 类定义 类实现 编译测试 源码路标 类功能 类定义 // HttpServer模块功能设计 class HttpServer { private:using Handler std::function<void(const HttpRequest &, HttpResponse &)>;std::unordered_map<std::string, Handler> _get_r…
阅读更多...
六级英语单词（一）

六级英语单词（一）

Day one.
阅读更多...
从阿里云降价，看中国云计算创新之变

从阿里云降价，看中国云计算创新之变

继“疯狂星期四”历史级大降价后&#xff0c;阿里云“AI驱动、公共云优先”的战略布局再落一子。 近日&#xff0c;阿里云与菜鸟、高德地图、中远海运、东航物流、圆通速递、申通快递、中通快递、德邦快递、G7易流、地上铁、浙江大学智能交通研究所等共同发起成立“物流智能联…
阅读更多...
【LeetCode热题100】148. 排序链表（链表）

【LeetCode热题100】148. 排序链表（链表）

一.题目要求 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 二.题目难度 中等 三.输入样例 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4] 示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输…
阅读更多...
挑战杯 机器视觉的试卷批改系统 - opencv python 视觉识别

挑战杯 机器视觉的试卷批改系统 - opencv python 视觉识别

文章目录 0 简介1 项目背景2 项目目的3 系统设计3.1 目标对象3.2 系统架构3.3 软件设计方案 4 图像预处理4.1 灰度二值化4.2 形态学处理4.3 算式提取4.4 倾斜校正4.5 字符分割 5 字符识别5.1 支持向量机原理5.2 基于SVM的字符识别5.3 SVM算法实现 6 算法测试7 系统实现8 最后 0…
阅读更多...
THM学习笔记—Simple CTF

THM学习笔记—Simple CTF

nmap扫描&#xff0c;发现2222端口很奇怪啊&#xff0c;重新换一种方式扫描2222端口 发现是ssh 先用ftp试试&#xff0c;尝试匿名登录 下载所有文件 发现只有一个ForMitch.txt&#xff0c;告诉我们其账号密码为弱密码&#xff0c;我们猜测Mitch为其用户名&#xff0c;尝试暴力…
阅读更多...
「SpringBrick快速入门指南」：一款基于Spring Boot的高级插件化开发框架

「SpringBrick快速入门指南」：一款基于Spring Boot的高级插件化开发框架

文章目录 关于 | About技术文档 | Document开源项目 | Project 案例 | Demo项目结构 | Structure主程序配置集成 | Settings引入框架依赖 | Framework在配置文件加入配置 | YamlSpringBoot启动类改引导类 | Change 插件配置集成 | Settings引入依赖 | XML定义插件引导类 | Clas…
阅读更多...
Git版本管理--远程仓库

Git版本管理--远程仓库

前言&#xff1a; 本文记录学习使用 Git 版本管理工具的学习笔记&#xff0c;通过阅读参考链接中的博文和实际操作&#xff0c;快速的上手使用 Git 工具。 本文参考了引用链接博文里的内容。 引用: 重学Git-Git远程仓库管理_git remote add origin-CSDN博客 Git学习笔记&am…
阅读更多...
【Qt问题】vs里直接打开qt项目的ui会崩溃

【Qt问题】vs里直接打开qt项目的ui会崩溃

问题描述&#xff1a; 当我用VS2019开发Qt的时候&#xff0c;在VS编译器里要用到Qt的ui设计&#xff0c;但是双击打开发现直接就崩溃了。 解决办法&#xff1a; 崩溃的原因很简单&#xff0c;是因为VS默认用的qt designer打开&#xff0c;所以会崩溃&#xff0c;我们右键单击…
阅读更多...
Transformer学习笔记（二）

Transformer学习笔记（二）

一、文本嵌入层Embedding 1、作用&#xff1a; 无论是源文本嵌入还是目标文本嵌入&#xff0c;都是为了将文本中词汇的数字表示转变为向量表示&#xff0c;希望在这样的高维空间捕捉词汇间的关系。 二、位置编码器Positional Encoding 1、作用&#xff1a; 因为在Transformer…
阅读更多...
ChatGPT编程—实现小工具软件(批量替换文本、批量处理图像文件)

ChatGPT编程—实现小工具软件(批量替换文本、批量处理图像文件)

ChatGPT编程—实现小工具软件(批量替换文本、批量处理图像文件) 今天借助[小蜜蜂AI][https://zglg.work]网站的ChatGPT编程实现一个功能&#xff1a;批量处理文件及其内容&#xff0c;例如批量替换文本、批量处理图像文件等。 环境&#xff1a;Pycharm 2021 系统&#xff1a…
阅读更多...
前后端分离：现代Web开发的协作模式

前后端分离：现代Web开发的协作模式

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
Java基础 - 9 - 集合进阶（二）

Java基础 - 9 - 集合进阶（二）

一. Collection的其他相关知识 1.1 可变参数 可变参数就是一种特殊形参&#xff0c;定义在方法、构造器的形参列表里&#xff0c;格式是&#xff1a;数据类型…参数名称; 可变参数的特点和好处 特点&#xff1a;可以不传数据给它&#xff1b;可以传一个或者同时传多个数据给…
阅读更多...
【自然语言处理】NLP入门（八）：1、正则表达式与Python中的实现（8）：正则表达式元字符：.、[]、^、$、*、+、?、{m,n}

【自然语言处理】NLP入门（八）：1、正则表达式与Python中的实现（8）：正则表达式元字符：.、[]、^、$、*、+、?、{m,n}

文章目录 一、前言二、正则表达式与Python中的实现1、字符串构造2、字符串截取3、字符串格式化输出4、字符转义符5、字符串常用函数6、字符串常用方法7、正则表达式1. .&#xff1a;表示除换行符以外的任意字符2. []&#xff1a;指定字符集3. ^ &#xff1a;匹配行首&#xff0…
阅读更多...
【类脑智能】脑网络通信模型分类及量化指标(附思维导图)

【类脑智能】脑网络通信模型分类及量化指标(附思维导图)

脑网络通信模型分类及量化指标(附思维导图) 参考论文&#xff1a;Brain network communication_ concepts, models and applications 概念 脑网络通信模型是一种使用图论和网络科学概念来描述和量化大脑结构中信息传递的模型。这种模型可以帮助研究人员理解神经信号在大脑内…
阅读更多...
用最简单线性回归理解梯度下降

用最简单线性回归理解梯度下降

上篇文章&#xff0c;我们已经理解了线性回归 现根据线性回归去理解梯度下降 初始化数据 import numpy as npnp.random.seed(42) # to make this code example reproducible m 100 # number of instances X 2 * np.random.rand(m, 1) # column vector y 4 3 * X np.…
阅读更多...
最新文章

Copyright @ 2022~2023