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.rhkb.cn/news/326536.html

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

相关文章

2024数维杯数学建模A题B题C题思路+模型+代码(开赛后第一时间更新)

2024数维杯数学建模A题B题C题思路模型代码&#xff08;开赛后第一时间更新&#xff09; https://mbd.pub/o/bread/ZpWakpdq https://mbd.pub/o/bread/ZpWakpdq 2024年第九届数维杯大学生数学建模挑战赛参赛规则 竞赛要求及论文提交方式; ①本次参赛作品统一在线提交到竞赛…

软件需求工程复习——知识点

一&#xff0c;单选题&#xff08;20分&#xff09; 二&#xff0c;判断题&#xff08;10分&#xff09; 三&#xff0c;简答题&#xff08;20分&#xff09; 四&#xff0c;分析与设计题&#xff08;50分&#xff09; 一、导论 1、应用型软件的模拟特性 应用型软件在“模拟”…

基于无监督学习算法的滑坡易发性评价的实施(k聚类、谱聚类、Hier聚类)

基于无监督学习算法的滑坡易发性评价的实施 1. k均值聚类2. 谱聚类3. Hier聚类4. 基于上述聚类方法的易发性实施本研究中的数据集和代码可从以下链接下载: 数据集实施代码1. k均值聚类 K-Means 聚类是一种矢量量化方法,最初来自信号处理,旨在将 N 个观测值划分为 K 个聚类,…

Web 安全漏洞之文件上传

目录 文件上传漏洞及危害 文件名 HTML 和 SVG 软链 服务器磁盘 防御方法 网络安全学习路线 &#xff08;2024最新整理&#xff09; 学习资料的推荐 1.视频教程 2.SRC技术文档&PDF书籍 3.大厂面试题 特别声明&#xff1a; 文件上传漏洞及危害 文件上传漏洞…

基于百川大语言模型的RSS新闻过滤应用【云服务器+公网网页,随时随地看自己DIY订阅的新闻内容】

背景 目前从公众号、新闻媒体上获得的新闻信息,都是经过算法过滤推荐的,很多时候会感到内容的重复性和低质量,因为他们也要考虑到自己的利益,并非完全考虑用户想要的、对用户有价值的信息。这时,如果要获取自己认为重要的信息,定制化开发自己的筛选算法更好。 效果 素材…

计算机网络(第八版 谢希仁 编著) 期末复习大纲

一.每章总结 第一章&#xff1a;分组交换&#xff0c;计网定义、范围划分&#xff0c;性能指标&#xff0c;五层体系结构&#xff0c;TCP/IP体系结构 第二章&#xff1a;物理层&#xff0c;码元&#xff0c;基带调制(数字信号->数字信号&#xff0c;也叫编码)&#xff0c;带…

本来还挺喜欢……

前阵子买了个天空星开发板&#xff0c;到手之后发觉不对劲。 之前我们玩玩开发板都是用的面包板的&#xff0c;就算是ESP那种比较宽的板子用两个面包板拼一下也勉强可以用。 但是天空星它的引脚是分为两组&#xff0c;每组有两排&#xff0c;如果我们还是直接使用面包板的话&a…

浅析安全用电监控系统在工厂的研究与应用论述

摘 要&#xff1a;随着社会时代的发展&#xff0c;人们的安全意识越来越强烈&#xff0c;在人们生活和工作中离不开各种用电设备&#xff0c;用电设备的安全使用是保障人们生命安全的重要内容。工厂因自身厂内工作环境的特殊性&#xff0c;用电设备的种类多且复杂&#xff0c;如…

Meilisearch vs Elasticsearch

2个搜索引擎的比较&#xff08;官方说法&#xff09;&#xff1a;Meilisearch vs Elasticsearch Elasticsearch 做为老牌搜索引擎&#xff0c;功能基本满足&#xff0c;但复杂&#xff0c;重量级&#xff0c;适合大数据量。 MeiliSearch 设计目标针对数据在 500GB 左右的搜索需…

【知识碎片】2024_05_13

本文记录了两道代码题【自除数】和【除自身以外数组的乘积】&#xff08;利用了前缀积和后缀积&#xff0c;值得再看&#xff09;&#xff0c;第二部分记录了关于指针数组和逗号表达式的两道选择题。 每日代码 自除数 . - 力扣&#xff08;LeetCode&#xff09; /*** Note: T…

软件2班20240513

第三次作业 package com.yanyu;import java.sql.*; import java.util.ResourceBundle;public class JDBCTest01 {public static void main(String[] args) {ResourceBundle bundle ResourceBundle.getBundle("com/resources/db");// ctrl alt vString driver …

Unity打开安卓设备不同的设置面板

1&#xff0c;打开安卓设备不同的设置面板&#xff0c;我还贴心的把Android官网的链接放下面了 2&#xff0c;使用也很方便&#xff1a;unity按钮事件上拖这个脚本&#xff0c;注册MyOpenAndroidSettings方法&#xff0c;参数 填 和枚举值相应的数字 // 功能&#xff1a;打开…

贪吃蛇游戏(C语言实现)

目录 游戏效果展示文件代码的展示test.cSnake.cSnake.h 下一个坐标不是食物 游戏效果展示 QQ录屏20240507163633 文件 代码的展示 test.c #define _CRT_SECURE_NO_WARNINGS#include<locale.h> //设置本地化 #include"Snake.h"//游戏的测试逻辑 void test() {…

2024最佳项目管理软件整理

在项目管理领域&#xff0c;选择合适的任务管理软件对于提高团队效率和确保项目顺利进行至关重要。 以下是一些优秀的项目任务管理软件&#xff0c;以及它们的官网地址和特点介绍 序号软件名称官网地址特点介绍1zz-planhttps://zz-plan.com/一款在线甘特图协作软件&#xff0c…

c# - - - winform程序四个角添加圆角效果

winform 给窗体四个角添加圆角效果。 在窗体 Load 事件中添加如下代码&#xff1a; // 创建了一个圆角矩形的路径&#xff0c;并将其设置为控件的形状 System.Drawing.Drawing2D.GraphicsPath path new System.Drawing.Drawing2D.GraphicsPath(); int radius 30; path.AddAr…

ssm123基于java web的网上书城系统的设计与实现+vue

基于java web的网上书城系统的设计与实现vue 摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff0c;商品交易当然也不能排除在外&#xff0c;随着商品交易管理的不断成熟&#xff0c;它彻底改变了…

基于FPGA的视频矩阵切换方案

一、单个显示设备的系统方案&#xff1a;会议室只有1个显示设备 会议室的信号源有很多&#xff0c;但是显示设备只有1个&#xff0c;这个时候最佳方案是使用切换器。 &#xff08;1&#xff09;切换器&#xff08;控制方式&#xff1a;遥控器、软件、机箱面板、中控&#xff…

DS高阶:B树系列

一、常见的搜索结构 1、顺序查找 时间复杂度&#xff1a;O(N) 2、二分查找 时间复杂度&#xff1a;O(logN) 要求&#xff1a;&#xff08;1&#xff09;有序 &#xff08;2&#xff09;支持下标的随机访问 3、二叉搜索树&#xff08;BS树&#xff09; 时间复杂…

外卖系统微信小程序支付

微信小程序支付时序图 其中第9.步骤就是微信小程序前端调用wx.requestPayment

Python运维之协程

目录 一、定义协程 二、并发 三、异步请求 协程是一种轻量级的线程&#xff0c;它通过保存和恢复寄存器上下文和栈来实现调度切换&#xff0c;从而保留函数执行的状态。 这种机制使得协程在处理I/O密集型任务时效率较高&#xff0c;因为它们可以在I/O操作期间让出CPU&#…