Web常见标签属性

  • 应用软件：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.mzph.cn/news/770156.shtml

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

相关文章

Redis中的事务机制

Redis中的事务机制

Redis中的事务机制 概述。 事务表示一组动作&#xff0c;要么全部执行&#xff0c;要么全部不执行。例子如下。 Redis提供了简单的事务功能&#xff0c;讲一组需要一起执行的命令放到multi和exec两个命令之间。multi命令代表事务开始&#xff0c;exec命令代表事务结束&#x…
阅读更多...
【项目】均衡代码评测

【项目】均衡代码评测

TOC 目录 项目介绍 开发环境 主要技术 项目实现 公共模块 日志 工具类 编译运行模块 介绍 编译 运行 编译和运行结合起来 业务逻辑模块 介绍 MVC模式框架 模型&#xff08;Model&#xff09; 视图&#xff08;View) 控制器&#xff08;Controller&#xff09…
阅读更多...
使用html做一个2048小游戏

使用html做一个2048小游戏

下载地址: https://pan.xunlei.com/s/VNtiF13HxmmE4gglflvS1BUhA1?pwdvjrt# 提取码&#xff1a;vjrt”
阅读更多...
Linux文件系统 底层原理

Linux文件系统 底层原理

linux文件、目录、Inode inode负责文件的元数据和数据存储&#xff0c;文件存储块负责实际数据的存储&#xff0c;而目录文件维护文件名和inode之间的联系。 1. 用户空间到内核空间 首先&#xff0c;当用户程序请求打开一个文件时&#xff08;例如使用open系统调用&#xff09…
阅读更多...
C/C++ 一些使用网站收集...

C/C++ 一些使用网站收集...

C/C 标准 各种语言协议标准文档 open-std.org 网站 C语言标准文档 open-std.org C基金会网站 C/C 标准库网站 c/c 标准库 cplusplus.com 网站 c/c标准库 cppreference.com 网站 C Core Guidelines【isocpp.org】 C/C 发展 C现有状态及未来规划【isocpp.org】
阅读更多...
Excel 打开后提示：MicrosoftExcel无法计算某个公式。在打开的工作簿中有一个循环引用...

Excel 打开后提示：MicrosoftExcel无法计算某个公式。在打开的工作簿中有一个循环引用...

目录预览 一、问题描述二、原因分析三、解决方案四、参考链接 一、问题描述 MicrosoftExcel无法计算某个公式。在打开的工作簿中有一个循环引用&#xff0c;但无法列出导致循环的引I用。请尝试编辑上次输入的公式&#xff0c;或利用“撤消”命令删除该公式&#xff0c;如下图&…
阅读更多...
Matplotlib如何显示多张图片（管理多个子图）

Matplotlib如何显示多张图片（管理多个子图）

Matplotlib 可以使用 subplot 或 subplots 方法来创建子图&#xff0c;从而在同一窗口中显示多张图片。以下是一些示例代码&#xff0c;展示如何使用 Matplotlib 显示多张图片&#xff1a; 1.使用 subplot import matplotlib.pyplot as plt import matplotlib.image as mpi…
阅读更多...
微服务（基础篇-003-Nacos）

微服务（基础篇-003-Nacos）

目录 Nacos注册中心&#xff08;1&#xff09; 认识和安装Nacos&#xff08;1.1&#xff09; Nacos快速入门&#xff08;1.2&#xff09; 服务注册到Nacos(1.2.1) Nacos服务分级存储模型&#xff08;1.3&#xff09; 配置集群&#xff08;1.3.1&#xff09; 根据集群修改…
阅读更多...
pta L1-004 计算摄氏温度

pta L1-004 计算摄氏温度

L1-004 计算摄氏温度 分数 5 全屏浏览 切换布局 作者 陈建海 单位 浙江大学 给定一个华氏温度F&#xff0c;本题要求编写程序&#xff0c;计算对应的摄氏温度C。计算公式&#xff1a;C5(F−32)/9。题目保证输入与输出均在整型范围内。 输入格式: 输入在一行中给出一个华氏…
阅读更多...
如何用Airtest脚本连接无线Android设备？

如何用Airtest脚本连接无线Android设备？

之前我们已经详细介绍过如何用AirtestIDE无线连接Android设备&#xff0c;它的关键点在于&#xff0c;需要先 adb connect 一次&#xff0c;才能点击 connect 按钮无线连接上该设备&#xff1a; 但是有很多同学&#xff0c;在使用纯Airtest脚本的形式连接无线设备时&#xff0c…
阅读更多...
odoo中，使用paramiko库ssh连接Linux

odoo中，使用paramiko库ssh连接Linux

在 Python 中&#xff0c;可以使用 Paramiko 库来实现 SSHClient 连接。Paramiko 是一个用于远程登录、文件传输和自动化的 SSH 客户端库。 import paramiko# 创建 SSHClient 对象 ssh paramiko.SSHClient()# 设置自动添加主机密钥 ssh.set_missing_host_key_policy(paramiko.…
阅读更多...
K8s-网络原理-下篇

K8s-网络原理-下篇

引言 本文是《深入剖析 K8s》的学习笔记&#xff0c;相关图片和案例可从https://github.com/WeiXiao-Hyy/k8s_example中获取&#xff0c;欢迎Star! K8s 的网络隔离: NetWorkPolicy K8s 如何考虑容器之间网络的“隔离” -> NetWorkPolicy 以下是一个 NetWorkPolicy 的定义…
阅读更多...
气候模型与大模型结合的高精度天气预报技术研究

气候模型与大模型结合的高精度天气预报技术研究

1. 背景介绍 随着全球气候变化的加剧&#xff0c;天气预报的准确性变得越来越重要。传统的气候模型在预测长期气候变化方面取得了显著进展&#xff0c;但在短期天气预报方面仍存在一定的局限性。近年来&#xff0c;随着人工智能技术的发展&#xff0c;尤其是大模型在自然语言处…
阅读更多...
Android开发 --- Android12外部存储权限问题

Android开发 --- Android12外部存储权限问题

1.问题 Android12使用如下权限&#xff0c;将不会获得读写文件的权限 <uses-permission android:name"android.permission.WRITE_EXTERNAL_STORAGE" /> 2.解决 if (!Environment.isExternalStorageManager()) {Intent intent new Intent(Settings.ACTION_M…
阅读更多...
将数据转换成xml格式的文档并下载

将数据转换成xml格式的文档并下载

现在有一个实体类对象的集合&#xff0c;需要将它们转换为xml文档&#xff0c;xml文档就是标签集合的嵌套&#xff0c;例如一个学生类&#xff0c;有姓名、年龄等&#xff0c;需要转换成一下效果&#xff1a; <student><age>14</age><name>张三</na…
阅读更多...
Java学习Day3

Java学习Day3

一道简单练习题&#xff0c;对编号进行随机排名 import java.util.Random; import java.util.Scanner;public class Main {public static void rand(int[] a,int n){Random rnew Random();for (int i0;i<n;i){int rrr.nextInt(n);int tempa[i];a[i]a[rr];a[rr]temp;}}publ…
阅读更多...
如何更换Ubuntu系统的软件源

如何更换Ubuntu系统的软件源

Ubuntu系统的软件源是决定你的系统从哪里下载软件包和更新的关键设置。有时&#xff0c;由于网络连接问题或软件源的更新&#xff0c;你可能需要更换软件源。以下是详细的步骤&#xff0c;教你如何在Ubuntu系统上更换软件源&#xff0c;并确保在更改之前进行备份。 步骤1&…
阅读更多...
时间戳的转换-unix时间戳转换为utc时间（python实现）

时间戳的转换-unix时间戳转换为utc时间（python实现）

import datetimetimestamp = 1711358882# 将时间戳转换为UTC时间 utc_time = datetime.datetime.utcfromtimestamp(timestamp)# 格式化并输出时间 formatted_time = utc_time.strftime(%Y-%m-%d %H:%M:%S) print(formatted_time)同样：UTC如何转换为unix时间戳 from datetime …
阅读更多...
如何利用python 把一个表格某列数据和另外一个表格某列匹配 类似Excel VLOOKUP功能

如何利用python 把一个表格某列数据和另外一个表格某列匹配 类似Excel VLOOKUP功能

环境： python3.8.10 Excel2016 Win10专业版 问题描述： 如何利用python 把一个表格某列数据和另外一个表格某列匹配 类似Excel VLOOKUP功能 先排除两表A列空白单元格，然后匹配x1表格和x2表格他们的A列，把x1表格中A列A1-A810范围对应的B列B1-B810数据，匹配填充到x2范围…
阅读更多...
进程和线程的区别

进程和线程的区别

进程 什么是进程呢 进程就是一个正在执行的程序 ,是计算机操作系统进行资源分配和任务调度的基本单位. 进程是计算机中的程序关于某个数据集合上的一次运行活动,是系统分配资源的基本单位,是操作系统结构的基础.每个进程都有它自己的地址空间,包括文本区域 、数据区域和堆栈区…
阅读更多...
最新文章

Copyright @ 2022~2023