前端基础知识html

一.基础标签


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

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

相关文章

3.28作业

#include <iostream> using namespace std; // 构造函数示例 class MyClass { private: int data; public: // 默认构造函数 MyClass() { data 0; } // 带参数的构造函数 MyClass(int value) { data value; } …

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

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

Vite 为什么比 Webpack 快?

目录 1. Webpack 的构建原理 2. Script 的模块化&#xff08;主流浏览器对 ES Modules 的支持&#xff09; 3. Webpack vs Vite 开发模式的差异 对 ES Modules 的支持 底层语言的差异 热更新的处理 1. Webpack 的构建原理 前端之所以需要类似于 Webpack 这样的构建工具&…

发票是扫码验真好,还是OCR后进行验真好?

随着科技的进步&#xff0c;电子发票的普及使得发票的验真方式也在不断演进。目前&#xff0c;我们常见的发票验真方式主要有两种&#xff1a;一种是扫描发票上的二维码进行验真&#xff0c;另一种是通过OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别…

线性代数 - 应该学啥 以及哪些可以交给计算机

AI很热&#xff0c;所以小伙伴们不免要温故知新旧时噩梦 - 线代。 &#xff08;十几年前&#xff0c;还有一个逼着大家梦回课堂的风口&#xff0c;图形学。&#xff09; 这个真的不是什么美好的回忆&#xff0c;且不说老师的口音&#xff0c;也不说教材的云山雾绕&#xff0c;单…

win10微软拼音输入法 - bug - 在PATH变量为空的情况下,无法输入中文

文章目录 win10微软拼音输入法 - bug - 在PATH变量为空的情况下&#xff0c;无法输入中文概述笔记实验前提条件100%可以重现 - 无法使用win10拼音输入法输入中文替代的输入法软件备注END win10微软拼音输入法 - bug - 在PATH变量为空的情况下&#xff0c;无法输入中文 概述 在…

linux 内存介绍

大致共有四类&#xff1a;VSS、RSS、PSS、USS &#xff0c;通常情况下&#xff0c;VSS > RSS > PSS > USS 1.VSS(Virtual Set Size)虚拟耗用内存&#xff08;包含共享库占用的内存&#xff09; VSS表示一个进程可访问的全部内存地址空间的大小。这个大小包括了进程已…

Linux:Jenkins:参数化版本回滚(6)

上几章我讲到了自动集成和部署 Linux&#xff1a;Jenkins全自动持续集成持续部署&#xff08;4&#xff09;-CSDN博客https://blog.csdn.net/w14768855/article/details/136977106 当我们觉得这个页面不行的时候&#xff0c;需要进行版本回滚&#xff0c;回滚方法我这里准备了…

Memcached非关系型数据库介绍

使用背景 Memcached 不是一个数据库&#xff0c;而是一个高性能的分布式内存对象缓存系统。它主要用于减轻数据库负载&#xff0c;提高动态Web应用的速度、可扩展性和性能。Memcached 的工作原理是将数据存储在内存中&#xff0c;以提供快速的数据访问。当应用程序需要访问数据…

基于springboot+vue+Mysql的家政服务管理平台

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

Rabbitmq消息顺序的问题以及解决方案

1.1消息顺序的场景 场景1&#xff1a;一个queue&#xff0c;多个consumer 一个queue&#xff0c;有多个consumer去消费&#xff0c;这样就会造成顺序的错误&#xff0c;consumer从MQ里面读取数据是有序的&#xff0c;但是每个consumer的执行时间是不固定的&#xff0c;无法保…

第二十一章 Jquery ajax

文章目录 1. jquery下载2. jquery的使用3. jquery页面加载完毕执行4. jquery属性控制6. 遍历器 2. ajax1. 准备后台服务器2. ajax发送get请求3. ajax发送post请求 1. jquery下载 点击下载 稳定版本1.9 2. jquery的使用 存放到html文件的同级目录 3. jquery页面加载完毕执行…

论文《Exploring to Prompt for Vision-Language Models》阅读

论文《Exploring to Prompt for Vision-Language Models》阅读 论文概况论文动机&#xff08;Intro&#xff09;MethodologyPreliminaryCoOp[CLASS]位置Context 是否跨 class 共享表示和训练 ExperimentsOverall ComparisonDomain GeneralizationContext Length (M) 和 backbon…

【C语言】linux内核tcp_push函数

一、讲解 这个 tcp_push 函数是在Linux内核的TCP网络栈实现中&#xff0c;用于推动TCP缓冲区中待发送数据包的传输。这段代码需要在具备操作系统和网络编程知识背景下来解释。下面我将分步骤用中文逐一讲解这个函数的作用&#xff1a; 1. struct tcp_sock *tp tcp_sk(sk);&am…

Docker搭建LNMP环境实战(07):安装nginx

1、模拟应用场景描述 假设我要搭建一个站点&#xff0c;假设虚拟的域名为&#xff1a;api.test.site&#xff0c;利用docker实现nginxphp-fpmmariadb部署。 2、目录结构 2.1、dockers根目录 由于目前的安装是基于Win10VMWareCentOS虚拟机&#xff0c;同时已经安装了VMWareT…

冒泡排序(六大排序)

冒泡排序 冒泡排序的特性总结&#xff1a; 1. 冒泡排序是一种非常容易理解的排序 2. 时间复杂度&#xff1a;O(N^2) 3. 空间复杂度&#xff1a;O(1) 4. 稳定性&#xff1a;稳定 动图分析&#xff1a; 代码实现&#xff1a; Swap(int*p1,int*p2) {int tmp *p1;*p1*p2…

网络稳定性(蓝桥省赛)

0网络稳定性 - 蓝桥云课 (lanqiao.cn) 知识点&#xff1a;克鲁斯卡尔生成树&#xff0c;lca&#xff0c;倍增 最小生成树的模板&#xff1a;最小生成树【模板】-CSDN博客 题解代码如下&#xff1a; #include<bits/stdc.h> using namespace std; const int N3e5100; co…

ssh 公私钥(github)

一、生成ssh公私钥 生成自定义名称的SSH公钥和私钥对&#xff0c;需要使用ssh-keygen命令&#xff0c;这是大多数Linux和Unix系统自带的标准工具。下面&#xff0c;简单展示如何使用ssh-keygen命令来生成具有自定义名称的SSH密钥对。 步骤 1: 打开终端 首先&#xff0c;打开我…

用Kimichat快速识别出图片中的表格保存到Excel

如果有一张图片格式的表格&#xff0c;想要快速复制到Excel表格中&#xff0c;那么一般要借助于OCR工具。之前试过不少在线OCR工具&#xff0c;识别效果差强人意。其实&#xff0c;kimichat就可以非常好的完成这个任务。 下面是一张研报中的表格&#xff0c;只能以图片形式保存…

RTOS线程切换的过程和原理

0 前言 RTOS中最重要的一个概念就是线程&#xff0c;线程的按需切换能够满足RTOS的实时性要求&#xff0c;同时能将复杂的需求分解成一个个线程执行减轻我们开发负担。 本文从栈的角度出发&#xff0c;详细介绍RTOS线程切换的过程和原理。 注&#xff1a;本文参考的RTOS是RT-T…