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,弄一个超链接跳转小页面。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【项目实战】使用Yolov8 + tesseract 实现身份证信息解析(OCR) + 输入可为图片或者pdf + 完整代码 + 整体方案 + 全网首发

本项目可用于实验,毕业设计参考等。整体效果如下所示: 说明:图片来源于网络,如有侵权,请联系作者删除。 目录 一 数据集制作

WPF之多种视图切换

1&#xff0c;View切换&#xff0c;效果呈现 视图1 视图2 视图3 2&#xff0c;在Xaml中添加Listview控件&#xff0c;Combobox控件。 <Grid ><Grid.RowDefinitions><RowDefinition Height"143*"/><RowDefinition Height"30"/>&l…

Ubuntu 下串口工具:Minicom、CuteCom 和 Screen

在 Ubuntu 中&#xff0c;对于串口通信工具的选择&#xff0c;虽然没有一个绝对的 “最好用” 的排名&#xff0c;但根据用户反馈和工具的流行程度&#xff0c;Minicom、CuteCom 和 Screen 这三个工具通常被认为是较为受欢迎和实用的。 一、简介&#xff1a; Minicom&#xff…

一款功能强大的网络安全综合工具-PotatoTool

一、 简介 这款工具是一款功能强大的网络安全综合工具&#xff0c;旨在为安全从业者、红蓝对抗人员和网络安全爱好者提供全面的网络安全解决方案。它集成了多种实用功能&#xff0c;包括解密、分析、扫描、溯源等&#xff0c;为用户提供了便捷的操作界面和丰富的功能选择。 二…

英语学习笔记6——What make is it?

What make is it? 它是什么牌子的&#xff1f; make n.&#xff08;产品的&#xff09;品牌名称    v. 制作 区别&#xff1a;model n.&#xff08;产品的&#xff09;型号       n. 模型       n. 模特 make 指的是大的品牌名称&#xff0c; model 是旗下产品…

Honor of Kings QQ 1537937510

司空震到底要不要物理伤害高呢&#xff1f;还是法术伤害高呢&#xff1f;要不要出魔女和制裁引发的血案 先看下司空震的说明&#xff1a; 说下这个伙计为啥加QQ来骂我&#xff0c;因为这场当然最终是赢了&#xff0c;比赛里他一直强调司空震是物理伤害改版问题&#xff0c;然后…

Whistle Web Debugging Proxy介绍及使用

大家好&#xff0c;今天继续给大家分享一款抓包工具&#xff0c;这款抓包工具是网页的形式&#xff0c;方便多人访问同时维护。Whistle Web Debugging Proxy是一个用于HTTP、HTTPS、WebSocket等网络协议的跨平台调试工具。它可以帮助开发者对网络请求进行捕捉、分析、修改和重定…

WPF/C#:ProgressBar的基本使用

前言 在日常开发过程中&#xff0c;如果遇到需要一段时间才能完成的任务&#xff0c;通常需要给用户一个进度条提示。今天给大家介绍的是WPF/C#中ProgressBar的基本使用。 ProgressBar的介绍 在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;Pr…

Kafka应用Demo:多消费者实例按主题订阅消费消息,增强系统可靠性

环境搭建 在本地启动两个消费者进程&#xff0c;配置同的群组&#xff08;neo1&#xff09;, 订阅同一个主题消费消息。 生产者和消费者代码与《Kafka应用Demo&#xff1a;按主题订阅消费消息》相同。 测试步骤 生产者发送多个数字消息到kafka队列&#xff0c; 可以看到只有…

MouseBoost PRO mac中文激活版:专业鼠标助手

MouseBoost PRO mac鼠标性能优化软件&#xff0c;以其强大的功能和智能化的操作&#xff0c;助您轻松驾驭鼠标&#xff0c;提高工作效率。 MouseBoost PRO支持自定义快捷键设置&#xff0c;让您轻松实现快速切换应用程序、打开特定文件、调节音量大小等操作。自动识别窗口功能则…

运行npm install时报错“npm ERR! code 1”

目录 一、问题分析 二、解决问题 一、问题分析 有registry淘宝镜像地址过期的问题&#xff0c;改一下地址 npm淘宝镜像过期解决办法-CSDN博客主要问题是node-sass和sass-loader版本冲突 打开cmd&#xff0c;输入"node -v"查看node版本 我的版本是16&#xff0c;应…

java项目之智慧图书管理系统设计与实现(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的智慧图书管理系统设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 智慧图书管理…

elk + filebeat 8.4.3 收集nginx日志(docker部署)

ELK filebeat docker部署 一、 elasticsearch部署1、运行elasticsearch临时配置容器2、拷贝文件目录到本地3、检查elasticsearch.yml4、删除之前elastic&#xff0c;运行正式容器5、docker logs记录启动日志 二、部署kibana1、运行kibana临时配置容器2、docker拷贝配置文件到本…

Java 11 到 Java 8 的兼容性转换

Java 11 到 Java 8 的兼容性转换 欲倚绿窗伴卿卿&#xff0c;颇悔今生误道行。有心持钵丛林去&#xff0c;又负美人一片情。 静坐修观法眼开&#xff0c;祈求三宝降灵台&#xff0c;观中诸圣何曾见&#xff1f;不请情人却自来。 入山投谒得道僧&#xff0c;求教上师说因明。争奈…

HFSS学习-day3-HFSS的工作界面

工作界面也称为用户界面&#xff0c;是HFSS软件使用者的工作环境:了解、熟悉这个工作环境是掌握HFSS软件使用的第一步 HFSS工作环境介绍 1.HFSS工作界面简单的组成说明2.工作界面中各个工作窗口功能主菜单工具栏项目管理窗口属性窗口信息管理窗口进程窗口三维模型窗口 3.HFSS主…

【qt】动态属性(下)

动态属性目录 一.最简单的属性二.访问类的所有属性三.运行时添加属性&#xff08;动态属性&#xff09;★四.总结 一.最简单的属性 想要对一个数据成员进行读和写我们一般都会使用set或者get这种类型的自定义的函数去间接访问&#xff0c;且使用非常的频繁。 因此咱们有一个最…

基于PSO粒子群优化的配电网可靠性指标matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 PSO算法应用于配电网优化的基本原理 5.完整程序 1.程序功能描述 基于PSO粒子群优化的配电网可靠性指标matlab仿真&#xff0c;指标包括saifi, saidi, caidi, aens四个。 2.测试软件版本…

【CTF Web】XCTF GFSJ0480 simple_js Writeup(JS分析+ASCII码)

simple_js 小宁发现了一个网页&#xff0c;但却一直输不对密码。(Flag格式为 Cyberpeace{xxxxxxxxx} ) 解法 查看网页源代码。 function dechiffre(pass_enc){var pass "70,65,85,88,32,80,65,83,83,87,79,82,68,32,72,65,72,65";var tab pass_enc.split(,);var …

VSCode-vue3.0-安装与配置-export default简单例子

文章目录 1.下载VSCode2.修改语言为中文3.辅助插件列表4.vue3模板文件简单例子5.总结 1.下载VSCode 从官网下载VSCode&#xff0c;并按下一步安装成功。 2.修改语言为中文 点击确认修改&#xff0c;如下图所示&#xff1a; 或者打开命令面板&#xff1a;输入Configure Displ…

93、动态规划-最长回文子串

思路 首先从暴力递归开始&#xff0c;回文首尾指针相向运动肯定想等。就是回文&#xff0c;代码如下&#xff1a; public String longestPalindrome(String s) {if (s null || s.length() 0) {return "";}return longestPalindromeHelper(s, 0, s.length() - 1);…