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.rhkb.cn/news/285917.html

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

相关文章

第九届蓝桥杯大赛个人赛省赛（软件类）真题C 语言 A 组-乘积尾零

第九届蓝桥杯大赛个人赛省赛（软件类）真题C 语言 A 组-乘积尾零

solution 找末尾0的个数&#xff0c;即找有多少对2和5 >问题等价于寻找所给数据中&#xff0c;有多少个2和5的因子&#xff0c;较少出现的因子次数即为0的个数 #include <iostream> using namespace std; int main() {// 请在此输入您的代码printf("31");…
阅读更多...
【机器学习300问】44、P-R曲线是如何权衡精确率和召回率的？

【机器学习300问】44、P-R曲线是如何权衡精确率和召回率的？

关于精确率和召回率的基础概念我已经写了两篇文章&#xff0c;如果友友还不知道这两个评估指标是什么&#xff0c;可以先移步去看看这两篇文章&#xff1a; 【机器学习300问】25、常见的模型评估指标有哪些&#xff1f;http://t.csdnimg.cn/JtuUO 总结一下这两个概念&a…
阅读更多...
C语言动态内存管理

C语言动态内存管理

CSDN成就一亿技术人 目录 一.为什么要存在动态内存分配 二.动态内存函数 1.malloc和free 2.calloc 3.realloc 三.常见的动态内存错误 1.对NULL指针的解引用操作 2.对动态开辟空间的越界访问 3.对非动态开辟内存使用free释放 4.使用free释放一块动态开辟内存的一…
阅读更多...
总结虚函数表机制——c++多态底层原理

总结虚函数表机制——c++多态底层原理

前言&#xff1a; 前几天学了多态。 然后过去几天一直在测试多态的底层与机制。今天将多态的机制以及它的本质分享给受多态性质困扰的友友们。 本节内容只涉及多态的原理&#xff0c; 也就是那张虚表的规则&#xff0c;有点偏向底层。 本节不谈语法&#xff01;不谈语法&#x…
阅读更多...
【MySQL】InnoDB引擎

【MySQL】InnoDB引擎

逻辑结构 InnoDB存储引擎逻辑结构如图所示&#xff1a; Tablespace&#xff1a;表空间&#xff0c;一个数据库可以对应多个表空间。数据库中的每张表都有一个表空间&#xff0c;用来存放表记录、索引等数据。 Segment&#xff1a;段&#xff0c;表空间中有多个段&#xff0c…
阅读更多...
R语言迅速计算多基因评分（PRS）

R语言迅速计算多基因评分（PRS）

Polygenic Risk Scores in R 最朴素的理解PRS&#xff1a; GWAS分析结果中&#xff0c;有每个SNP的beta值、se值、P值&#xff0c;因为GWAS分析中将SNP变为0-1-2编码&#xff0c;所以这些显著的SNP的beta值&#xff0c;就可以用于预测。 比如&#xff1a;GWAS分析中&#xf…
阅读更多...
iOS开发之SwiftUI

iOS开发之SwiftUI

iOS开发之SwiftUI 在iOS开发中SwiftUI与Objective-C和Swift不同&#xff0c;它采用了声明式语法&#xff0c;相对而言SwiftUI声明式语法简化了界面开发过程&#xff0c;减少了代码量。 由于SwiftUI是Apple推出的界面开发框架&#xff0c;从iOS13开始引入&#xff0c;Apple使用…
阅读更多...
成为创作者的第 730 天——创作纪念日

成为创作者的第 730 天——创作纪念日

​​ 文章目录 &#x1f4e8; 官方致信&#x1f3af;我的第一篇文章&#x1f9e9; 机缘与成长 &#x1f3af; 成就&#x1f3af; 目标 &#x1f4e8; 官方致信 今天早上打开 CSDN 私信一看&#xff0c;看到了这一条消息&#xff0c;然后看了下日期。突然感慨到&#xff0c;是…
阅读更多...
基于NetCoreServer的WebSocket客户端实现群播（学习笔记）

基于NetCoreServer的WebSocket客户端实现群播（学习笔记）

一、NetCoreServer介绍 超快速、低延迟的异步套接字服务器和客户端 C# .NET Core 库&#xff0c;支持 TCP、SSL、UDP、HTTP、HTTPS、WebSocket 协议和 10K 连接问题解决方案。 开源地址&#xff1a;https://github.com/chronoxor/NetCoreServer 支持&#xff1a; Example: TC…
阅读更多...
Java中的代理模式(动态代理和静态代理)

Java中的代理模式(动态代理和静态代理)

代理模式 我们先了解一下代理模式&#xff1a; 在开发中&#xff0c;当我们要访问目标类时&#xff0c;不是直接访问目标类&#xff0c;而是访问器代理类。通过代理类调用目标类完成操作。简单来说就是&#xff1a;把直接访问变为间接访问。 这样做的最大好处就是&#xff1a…
阅读更多...
基于Spring Boot网络相册设计与实现

基于Spring Boot网络相册设计与实现

摘 要 网络相册设计与实现的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品&#xff0c;体验高科技时代带给人们的方便&#xff0c;同时也能让用户体会到与以往常规产品不同的体验风格。 与安卓&#xff0c;iOS相比较起来&am…
阅读更多...
在微信小程序中或UniApp中自定义tabbar实现毛玻璃高斯模糊效果

在微信小程序中或UniApp中自定义tabbar实现毛玻璃高斯模糊效果

backdrop-filter: blur(10px); 这一行代码表示将背景进行模糊处理&#xff0c;模糊程度为10像素。这会导致背景内容在这个元素后面呈现模糊效果。 background-color: rgb(255 255 255 / .32); 这一行代码表示设置元素的背景颜色为白色&#xff08;RGB值为0, 0, 0&#xff09;&a…
阅读更多...
第八节：深入讲解SMB中的Http组件

第八节：深入讲解SMB中的Http组件

一、概述 Http组作是SMB中的核心组件之一&#xff0c;在第七节中讲解了如何简洁的进行web程序部署和运行&#xff0c;这只是它的功能之一。在本节中&#xff0c;我们将介绍Http组件的重要属性。 二、请求头Request 1、支持方法 支持POST、GET、PUT、DELETE、OPTIONS等方法&a…
阅读更多...
uniapp ios证书失效

uniapp ios证书失效

前面是按照网上查找的方法 作者大大的地址 1、一个ios账户&#xff08;688付费版&#xff09; 2、登录 Apple Developer 3、创建Identifiers ps&#xff1a;创建时需继承苹果的sdk&#xff0c;只需要一个就行 点击continue再点击Register即可 4、创建.cer证书 &…
阅读更多...
DP：斐波那契数列模型

DP：斐波那契数列模型

创作不易&#xff0c;感谢三连支持 &#xff01; 斐波那契数列用于一维探索的单峰函数之中&#xff0c;用于求解最优值的方法。其主要优势为&#xff0c;在第一次迭代的时候求解两个函数值&#xff0c;之后每次迭代只需求解一次 。 一、第N个泰波那契数 . - 力扣&#xff08;…
阅读更多...
AnyGo for Mac最新激活版：位置模拟软件打破地域限制

AnyGo for Mac最新激活版：位置模拟软件打破地域限制

AnyGo for Mac&#xff0c;一款专为Mac用户打造的位置模拟软件&#xff0c;让您能够轻松打破地域限制&#xff0c;畅享无限可能。 软件下载&#xff1a;AnyGo for Mac v7.0.0最新激活版 通过AnyGo&#xff0c;您可以随时随地模拟出任何地理位置&#xff0c;无论是国内热门景点还…
阅读更多...
Word2vec学习笔记

Word2vec学习笔记

&#xff08;1&#xff09;NNLM模型&#xff08;神经网络语言模型&#xff09; 语言模型是一个单纯的、统一的、抽象的形式系统&#xff0c;语言客观事实经过语言模型的描述&#xff0c;比较适合于电子计算机进行自动处理&#xff0c;因而语言模型对于自然语言的信息处理具有重…
阅读更多...
【Unity】uDD插件抓屏文字显示不清晰怎么办？

【Unity】uDD插件抓屏文字显示不清晰怎么办？

【背景】 之前介绍过用一款简称uDD&#xff08;uDesktopDuplication&#xff09;的开源插件抓取电脑桌面。整体效果不错&#xff0c;看电影很流畅。但是当切换到文档&#xff0c;或者仔细看任何UI的文字部分时&#xff0c;发现就模糊了。 【分析】 由于是依托于Canvas上的Te…
阅读更多...
【vue3学习之路（一）】

【vue3学习之路（一）】

文章目录 前言一、vue3项目创建1.1环境准备1.1.1 基于 vue-cli 创建&#xff08;脚手架创建&#xff09;1.1.2 基于 vite 创建&#xff08;推荐&#xff09; 二、熟悉流程总结 前言 参考视频&#xff1a;https://www.bilibili.com/video/BV1Za4y1r7KE?p10&spm_id_frompag…
阅读更多...
怎么压缩动图的大小？gif图片过大怎么压缩？动图压缩不求人

怎么压缩动图的大小？gif图片过大怎么压缩？动图压缩不求人

工作中&#xff0c;大家都可能会遇到处理GIF图片的情况。 比如&#xff1a; 1.网站 网页上如果有一大堆图片&#xff0c;一定要处理动图&#xff08;它容量太大了&#xff09;。 因为这玩意多了很卡&#xff0c;使网页加载速度慢。 2.公众号 公众号上传动图和整篇推文是有…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发