尚硅谷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,一经查实,立即删除!

相关文章

linux知识点

绝对路径用什么符号表示&#xff1f;当前目录、上层目录用什么表示&#xff1f;主目录用什么表示? 切换目录用什么命令 绝对路径&#xff1a; 如/etc/init.d当前目录和上层目录&#xff1a; ./ …/主目录&#xff1a; ~/切换目录&#xff1a; cd 怎么查看当前进程&#xff1f;…

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

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

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

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

GMSSL学习笔记

概述 GmSSL是由北京大学自主开发的国产商用密码开源库&#xff0c;实现了大部分常用的国密算法&#xff08;SM2、SM3、SM4等&#xff09;以及TLCP协议&#xff0c;使用方法类似openssl。 GmSSL是一个轻量级软件&#xff0c;使用起来也比openssl方便一些。 https://gitee.com…

C#-实现软删除

文章目录 前言1. 使用布尔字段标记删除状态2. 修改查询以忽略软删除的记录3. 实现软删除的方法4. 考虑使用全局查询过滤器5. 处理关联实体6. 考虑性能和存储软删除的好处&#xff1a;软删除的坏处&#xff1a; 总结 前言 后端中&#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;一些加密相关的方法通常会引用…

视觉循迹小车(旭日x3派、opencv)

基于旭日x3派的视觉循迹小车&#xff0c;未完全实现&#xff0c;参考&#xff1a;https://developer.horizon.cc/forumDetail/146176819622746404 效果硬件视觉循迹原理python代码 效果 硬件 1、旭日x3派&#xff08;烧录好系统镜像&#xff09; 2、USB摄像头 3、TB6612 4、小…

C++ //练习 11.29 如果给定的关键字不在容器中,upper_bound、lower_bound和equal_range分别会返回什么?

C Primer&#xff08;第5版&#xff09; 练习 11.29 练习 11.29 如果给定的关键字不在容器中&#xff0c;upper_bound、lower_bound和equal_range分别会返回什么&#xff1f; 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 解释 如果…

HashMap底层源码面试题

面试题1&#xff1a;HashMap是如何实现快速查找的&#xff1f; 答案&#xff1a; HashMap通过哈希表实现快速查找。它内部维护了一个数组&#xff08;称为桶数组或table&#xff09;&#xff0c;每个数组元素是一个链表或红黑树&#xff08;当链表长度超过一定阈值时&#xff…

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

摄像头校准漫反射板是一种用于摄像头校准的重要工具。在摄像头成像过程中&#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…

[LeetCode][LCR186]文物朝代判断——贪心

题目 LCR 186. 文物朝代判断 展览馆展出来自 13 个朝代的文物&#xff0c;每排展柜展出 5 个文物。某排文物的摆放情况记录于数组 places&#xff0c;其中 places[i] 表示处于第 i 位文物的所属朝代编号。其中&#xff0c;编号为 0 的朝代表示未知朝代。请判断并返回这排文物的…

java开发职业发展和求职建议

在当今竞争激烈的就业市场中&#xff0c;Java开发职业的求职者需要具备一定的技能和知识&#xff0c;以在众多求职者中脱颖而出。以下是一些建议&#xff0c;帮助Java开发者提高自己的竞争力&#xff0c;找到理想的工作。 1. 掌握基本技能&#xff1a;首先&#xff0c;Java开发…

Vue中如何使用Ajax请求是通过第三方库axios或者原生的fetch API来实现的

在Vue中使用Ajax请求通常是通过第三方库&#xff0c;比如axios或者原生的fetch API来实现的。这里我将为你展示如何使用axios库在Vue中进行Ajax请求。 首先&#xff0c;你需要安装axios库。你可以通过npm或者yarn来安装&#xff1a; 使用npm: bash 复制 npm install axi…

mysql的索引类型与数据存储

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

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

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

2024.4.1力扣每日一题——故障键盘

2024.4.1 题目来源我的题解方法一 直接利用StringBuilder的反转函数方法二 字符数组 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2810 我的题解 方法一 直接利用StringBuilder的反转函数 使用StringBuilder构造结果&#xff0c;并利用其反转函数进行翻转 时间复杂度…

opencv如何寻找图片轮廓

在OpenCV中&#xff0c;寻找图片轮廓的基本步骤通常包括以下几个过程&#xff1a; 读取图片&#xff1a;首先&#xff0c;需要读取想要提取轮廓的图片。转换为灰度图&#xff1a;因为轮廓检测通常在灰度图上进行&#xff0c;所以需要将图片转换为灰度图。应用阈值或边缘检测&a…