Web常见标签属性

news2025/11/4 9:40:30
  • 应用软件：c/s（客户端与服务端）  b/s（服务器与浏览器架构）
  • web前端：html5、css3、JavaScript
  • Html5：超文本标记语言 超链接
  • 标签 语法规范<标签名> marquee 标签之间可以嵌套
  • 属性：定制元素行为。每一个标签存在自身的属性
  • 元素就是属性
  • 当属姓名=属性值，可以只写属性名
  • 注释：<!--    -->      ctrl+/
特殊符号作用释义

&nbsp;

空格
&yen;美元符号
&lt;小于号
&gt;大于号

一个网页的架构（在VScode敲 “ ！“，再回车可得基本框架）

<!DOCTYPE html><!-- #文档声明标签，默认是html5 -->
<html lang="en"><!-- #lang="en"当前文档的显示语言  zh-CN中文 -->
<head>
    <meta charset="UTF-8"><!-- UTF-8：万国码，包含了世界上所有的符号和文字 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> <!-- title里面不能内嵌标签 -->
</head>
<body>

<body>

   

</body>

</html>

常见标签属性 

1、单标签

标签属性

<br/>        换行标签

<hr/>        直线标签

<img src="图像URL" />         图像标签
属性描述
src图像的路径
alt图像不能显示时的替换文本
title鼠标悬停时显示的内容
width设置图像宽度
hight设置图像长度
border设置图像边框
<input >    输入标签
属性属性值描述
type
text
password
image
file
button
radio
checkbox
submit
reset

datetime-local

Email
color
单行文本输入
密码输入框
图像形式提交按键
文件域
普通按钮
单选按钮
复选按钮
提交按钮
充值按钮

时间

与日期

邮箱
颜色
name自定义控件名字
value自定义控件默认的文本值
size正整数控制在页面显示的宽度
maxiength正整数控制允许输入的最多字符
checked自定义默认选中
placeholder文本输入框中默认提示语句
readonlyreadonly只读
required自定义提交前必填
multiplemultiple与type中的file配合可以上传多个文件

maxlength

数字填入字符数

2、双标签

标签属性

<hn>  </hn>标题标签

HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

<p>  </p> 段落标签将整个网页分为若干个段落

<b></b>

 <strong></strong>

粗体标签

字体加粗

<em></em>

<i></i>

斜体标签

字体倾斜

<s></s>

<del></del>

删除线标签

字体呈现删除线

<u></u>

<ins></ins>

下划线标签

文字以下划线方式形式

<pre></pre>

格式保留标签

保留文本原格式

<sup></sup>

上标

<sub></sub>

下标

<video ></video>

视频标签
属性描述
src来源
loop次数

controls

控制台

autoplay

自动播放

muted

静音

<audio ></audio>

音频标签

src ：来源        controls：控制台

<a href=""></a>

链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。

target：用于指定链接页面的打开方式，其取值有self和blank两种，

其中self为默认值，blank为在新窗口中打开方式。

注意：

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位 

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）
  <a href="#two">   
​
2.使用相应的id名标注跳转目标的位置。
  <h3 id="two">第2集</h3>

 <details> </details>

细节标签

 <details>

           <summary>提示词</summary> 细节内容展示

        </details>

<label for=""></label

与id一起使用，点击选项前的文字也可以选择相应选项

<style></style>

全局属性

<marquee ></marquee>

滚动属性标签

是文本或图片滚动，用loop属性设置滚动次数

<select ></select>

下拉框

加上multiple可以滑动  name是下拉框名字

<option ></option>

下拉框选项

vlaue  这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。selected属性可以选定下拉框默认值

<textarea></textarea>

文本域

name：名字

cols：列  rows：行

 maxlength：字数 

 placeholder：输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。

<iframe ></iframe>

HTML 内联框架元素

它能够将另一个 HTML 页面嵌入到当前页面中。

src：被嵌套的页面的 URL 地址。

 frameborder：值为1（默认值）时，显示此框架的边框。值为0时移除边框。此属性已不赞成使用，请使用 CSS 属性 border 代替。

width：宽带     height：高度

<form>
  各种表单控件
</form>

表单域

form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器

①action="url地址"在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

②method="提交方式"用于设置表单数据的提交方式，其取值为get或post。

③name="表单名称"用于指定表单的名称，以区分同一个页面中的多个表单。

3、列表与表格

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

        <b>有序列表</b>

    <ol type="1" start="19"> 有序列表属性start

        <li>苹果</li>

        <li>西瓜</li>

        <li>橘子</li>

        <li>栗子</li>

    </ol>

    <b>无序列表</b>

    <ul type="square"> 无序列表的属性type

        <li>佳人们</li>

        <li>广播或</li>

        <li>持续性</li>

        <li>分隔符</li>

    </ul>

    <b>自定义列表</b>

    <dl>

        <dt>佳人们</dt> <!--  表头 -->

       <dd>想睡觉</dd>

       <dd>好东西</dd>

       <dd>去吃饭</dd>

    </dl>

  <b>表格</b>

    <table width="500px" border="2" cellspacing="1" background="./img/1.jpg">

<!-- 单元格之间距离是间距，字与单元格之间的距离是边距 -->

        <caption>牛人</caption><!-- 表格名 -->

        <thead>        <!-- 表格表头-->

           <tr align="center " bgcolor="red"><!-- 一个 tr 代表一行 -->

                 <td>111</td>          <!-- 一个 td 代表一行中的一格 -->

                 <td colspan="2" bgcolor="greenyellow">111</td><!--  colspan 列并列 -->

            </tr>

        </thead>

        <tbody>       <!-- 表格名正表-->

           <tr align="center" height="60px" bgcolor="softblue">

                 <td>222</td>

                 <td>222</td>

                 <td rowspan="2">222</td> <!--  rowspan 行并列 -->

           </tr>        

           <tr align="center">

                <td bgcolor="yellow">333</td>

                   <td>333</td>    

            </tr>

        </tbody>

         <tfoot>        <!-- 表格表底 -->

                <tr align="center">

                    <td bgcolor="greenyellow">444</td>

                    <td>444</td> 

                    <td bgcolor="greenyellow">444</td>   

                </tr>

        </tfoot>

    </table>

</body>

</html>

4、align属性 

  1. 对于文本元素（如段落、标题等）：

    • align=“left”：将元素左对齐。

    • align=“center”：将元素居中对齐。

    • align=“right”：将元素右对齐。

    • align=“justify”：将元素两端对齐。

  2. 对于图像元素：

    • align=“left”：将图像左对齐，文本环绕在图像右侧。

    • align=“right”：将图像右对齐，文本环绕在图像左侧。

    • align=“center”：将图像居中对齐，文本不环绕。

  3. 对于表格元素：

    • align=“left”：将表格左对齐。

    • align=“center”：将表格居中对齐。

    • align=“right”：将表格右对齐

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

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

相关文章

无锁、偏向锁、轻量级锁和重量级锁

无锁、偏向锁、轻量级锁和重量级锁

在 JDK 1.6 版本之前&#xff0c;所有的 Java 内置锁都是重量级锁。重量级锁会 造成 CPU 在用户态和核心态之间频繁切换&#xff0c;所以代价高、效率低。 JDK 1.6 版本为了减少获得锁和释放锁所带来的性能消耗&#xff0c;引入了偏向锁和 轻量级锁的实现。所以&#xff0c;…
阅读更多...
【AI】大模型API调研及推荐

【AI】大模型API调研及推荐

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 【AI】大模型API调研及推荐引入调研KimiAPI对接 国内GPT4的转发API对接 总结 【AI…
阅读更多...
Python利用Turtle小乌龟实现推箱子游戏

Python利用Turtle小乌龟实现推箱子游戏

文章目录&#xff1a; 一&#xff1a;运行效果 1.演示 2.思路和功能 二&#xff1a;代码 文件架构 level.py PushBox.py 必备知识&#xff1a;python图形化编程turtle小乌龟 一&#xff1a;运行效果 1.演示 效果图◕‿◕✌✌✌ Python利用Turtle小乌龟实现推箱子游戏运…
阅读更多...
34-Java传输对象模式 ( Transfer Object Pattern )

34-Java传输对象模式 ( Transfer Object Pattern )

Java传输对象模式 实现范例 传输对象模式&#xff08;Transfer Object Pattern&#xff09;用于从客户端向服务器一次性传递带有多个属性的数据传输对象也被称为数值对象&#xff0c;没有任何行为传输对象是一个具有 getter/setter 方法的简单的 POJO 类&#xff0c;它是可序列…
阅读更多...
二分图

二分图

数据结构、算法总述&#xff1a;数据结构/算法 C/C-CSDN博客 二分图&#xff1a;节点由两个集合组成&#xff0c;且两个集合内部没有边的图。换言之&#xff0c;存在一种方案&#xff0c;将节点划分成满足以上性质的两个集合。 染色法 目的&#xff1a;验证给定的二分图是否可…
阅读更多...
【JDBC编程】基于MySql的Java应用程序中访问数据库与交互数据的技术

【JDBC编程】基于MySql的Java应用程序中访问数据库与交互数据的技术

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …
阅读更多...
mybatis plus intercept修改sql

mybatis plus intercept修改sql

原始需求 在SQL语句前面加上一个request-id 问题描述 今天收到业务同学反馈&#xff0c;说接入某个SDK后&#xff0c;request-id本地debug发现sql已经修改了&#xff0c;但打印的sql中却没有request-id信息 看了下代码&#xff0c;发现用户的代码其实就是下方 方案一代码&am…
阅读更多...
【C++进阶】竞赛常用库函数

【C++进阶】竞赛常用库函数

一、排序 sort简介 sort函数包含在头文件<algorithm>中。在使用前需要#include <algorithm>或使用万能头文件。sort是C标准库中的一个函数模板&#xff0c;用于对指定范围内的元素进行排序。sort算法使用的是快速排序(QuickSort)或者类似快速排序的改进算法&…
阅读更多...
OCP NVME SSD规范解读-14.Firmware固件升级要求

OCP NVME SSD规范解读-14.Firmware固件升级要求

4.11节 Firmware Update Requirements 描述了数据中心NVMe SSD固件更新的具体要求&#xff0c;确保固件升级过程既安全又可靠&#xff0c;同时充分考虑了设备在升级过程中的可用性和功能性。 FWUP-1: 设备必须记录每一次固件激活过程。这意味着固件升级过程中&#xff0c;设备会…
阅读更多...
一文搞懂 YOLOv9 训练推理全流程 | YOLOv9你绝对不知道的细节!

一文搞懂 YOLOv9 训练推理全流程 | YOLOv9你绝对不知道的细节!

文章地址&#xff1a;https://arxiv.org/pdf/2402.13616.pdf 代码地址&#xff1a;https://github.com/WongKinYiu/yolov9 前言 在这篇博客中&#xff0c;我们来聊聊 YOLOv9。首先&#xff0c;值得注意的一点是&#xff0c;YOLOv9的变化相对较小&#xff0c;它仍然基于YOLOv5的…
阅读更多...
在线影院项目话术（0.7w精选）

在线影院项目话术（0.7w精选）

项目介绍 这个电影院项目不同于常见的基于会员限制用户观看范围的在线影院项目&#xff0c;主要就是按需购买片源来进行观看&#xff0c;用户就不会因高额的会员费而劝退。 项目的主要实现就是&#xff1a;微服务的五大主键&#xff0c;数据库使用mysql,redis&#xff0c;中间…
阅读更多...
2024年湖北荆门市工程系列职称评审开始啦

2024年湖北荆门市工程系列职称评审开始啦

(一)中级测试对象&#xff1a;拟参加近两年度相关系列(专业)中级技术职务评审&#xff0c;且未取得中级水平能力测试合格证书的专业技术人员。 (二)初级测试对象&#xff1a;拟参加近两年度档案专业、工程系列助理级职称评审&#xff0c;且未取得初级水平能力测试合格证书的专业…
阅读更多...
白酒：陈酿过程中的老熟度评价与品质提升方法

白酒：陈酿过程中的老熟度评价与品质提升方法

在豪迈白酒的酿造过程中&#xff0c;陈酿是一个至关重要的环节。陈酿不仅能使白酒老熟&#xff0c;提品质&#xff0c;还能发展出与众不同的风味和口感。云仓酒庄深知陈酿的重要性&#xff0c;并进行了深入的研究和实践。本文将探讨陈酿过程中的老熟度评价与品质提升方法。 首先…
阅读更多...
蓝桥杯day7刷题日记

蓝桥杯day7刷题日记

P8697 [蓝桥杯 2019 国 C] 最长子序列 思路&#xff1a;直接遍历&#xff0c;和子序列相同就记录&#xff0c;不然就下一位 #include <iostream> #include <string> using namespace std; int res;int main() {string s,t;cin>>s>>t;int i0,j0;while…
阅读更多...
IDEA 远程调试

IDEA 远程调试

1.什么是远程调试 Java提供了一个远程调试功能&#xff0c;支持设置断点及线程级的调试同时&#xff0c;不同的JVM通过接口的协议联系&#xff0c;本地的Java文件在远程JVM建立联系和通信。 2.服务端开启远程调试 开启远程调试功能&#xff0c;需要修改tomcat 的catalina.sh…
阅读更多...
目录框架【欢迎订阅收藏】

目录框架【欢迎订阅收藏】

前端篇 第一章vue.js 1.Vue.js入门及环境搭建 2.vue.js基础知识 3.Vue.js自定义组件 Vue.js路由 5.Vue.js状态管理 6.网络通信axios 第二章Tailwindcss 1.tailwindcss介绍及引入 2.基础样式 3.组件样式 4.工具样式 第三章Nuxt 1.nuxt介绍及环境搭建 2.nuxt 目录结构 3.nuxt …
阅读更多...
ElasticSearch文档批量操作[ES系列] - 第503篇

ElasticSearch文档批量操作[ES系列] - 第503篇

历史文章&#xff08;文章累计500&#xff09; 《国内最全的Spring Boot系列之一》 《国内最全的Spring Boot系列之二》 《国内最全的Spring Boot系列之三》 《国内最全的Spring Boot系列之四》 《国内最全的Spring Boot系列之五》 《国内最全的Spring Boot系列之六》 《…
阅读更多...
超声波清洗机怎么选？过来人推荐四大表现突出的宝藏眼镜清洗机！

超声波清洗机怎么选？过来人推荐四大表现突出的宝藏眼镜清洗机！

如果你清洁眼镜的时候总是习惯用纸巾或者是衣服擦的话&#xff0c;我劝你要赶紧把这个坏习惯给改掉&#xff01;很多不知道原因的朋友会问&#xff0c;为什么不能用纸巾擦眼镜&#xff1f;其实是因为纸巾还有衣服布料上&#xff0c;存在一些比较粗糙的微粒&#xff0c;人体手部…
阅读更多...
车载测试 HIL测试详解

车载测试 HIL测试详解

HIL测试&#xff1a;即硬件在环测试&#xff0c;是一种广泛应用于汽车电子控制系统领域的测试方法。它将实际的硬件&#xff08;如ECU、传感器、执行器等&#xff09;与模拟器件&#xff08;如模型、仿真器等&#xff09;通过接口连接起来&#xff0c;模拟实际的操作环境&#…
阅读更多...
动态规划-----最长公共子序列（及其衍生问题）

动态规划-----最长公共子序列（及其衍生问题）

目录 一.最长公共子序列的基本概念&#xff1a; 解决动态规划问题的一般思路&#xff08;三大步骤&#xff09;&#xff1a; 二.最长公共子序列题目&#xff1a; 三.字符串的删除操作&#xff1a; 四.最小 ASCII 删除和&#xff1a; 一.最长公共子序列的基本概念&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023