HTML简单介绍

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

目录

1.网页

2.Web标准

3.HTML

3.1HTML结构

3.2HTML标签​编辑

4.标签介绍

4.1排版标签

4.2文本格式化标签

4.3媒体标签

4.3.1图片标签

4.3.2 音频标签

4.3.3视频标签

5.相对路径

6.链接标签

6.1target属性

7.列表标签

7.1无序列表

7.2有序列表

7.3自定义列表

8.表格标签

8.1表格相关属性

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

8.3表格头部,主体,底部

8.4合并单元格

9.input系列标签

9.1type属性值

9.2radio:单选框

9.3multiple多选文件

9.4表单域

10.button按钮标签

11.select下拉菜单标签

12.textarea文本域标签

13.label标签

14.布局标签div和span

14.1没有语义的

14.2有语义的布局标签

15.常见字符实体


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.mzph.cn/news/144100.shtml

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

相关文章

爬取动态网页内容的库

爬取动态网页内容时&#xff0c;传统的 Python 爬虫库&#xff08;如 Requests、BeautifulSoup&#xff09;可能无法直接获取 JavaScript 动态生成的内容。为了处理这种情况&#xff0c;你可以使用一些特别设计的库&#xff0c;它们能够模拟浏览器行为&#xff0c;执行 JavaScr…

图论15-有向图-环检测+度数+欧拉回路

文章目录 1. 有向图设计1.1 私有变量标记是否有向1.2 添加边的处理&#xff0c;双向变单向1.3 删除边的处理&#xff0c;双向变单向1.4 有向图的出度和入度 2 有向图的环检测2.1 普通的算法实现换检测2.2 拓扑排序中的环检测 3 欧拉回路 1. 有向图设计 1.1 私有变量标记是否有…

燃气管网监测系统|全面保障燃气安全

根据新华日报的报道&#xff0c;2023年上半年&#xff0c;我国共发生了294起燃气事故&#xff0c;造成了57人死亡和190人受伤&#xff0c;燃气事故的发生原因有很多&#xff0c;其中涉及到燃气泄漏、设备故障等因素。因此&#xff0c;加强燃气安全管理&#xff0c;提高城市的安…

在 Kubernetes 上运行 Elasticsearch

Kubernetes&#xff08;快速&#xff09;入门 Kubernetes 是一种容器编排技术&#xff0c;这只是一种奇特的说法&#xff0c;它可以帮助您管理和运行打包的应用程序。它基本上看起来像这样&#xff1a; 库伯内特斯架构 Kubernetes 基本架构 您的应用程序&#xff08;例如博客软…

vue、react中虚拟的dom

React中虚拟DOM的例子&#xff1a; 下面是一个使用React创建的简单的计数器组件&#xff1a; import React, { Component } from react;class Counter extends Component {constructor(props) {super(props);this.state {count: 0};}handleClick () > {this.setState({c…

httpClient超时时间详解与测试案例

使用httpclient作为http请求的客户端时&#xff0c;我们一般都会设置超时时间&#xff0c;这样就可以避免因为接口长时间无响应或者建立连接耗时比较久导致自己的系统崩溃。通常它里面设置的几个超时时间如下&#xff1a; RequestConfig config RequestConfig.custom().setCo…

电磁场与电磁波part1--矢量分析

目录 1、方向导数 2、散度定理&#xff08;高斯定理&#xff09; 3、散度与旋度的比较 4、旋度定理&#xff08;斯托克斯定理&#xff09; 5、关于点乘、叉乘、梯度、散度、旋度的计算 ~~~~~~~~~~~~~~~~~~~~~~~~ 确认过眼神&#xff0c;是我看不懂的 ~~~~~~~~~~~~~~~~…

IDEA没有Add Framework Support解决办法

点击File—>Settings 点击第一个设置快捷键 点击apply和ok即可 我们要点击一下项目&#xff0c;再按快捷键ctrlk 即可

C++入门(2)—函数重载、引用

目录 一、函数重载 1、参数类型不同 2、参数个数不同 3、参数顺序不同 4、 链接中如何区分函数重载 二、引用 1、规则 2、特征 3、使用场景 做参数 做返回值 4、常引用 5、传值、传引用效率比较 6、引用和指针的区别 接上一小节C入门(1)—命名空间、缺省参数 一…

Python 如何实现适配器设计模式?什么是适配器(Adapter)设计模式?

什么是适配器设计模式&#xff1f; 适配器&#xff08;Adapter&#xff09;设计模式是一种结构型设计模式&#xff0c;它允许接口不兼容的类之间进行合作。适配器模式充当两个不兼容接口之间的桥梁&#xff0c;使得它们可以一起工作&#xff0c;而无需修改它们的源代码。 主要…

JXLS 导出多sheet,带页眉页脚

/*** 生成多sheet Excel* 带自定义页眉页脚** param templatePath* param sheetList* return* throws IOException*/public static byte[] generateMultiSheet(String templatePath, List<JxlsHelper2.SheetContext> sheetList) throws IOException {ByteArrayOutputStre…

C++ 基础

准备工具Vscode或者Clion或者Dev C或者Vs studio 和 MSYS2 是C跨平台的重要工具链. 基础一 准备工作安装MSYS2软件 创建文件 一、基本介绍1.1C源文件1.2 代码注释1.3变量与常量1.3.1变量1.3.2 常量1.3.3 二者的区别&#xff1a; 1.4 关键字和标识符 二、数据类型2.1 基本数据类…

Flink CDC

1、Flink CDC的介绍&#xff1a; 是一种技术&#xff0c;可以帮助我们实时的捕获数据库中数据的变化&#xff0c;并将这些变化的数据以流的形式传输到其他的系统中进行处理和存储。 2、Flink CDC的搭建&#xff1a; 1、开启mysql的binlog功能&#xff1a; # 1、修改mysql配置…

C/C++ 实现获取硬盘序列号

获取硬盘的序列号、型号和固件版本号&#xff0c;此类功能通常用于做硬盘绑定或硬件验证操作&#xff0c;通过使用Windows API的DeviceIoControl函数与物理硬盘驱动程序进行通信&#xff0c;发送ATA命令来获取硬盘的信息。 以下是该程序的主要功能和流程&#xff1a; 定义常量…

2023版Idea创建JavaWeb时,右键new没有Servlet快捷键选项

问题&#xff1a;右键时&#xff0c;没有创建servlet的快捷键&#xff0c;如下图&#xff1a; 解决方法&#xff1a; 1.打开idea&#xff0c;点击File>settings(设置)&#xff0c;进入settings页面&#xff0c;如下 从上图中的Files选项中没看到有servlet选项&#xff0c;…

2023NOIP A层联测32

2023NOIP A层联测32 文章目录 2023NOIP A层联测32A flandreB.meirinC.sakuyaD. 红楼 ~ Eastern Dream总结 A flandre 有 n n n 种烟花&#xff0c;每种烟花有两个参数 a &#xff0c; b a &#xff0c; b a&#xff0c;b&#xff0c;你要构造一种燃放顺序&#xff0c;使得 …

正则表达式入门教程

一、本文目标 让你明白正则表达式是什么&#xff0c;并对它有一些基本的了解&#xff0c;让你可以在自己的程序或网页里使用它。 二、如何使用本教程 文本格式约定&#xff1a;专业术语 元字符/语法格式 正则表达式 正则表达式中的一部分(用于分析) 对其进行匹配的源字符串 …

Rancher 容器中使用 jmap 工具导出内存日志

提升容器权限 编辑容器工作负载&#xff0c;在【安全/主机设置】中选中【特权模式】的【是&#xff1a;容器具有所有主机访问权限】 进入容器命令行&#xff0c;执行 jmap 命令 # 获取服务 pid ps -ef | grep java # 执行 jmap 导出内存日志 jmap -dump:live,formatb,file/hom…

线程锁的应用与示例代码

为了解决这个问题&#xff0c;可以使用线程锁来确保在提取zip文件中的每个文件时&#xff0c;同一时间只有一个线程可以访问文件。这样可以避免多个线程同时访问和写入文件&#xff0c;从而解决race condition的问题。以下是修改后的示例代码&#xff1a; python import reque…

提升pip速度!设置pip全局镜像源,速度飞起!

文章目录 💢 问题 💢💯 解决方案 💯🐾 镜像源🐾 镜像全局配置🍄 Windows系统🍄 Linux和macOS系统🍄 添加环境变量的方式💢 问题 💢 由于“某些网络限制”原因,我们在使用pip安装python模块的时候速度会比较慢,这个时候我们就需要用到一些镜像源,本文将…