前端基础知识html

news2024/9/20 19:50:42

一.基础标签


1.<h1>-<h6>:定义标题,h最大,h最小
2.<font>:定义文本的字体,尺寸,颜色
3.<b>:定义粗体文本
4.<i>:定义斜体文本
5.<u>:定义文本下划线
6.<center>:定义文本居中
7.<p>:定义段落
8.<br>:定义折行
9.<hr>:定义水平线

                             1.定义标题

7def66c14a77423aa84332fb8e34ee3b.png

 运行结果

2a35efb352c64d6687a40379cafec107.png

 

  2.定义水平分割线7a2fd40dba0d41fc9a4335ebd9a79878.png

 运行结果:086ae01cbbfe4263936114b335140228.png

 3.定义文本的字体,尺寸,颜色e89cf6a9bf404b9694b365d58e72d0f9.png

 运行结果:

02b1ff0e0c3a4215a99ebd3e9feda9af.png

 

        4.段落标签,单独占一行7999d4ca99a344ed9edf54f6bef173e5.png

 运行结果:a8b0d24e8aaa448e90195d2dc6d7bbfc.png

 

       5.定义粗体/斜体/下划线,删除线文本be2e68807e9c4d849ff93f40c8a3d13b.png

 运行结果:cd2bb90be45c40d28a8c6f12400edf80.png

                二.图片,音频,视频标签

1.img:定义图片
①src:规定显示图像的URL
②height:定义图像的高度
③width定义图像的宽度

2.audio:定义音频。支持的音频格式:MP3,WAV,OGG
①src:规定音频的URL
②controls:显示播放控件

3.video:定义视频。支持的音频格式:MP3,WedbM,OGG
①src:规定视频的URL
②controls:显示播放控件

1.图片a5b76ebe15e34bacb0b4a16b6083bf7e.png

 运行结果:3d1f8b23e35d48f8b636cb0b8e93286c.jpg

   2.音频,视频be676e82a7f242bba2fa384647639ec5.png

 运行结果: 0314866bdf1f45acaf45662fb66dae04.jpg

 注意:尺寸问题,不然就是像这样,太大了,不美观。b0b89b3c8c6f48a8b1b88d23da002225.png

 解决办法:所有我们需要设置高和宽

72fbe45d740542409fd9ff4067ae07dc.png

 运行结果9b86a4c2c53e47adb7f72d134c3591ec.jpg

 绝对路径展示步骤:

第1步,打开浏览器,找到百度,随便一张图片(自己喜欢的)

f6048c65ec3840c7bad35280f34239f8.jpg

 第2步选择复制图片地址,这个就是它的绝对路径了。

第3步,去vsdeco里面运行

d6e0079cb8d94d328b0140c563ab2498.png

运行结果:

6609be39abcb4a62bba7b44c211c5af2.png

                      3.超链接标签

超链接标签:<a>定义超链接,用于链接到另一个资源。
①href:指定访问资源的URL
②target:指定打开资源的方式。
a:_self:默认值,在当前页面打开。
b:_blank:在空白页面打开

05d2fa0c8e0d4d1ca57b0f79ee8b50a9.png

 37cd7ea7936e44ce9ab8970084d66bdf.png

 运行结果:

2d0890084b184ec0a0d8d6cef9a5319e.png

                         4.列表标签


<li>:定义列表项
<ol>:定义有序列表用这个
<ul>:定义无序列表用这个

例子:
有序列表(order list):
<ol>
      <li>咖啡</li>
      <li>茶</li>
      <li>牛奶</li>
</ol>
无序列表:
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>

如图所示:5b2b4fa6b8b94095bc9eaf07465e68f8.png

 运行结果:

dc22e65b438e49d9b6966be688e90e29.png

                             5.表格标签
1.table:定义表格
①borderz规定表格边框的宽度
②.width:规定表格的宽度③cellspacing:规定单元格之间的空白。
2.定义行
①align:定义表格行的内容对齐(center居中)
3.定义单元格:
①.rowspan:规定单元格可横跨的行数
②colspan:规定单元格可横跨的列数
1.<table>定义表格
2.<tr>定义行
3.<td>定义单元表格
4.<th>:定义表格单元格

1d65029f48824c9cad49c85b56a197c2.png

a833696b33784539b7380af752bccde0.png 

 运行结果:bd8bdb7628634c8697248c95b7849a11.png

其他效果展示代码如图9a44794c37c241c8abeeb58f7a0c0b43.png

 1a49796174de49c1802b5582b6472479.png

 其他代码运行结果总图:58c6eac05d844cf79f0d7a731d83c3ff.png

                       6.布局标签

布局标签:
①<div>:定义一个html文档中的一个区域部分,经常与CSS一起使用,用来布局网页
②<span>:用于组合行内元素

78d36b917ca94e8a96be0464eced7827.png

 运行结果如图e3bfadc5f1b848698d34e62f16cb8939.png

                        7.表单标签


表单:在网页中主要负责数据采集功能。
使用<form>标签定义表单单项(元素):不同类型的input元素,下拉列表,文本域等。

标签:
1.<form>:定义表单
2.<imput>:定义表单项,通过type控制输入形式
3.<label>:为表单项定义标注
4<select>:定义下拉列表
5<option>:定义下拉列表的列表项
6<textarea>:定义文本域

<form>:定义表单
①action:规定当提交表单时向何处发送表单数据的方式
②method:规定发送表单数据的方式
a:
get:浏览器会将数据直接附在表单的action URL之后。大小有限制。
b:
post:浏览器会将数据放到http请求消息体中。大小无限制391c931fb1f74086bb3332d3ecbee43d.png

 运行结果:28517fd7c6f74f22a94e7f296df5c03e.png

                   8.表单项标签-表单项(番外篇)

表单项标签-表单项:
①<input>:表单项,通过type属性控制输入形式。
②<select>:定义下拉列表,<option>定义列表项。
③<textarea>:文本域

type取值:
①text:默认值,定义单行的输入字段
②password:定义密码
③radio:定义单项按钮
④checkbox:定义复选框
⑤file:定义文件上传按钮
⑥hidden:定义隐藏的输入字段
⑦submit:定义提交按钮,提交按钮会把表单数据发送到服务器。
⑧reset:定义重置按钮,重置按钮会清除表单中的所有数据
⑨button:定义可点击按钮d33697393b3b491198ce79eaf6255d30.png

 4159e5eca0834cc089d1517e7b65733d.png

 f9c5234c13c043e1955f86f5838d08c6.png

 9bc3abe3f70e49a88c8ac2c488828da8.png

运行结果:e05536d8aaab49baa83ac97212a92ee0.png

 

 

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

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

相关文章

SPDZ基础使用手册(深度学习视角)

基本类型 深度学习中最常使用的便是秘密定点数sfix&#xff0c;有关定点数的高级运算协议请参阅Paper: Secure Computation With Fixed-Point Numbers. 容器类型 SPDZ的深度学习框架主要基于TensorFlow实现&#xff0c;其中使用的容器是张量Tensor&#xff0c;在库中的定义如下…

如何提bug?

很多公司都有提bug的标准&#xff0c;对于新人刚介入测试行业时&#xff0c;提bug的时候&#xff0c;描述的清晰与否就很重要&#xff0c;那一个很明朗清晰的bug应该包含那些呢&#xff1f; bug包含的要素有那些&#xff1f;&#xff08;以jira工具为例&#xff09; 1、项目名…

Parade Series - SVG Resource

iconfont https://www.iconfont.cn/?spma313x.search_index.i3.2.74e53a819tkkcG音符 <div class"form-group"><a href"Javascript:reload();" class"btn btn-icon btn-outline-light btn-block" style";"><svg t&q…

docker logs 查找日志常用命令

docker logs 是什么 docker logs 是 Docker 命令行工具提供的一个命令&#xff0c;用于查看容器的日志输出。它可以显示容器在运行过程中生成的标准输出&#xff08;stdout&#xff09;和标准错误输出&#xff08;stderr&#xff09;&#xff0c;帮助用户诊断容器的行为和排查…

Spring boot 发送文本邮件 和 html模板邮件

Spring boot 发送文本邮件 和 html模板邮件 提示&#xff1a;这里使用 spring-boot-starter-mail 发送文本邮件 和 html模板邮件 文章目录 Spring boot 发送文本邮件 和 html模板邮件一、开启QQ邮箱里的POP3/SMTP服务①&#xff1a;开启步骤 二、简单配置①&#xff1a;引入依赖…

【Linux 驱动基础】Linux platform平台设备驱动

# 前置知识 总线驱动模型简介&#xff1a; 总线是处理器与一个或者多个设备之间的通道&#xff0c;在设备模型中&#xff0c;所有的设备都是通过总线相连&#xff0c;当然也包括虚拟的 platform 平台总线。 总线驱动模型中有三要素&#xff1a; 1. 总线 /*** struct bus_ty…

RTSP应用:实现视频流的实时推送

在实现实时视频流推送的项目中&#xff0c;RTSP&#xff08;Real Time Streaming Protocol&#xff09;协议扮演着核心角色。本文将指导你通过安装FFmpeg软件&#xff0c;下载并编译live555&#xff0c;以及配置ffmpeg进行视频流推送&#xff0c;来实现一个基本的RTSP流媒体服务…

05-JavaScript对象

1. 对象 1.1 对象的相关概念 什么是对象&#xff1f; 在 JavaScript 中&#xff0c;对象是一组无序的相关属性和方法的集合&#xff0c;所有的事物都是对象&#xff0c;例如字符串、数值、数组、函数等。 对象是由属性和方法组成的。 属性&#xff1a;事物的特征&#xff0c;…

Fantasy Forest Environment

此包包含120多个预制件,您需要创建风格化的森林环境:从树木、灌木丛到岩石和蘑菇。演示场景有夏季、秋季和冬季变体! 下载:​​Unity资源商店链接资源下载链接 效果图:

Java八股文(JVM)

Java八股文のJVM JVM JVM 什么是Java虚拟机&#xff08;JVM&#xff09;&#xff1f; Java虚拟机是一个运行Java字节码的虚拟机。 它负责将Java程序翻译成机器代码并执行。 JVM的主要组成部分是什么&#xff1f; JVM包括以下组件&#xff1a; ● 类加载器&#xff08;ClassLoa…

Linux应用实战之网络服务器(三)CSS介绍

0、前言 准备做一个Linux网络服务器应用实战&#xff0c;通过网页和运行在Linux下的服务器程序通信&#xff0c;这是第三篇&#xff0c;介绍一下CSS&#xff0c;优化上一篇文章中制作的HTML页面。 1、CSS常用语法 CSS&#xff08;层叠样式表&#xff09;是用于描述HTML或XML…

数据库原理与应用(SQL Server)笔记 关系数据库

目录 一、关系数据库的基本概念&#xff08;一&#xff09;关系数据库的定义&#xff08;二&#xff09;基本表、视图&#xff08;三&#xff09;元组、属性、域&#xff08;四&#xff09;候选码、主码、外码 二、关系模型三、关系的完整性&#xff08;一&#xff09;实体完整…

Android Studio控制台输出中文乱码问题

控制台乱码现象 安卓在调试阶段&#xff0c;需要查看app运行时的输出信息、出错提示信息。 乱码&#xff0c;会极大的阻碍开发者前进的信心&#xff0c;不能及时的根据提示信息定位问题&#xff0c;因此我们需要查看没有乱码的打印信息。 解决步骤&#xff1a; step1: 找到st…

阿里通义千问Qwen1.5开源MoE模型

介绍 2024年3月28日&#xff0c;阿里团队推出了Qwen系列的首个MoE模型&#xff0c;Qwen1.5-MoE-A2.7B。它仅拥有27亿个激活参数&#xff0c;但其性能却能与当前最先进的70亿参数模型&#xff0c;如Mistral 7B和Qwen1.5-7B相媲美。相较于包含65亿个Non-Embedding参数的Qwen1.5-…

电脑关机速度很慢怎么解决?

给电脑关机&#xff0c;总是要很久才完全关闭。这是因为计算机运行了太长时间&#xff0c;并且打开的程序太多&#xff0c;则关闭时间超过十秒钟&#xff0c;这是正常的现象。还有就是计算机升级或补丁程序更新也将导致计算机缓慢关闭。此时&#xff0c;建议耐心等待关闭完成。…

SCI论文改写、防查重神器QuillBot如何付费高级版本?

写论文时候的修改软件QuillBot&#xff0c;正常的文献里的句子帖进去&#xff0c;直接给各种倒装和各种同义词替换至少10次&#xff0c;保证查不出来是别人的句子。 QuillBot是一个帮助改写内容的转述工具。 Quillbot让你的内容重组变得简单。 转述是指你用不同的词来表达&a…

深度学习每周学习总结P3(天气识别)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 数据链接 提取码&#xff1a;o3ix 目录 0. 总结1. 数据导入部分数据导入部分代码详解&#xff1a;a. 数据读取部分a.1 提问&#xff1a;关…

Nginx【概述:网页服务器 并发能力强】【常见命令】【部署实战】【反向代理】

Nginx-概述 介绍下载和安装下载安装重点目录和文件如下 Nginx-命令常用命令1). 查看版本2). 检查配置文件3). 启动4). 停止5). 重新加载 环境变量配置 Nginx-应用配置文件结构部署静态资源介绍测试1). 将静态资源上传到 /usr/local/nginx/html 目录2). 启动nginx3). 访问4). 配…

Linux命令及中间件安装

一.Linux简介 1.Linux操作系统概述 Linux是基于Unix的开源免费的操作系统&#xff0c;由于系统的稳定性和安全性几乎成为程序代码运行的最佳系统环境。Linux是由Linus Torvalds&#xff08;林纳斯托瓦兹&#xff09;起初开发的&#xff0c;由于源代码的开放性&#xff0c;现在…

Flask后端框架搭建个人图库

Hello&#xff0c;我是"小恒不会java" 前言 最近发现自己有一些站点图片丢失&#xff0c;原来是用了人家的链接。考虑到使用对象存储容易被刷流量&#xff0c;可以用flask这种轻量级框架快速实现网页登陆操作&#xff0c;行&#xff0c;也就不考虑正式生产环境那些复…