当前位置: 首页 > news >正文

html基础-认识html

1.什么是html

html是浏览器可以识别的的标记语言,我们在浏览器浏览的网页就是一个个的html文档

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>认识html</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

将这串代码用记事本保存起来,更改.txt后缀名为.html,拖到浏览器中就可以看到效果了。

html的组成部分

html是有html标签(元素)组成的,有时候叫html标签,有时候叫html元素,都一个意思。
例如上面的<h1></h1>标签 代表标题 <p></p>标签代表段落

html 常用标签

双标记标签:
有开始有结尾 例如<h1> 是开始标签 </h1>是结尾标签
单标记标签: 只有一个标记。如<img /> 图片标签, <input />输入框标签

1.标题标签 :html标题是通过<h1> -<h6>标签来定义的

<h1></h1> 显示的标题字体最大。
<h6></6> 显示的标题字体最小。

2.段落标签:p标签

<p>这是一个段落</p>

3.超链接标签:a标签

<a href = "https://www.baidu.com">点击网址进入某个页面</a>

4.容器标签 div标签

网页布局容器标签
网页由一个个div容器组成的,是网页布局排版中最常用的标签。

5.列表标签

有序列表标签

<ol><li>这是有序标签</li><li>这是有序标签</li><li>这是有序标签</li>
</ol>

网页效果是这样子的
在这里插入图片描述

有序标签

 <ul><li>这是无序标签</li><li>这是无序标签</li><li>这是无序标签</li></ul>

浏览器显示的效果是这样子的
在这里插入图片描述

6.表格标签

<table><tr><td>id</td><td>姓名</td><td>年龄</td><td>性别</td></tr>
</table>

table 代表这是一个表格容器,tr是表格中的行,td是表格中的单元格,相当于列的意思。

标签相对于标签 有加粗和居中的效果
<table><tr><th>id</th><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>1</td><td>张三</td><td>13</td><td></td></tr><tr><td>2</td><td>李四</td><td>14</td><td></td></tr><tr><td>3</td><td>王五</td><td>15</td><td></td></tr></table>

浏览器显示效果是这样子的
在这里插入图片描述

7.表单标签

<form>注册用户<br/><input  type="text" placeholder="请输入昵称"/><br/><input  type="password" placeholder="请输入密码"/><br/><input type="radio" name="sex" /><input type="radio" name="sex" ><br/>兴趣爱好有哪些?<br/><input type="checkbox">足球 <input type="checkbox"> 篮球 <input type="checkbox"><br/>请选择图像上传<br/><input type="file"><br/>您来自那个省份?<br/><select><option>湖北</option><option>湖南</option><option>河南</option><option>广东</option></select>
</form>

在这里插入图片描述

<form></form>标签代表这是一个表单容器 <input />是输入框标签,它有不同的类型 type="text | password |radio |checkbox |file"
type="text" 代表这是一个文字输入框
type="password" 这是一个密码输入框
type="radio" 这是一个单选框
type="checbox" 这是一个复选框
type="file" 这是一个文件选择器
type="reset" 这是一个重置按钮
type="submit"这是一个确认提交按钮
type="button" 这是一个普通按钮

8.文本域标签

文本域标签也是表单组件里面的一种

<textarea cols="30" rows="10"></textarea>

在这里插入图片描述

9.块级标签

<div>标签也是块级标签 但是div是一个标签独占一整行,<span>标签只占一小块
<span>hello</span>

10.音视频标签

音频

<audio src="" controls></audio>

视频

<video src="" controls width="500px" height="100px"></video>

相关文章:

html基础-认识html

1.什么是html html是浏览器可以识别的的标记语言&#xff0c;我们在浏览器浏览的网页就是一个个的html文档 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>认识html</title> </head> <body><h1…...

UE5 跟踪能力的简单小怪

A、思路 1、用素材的骨骼网格体创建小怪BP&#xff0c;绑定新的小怪控制器。 2、控制器的事件开始时&#xff0c;获取玩家状态&#xff0c;指定AI小怪自动向玩家移动。 复杂的AI需要用强大功能如黑板、行为树。 而简单的AI则可以用简单方法实现&#xff0c;杀鸡不用牛刀。视…...

Ubantu22系统安装Miniconda3

1、Anaconda和Miniconda异同 清华源镜像的Miniconda3和Anaconda都是用于管理Python环境和软件包的工具&#xff0c;但它们之间存在一些关键的不同之处。下面将分别介绍它们的特点以及使用清华源镜像的差异。 相同点&#xff1a; &#xff08;1&#xff09;功能相似&#xff1a…...

130、java中在使用new ArrayList<>(),在参数中传入一个集合的作用

在Java中&#xff0c;当你使用new ArrayList<>()时&#xff0c;你正在创建一个新的ArrayList实例。如果你在其后跟一对尖括号&#xff0c;并在内部传入一个集合&#xff0c;那么这实际上是一个"初始容量"的概念。 例如&#xff0c;如果你有一个集合otherList&…...

Mybatis-plus-Join--分页查询

数据表四张&#xff1a; user&#xff1a; id,username,create_time,update_time product&#xff1a; id,name,price,number(库存),create_time,update_times order&#xff1a; id,quantity,order_time(下单时间),update_time order_detail:id,product_id,order_id,quant…...

对BG兼并点的理解-不断刷新版

常想常新&#xff0c;每次接触都有新理解&#xff0c;不确定想的是否正确&#xff0c;拿出来讨论&#xff0c;以最新结论为准 2024-9-19 1、仿真简并点时需要断开启动电路&#xff1a;启动电路会干扰DC结果的计算&#xff0c;可能看到加启动电路后简并点减少&#xff0c;但在…...

python的游标是什么

CURSOR&#xff08;私有SQL 区&#xff09;就是一个句柄&#xff0c;即指针或引用&#xff0c;指向sql私有区&#xff08;一个用户的能打开的cursor数由参数open_cursors决定&#xff09;【确切说&#xff0c;指向sql私有区里的固定部分&#xff08;The persistentarea&#xf…...

硬件---14---PCB学习:PCB封装库及布局操作

一PCB封装元素的组成与介绍 二实例-贴片0603封装的创建 1封装命名 找不到封装库创建页面&#xff0c;可以配合右下角的Panels去找。 找到0603电阻或者电容的PCB封装&#xff0c;根据提供尺寸去设计PCB的封装。 <1>双击PCB器件封装 <2>命名 2放置焊盘&#xff…...

什么是MyBatis

MyBatis 简介 MyBatis 是一个流行的 Java 持久层框架&#xff08;Persistence Framework&#xff09;&#xff0c;它主要用于简化数据库操作&#xff0c;提供了对数据库的映射支持&#xff0c;使得开发人员能够通过简单的配置和映射文件来执行数据库操作&#xff08;如增、删、…...

开发技术-Java改变图片格式

图片上传页未做控制&#xff0c;导致上传的是GIF格式&#xff0c;导致图片识别失败。需要将GIF格式转为JPEG格式。 代码&#xff0c;是找AI写的&#xff0c;记录一下&#xff1a; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; im…...

基于DockerCompose搭建Redis主从哨兵模式

linux目录结构 内网配置 哨兵配置文件如下&#xff0c;创建3个哨兵配置文件 # sentinel26379.conf sentinel26380.conf sentinel26381.conf 内容如下 protected-mode no sentinel monitor mymaster redis-master 6379 2 sentinel down-after-milliseconds mymaster 60000 s…...

aioice里面candidate固定UDP端口测试

环境&#xff1a; aioice0.9.0 问题描述&#xff1a; aioice里面candidate固定UDP端口测试 解决方案&#xff1a; /miniconda3/envs/nerfstream/lib/python3.10/site-packages/aioice import hashlib import ipaddress import random from typing import Optional import…...

Git使用教程-分支使用/合并分支提交

Git使用教程-分支使用 文章目录 Git使用教程-分支使用一、分支&#xff08;branch&#xff09;的基本操作&#xff1a;二、查看分支&#xff1a;参考 一、分支&#xff08;branch&#xff09;的基本操作&#xff1a; git clone https://.git git status …...

单元测试使用记录

什么是单元测试 简单来说就是对一个类中的方法进行测试&#xff0c;对输出的结果检查判断是否符合预期结果 但是在多年的工作中&#xff0c;从来没有哪个项目中真正系统的用到了单元测试&#xff0c;因此对它还是很陌生的&#xff0c;也就造成更加不会在项目中区使用它。 如何…...

LabVIEW实时信号采集与频谱分析

系统通过LabVIEW与PXIe硬件结合&#xff0c;实现高精度模拟信号的实时采集、频谱分析与可视化显示。核心功能包括采样率配置、快速傅里叶变换&#xff08;FFT&#xff09;、功率谱图生成及动态缩放调整&#xff0c;同时支持信号平均与噪声抑制。系统设计灵活&#xff0c;适用于…...

OpenCV(python)从入门到精通——运算操作

加法减法操作 import cv2 as cv import numpy as npx np.uint8([250]) y np.uint8([10])x_1 np.uint8([10]) y_1 np.uint8([20])# 加法,相加最大只能为255 print(cv.add(x,y))# 减法&#xff0c;相互减最小值只能为0 print(cv.subtract(x_1,y_1))图像加法 import cv2 as…...

基础2:值类型与右值引用

1.函数返回 在讲解右值之前&#xff0c;要知道下面这个函数要进行几次拷贝以及为什么&#xff1f; int get_x() {int x 20;return x; }int aget_x(); 答案&#xff1a;两次 # 第一次 int tmpa; # 第二次 int xtmp;2.左值与右值 &#x1f34f;2.1 能取地址操作的就是左值 …...

GitHub年度报告发布!Python首次超越JavaScript

全球开发者数量激增&#xff0c;GenAI 项目呈爆炸式增长趋势&#xff0c;推动编程语言的应用格局也发生了巨大变化&#xff0c;最新的 GitHub Octoverse 报告来了&#xff01; 1、Python 首次超越 JavaScript&#xff0c;成为 GitHub 平台最顶级编程语言 不同于流传“AI 即将取…...

EdgeX Message Bus 消息总线

EdgeX Message Bus 消息总线 一、概述 EdgeX MessageBus 内部消息总线,用于 EdgeX 服务之间的内部通信。 EdgeX 服务是指来自 EdgeX 的任何核心/支持/应用程序/设备服务或使用 EdgeX SDK 构建的任何自定义应用程序或设备服务。 EdgeX MessageBus 用于内部 EdgeX 服务与服务之间…...

【JavaEE进阶】关于Maven

目录 &#x1f334;什么是Maven &#x1f332;为什么要学Maven &#x1f38d;创建一个Maven项目 &#x1f384;Maven核心功能 &#x1f6a9;项目构建 &#x1f6a9;依赖管理 &#x1f38b;Maven Help插件 &#x1f340;Maven 仓库 &#x1f6a9;本地仓库 &#x1f6a…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...