HTML简单介绍

news2024/11/15 2:15:17

且视他人之疑目如盏盏鬼火,大胆地去你的夜路。

1.网页

组成:文字,图片,音频,视频,超链接

2.Web标准

3.HTML

超文本标记语言

3.1HTML结构

网页可以看成是一篇文章

如:整体,头部,标题,主体

3.2HTML标签

分类:标签名,开始标签,结束标签,单标签

标签和标签的关系:嵌套和并列

网页中的固定结构是通过特点的HTML标签进行描述的

4.标签介绍

4.1排版标签

标题标签(<hn(1~6)></hn>标签)

段落标签(<p></p>)特点:段落之间有间隙,独占一行

换行标签(<br>)

水平线标(<hr>)

4.2文本格式化标签

加粗:<b></b><strong></strong>

下划线:<u></u><ins></ins>

倾斜:<i></i> <em></em>

删除线:<s></s> <del></del>

4.3媒体标签

4.3.1图片标签

<img src="" alt="当图片不可以正常加载时,显示给用户的" title=" " width=" " height="">

4.3.2 音频标签

<audio src=" " controls autoplay loop>

4.3.3视频标签

<video src=" " controls autoplay loop>

5.相对路径

(上级目录,下级目录,当前目录)

比如在src当中,需要给出路径,找到对应的资源名称

./是当前目录

../是上级目录

下级目录直接输入要进入目录名字即可

6.链接标签

<a href=" "></a>

6.1target属性




7.列表标签

使用场景:1.规整2.一行3.一列

7.1无序列表

<ul><li><li><ul>

7.2有序列表

<ol><li><li><ol>

7.3自定义列表

<dl><dt></dt><dd></dd></dl>

需要注意的是,这种形式的需要css来进行美化

8.表格标签

此时进行观察,发现还没有表格的形式

但是给表格进行相关属性的添加之后,就会有表格的形式了

8.1表格相关属性

8.2表格标题和表头单元格标签

8.3表格头部,主体,底部

8.4合并单元格

1.在代码中删除李四的成绩,然后在张三对应的成绩列中添加属性。rowspan="合并的单元格个数"

注意点:

9.input系列标签

9.1type属性值

9.2radio:单选框

9.3multiple多选文件

9.4表单域

form表单,用来建立input标签之间的关系

当type属性值为submit,reset和button时,需要form表单用来建立input标签之间的关系

10.button按钮标签

和input标签类似,但是button可以和css进行按钮美化,功能更强

11.select下拉菜单标签

select标签,下拉菜单的整体

option标签,下拉菜单的每一项

selected:下拉菜单默认选中

12.textarea文本域标签

最后是正方形,且可以进行拖拽,在css当中会禁用掉拖拽功能

在页面当中,如何做到单选框和选择项的内容都可以被选择,就要谈到我们的label标签了

13.label标签

方式2:

14.布局标签div和span

14.1没有语义的

14.2有语义的布局标签

15.常见字符实体

结构&nbsp;空格

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

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

相关文章

【KVM-4】硬件虚拟化技术(详)

前言 大家好&#xff0c;我是秋意零。 经过前面章节的介绍&#xff0c;已经知道KVM虚拟化必须依赖于硬件辅助的虚拟化技术&#xff0c;本节就来介绍一下硬件虚拟化技术。 &#x1f47f; 简介 &#x1f3e0; 个人主页&#xff1a; 秋意零&#x1f525; 账号&#xff1a;全平…

劲升逻辑与青岛港国际集装箱发展有限公司签署合作意向书,合力打造贸易互联互通新高地

合作意向书签署现场 2023 年 11 月 11 日&#xff0c;中国山东——跨境贸易数字化领域的领导者劲升逻辑与山东港口青岛港子公司青岛港国际集装箱发展有限公司在新加坡-山东经贸理事会&#xff08;简称“新鲁理事会”&#xff09;全体会议期间正式签署合作意向书&#xff0c;双…

2024怎么自学软件测试?自动化测试?测试老鸟总结,少走弯路...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、自学软件测试怎…

IDEA软件使用步骤

1.IDEA概述 IDEA全称InelliJ IDEA,是用于java语言开发的集成环境&#xff0c;它是业界公认的目前用于Java程序开发最好的工具。 集成环境&#xff1a;把代码编写&#xff0c;编译&#xff0c;执行&#xff0c;调试扽过多种功能综合到一起的开发工具。 下载&#xff1a;https…

【OpenVINO】基于 OpenVINO C# API 部署 RT-DETR 模型

基于 OpenVINO C# API 部署 RT-DETR 模型 1. RT-DETR2. OpenVINO3. 环境配置4. 模型下载与转换5. C#代码实现5.1 模型推理类实现1. 模型推理类初始化2. 图片预测API 5.2 模型数据处理类RTDETRProcess1. 定义RTDETRProcess2. 输入数据处理方法3. 预测结果数据处理方法 6. 预测结…

音频url如何下载到本地浏览器上

音频url如何下载到本地浏览器上 一、代码 一、代码 this.downloadFile(url, name)downloadFile(url, filename) {const xhr new XMLHttpRequest()xhr.open(GET, url, true)xhr.responseType blobxhr.onload function () {if (xhr.status 200) {const blob new Blob([xhr.r…

VR全景技术在城市园区发展中有哪些应用与帮助

引言&#xff1a; 在数字化时代的浪潮中&#xff0c;虚拟现实&#xff08;VR&#xff09;全景技术逐渐融入各个领域&#xff0c;也为城市园区展示带来了全新的可能性。 一&#xff0e;VR全景技术简介 虚拟现实全景技术是一种通过全景图像和视频模拟真实环境的技术。通过相关设…

ultrascale+mpsoc系列的ZYNQ中DDR4参数设置说明

ultrascalempsoc系列的ZYNQ中DDR4参数设置说明 标题1 概述标题2 讲述平台标题3 ZYNQ的DDR设置界面参数标题4 DDR参数界面说明如下 标题1 概述 本文用于讲诉ultrascalempsoc系列中的ZYNQ的DDR4的参数设置与实际硬件中的DDR选型之间的关系&#xff0c;为FPGA设计人员探明道路。 …

thinkphp8 数据库的连接

账号&#xff1a;root 密码&#xff1a;自己设置 http://localhost:888/index.php当出现这个并且能登陆就算成功了。 回到项目config/database.php .env 里面&#xff08;如果已经.example.env 改成了.env,则改下边&#xff0c;db_name改成你的数据库表名&#xff09; 多个…

响应式摄影科技传媒网站模板源码带后台

模板信息&#xff1a; 模板编号&#xff1a;540 模板编码&#xff1a;UTF8 模板颜色&#xff1a;黑白 模板分类&#xff1a;摄像、婚庆、家政、保洁 适合行业&#xff1a; 模板介绍&#xff1a; 本模板自带eyoucms内核&#xff0c;无需再下载eyou系统&#xff0c;原创设计、手…

使用SpringAOP+Redis实现接口处理幂等

文章目录 一、思路分析二、代码实战1、搭建SpringbootAOPRedis环境2、自定义注解3、切面类4、测试一下吧 一、思路分析 在调用后台接口时&#xff0c;由于用户多次点击或者说第三方重试&#xff0c;可能会导致幂等问题。 解决方案无非就是上一次请求没有处理完&#xff0c;第…

使用Tipas结合内网穿透在Ubuntu上搭建高效问题解答平台网站

文章目录 前言2.Tipask网站搭建2.1 Tipask网站下载和安装2.2 Tipask网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3 Cpolar稳定隧道&#xff08;本地设置&#xff09; 4. 公网访问测试5. 结语 前…

第八章 :如何基于Spring Boot +Mybatis 快速开发 Restful API

第八章 :如何基于Spring Boot +Mybatis 快速开发 Restful API 前言 本章知识重点:主要讲解开发人员如何利用【MybatisPlus+EasyCode插件 】快速开发Restful API ,利用节约的时间学习,养成一种正向循环的技术之道,最后达到终身学习成长! 案例基于SpringBoot 2.3.2.RELEASE…

Outlook邮件视图设置怎么修复

故障现象 Outlook邮箱显示不对 故障截图 故障原因 邮箱视图设置不对 解决方案 1、在Outlook上方工具栏找到视图按钮&#xff0c;以此选择视图→视图设置→列&#xff0c;打开选择的列 2、在视图→邮件预览里面&#xff0c;选择1行&#xff0c;在阅读格式选择靠右&#xff…

站长必读:如何巧妙应对网站攻击与提升速度

亲爱的站长们&#xff0c;您是否曾为网站被攻击而烦恼&#xff0c;或者一直想让您的网站更快速地响应用户&#xff1f;别担心&#xff0c;本文将为您揭示一项重要而有效的解决方案——CDN&#xff08;内容分发网络&#xff09;。让我们一起探讨如何从站长的角度出发&#xff0c…

【深度学习实验】网络优化与正则化(三):随机梯度下降的改进——Adam算法详解(Adam≈梯度方向优化Momentum+自适应学习率RMSprop)

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. 随机梯度下降SGD算法a. PyTorch中的SGD优化器b. 使用SGD优化器的前馈神经网络 2.随机梯度下降的改进方法a. 学习率调整b. 梯度估计修正 3. 梯度估计修正&#xff1a;动量法Momen…

Vue使用高德地图实现点击获取经纬度以及搜索功能

1. 首先在高德开放平台申请key值 2. 然后会在这个地方显示 3. 在VScode里面安装地图 yarn add amap/amap-jsapi-loader --save 4. 准备一个容器 <div id"maps"></div> <style scoped>#maps {width: 100%;height: 100%;position: relative;z-index…

2011年12月13日 Go生态洞察:从零到Go,在谷歌首页上的24小时飞跃

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

哈希竞猜游戏开发源码部署方案

随着互联网技术的发展&#xff0c;越来越多的人开始关注网络安全问题&#xff0c;而哈希算法作为一种重要的加密技术&#xff0c;在网络安全领域得到了广泛应用。其中&#xff0c;哈希竞猜游戏作为一种新型的网络安全挑战赛&#xff0c;也受到了越来越多人的关注。本文将介绍哈…

Go语言安装教程

【Go系列-1】-Go安装教程 环境提前准备 安装的时候可以选择自己的目录进行环境管理 E:\Z_Enviroment\Go创建文件夹&#xff1a; E:\Z_Enviroment\Go E:\Z_Enviroment\GoWorks E:\Z_Enviroment\GoWorks\bin E:\Z_Enviroment\GoWorks\pkg E:\Z_Enviroment\GoWorks\src环境变量…