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”：将表格右对齐

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于 Appium 的 Android UI 自动化测试！（建议收藏）

基于 Appium 的 Android UI 自动化测试！（建议收藏）

自动化测试是研发人员进行质量保障的重要一环&#xff0c;良好的自动化测试机制能够让开发者及早发现编码中的逻辑缺陷&#xff0c;将风险前置。日常研发中&#xff0c;由于快速迭代的原因&#xff0c;我们经常需要在各个业务线上进行主流程回归测试&#xff0c;目前这种测试大…
阅读更多...
【八股】Java线程之间协作

【八股】Java线程之间协作

1. 指定线程执行顺序 可以使用join()方法&#xff08;但中间加了Thread.sleep(1000)以后就不按顺序执行&#xff0c;不知道为什么&#xff09; public static void main(String[] args) throws CloneNotSupportedException {// 创建线程对象Thread t1 new Thread(() -> {…
阅读更多...
关闭 Microsoft Word 2010 配置窗口

关闭 Microsoft Word 2010 配置窗口

关闭 Microsoft Word 2010 配置窗口 References 出现这种问题&#xff0c;主要是安装时所用账户和目前登陆的账户不为同一个账户造成的。或者你进行过覆盖安装或是重新安装过系统&#xff0c;但是 office 的安装目录没有更改。先激活 Microsoft Office&#xff0c;然后执行下列…
阅读更多...
我们使用 Postgres 构建多租户 SaaS 服务时踩的坑

我们使用 Postgres 构建多租户 SaaS 服务时踩的坑

原文 Our Multi-tenancy Journey with Postgres Schemas and Apartment。这篇和之前发出的「如何使用 Postgres 对一个多租户应用分片」相呼应。 多租户 (Multip-tenancy) 是当下的热门话题。我对多租户应用程序的定义是一个能够服务于多个客户的软件系统&#xff0c;每个客户都…
阅读更多...
Vscode创建php项目

Vscode创建php项目

1.安装中文插件&#xff08;可安装可不安装&#xff09; 2.安装主题&#xff08;可安装可不安装&#xff09; 3.安装和php相关的插件 4.打开文件夹 5.路由操作 查看项目中的route路由 浏览器中访问think 隐藏index.php入口文件 访问ThinkPHP5.1开发手册&#xff0c;复制apa…
阅读更多...
uni-app纵向步骤条

uni-app纵向步骤条

分享一下项目中自封装的步骤条&#xff0c;存个档~ 1. 话不多说&#xff0c;先看效果 2. 话还不多说&#xff0c;上代码 <template><!-- 获取一个数组&#xff0c;结构为[{nodeName:"流程发起"isAudit:falsetime:"2024-02-04 14:27:35"otherDat…
阅读更多...
Vue上实现上下左右无缝滚动、单步滚动-demo

Vue上实现上下左右无缝滚动、单步滚动-demo

安装 npm i vue3-seamless-scroll 效果 代码 示例一 <!--* Author: Jackie* Date: 2024-03-13 17:56:55 --> <template><vue3-seamless-scroll :list"list" class"scroll"><div class"item" v-for"(item, index) …
阅读更多...
宁波ISO14068碳中和，ISO14068认证，ISO14068辅导

宁波ISO14068碳中和，ISO14068认证，ISO14068辅导

ISO 14068是国际标准化组织&#xff08;ISO&#xff09;&#x1f4dd;发布的关于碳中和的标准✒️&#xff0c;也被称为“碳中和国际标准”。该标准&#x1f9f0;定义了碳中和的&#x1f4f1;概念&#xff0c;包括组织或产品&#x1f460;通过自身减排、边界内&#x1fae7;碳清…
阅读更多...
Python从0到100（七）：Python列表介绍及运用

Python从0到100（七）：Python列表介绍及运用

一、 列表概述 问题描述&#xff1a; 假设一个班有100个学生&#xff0c;如果每个变量存放一个学生的姓名&#xff0c;是不是很麻烦&#xff1f;如果有一千个学生甚至更多&#xff0c;那该怎么办呢&#xff1f; 列表是Python中的一种数据结构&#xff0c;它可以存储不同类型的…
阅读更多...
蓝桥杯学习笔记（贪心）

蓝桥杯学习笔记（贪心）

在很久很久以前&#xff0c;有几个部落居住在平原上&#xff0c;依次编号为1到n。第之个部落的人数为 t 有一年发生了灾荒&#xff0c;年轻的政治家小蓝想要说服所有部落一同应对灾荒&#xff0c;他能通过谈判来说服部落进行联台。 每次谈判&#xff0c;小蓝只能邀请两个部落参…
阅读更多...
打通数字化最后一公里,就是数据释放价值的最后一公里；

打通数字化最后一公里,就是数据释放价值的最后一公里；

前 言 2023年底&#xff0c;中共中央、国务院正式印发《关于构建数据基础制度更好发挥数据要素作用的意见》(以下简称《数据二十条》)&#xff0c;明确提出探索数据资产入表新模式&#xff0c;要积极探索数据资产入表的可行路径&#xff0c;加快推动数据入表的实施进度&…
阅读更多...
RK3568平台开发系列讲解（Linux系统篇）设备树中时钟描述

RK3568平台开发系列讲解（Linux系统篇）设备树中时钟描述

🚀返回专栏总目录 文章目录 一、时钟生产者（Clock Provider）1.1、clock-cells1.2、clock-frequency1.3、assigned-clocks 和 assigned-clock-rates1.4、clock-indices1.5、assigned-clock-parents二、时钟消费者（Clock Consumer）2.1、clocks
阅读更多...
Matlab之已知2点绘制长度可定义的射线

Matlab之已知2点绘制长度可定义的射线

目的&#xff1a;在笛卡尔坐标系中&#xff0c;已知两个点的位置&#xff0c;绘制过这两点的射线。同时射线的长度可以自定义。 一、函数的参数说明 输入参数&#xff1a; PointA&#xff1a;射线的起点&#xff1b; PointB&#xff1a;射线过的零一点&#xff1b; Length&…
阅读更多...
【微服务】认识Dubbo+基本环境搭建

【微服务】认识Dubbo+基本环境搭建

认识Dubbo Dubbo是阿里巴巴公司开源的一个高性能、轻量级的WEB和 RPC框架&#xff0c;可以和Spring框架无缝集成。Dubbo为构建企业级微服务提供了三大核心能力&#xff1a; 服务自动注册和发现、面向接口的 远程方法调用&#xff0c; 智能容错和负载均衡官网&#xff1a;https…
阅读更多...
unity 添加newtonsoft-json

unity 添加newtonsoft-json

再git url上添加&#xff1a;com.unity.nuget.newtonsoft-json
阅读更多...
seata测试demo(订单)

seata测试demo(订单)

seata工作流程: seata对分布式事务的协调和控制就是31 1>XID&#xff1a;XID是全局事务的唯一标识&#xff0c;它可以在服务的调用链路中传递&#xff0c;绑定到服务的事务上下文中。 3>TC->TM->RM TC:事务协调器>就是seata 负责维护全局事务和分支事务的状…
阅读更多...
Window平台应用程序打包（用Microsoft Visual Studio Installer Projects制作安装包）

Window平台应用程序打包（用Microsoft Visual Studio Installer Projects制作安装包）

window平台应用程序打包&#xff08;用Microsoft Visual Studio Installer Projects制作安装包&#xff09; 在window平台使用Visual Studio 开发完后&#xff0c;一般都需要打包成一个安装包文件 使用Visual Studio 自带的打包插件打包&#xff1a; 1 安装project setup打包…
阅读更多...
Day 15 Servlet(一)

Day 15 Servlet(一)

Servlet 1、简介2、快速入手2.1servlet jar包导入2.2 Content-type2.3 Servlet-url 写法2.4 注解方式配置servlet2.5 servlet 生命周期 1、简介 资源包括静态资源和动态资源。 对于服务器响应&#xff0c;有时候我们需要根据客户的不同请求返回不同的数据和页面。此时就需要一…
阅读更多...
代码随想录训练营第55天 | LeetCode 583. 两个字符串的删除操作、​​​​​​LeetCode 72. 编辑距离、总结

代码随想录训练营第55天 | LeetCode 583. 两个字符串的删除操作、​​​​​​LeetCode 72. 编辑距离、总结

目录 LeetCode 583. 两个字符串的删除操作 文章讲解&#xff1a;代码随想录(programmercarl.com) 视频讲解&#xff1a;LeetCode&#xff1a;583.两个字符串的删除操_哔哩哔哩_bilibili 思路 ​​​​​​LeetCode 72. 编辑距离 文章讲解&#xff1a;代码随想录(programm…
阅读更多...
一、Jdk和eclipse安装和配置

一、Jdk和eclipse安装和配置

1 JDK与eclipse的安装和配置 1.1JDK安装 1.2配置环境变量 &#xff08;1&#xff09;新建系统变量名为java_home,变量值为jdk安装路径&#xff0c;由自己决定&#xff0c;例如&#xff1a;C:\Program Files\Java\jdk-11.0.6 (2))新建系统变量名为classpath,变量值为".&q…
阅读更多...
最新文章

Copyright @ 2022~2023