尚硅谷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.rhkb.cn/news/302808.html

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

相关文章

SpringBoot学习之Kibana下载安装和启动(Mac版)(三十二)

一、简介 Kibana是一个开源的分析与可视化平台,设计出来用于和Elasticsearch一起使用的。你可以用kibana搜索、查看存放在Elasticsearch中的数据。Kibana与Elasticsearch的交互方式是各种不同的图表、表格、地图等,直观的展示数据,从而达到高级的数据分析与可视化的目的。 …

C语言单链表

1. 单链表的概念和结构 概念&#xff1a;链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表 中的指针链接次序实现的 。 链表与顺序表都属于线性表&#xff0c;顺序表在物理存储结构上是线性的&#xff0c;但是链表在物理存储结构上…

P1123 取数游戏(dfs算法)

题目描述 一个 NM 的由非负整数构成的数字矩阵&#xff0c;你需要在其中取出若干个数字&#xff0c;使得取出的任意两个数字不相邻&#xff08;若一个数字在另外一个数字相邻 8个格子中的一个即认为这两个数字相邻&#xff09;&#xff0c;求取出数字和最大是多少。 输入格式 第…

蝙蝠优化算法(bat optimization algorithm)

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 算法背景 蝙蝠优化算法&#xff08;Bat Algorithm&#xff09;是一种基于群体智能的优化算法&#xff0c;它的灵感来源于蝙蝠捕食时的回声定位行…

Python3 replace()函数使用详解:字符串的艺术转换

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

[从0开始AIGC][Transformer相关]:算法的时间和空间复杂度

一、算法的时间和空间复杂度 文章目录 一、算法的时间和空间复杂度1、时间复杂度2、空间复杂度 二、Transformer的时间复杂度分析1、 self-attention 的时间复杂度2、 多头注意力机制的时间复杂度 三、transformer的空间复杂度 算法是指用来操作数据、解决程序问题的一组方法。…

人工智能应用工程师特训营丨国家认证,行业必备

人工智能应用工程特训营 提升目标&#xff1a; 1、提高专业认可度&#xff0c;增强职场竞争力 2、实战项目驱动&#xff0c;提升应用能力 3、技术体系全面&#xff0c;涵盖多个领域 4、实时在线答疑&#xff0c;强化学习互动 特训营学习流程&#xff1a; 职业技术证书&#xff…

【鸿蒙开发】系统组件Text,Span

Text组件 Text显示一段文本 接口&#xff1a; Text(content?: string | Resource) 参数&#xff1a; 参数名 参数类型 必填 参数描述 content string | Resource 否 文本内容。包含子组件Span时不生效&#xff0c;显示Span内容&#xff0c;并且此时text组件的样式不…

数学基础:常见函数图像

来自&#xff1a; https://www.desmos.com/calculator/l3u8133jwj?langzh-CN 推荐: https://www.shuxuele.com/index.html 一、三角函数 1.1 正弦 sin(x) 1.2 余弦 cos(x) 1.3 正切 tan(x) 1.4 余切 cot(x) 1.5 正弦余弦综合 1.6 正切余切综合 二、指数对数

Linux内核自带的LED驱动实验:Led驱动功能测试

一. 简介 前面几篇文章学习了如何使用Linux内核自带的Led驱动。一篇文章通过对驱动分析&#xff0c;了解了驱动与设备匹配的关键点。 一篇文章学习了如何配置使能Linux内核自带的Led驱动&#xff0c;第二篇文章学习创建Led设备树节点&#xff08;针对使用Linux内核自带的Led…

HJ37 统计每个月兔子的总数(动态规划)

高端的食材&#xff0c;往往只需要最简单的烹饪方法。 import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的…

小米汽车:搅动市场的鲶鱼or价格战砧板上的鱼肉?

3月28日晚&#xff0c;备受关注的小米汽车上市发布会召开&#xff0c;小米集团董事长雷军宣布小米SU7正式发布。小米汽车在带飞股价的同时&#xff0c;二轮订购迅速售尽。 图一&#xff1a;小米集团股价 雷军口中“小米汽车迈出的第一步&#xff0c;也是人生最后一战的开篇”&a…

Spring Cloud微服务入门(五)

Sentinel的安装与使用 安装部署Sentinel 下载Sentinel&#xff1a; https://github.com/alibaba/Sentinel/releases Sentinel控制台 https://localhost:8080 用户和密码为sentinel 使用Sentinel 加依赖&#xff1a; 写配置&#xff1a; 输入&#xff1a; java -Dserver.po…

《QT实用小工具·二十二》多种样式导航按钮控件

1、概述 源码放在文章末尾 该项目实现了多种样式的导航按钮控件 可设置文字的左侧、右侧、顶部、底部间隔。 可设置文字对齐方式。 可设置显示倒三角、倒三角边长、倒三角位置、倒三角颜色。 可设置显示图标、图标间隔、图标尺寸、正常状态图标、悬停状态图标、选中状态图标…

基于spring boot的漫画之家系统

基于spring boot的漫画之家系统设计与实现 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&…

程序语言基础

根据希赛相关视频课程汇总整理而成&#xff0c;个人笔记&#xff0c;仅供参考。考点偏向于通用程序语言的基础概念。 程序语言基础概念 程序设计语言&#xff1a; ①低级语言 机器语言汇编语言 汇编语言&#xff1a;指令语句/伪指令语句/宏指令语句 ②高级语言 Fotrane语言&…

vscode连接远程服务器一直需要输密码,但是连不上

问题&#xff1a;vscode连接远程服务器一直需要输密码&#xff0c;但是连不上。 解决办法&#xff1a;kill 掉该远程服务器&#xff0c;然后再重新连接 操作&#xff1a; windows: ctrlshiftp mac:cmdshiftp 调出指令&#xff0c;然后选择“Remote SSH:Kill Vscode Serve…

强化学习MPC——(二)

本篇主要介绍马尔科夫决策&#xff08;MDP&#xff09;过程&#xff0c;在介绍MDP之前&#xff0c;还需要对MP&#xff0c;MRP过程进行分析。 什么是马尔科夫&#xff0c;说白了就是带遗忘性质&#xff0c;下一个状态S_t1仅与当前状态有关&#xff0c;而与之前的状态无关。 为…

【鸿蒙开发】系统组件Row

Row组件 Row沿水平方向布局容器 接口&#xff1a; Row(value?:{space?: number | string }) 参数&#xff1a; 参数名 参数类型 必填 参数描述 space string | number 否 横向布局元素间距。 从API version 9开始&#xff0c;space为负数或者justifyContent设置为…

关于51单片机TMOD定时器的安全配置

定时器介绍&#xff1a; -------------------------------------------------------------------------------------------------------------------------- 首先配置的是控制寄存器 TCON 说直白点&#xff0c;这个寄存器就是用来计数的&#xff0c;打开计时器&#xff0c;关…