html的标签

基础标签

标签描述
<h1>-<h6>定义标题,h1最大,h6最小
<font>定义文本的字体,字体尺寸,字体颜色
<b>定义粗体文本
<i>定义斜体文本
<u>定义文本下划线
<center>定义文本居中
<p>定义段落
<br>定义换行,单标签
<hr>定义水平线,单标签

font标签

属性:

        color:文本颜色,

                使用英文字母:例如"green","red"

                使用十六进制RGB,例如:#xxyyzz xx表示red的值,yy表示green的值,zz表示blue的值

        size:字体大小,属性值大小1~7,默认值为3

        face:字体样式,例如"楷体","宋体"

<!-- 1.声明当前文件是一个超文本文档 -->
<!DOCTYPE html>
<!-- 2.表示当前文件支持英文,也可以写中文 -->
<html lang="en"><head><!-- 3.当前页面使用的编码表 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vscode_fristCode</title>
</head><body><font color="red" >你好</font><font color="#FF0000">hello</font>   红色<font color="yellow" size="1">你好</font><font color="green" size="7" face="楷体">你好</font>
</body></html>

i,b标签

     <i>我是倾斜的</i><b>我是加粗的</b><!-- 嵌套使用 --><i><b>我又是加粗又是倾斜</b></i>

<hr>标签,<br>标签,<center>标签

<!-- 下划线 --><hr/><!-- 换行 -->小明<br/>小美<!-- 居中 --><br/><center>哈哈哈</center>

<p>标签

 <!-- 段落 --><p>你好呀哈哈哈</p><p>你有好好好</p>

特殊符号

<:&lt;

>:&gt;

版权符号:&copy; 

图片,音频,视频标签

<img>

使用<img>标签引入图片

        属性

                src:表示引入图片的路径,例如"../img/小熊.jpg",..表示上一级目录

                heigth,width

<audio>

引入音频

        属性

                src:表示引入音频的路径

                controls:属性值可以不写,该属性表示播放控件,如果不加此属性就无法播放

<video>

        属性

                src:表示引入视频的路径

                controls               

   注意:src引入的路径不能是本地路径(D盘,C盘之类的),必须在此项目中

                audio,video必须写controls属性,不然无法播放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- <img src="../img/小熊.jpg" height="500px" width="500px" --><!-- 下面表示宽度占页面的50% --><img src="../img/小熊.jpg" height="500" width="50%"><audio src="../img/hh.mp3" controls></audio><video src="../img/楼角(1).MP4" controls ></video></body>
</html>

超链接标签

a标签

        属性

                href:"http://www.baidu.com" 表示跳转到的地址

                target:1._blank:表示该网址以新的窗口打开

                        2._self:表示该网址以当前窗口打开,默认值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="http://www.baidu.com">百度</a><a href="http://www.baidu.com" target="_blank">新的窗口打开百度</a>
</body>
</html>

 

列表标签

1.有序标签 ol

2.ol和ul以及li标签上都有一个type属性,表示当前列表类型

        type属性表示列表属性,默认值是1,然后子标签li依次递增

        type属性:1 A a i  I 

 3.ol>li*3 回车  ,然后就会在ol标签中生成三个li标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ol><li>小明</li><li>小美</li><li>小何</li></ol><ol type="a"><li>小明</li><li>小美</li><li>小何</li></ol><ol type="i"><li>小明</li><li>小美</li><li>小何</li></ol><hr/></body>
</html>

1.无序列表 ul

2.type属性

        1)circle:空心圆

        2)square:实心方形

        3)disc:实心圆(默认值)

 <ul><li>哈哈</li><li>绘画</li><li>零零</li></ul><ul type="circle"><li>哈哈</li><li>绘画</li><li>零零</li></ul><ul type="square"><li>哈哈</li><li>绘画</li><li>零零</li></ul>

表格标签

table标签  table>tr*4>td*4  -->表示生成四行四列的表格

        子标签::

                1)行标签:tr

                        属性

                                align="center",-->表示整行内容居中,还有"rigth","left"(默认值,内容居左)

                2)列标签:td th

                        注意:th表示表格标题标签,内容自动加粗和居中显示

        属性

                1)border="1px"-->表示表格边框

                2)cellspacing="0px"-->表示表格单元格之间的距离为0,即没有距离

                3)width="50%"-->表示表格标签宽度占页面的50%

            

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" cellspacing="0px" width="50%"><!-- 第一行 --><tr><!-- 第一列 --><th>序号</th><!-- 第二列 --><th>logo</th><th>品牌名称</th><th>企业名称</th></tr><tr align="center"><td>001</td><td><img src="../img/小熊.jpg" height="50px" width="50px"></td><td>hh</td><td>hh</td></tr><tr align="center"><td>002</td><td><img src="../img/小熊.jpg" height="50px" width="50px"></td><td>aa</td><td>aa</td></tr><tr align="center"><td>003</td><td><img src="../img/小熊.jpg" height="50" width="50"></td><td>cc</td><td>cc</td></tr></table>
</body>
</html>

表格标签实现跨行和跨列

实现跨行:使用td,th列标签的属性rowspan,该属性表示跨行,值为几跨几行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" cellspacing="0px" width="50%"><tr><th>姓名</th><th>学号</th></tr><tr><td rowspan="2">赫赫</td><td>235009</td></tr><tr><!-- <td>赫赫</td> --><td>235008</td></tr><tr><td>据据</td><td>233006</td></tr></table>
</body>
</html>

实现跨列:使用td,th列标签的属性colspan,该属性表示跨列,值为几跨几列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" cellspacing="0px" width="50%"><tr><th>姓名</th><th colspan="2">学号</th><!-- <th>学号</th> --></tr><tr><td>赫赫</td><td>234009</td><td>234008</td></tr><tr><td>啊啊</td><td>236007</td><td>236006</td></tr></table>
</body>
</html>

布局标签

div标签:块级标签即单独占一行的标签,如h1~h6,p ,br

span标签:属于行内标签,共处一行的标签,img,a等 

表单标签

使用form标签

        属性

                1)action:表示将收集的数据提交到具体后台服务器的地址

                2)method:提交数据到后台的方式(请求方式) :get,post

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

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

相关文章

windows系统API学习

win代码 1.代码&#xff1a; GetLogicalDriveStrings(1024,(LPWSTR)DStr);解释 DWORD GetLogicalDriveStringsW([in] DWORD nBufferLength,[out] LPWSTR lpBuffer); [in] nBufferLengthTCHAR 中由 lpBuffer 指向的缓冲区的最大大小。 此大小不包括终止 null 字符。 如果此…

Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示

文章目录 一、什么是SSE二、SSE技术的基本原理三、SSE适用于场景四、Node服务端示例1、协议2、格式3、事件3.1、事件3.2、事件唯一标识符3.3、重连事件 4、具体示例 五、客户端示例1、检测客户端是否支持SSE2、创建客户端连接3、事件监听4、接收事件5、自定义事件6、错误处理7、…

嘎嘎好用的虚拟键盘第二弹之中文输入法

之前还在为不用研究输入中文而暗自窃喜 这不新需求就来了&#xff08;新需求不会迟到 它只是在路上飞一会儿&#xff09; 找到了个博主分享的代码 是好使的 前端-xyq 已经和原作者申请转载了 感谢~~ 原作者地址&#xff1a;https://www.cnblogs.com/linjiangxian/p/16223681.h…

Alibaba Cloud Linux 安装mysql及注意事项

1.安装mysql #1.运行以下命令&#xff0c;更新YUM源。 sudo rpm -Uvh https://dev.mysql.com/get/mysql80-community-release-el7-7.noarch.rpm#2.&#xff08;可选&#xff09;当操作系统为Alibaba Cloud Linux 3时&#xff0c;执行如下命令&#xff0c;安装MySQL所需的库文件…

java驱动bat脚本执行mysql备份然后自定义mysql备份名

我有个需求按钮触发bat脚本备份mysql,但是怕备份太多找不到最终的&#xff0c;所以可以自定义脚本备份的mysql名称 直接上干货 首先展示java代码 public static void main(String[] args) {// 备份文件名作为参数传入String backupFileName "C:\\Users\\Administrator\…

【Linux进程间通信(六)】深入理解 System V IPC

&#xff08;一&#xff09;引入 &#xff08;二&#xff09;IPC 命名空间 &#xff08;三&#xff09;ipc_ips结构体 &#xff08;四&#xff09;ipc_id_ary结构体 &#xff08;五&#xff09;kern_ipc_perm结构体 &#xff08;六&#xff09;操作系统对IPC资源是如何管理…

视频提取gif怎么制作?试试这个网站一键转换

通过把视频转换成gif动图的操作能够更加方便的在各种平台上分享和传播。相较于视频&#xff0c;gif图片具有较小的文件体积&#xff0c;gif动图能够快速的加载播放&#xff0c;不需要等待就能快速欣赏。很适合从事新媒体之类的小伙伴&#xff0c;可以用来做展示、宣传等。想要实…

刷题训练之模拟

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟练掌握模拟算法。 > 毒鸡汤&#xff1a;学习&#xff0c;学习&#xff0c;再学习 ! 学&#xff0c;然后知不足。 > 专栏选自&#xff1a;刷题训…

vue3实现文字垂直滚动

在Vue 3中实现文字的垂直滚动&#xff0c;你可以使用CSS动画或者JavaScript来控制滚动行为。以下是一个简单的Vue 3组件示例&#xff0c;该组件使用CSS的keyframes动画来实现文字的垂直滚动效果&#xff1a; <template> <div class"vertical-scroll-text"&…

vue 路由url中去掉#

修改前效果 想要去掉/# 如何实现&#xff1f; 1、typeScript中去掉url中# 找到项目中的router/index.ts-----------去掉createWebHashHistory中的Hash 将createWebHashHistory修改为createWebHistory 2、javaScript中去掉url中# 找到项目中的router/index.js-----------添加…

基于Nios-II的流水灯

基于Nios-II的流水灯 一、Qsys设计&#xff08;一&#xff09;新建项目&#xff08;二&#xff09;Platfrom Designer&#xff08;三&#xff09;设置时钟主频&#xff08;四&#xff09;添加Nios-II Processor并设置&#xff08;五&#xff09;添加JTAG并配置&#xff08;六&a…

做外贸用什么邮箱比较好?

外贸公司在推进公司业务时需要频繁进行跨国沟通&#xff0c;选择一款专业且功能强大的企业邮箱作为业务沟通工具至关重要。外贸企业邮箱需要满足5个基本内容&#xff0c;国际收发能力、安全稳定性、专业形象展示、功能完备性、客户服务与技术支持。本文将探讨做外贸时适合使用的…

STM32中的Systick的使用

SysTick&#xff0c;全称System Tick Timer&#xff0c;是Cortex-M microcontrollers内核中提供的一个简单而有效的系统定时器&#xff0c;设计用来给操作系统提供时间基准&#xff0c;或用于生成周期性的中断。STM32系列微控制器&#xff0c;作为基于ARM Cortex-M内核的设备&a…

Tkinter组件:Checkbutton

Tkinter组件&#xff1a;Checkbutton Checkbutton&#xff08;多选按钮&#xff09;组件用于实现确定是否选择的按钮。Checkbutton 组件可以包含文本或图像&#xff0c;你可以将一个 Python 的函数或方法与之相关联&#xff0c;当按钮被按下时&#xff0c;对应的函数或方法将被…

游戏全自动打金搬砖,单号收益300+ 轻松日入1000+

详情介绍 游戏全自动打金搬砖&#xff0c;单号收益300左右&#xff0c;多开收益更多&#xff0c;轻松日入1000 可矩阵操作。 项目长期稳定&#xff0c;全自动挂机无需人工操作&#xff0c;小白&#xff0c;宝妈&#xff0c;想做副业的都可以。

elementui+vue通过下拉框多选字段进行搜索模糊匹配

从字典中选择的值为["01","03"],在最开始的时候进行的处理是类似于表单提交的时候将json对象转换成了String类型 nature:["01","03"] this.queryParams.nature JSON.stringify(this.queryParams.nature); mapper层 <if test&quo…

springboot+vue+mybatis图书推荐管理系统的设计与实现+PPT+论文+讲解+售后

随着我国经济的高速发展与人们生活水平的日益提高&#xff0c;人们对生活质量的追求也多种多样。尤其在人们生活节奏不断加快的当下&#xff0c;人们更趋向于足不出户解决生活上的问题&#xff0c;图书推荐管理系统展现了其蓬勃生命力和广阔的前景。与此同时&#xff0c;为解决…

亲测快捷高效的编写测试用例方法

前言 测试用例是任何测试周期的第一步&#xff0c;对任何项目都非常重要。如果在此步骤中出现任何问题&#xff0c;则在整个软件测试过程中都会扩大影响。如果测试人员在创建测试用例模板时使用正确的过程和准则&#xff0c;则可以避免这种情况。 在本篇文章中将分享一些简单而…

PostgreSQL备份恢复与复制

前言 随着国家战略层面对信息安全关注度越来越高&#xff0c;数据库是基础软件国产化自主可控的重要方面之一。PG是世界上最流行的开源关系型数据库之一&#xff0c;并且他是类BSD开源许可&#xff0c;开源协议非常友好&#xff0c;可以随意分发、闭源和开源&#xff0c;可以用…

Shell变成规范与变量

目录 1. Shell脚本 1.1 Shell脚本概述 1.2 Shell的作用 1.3 Shell脚本的构成 2. 重定向与管道操作 2.1 交互式硬件设备 ​ 2.2 重定向操作 3. shell变量 3.1 自定义变量 3.2 变量的作用范围​编辑 3.3 整数变量的运算 4. 环境变量 4.1 特殊的Shell变量 4.2 只读变…