尚硅谷html5+css3(1)html相关知识

1.基本标签:

<h1>最大的标题字号

<h2>二号标题字号

<p>换行

2.根标签<html>

包括<head>和<body>

<html><head><title>title</title><body>body</body></head>
</html>

3.自结束标签与注释(注释不可嵌套)

<html><head><title>网页</title><body> 自结束标签:<img><img/><input><input/><!-- 注释:--></body></head>
</html>

4.标签的属性:

<html>
<head><title>标签的属性</title>
</head>
<body><!-- 属性font,在标签(开始标签或自结束标签)中设置属性属性是一个名值对结构属性用来设置标签中的内容如何显示属性和标签名或其他属性用"空格"隔开属性名和属性值不能瞎写--color,red,应该根据规定写有些属性有属性值,有些没有。若有属性值,则用引号引起来--><h1> 第 <font color="red" size="4">1</font> 个网页</h1>
</body>
</html>

5.文档属性:告诉网页是html5的

<!-- 文档声明:doctype-告诉浏览器当前网页版本-html5的文档声明(不区分大小写)<!doctype html>-->
<!doctype html>
<html><head><title>网页的基本结构</title></head>
<body>
</body>
</html>

6.字符集:使用万国码:UTF-8

<!doctype html>
<html>
<head><!--通过meta标签设置网页字符集,避免乱码--><meta charset="utf-8"><title>网页的基本结构</title>
</head>
</html>

7.语义化标签(1)

①标题标签:h1~h6共6级标签

从h1到h6重要性递减

h1在网页中的重要性仅次于title标签,一般情况下一个页面只有一个h1

一般用h1~h3

②块元素:在页面中独占一行的元素称为块元素(例如h1)

③p标签:表示页面中的一个段落

③hgroup:为标题分组,可以将一组相关的标题同时放入hgroup

④em:语音语调(使字体倾斜)

⑤strong:加粗字体

⑥blockquote:引用,缩进+独占一行

⑦q:短引用,为文字加双引号

⑧br:换行

8.结构化语义标签(2)(前8个了解即可,主要使用div)

①header:网页头部

②main:网页主体(一个页面只有一个main)

③footer:网页底部

④nav:网页导航

⑤aside:和主体相关的其他内容

⑥article:表示一个独立的文章

⑦section:表示一个独立区块,上面的标签都不能表示时使用section

⑧span:行内元素,没有语义,一般用于在网页中选中文字

⑨div:没有语义,只用来表示一个区块,主要使用div来布局元素

9.块和行内

块元素(block element):在网页中一般通过块元素对页面进行布局

行内元素(inline element):包裹文字

一般在块元素中嵌套行内元素(例:<h1><em>iii</em><h1/>)

p元素中不能放任何块元素

浏览器在解析网页时,会对网页中不符合规范的内容进行修正

10.列表list

在html中创建列表:(可以嵌套)

1.无序列表:ul标签:li表示列表项

   <ul><li>列表1</li><li>列表2</li><li>列表3</li></ul>

2.有序列表:ol标签:li表示列表项

    <ol><li>列表1</li><li>列表2</li><li>列表3</li></ol>

 

3.定义列表:dl标签:dt表示定义的内容,dd对内容进行解释说明(交互菜单)

    <dl><dt>dt</dt><dd>dd1</dd><dd>dd2</dd></dl>

 

11.超链接

使用a标签定义超链接。超链接也是一个行内元素,在其中可以嵌套除a以外的任何元素

属性:href:指定跳转的目标路径

<a href="https://www.baidu.com/">baidu</a>

12.相对路径

.或..开头:./   ../     ./可以省略不写

./当前文件所在目录

../上一级文件目录

13.超链接

(1)新建页面

target属性,用来指定超链接打开的位置

_self默认值,在当前页面打开超链接

_blank在一个新的页面打开超链接

<a href="https://www.baidu.com/" target="_blank">baidu</a>

(2)回到顶部

将超链接的href属性设置为#,这样点击超链接后页面不会跳转,而是转到当前页面的顶部

    <a href="#">回到顶部</a>

(3)跳转到任意地方:

使用id,给每个标签设置id属性(唯一标识)

href设为"#"+"id"

    <a href="#bottom">去底部</a><a id="bottom" href="#">--底部--</a>
 <a href="javascript:;">什么也不会发生</a>

14.图片标签

(1)img标签引入图片,它是一个自结束标签

属性:src 外部图片路径

img这种元素属于替换元素(被图片替换)

(2)alt,图片的描述,默认情况下不显示,在浏览器无法加载图片时显示

搜索引擎会根据alt中的内容识别图片(如果不写alt则不能被搜索引擎搜到)

(3)width图片宽度 height图片高度(单位:像素)

若两者只改一个,则会等比例缩放

若都改,则会改变图片长宽

(PC端一般不改图片大小,移动端经常对图片进行缩放)

  <img width="500 src="./img/1.gif" alt="图片1">

15.图片格式

jpeg(jpg) 支持的颜色比较丰富,不支持透明效果,不支持动图(一般用来显示照片)

gif 支持的颜色比较少,支持简单透明,支持动图(颜色单一的图片,动图)

png 支持的颜色丰富,支持复杂透明,不支持动图(专为网页而生)

webp 谷歌专门用来表示网页中图片的一种格式,具备其他的有点,而且文件小(最完美的,但兼容性不好(ie浏览器不能用))

base64 将图片用base64进行编码,这样可以将图片转换为字符,通过字符的形式引入图片

一般用于一些需要和网页一起加载的图片采用base64(同步加载)(使用场景不多)

16.内联框架

iframe  用于向其他页面引入一个其他页面  

用于向当前页面引入一个其他页面

<!-- frameborder="1" 有边框 ;="0" 无边框--><iframe src="https://www.bilibili.com/" width="800" height="600" frameborder="0"></iframe>

17.音视频播放

(1)音频

<!-- audio标签用来向页面中引入一个外部音频  音视频文件引入时,默认情况下不允许用户自己控制播放停止属性:controls 是否允许用户控制播放autoplay 音频文件是否自动播放,但大部分浏览器不会自动对音乐进行播放loop 音乐循环播放
--><audio src="./source/1.mp3" controls autoplay loop></audio>
    <!--除了用src指定外部文件的路径外,还可通过source指定文件路径--><audio>对不起,您的浏览器不支持播放音频,请升级浏览器!<!--支持的浏览器显示音频,不支持的输出该行文字--><source src="./source/1.mp3"><source src="./source/2.mp3"><source src="./source/3.mp3"></audio>
<!--优点:对用户友好,可以有多个音频(后面的音频只有前面的失效才会显示),若都失效,则显示文字-->
<!--用于老版本浏览器,自动播放(一般不用)--><embed src="./source/1.mp3" type="audio/mp3" width="200" height="100">

(2)视频

    <!--video使用方式基本与audio一致--><video><source src="./source/1.webm"><source src="./source/1.mp3"><source src="./source/3.mp3"><embed src="./source/3.mp3"></video>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

162 Linux C++ 通讯架构实战16,UDP/TCP协议的优缺点,使用环境对比。UDP 服务器开发

UDP/TCP协议的优缺点 TCP :面向连接的&#xff0c;可靠数据包传输。对于不稳定的网络层&#xff0c;采取完全弥补的通信方式。丢包重传 优点&#xff1a;稳定&#xff0c;数据流量稳定&#xff0c;速度稳定&#xff0c;顺序稳定 缺点&#xff1a;传输速度慢&…

青藏铁路双寨物流基地扩能改造工程接触网第一杆成功组立

4月2日凌晨&#xff0c;随着吊钩缓缓落下&#xff0c;在中铁电气化局北京电化公司现场作业人员的紧张操作下&#xff0c;青藏铁路双寨物流基地扩能改造工程首根接触网支柱稳稳落在基础上&#xff0c;标志着双寨物流基地扩能改造进入全面施工阶段。 双寨物流基地扩能改造工程包含…

Part1.Transformer架构

构成&#xff1a; 【手把手教你用Pytorch代码实现Transformer模型&#xff01;从零解读(Pytorch版本&#xff09;-哔哩哔哩】 https://b23.tv/o283hzU

JavaScript逆向爬虫——使用Python模拟执行JavaScript

使用Python模拟执行JavaScript 通过一些调试&#xff0c;我们发现加密参数token是由encrypt方法产生的。如果里面的逻辑相对简单的话&#xff0c;那么我们可以用Python完全重写一遍。但是现实情况往往不是这样的&#xff0c;一般来说&#xff0c;一些加密相关的方法通常会引用…

摄像头校准漫反射板提高识别物体

摄像头校准漫反射板是一种用于摄像头校准的重要工具。在摄像头成像过程中&#xff0c;由于各种因素的影响&#xff0c;如光线、角度、镜头畸变等&#xff0c;会导致摄像头成像出现偏差。为了消除这些偏差&#xff0c;提高摄像头的成像质量&#xff0c;需要使用摄像头校准漫反射…

从头开发一个RISC-V的操作系统(四)嵌入式开发介绍

文章目录 前提嵌入式开发交叉编译GDB调试&#xff0c;QEMU&#xff0c;MAKEFILE练习 目标&#xff1a;通过这一个系列课程的学习&#xff0c;开发出一个简易的在RISC-V指令集架构上运行的操作系统。 前提 这个系列的大部分文章和知识来自于&#xff1a;[完结] 循序渐进&#x…

第十四讲:C语言字符函数和字符串函数

目录 1. 字符分类函数 2、字符转换函数 3. strlen的使⽤和模拟实现 4. strcpy 的使⽤和模拟实现 5. strcat 的使⽤和模拟实现 6. strcmp 的使⽤和模拟实现 7. strncpy 函数的使⽤ 8. strncat 函数的使⽤ 9. strncmp函数的使⽤ 10. strstr 的使⽤和模拟实现 11. strt…

mysql的索引类型与数据存储

mysql索引与类型 什么是索引&#xff1f; 索引&#xff08;Index&#xff09;是帮助MySQL高效获取数据的数据结构。我们可以简单理解为&#xff1a;快速查找排好序的一种数据结构。Mysql索引主要有两种结构&#xff1a;BTree索引和Hash索引。我们平常所说的索引&#xff0c;如…

校园圈子小程序,大学校园圈子,三段交付,源码交付,支持二开

介绍 在当今的数字化时代&#xff0c;校园社交媒体和在线论坛成为了学生交流思想、讨论问题以及分享信息的常用平台。特别是微信小程序&#xff0c;因其便捷性、用户基数庞大等特点&#xff0c;已逐渐成为构建校园社区不可或缺的一部分。以下是基于现有资料的校园小程序帖子发…

(已解决)引入本地bootstrap无效,bootstrap和jquery的引入

问题&#xff1a; 首先我是跟着张天宇老师下载的bootstrap文件&#xff0c;新建了一个css文件夹&#xff0c;但是这样子<link rel"stylesheet" type"text/css" src"./css/bootstrap.css">在index.html引入没有用。 解决办法: 1.把建立的…

【opencv】示例-dft.cpp 该程序演示了离散傅立叶变换 (dft) 的使用,获取图像的 dft 并显示其功率谱...

#include "opencv2/core.hpp" // 包含OpenCV核心功能头文件 #include "opencv2/core/utility.hpp" // 包含OpenCV实用程序头文件 #include "opencv2/imgproc.hpp" // 包含OpenCV图像处理头文件 #include "opencv2/imgcodecs.hpp" // 包…

CSS 学习笔记 总结

CSS 布局方式 • 表格布局 • 元素定位 • 浮动布局&#xff08;注意浮动的负效应&#xff09; • flex布局 • grid布局&#xff08;感兴趣的可以看下菜鸟教程&#xff09; 居中设置 元素水平居中 • 设置宽度后&#xff0c;margin设置为auto • 父容器设置text-alig…

积木报表Excel数据量大导出慢导不出问题、大量数据导不出问题优化方案和分析解决思路(优化前一万多导出失败,优化后支持百万级跨库表导出)

文章目录 积木报表Excel数据量大导出慢导不出问题、大量数据导不出问题优化方案和分析解决思路&#xff08;优化前一万多导出失败&#xff0c;优化后支持百万级跨库表导出&#xff09;优化结果需求背景和解决方案的思考解决方案流程描述&#xff1a;关键代码引入easy excel新建…

Linux云计算之Linux基础3——Linux系统基础2

1、终端 终端(terminal)&#xff1a;人和系统交互的必要设备&#xff0c;人机交互最后一个界面&#xff08;包含独立的输入输出设备&#xff09; 物理终端(console)&#xff1a;直接接入本机器的键盘设备和显示器虚拟终端(tty)&#xff1a;通过软件方式虚拟实现的终端。它可以…

Docker 引擎离线安装包采集脚本

文章目录 一、场景说明二、脚本职责三、参数说明四、操作示例五、注意事项 一、场景说明 本自动化脚本旨在为提高研发、测试、运维快速部署应用环境而编写。 脚本遵循拿来即用的原则快速完成 CentOS 系统各应用环境部署工作。 统一研发、测试、生产环境的部署模式、部署结构、…

基于SSM的宠物管理系统

点击以下链接获取源码: https://download.csdn.net/download/qq_64505944/89076676?spm=1001.2014.3001.5503 技术:SSM(Spring+SpringMVC+MyBatis)+LayUI+Echarts技术栈,分页采用pagehelper插件,EasyExcel进行Excel文件的导入导出。 宠物管理系统 1 CHINER-宠物管理系…

【MYSQL之进阶篇】视图、存储过程、存储函数以及触发器

&#x1f525;作者主页&#xff1a;小林同学的学习笔录 &#x1f525;mysql专栏&#xff1a;小林同学的专栏 1.视图 1.1 定义 视图是MySQL数据库中的虚拟表&#xff0c;它基于一个或多个实际表的查询结果。视图提供了一种简单的 方法来封装和重用复杂的查询&#xff0c;同时…

MySQL的基本查询

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;MySQL &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容介绍了mysql的基本查询部分的知识&#xff0c;包括Crea…

YOLOv9改进 | 一文带你了解全新的SOTA模型YOLOv9(论文阅读笔记,效果完爆YOLOv8)

官方论文地址&#xff1a; 官方论文地址点击即可跳转 官方代码地址&#xff1a; 官方代码地址点击即可跳转 图1. 在MS COCO数据集上实时对象检测器的比较。基于GELAN和PGI的对象检测方法在对象检测性能方面超越了所有以前的从头开始训练的方法。在准确性方面&#xff0c;新方法…

Go语言实现Redis分布式锁2

项目地址: https://github.com/liwook/Redislock 1.支持阻塞式等待获取锁 之前的是只尝试获取一次锁&#xff0c;要是获取失败就不再尝试了。现在修改为支持阻塞式等待获取锁。 添加LockOptions结构体 添加option.go文件。 在LockOptions中 isBlock表示是否是阻塞模式blo…