【前端】html的8个常用标签

HTML

html

超文本链接(标记)语言

H5

HTML v5

get/post/delete/put —— restful 网络规划

Web开发

结构+样式+动作

架构 + 装饰 + 交互(动作)

装饰做好了–> UI工程师

标签

文本相关

图片、图像、声音

导航

表格*

列表

表单标签*

布局标签

H5扩展

入门内容

页面构成 = 文字 图片 有时加上视频

可以修改页面内容

在这里插入图片描述
在这里插入图片描述

构建页面

标签 <>

标签类型

  1. 单标签(/可写 可不写)

    </x>
    

    图片在这里插入图片描述

    < hr/ >

  2. 双标签

<x> 文本内容 </x>

CSS – 老早之前是标签+属性

文本标签

<h1>~<h6>
<p> </p>

xxx.html

在这里插入图片描述
在这里插入图片描述

hr标签

在这里插入图片描述
在这里插入图片描述

换行标签 br

br - - break(分隔) 放在行上,标签内。

<br/>

在这里插入图片描述在这里插入图片描述

特殊符号

&符号

空格(英文)

&nbsp ; —— 一个空格 不断行的空白

其他

HTML 原代码	显示结果	描述
&lt;	<	小于号或显示标记
&gt;	>	大于号或显示标记
&amp;	&	可用于显示其它特殊字符
&quot;	“	引号
&reg;	®	已注册
&copy;	©	版权
&trade;	™	商标
&ensp;	 	半个空白位
&emsp;	 	一个空白位
&nbsp;		不断行的空白´	&acute;	©	&copy;	>	&gt;	µ	&micro;	®	&reg;
&	&amp;	°	&deg;	¡	&iexcl;		&nbsp;	»	&raquo;
¦	&brvbar;	÷	&divide;	¿	&iquest;	¬	&not;	§	&sect;
•	&bull;	½	&frac12;	«	&laquo;	¶	&para;	¨	&uml;
¸	&cedil;	¼	&frac14;	<	&lt;	±	&plusmn;	×	&times;
¢	&cent;	¾	&frac34;	¯	&macr;	“	&quot;	™	&trade;
€	&euro;	£	&pound;	¥	&yen;				
„	&bdquo;	…	&hellip;	·	&middot;	›	&rsaquo;	ª	&ordf;
ˆ	&circ;	“	&ldquo;	—	&mdash;	’	&rsquo;	º	&ordm;
†	&dagger;	‹	&lsaquo;	–	&ndash;	‚	&sbquo;	”	&rdquo;
‡	&Dagger;	‘	&lsquo;	‰	&permil;	­	&shy;	˜	&tilde;
≈	&asymp;	⁄	&frasl;	←	&larr;	∂	&part;	♠	&spades;
∩	&cap;	≥	&ge;	≤	&le;	″	&Prime;	∑	&sum;
♣	&clubs;	↔	&harr;	◊	&loz;	′	&prime;	↑	&uarr;
↓	&darr;	♥	&hearts;	−	&minus;	∏	&prod;	‍	&zwj;
♦	&diams;	∞	&infin;	≠	&ne;	√	&radic;	‌	&zwnj;
≡	&equiv;	∫	&int;	‾	&oline;	→	&rarr;		
α	&alpha;	η	&eta;	μ	&mu;	π	&pi;	θ	&theta;
β	&beta;	γ	&gamma;	ν	&nu;	ψ	&psi;	υ	&upsilon;
χ	&chi;	ι	&iota;	ω	&omega;	ρ	&rho;	ξ	&xi;
δ	&delta;	κ	&kappa;	ο	&omicron;	σ	&sigma;	ζ	&zeta;
ε	&epsilon;	λ	&lambda;	φ	&phi;	τ	&tau;		
Α	&Alpha;	Η	&Eta;	Μ	&Mu;	Π	&Pi;	Θ	&Theta;
Β	&Beta;	Γ	&Gamma;	Ν	&Nu;	Ψ	&Psi;	Υ	&Upsilon;
Χ	&Chi;	Ι	&Iota;	Ω	&Omega;	Ρ	&Rho;	Ξ	&Xi;
Δ	&Delta;	Κ	&Kappa;	Ο	&Omicron;	Σ	&Sigma;	Ζ	&Zeta;
Ε	&Epsilon;	Λ	&Lambda;	Φ	&Phi;	Τ	&Tau;	ς	&sigmaf;

图片img

单标签

在这里插入图片描述
在这里插入图片描述

放入本地图片

在这里插入图片描述

注释快捷键:c + /

<!-- 注释内容-->

video视频标签

双标签

导航标签a标签

可以跳转.

表格标签

table,thread,tr(table row),th,tbody,td(table date),tfoot.

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格标签案例</title></head><body><h1>表格标签</h1><hr /><table border="1" width = 100% height = "200px"><!-- 		边框宽度默认是1 --><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>专业</th><th>学校</th><th>图片</th></tr></thead><tbody><tr><th>杨喻媚</th><th></th><th>18</th><th>化学</th><th>西北农林科技大学</th><!-- 行扩容 --><!-- 引入本地图片 =>“”/‘’ --><th rowspan="3"><img src="../img/yym.jpg" width="100%"height=300px /></th></tr><tr><th>杨喻媚</th><th></th><th>18</th><th>药学</th><th>西北农林科技大学</th><th>-</th></tr><tr><th>杨喻媚</th><th></th><th>18</th><th>药学</th><th>西北农林科技大学</th><th>-</th></tr></tbody><tfoot><!-- 列扩容——> --><tr><td colspan=""></td></tr></tfoot></table></body>
</html>

扩容正好相反 colspan

在这里插入图片描述

表单标签

可以跳转.

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

form

在这里插入图片描述

<from action = "url地址"></from>

button 按钮

<button> 提交 </button>

input

按钮

<imput type = "submit" />
<from action = "https://www.bilibili.com/"><button>跳转</button>
<input type = "submit" value = "提交按钮"></from>
						<tr><td><label>入职日期:&nbsp;&nbsp;&nbsp;&nbsp;</label></td><td><input type="date" /></td></tr><tr><td><label>工作经验:&nbsp;&nbsp;&nbsp;&nbsp;</label></td><td><input type="number" /></td></tr><tr><td><label>工作照片:&nbsp;&nbsp;&nbsp;&nbsp;</label></td><td><input type="file"  /></td></tr><tr><td><label>自我介绍:&nbsp;&nbsp;&nbsp;&nbsp;</label></td><td><textarea rows="5"></textarea></td></tr>
		<form action="#"><fieldset><legend>员工</legend><table border='1' width='500px'><tbody><tr><td><label>用户名:&nbsp;</label></td><td><input type="text" placeholder="用户名"/></td></tr><tr><td><label>密码&nbsp;&nbsp;&nbsp;:&nbsp;</label></td><td><input type="password" placeholder="密码"/></td></tr><tr><td><label>性别&nbsp;&nbsp;&nbsp;:&nbsp;</label></td><td><input type="radio" name="gender"/><input type="radio" name="gender"/></td></tr><tr><td><label>专业&nbsp;&nbsp;&nbsp;:&nbsp;</label></td><td><select ><option >1</option><option >2</option><option >3</option><option >4</option></select></td></tr><tr><td><label>爱好&nbsp;&nbsp;&nbsp;:&nbsp;</label></td><td><input type="checkbox" name="hobby"/>篮球<input type="checkbox" name="hobby"/>足球<input type="checkbox" name="hobby"/>跳绳<input type="checkbox" name="hobby"/>游戏</td></tr><tr><td><label>日期&nbsp;&nbsp;&nbsp;:&nbsp;</label></td><td><input type="date" ></td></tr><tr><td><label>工龄&nbsp;&nbsp;&nbsp;:&nbsp;</label></td><td><input type="number" /></td></tr><tr><td><label>照片&nbsp;&nbsp;&nbsp;:&nbsp;</label></td><td><input type="file" /></td></tr><tr><td><label>简介&nbsp;&nbsp;&nbsp;:&nbsp;</label></td><td><textarea rows="s"></textarea></td></tr></tbody></table><input type="submit" value="提交"/></fieldset></form>

HBuilder官网

在这里插入图片描述

准备工作
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

Java高效学习家教平台系统小程序源码

&#x1f4da; 家教平台系统&#xff1a;让孩子学习更高效的秘密武器 &#x1f680; &#x1f469;‍&#x1f3eb; 引言&#xff1a;家教新风尚&#xff0c;线上平台引领教育潮流 在这个信息爆炸的时代&#xff0c;家教平台系统如同雨后春笋般涌现&#xff0c;为孩子们的学习…

Qt多边形填充/不填充绘制

1 填充多边形绘制形式 void GraphicsPolygonItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) {Q_UNUSED(option);Q_UNUSED(widget);//painter->setPen(pen()); // 设置默认画笔//painter->setBrush(brush()); // 设置默…

OpenAI大事记;GPT到ChatGPT参数量进化

目录 OpenAI大事记 GPT到ChatGPT参数量进化 OpenAI大事记 GPT到ChatGPT参数量进化 ChatGPT是从初代 GPT逐渐演变而来的。在进化的过程中,GPT系列模型的参数数量呈指数级增长,从初代GPT的1.17亿个参数,到GPT-2的15 亿个参数,再到 GPT-3的1750 亿个参数。模型越来越大,训练…

一文了解Java序列化

Java 序列化&#xff08;Serialization&#xff09;是将对象的状态转换为字节流&#xff0c;以便将对象的状态保存到文件中或通过网络传输的过程。反序列化&#xff08;Deserialization&#xff09;则是将字节流恢复为原始对象。Java 序列化主要通过 Serializable 接口实现。 为…

vue解决跨域问题

1、在vue项目的根目录创建vue.config.js的文件 复制以下带代码 devServer: {proxy: {/api: {target: http://localhost:3000, // 目标服务器地址changeOrigin: true, // 是否改变源pathRewrite: {^/api: // 重写路径&#xff0c;例如将/api/user重写为/user}}}}2、将接口的地…

是时候用开源降低AI落地门槛了

过去三十多年&#xff0c;从Linux到KVM&#xff0c;从OpenStack到Kubernetes&#xff0c;IT领域众多关键技术都来自开源。开源技术不仅大幅降低了IT成本&#xff0c;也降低了企业技术创新的门槛。 那么&#xff0c;在生成式AI时代&#xff0c;开源能够为AI带来什么&#xff1f;…

基于SSM+VUE守护萌宠宠物网站JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解

源代码数据库LW文档&#xff08;1万字以上&#xff09;开题报告答辩稿 部署教程代码讲解代码时间修改教程 一、开发工具、运行环境、开发技术 开发工具 1、操作系统&#xff1a;Window操作系统 2、开发工具&#xff1a;IntelliJ IDEA或者Eclipse 3、数据库存储&#xff1a…

Oh My Posh安装

nullSet up your terminalhttps://ohmyposh.dev/docs/installation/windows Git ee oh-my-posh: Windows上的oh-my-zsh&#xff0c;源地址 https://github.com/JanDeDobbeleer/oh-my-posh.git (gitee.com)https://gitee.com/efluent/oh-my-posh

基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)

&#x1f388;系统亮点&#xff1a;协同过滤算法、节流算法、支付宝沙盒支付、图形化分析、实时聊天&#xff1b; 一.系统开发工具与环境搭建 1.系统设计开发工具 后端使用Java编程语言的Spring boot框架 项目架构&#xff1a;B/S架构 运行环境&#xff1a;win10/win11、jdk1…

Webserver(4.8)UDP、广播、组播

目录 UDP通信server.cclient.c 广播client.cserver.c 组播client.cserver.c UDP通信 server.c #include<arpa/inet.h> #include<stdio.h> #include<stdlib.h> #include<unistd.h> #include<string.h> int main(){//1.创建一个通信的socketint f…

大数据集群中实用的三个脚本文件解析与应用

目录 一、jps - cluster.sh 脚本文件 &#xff08;一&#xff09;背景与功能 &#xff08;二&#xff09;使用方法 二、集群文件分发脚本 xsync.sh &#xff08;一&#xff09;背景与问题 &#xff08;二&#xff09;功能与实现原理 &#xff08;三&#xff09;脚本编写…

普通人没钱又没能力的话,那就踏实学一门手艺

其实想在这个社会上谋生有很多种方式&#xff0c;大致可以分为这么几个类型。 ​ 1&#xff1a;劳动型 大多数人无疑都是从事的劳动型工作&#xff0c;靠出卖体力挣钱&#xff0c;如建筑工人、快递员、服务员&#xff0c;车间杂工等等。这种性质的工作比较累&#xff0c;性价…

数据管理的四大支柱:揭秘数据中台、数据仓库、数据治理和主数据

文章目录 一、数据中台&#xff1a;数据的“中央厨房”二、数据仓库&#xff1a;数据的“图书馆”三、数据治理&#xff1a;数据的“交警”四、主数据&#xff1a;数据的“身份证”五、定位与差异&#xff1a;协同作战的团队成员 在数字化时代&#xff0c;企业数据管理变得至关…

RabbitMQ 的集群

大家好&#xff0c;我是锋哥。今天分享关于【RabbitMQ 的集群】面试题&#xff1f;希望对大家有帮助&#xff1b; RabbitMQ 的集群 RabbitMQ 是一种流行的开源消息代理&#xff0c;广泛用于构建分布式系统中的消息队列。随着应用程序规模的扩大&#xff0c;单一的 RabbitMQ 实…

PostgreSQL核心揭秘(三)-元组结构

目录 概述 2. 堆元组介绍 1&#xff09;HeapTupleHeaderData 结构 2&#xff09;空值位图&#xff08;Null Bitmap&#xff09; 3&#xff09;用户数据&#xff08;User Data&#xff09; 3. 元组增、删、改操作介绍 1&#xff09;增&#xff08;INSER…

在数据抓取的时候,短效IP比长效IP有哪些优势?

在数据抓取领域&#xff0c;代理IP的选择对于任务的成功率和效率至关重要。短效IP和长效IP各有其特点和适用场景&#xff0c;但在数据抓取过程中&#xff0c;短效IP因其独特的优势而受到青睐。本文将和大家一起探讨短效IP在数据抓取中相比长效IP的优势。 短效IP的定义与特点 …

Navicat for MySQL 错误:1251

mySql&#xff1a;8.4 Navicat for MySQL&#xff1a;11.0.10 企业版 绿色版 官网中关于mysql_native_password插件的说法&#xff1a;链接 1. 问题 连接数据库报错&#xff1a;1251 要求升级Navicat for MySQL 2. 原因 mysql中的mysql_native_password插件默认是关闭的 …

RabbitMQ 管理平台(控制中心)的介绍

文章目录 一、RabbitMQ 管理平台整体介绍二、Overview 总览三、Connections 连接四、Channels 通道五、Exchanges 交换机六、Queues 队列查看队列详细信息查看队列的消息内容 七、Admin 用户给用户分配虚拟主机 一、RabbitMQ 管理平台整体介绍 RabbitMQ 管理平台内有六个模块&…

【360】基于springboot的志愿服务管理系统

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装志愿服务管理系统软件来发挥其高效地信息处理的作用&#x…

Unity发布微信小程序-实战问题汇总

发布微信小程序 准备工作 我们是使用unity其他版本直接转出的微信小程序&#xff0c;而非团结引擎。 下载微信开发者工具&#xff1a;https://developers.weixin.qq.com/minigame/dev/devtools/download.html MiniGame插件:https://game.weixin.qq.com/cgi-bin/gamewxagwasms…