HTML学习|网页基本信息、网页基本标签、图像标签、超链接标签、列表标签、表格标签、媒体元素、页面结构分析、iframe内联框架

网页基本信息

DOCTYPE是设置使用什么规范,网页整个信息都在html标签中,head标签里包含字符集设置,网页介绍等信息,title标签是网页的名称,网页的主干都在body标签中

网页基本标签

标题标签

h1~h6都是标题标签,按照大小顺序来的。

段落标签

p标签是段落标签,相当于其内容是一个段落,相当于换行且有行间距

换行标签

br标签是换行标签,与p标签的区别就是,单纯的换行,行与行之间没有行间距

水平线标签

hr是水平线标签,它的作用就是增加一条水平线

字体样式标签

strong标签的作用是字体加粗,em标签的作用是让字体变成斜体字

注释和特殊符号

注释是<!--注释内容-->

&nbsp代表了一个空格,正常的空格来讲,无论你打多少个,显示到页面上都只有一个,如果想达到很多个空格的效果,就要用&nbsp,下面还有大于号、小于号、复制等特殊符号

图像标签

img是图像标签,src是图像资源的地址,alt是如果图片没有加载出来,则显示这个名字,title是指鼠标放在图片上会显示的提示文字,width,height分别代表图像的宽度和高度

超链接标签

a标签是超链接标签,href是代表了点击跳转的地址,target是窗口在哪打开,比如_self代表在本窗口打开,_blank代表了是在新的窗口打开,然后是链接的文本或者也可以是一个图片

第一个框是文本超链接,第二个框是图片超链接

锚链接

锚链接可以完成页面内部的跳转,首先在想跳转的位置用a标签标记,并用name来设置一个名字

然后在能跳转的位置弄一个a标签,href中用#锚名称的方式确定要跳转的位置,此方式也可以跨页面去跳转,不过在跨页面时href里#锚名称前要加页面资源的位置

列表标签

有序列表

ol标签是有序列表,li标签是列表的一行

无序列表

ul标签是无序列表,li是列表的一行

自定义列表

dl标签是自定义列表,dt代表几行的一个标题,dd代表一行

表格标签

table标签是表格标签,border可以设置表格线条的粗细,tr代表一行,td是代表列

colspan能跨列,rowspan能跨行

媒体元素

视频元素

video标签是视频元素,src是视频资源的存放地址,视频资源一般存放在resources目录下的video文件夹下,controls,可以理解为视频的播放器,有这个才能在网页上看视频,有进度暂停等功能,autoplay自动播放,点开网页后,视频能自动播放

音频元素

audio是音频标签,和视频标签类似

页面结构分析

在页面中,先简单认识页面结构的三个部分,header是页面头部,footer是页面脚部,section是页面主体

iframe内联框架

iframe是内联框架,大概意思就是在页面里面再出一个小的页面,src代表了这个小页面的页面地址,可以设置宽高这些,也可以设置一个name标签,跟a超链接标签结合一下,target设置成iframe的name,弄一个超链接跳转小页面。

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

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

相关文章

UE进阶篇四:多语言本地化

多语言 1、创建字符串表格&#xff1a;可以通过导入/导出CSV文件编辑或者编辑器直接编辑 2、工具 -> 本地化控制板 收集引擎中文本 3、添加新语言, 导出 .po文件&#xff0c;文本编辑也可直接编辑器编辑 4、使用方法 4.1 FText直接添加本地化 4.2 蓝图调用 4.3 C调用 5、…

鸿蒙开发-ArkTS语言-容器-非线性容器

鸿蒙开发-UI-web 鸿蒙开发-UI-web-页面 鸿蒙开发-ArkTS语言-基础类库 鸿蒙开发-ArkTS语言-并发 鸿蒙开发-ArkTS语言-并发-案例 鸿蒙开发-ArkTS语言-容器 文章目录 前言 一、非线性容器 1.HashMap 2.HashSet 3.TreeMap 4.TreeSet 5.LightWeightMap 6.LightWeightSet 7.P…

(一)Linux的vim编辑器的使用

一.vim编辑器 Vim 是从 vi 发展出来的一个文本编辑器。代码补全、编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用。简单的来说, vi 是老式的字处理器,不过功能已经很齐全了,但是还是有可以进步的地方。 vim 则可以说是程序开发者的一项很好用的工具。 二…

活动倒计时!四城再度联动,盘古信息与您相约上海|重庆|东莞|合肥

五月&#xff0c;是生命的复苏季&#xff0c;是希望的播种月。在这个充满活力的时节&#xff0c;盘古信息将在上海、重庆、东莞、合肥四地盛大举办四场精彩纷呈的活动。届时&#xff0c;我们将呈现一系列精心打造的工业软件产品及解决方案&#xff0c;带您领略制造业数字化转型…

设计模式概览说明

Java 中常见的设计模式有很多种。以下是其中一些主要的设计模式&#xff0c;共23种&#xff1a; 1、创建型模式&#xff08;Creational Patterns&#xff09;&#xff08;5种&#xff09; 工厂方法模式&#xff08;Factory Method Pattern&#xff09; 抽象工厂模式&#xff08…

深入入IAEA底层LinkedList

✅作者简介&#xff1a;大家好&#xff0c;我是再无B&#xff5e;U&#xff5e;G&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;再无B&#xff5e;U&#xff5e;G-CSDN博客 目标&#xff1a; 1.掌握LinkedList 2.…

ESG榜单冲击数据集(2000-2022年)

参照《财经研究》中刘柏&#xff08;2024&#xff09;的做法&#xff0c;以2015年为中点&#xff0c;根据商道荣绿2015年6月公开的ESG榜单数据&#xff0c;构建ESG榜单冲击的DID数据&#xff0c;如果公司属于ESG榜单冲击的公司&#xff0c;且年份≥2015&#xff0c;则为1&#…

母婴店运用商城小程序店铺的效果是什么

母婴市场规模高&#xff0c;还可与不少行业无缝衔接&#xff0c;尤其是以90后、00后为主的年轻人&#xff0c;在备孕生育和婴儿护理前后等整体流程往往不惜重金且时间长&#xff0c;母婴用品无疑是必需品&#xff0c;商家需要多方面拓展全面的客户及打通场景随时消费路径。 运…

centos下重启redis

磁盘满了&#xff0c;发现连接不上redis了&#xff0c;我们重启一下 // 先查看下redis进程号&#xff0c;得到是8677 ps -ef | grep redis root 2642 31692 0 16:50 pts/5 00:00:00 grep --colorauto redis root 8677 1 0 4月25 ? 00:09:47 ./src/r…

华为OD机试【全量和已占用字符集】(java)(100分)

1、题目描述 给定两个字符集合&#xff0c;一个是全量字符集&#xff0c;一个是已占用字符集&#xff0c;已占用字符集中的字符不能再使用。 2、输入描述 输入一个字符串 一定包含&#xff0c;前为全量字符集 后的为已占用字符集&#xff1b;已占用字符集中的字符一定是全量…

Linux网络部分——部署YUM仓库及NFS共享服务

目录 一、yum仓库服务 1. 软件仓库的提供方式 2.如何构建并使用ftp软件仓库&#xff08;与本地yum源方法一致&#xff09; 3.如何搭建使用yum在线源&#xff1f; 4.yum软件包下载如何保存&#xff1f; 二、NFS共享存储服务 1.存储类型 2.提供共享存储的组合 3.NFS网络…

Web前端开发 - 1 - HTML5基础

HTML5基础 1. HTML文档结构和基本语法2. HTML4元素(91)1. 结构元素2. 内容元素3. 修饰元素 3. HTML4属性1. 核心属性2. 语言属性3. 键盘属性4. 内容属性5. 其他属性 4. HTML5元素1. 结构元素2. 功能元素3. 表单元素 5. HTML5属性1. 表单属性2. 链接属性3. 其他属性4. HTML5全局…

isinstance和type区别

isinstance和type区别 在python中&#xff0c;我们由两种方式来判断一个类所属的类型&#xff1a; isinstance(x, A)用来判断x是不是由类A实例化得到&#xff0c;或者由A的子类实例化变量得到 type()&#xff0c;返回这个类的类型 通过type(x) is A来判断x是不是由A来创建的&…

深入探索网络代理:SOCKS5、代理IP与HTTP在网络安全中的作用

在网络通信的广阔领域中&#xff0c;数据安全和隐私保护是绕不开的重要话题。网络代理&#xff0c;特别是SOCKS5代理、代理IP和HTTP代理&#xff0c;是实现这些保护的关键技术。它们在匿名性、数据加密和跨地域通信方面发挥着至关重要的作用。本文将深入探讨这些技术的机制、优…

山东齐鲁文化名人颜廷利:教育的本质区别重点是什么

教育的本质区别重点是‘方式’&#xff0c; 现在的教育却成为了一种‘形式’&#xff1b; 教育的核心价值关键载于‘实践’&#xff0c; 当前我们的教育观念却变成了消耗‘时间’&#xff1b; ‘读书’的原则在于‘堵疏’&#xff0c;作为汉语‘堵疏’一词&#xff0c;顾名思义…

Mongodb操作与Java(二)查询语句汇总

MongoDB概念 MongoDB 基本概念指的是学习 MongoDB 最先应该了解的词汇&#xff0c;比如 MongoDB 中的"数据库"、"集合"、"文档"这三个名词&#xff1a; 文档&#xff08;Document&#xff09;&#xff1a; 文档是 MongoDB 中最基本的数据单元&…

设计模式在JavaScript中的应用:介绍一些常见的设计模式如观察者模式,工厂模式,策略模式等,并展示如何在JavaScript中实现

1、观察者模式&#xff1a;观察者模式是一种在项目中创建可观察者的方法&#xff0c;以便在对象之间实现好的通信机制。 在JavaScript中我们可以使用EventEmitter类来实现观察者模式。 class EventEmitter {constructor() {this.events {};}on(type, listener) {this.events…

掌握学习平台中的高效学习技巧

学习在我们生活中起着至关重要的作用。随着科技的发展&#xff0c;越来越多的学习平台为我们提供了更广阔的学习机会。然而&#xff0c;要实现高效学习&#xff0c;我们需要掌握一些技巧。 规划学习目标 首先&#xff0c;一个明确的学习目标是高效学习的基础。在使用学习平台…

如何将jsp项目转成springboot项目

昨天说过&#xff0c;springboot推荐使用Thymeleaf作为前后端渲染的模板引擎&#xff0c;为什么推荐用Thymeleaf呢&#xff0c;有以下几个原因&#xff1a; 动静结合&#xff1a;Thymeleaf支持HTML原型&#xff0c;允许在HTML标签中增加额外的属性来实现模板与数据的结合。这样…

ts中type和interface的区别

面试中被问到&#xff0c;在TypeScript中&#xff0c;Type和Interface的区别这个问题。 区别 首先&#xff0c;在TypeScript中&#xff0c;Type和Interface都用于定义对象或函数的类型&#xff0c;区别如下&#xff1a; 语法不同 interface使用关键字interface来定义&#…