HTMl标签;知识回忆;笔记分享;

             HTML标签是用于定义和组织网页内容的基础构建块。每个标签都有特定的作用。

一,标准结构标签:

HTML文档标准结构:
 

<html><head></head><body>this is my second html... </body>
</html>

【1】html标签


                       定义 HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。

【2】head标签---》里面放的是页面的配置信息


                        head标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
     

【3】body标签---》里面放的就是页面上展示出来的内容


                        body 元素是定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)body是用在网页中的一种HTML标签,标签是用在网页中的一种HTML标签,表示网页的主体部分,也就是用户可以看到的内容,可以包含文本、图片、音频、视频等各种内容!

二,常用标签详解

1,head中常用标签:

<html><!-- 这是一个注释,注释的快捷键是ctrl+shift+/--><!--head标签中:放入:页面的配置信息head标签中可以加入:<title>、<meta>、<link>、<style>、 <script>、 <base>。--><head><!--页面标题--><title>百度一下,你就知道</title><!--设置页面的编码,防止乱码现象利用meta标签,charset="utf-8" 这是属性,以键值对的形式给出  k=v a=b 告诉浏览器用utf-8来解析这个html文档--><meta charset="utf-8" /><!--简写--><!--繁写形式:(了解)--><!--<meta http-equiv="content-type" content="text/html;charset=utf-8" />--><!--页面刷新效果--><!--<meta http-equiv="refresh" content="3;https://www.baidu.com" />--><!--页面作者--><meta name="author" content="msb;213412@qq.com" /><!--设置页面搜索的关键字--><meta name="keywords" content="架构师课程" /><!--页面描述--><meta name="description" content="架构师页" /><!--link标签引入外部资源--><link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" /></head><body></body>
</html>

2,body中常用标签:

   (1)body中的图片标签:

                <img     />  :没有结尾关闭  为单标签  是行级标签(自动和其它标签在一行如果没有换行标签)
                src :图片地址:uri地址  
                height:高
                width:宽
                alt:在图片因意外未加载成功时,该属性值占据图片位置进行显示的信息。
                title:图片鼠标悬浮在图片上方的提升信息
                <br/> :换行标签

   (2)超链接标签:

····<a></a>中可以为图片也可以为汉字等。
            ···    属性:
                                href:写跳转后的目标地址   加对应服务器的变量名点击后直接转入搜索值的结果页面。
                                title:图片鼠标悬浮在链接上方的提升信息

        (3)表单标签:

        <form></form>:表单标签        包裹所有的表单元素。

属性 :
                     action:表单添加action属性        用于按钮        提交        表单内容的目的地址

                                                

                    method:
                                       表单数据提交的方式

                 target:表单数据响应的信息显示的位置(开新页面还是在本页面)

                常用表单元素:
文本框:

                <input></input>默认type是文本输入框

                        输入框,宽和高用style选择。

                        属性:name :用来保存用户输入的信息内容

                        maxlength:限制文本框输入的最大长度

                        placeholder:文本框在未输入值前的提示信息

                        readonly:只读  (在使用时因为只有一个选择且和其属性名相同,所以在使用时可以不赋值。)

                        value: 为文本框赋值 (用户输入的值就是value值,可以用其设置默认值:在文本框默认有)

                        disable: 禁用    也可以简写disable,不赋值。禁用和只读区别是禁用的值在提交表单时不会被提交。

                        type=“text”:设置input标签为文本框

                        输入框中的属性name ,在输入框中输入的内容都会赋值d。然后用提交按钮提交给表单。

密码框:

                        input的type=“password”    ,属性和文本框一致

单选按钮:

                        input的type=“radio”  属性和文本框一致,但是name还有区分是否为同一组单选按钮的作用,且有value属性值才会提交按钮内容

                        注:type选择类型时不能有空格,否则赋值失败
                               disabled:让该单选按钮禁用
                               checked:默认,开始时有其属性的按钮默认选择

复选框:

                除了 input 的type=“checkbox”  其余和单选按钮一致。

隐藏域:

input 的type=“hidden ”  不会显示在页面中,但里面内容会提交

按钮:

时间控件:

邮箱控件:

下拉列表:

                       

(4)表格标签:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--表格:4行4列table:表格tr:行td:单元格th:特殊单元格:表头效果:加粗,居中默认情况下表格是没有边框的,通过属性来增加表框:border:设置边框大小cellspacing:设置单元格和边框之间的空隙align="center"  设置居中background 设置背景图片 background="img/ss.jpg"bgcolor :设置背景颜色rowspan:行合并colspan:列合并--><table border="1px" cellspacing="0px" width="400px" height="300px" bgcolor="darkseagreen" ><tr bgcolor="bisque"><th>学号</th><th>姓名</th><th>年纪</th><th>成绩</th></tr><tr><td align="center">1001</td><td>丽丽</td><td>19</td><td rowspan="3">90.5</td></tr><tr><td colspan="2" align="center">2006</td><td>30</td></tr><tr><td>3007</td><td>小明</td><td>18</td></tr></table></body>
</html>

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

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

相关文章

python-FastApi框架

文章目录 FastApi一. 简介二. 特性三. 安装1. 安装fastapi模块2. 安装ASGI服务器( Uvicorn 或者 Hypercorn) 四. 实例1. 创建**main.py**文件(GET请求)2. 运行3. 测试4. 更新main_py(加入PUT请求) 五. 自动化API文档1. Swagger UI(交互式文档)2. ReDoc(可选式文档) FastApi 一…

企微获客链接 中文乱码问题处理

企微获客链接 中文乱码问题处理 问题背景问题处理补充内容 问题背景 为了推广产品&#xff0c;同时更好的服务客户&#xff0c;公司在接入企业微信后&#xff0c;需要用到企微获客链接相关推广操作&#xff0c;那么通过API 接口创建企微获客链接时&#xff0c;出现了中文乱码问…

OpenCV 图像处理基础算法介绍c++

VS2022配置OpenCV环境 关于OpenCV在VS2022上配置的教程可以参考&#xff1a;VS2022 配置OpenCV开发环境详细教程 图像处理 图像处理是一个广泛的领域&#xff0c;它涉及到对图像数据进行分析、修改和改进的各种技术。以下是一些基本的图像处理操作&#xff0c;这些操作通常可…

AntV G6 的坑之——渲染残留/残影

G6 4.x 依赖的渲染引擎 antv/g4.x 版本支持了局部渲染&#xff0c;带了性能提升的同时&#xff0c;也带来了图形更新时可能存在渲染残影的问题。比如拖拽节点时&#xff0c;节点的文本会留下轨迹。 解决办法&#xff1a; 关闭局部渲染&#xff0c;graph.get("canvas"…

uni-app组件

一. 什么是组件,有什么好处? 在uni-app中&#xff0c;组件是构成应用的基本单位&#xff0c;它们是用来定义用户界面的一部分&#xff0c;并且通常包含了视图和逻辑。组件的设计使得开发者能够以声明式的方式构建应用界面&#xff0c;并且通过组件化的开发方式来提高代码的复…

Centos7 java安装

卸载自带 jdk 查询所有的 java( 使用最小配置命令行则查询不出 java 直接进行安装即可 ) 卸载以下4个java软件 删除之后在使用命令进行查询 rpm -qa | grep java 解压jdk&#xff1a; 找到下载位置 使用Ctrlf搜索 配置环境变量&#xff1a; 打开/ etc/profile 在末尾添加以下…

旅游行业怎么利用C#接口发送短信

旅游企业一般拥有众多的分支机构&#xff0c;同时各地分支机构又有众多下属分散在当地各区的旅游营业报名点&#xff0c;以前传统的解决方案是采用专线、MODEM拔号等方式&#xff0c;专线的成本很高&#xff0c;MODEM拔号更费时&#xff0c;且长途拔号互联成本在多点情况下费用…

【一起学Rust | 框架篇 | Tauri2.0框架】rust和前端的相互调用(前端调用rust)

文章目录 前言1. 前端调用rust&#xff08;command&#xff09;1. 在后端定义一个command2. 注册command3. 前端调用command 2. 前端调用rust&#xff08;event&#xff09;4. command完整实例 前言 本期将继续接着上一期&#xff0c;继续探索tauri中rust和前端的相互调用&…

【ceph学习】ceph如何进行数据的读写(1)

版本 ceph版本为17. ceph如何进行读写接口的实现 Ceph的客户端通过librados的接口进行集群的访问&#xff0c;这里的访问包括&#xff1a; 1&#xff09;对集群的整体访问 2&#xff09;对象的访问 两类接口&#xff0c;这套接口&#xff08;API&#xff09;包括C、C和Pytho…

XXE-labs靶场通关攻略

环境地址自行查找 1.寻找靶机地址 使用工具goby进行扫描 因为我的靶场是搭在ubuntu上 直接查找系统是Ubuntu的就可以找到 靶机IP 172.16.1.183 2.访问靶场 3.使用目录扫描工具进行扫描 使用kali自带的dirsearch进行扫描 可以看到一个robots.txt文件 4.访问robots.txt文件 …

发顶会首选:具身智能!新成果直接霸榜CVPR

最近无论是斯坦福机器人炒虾&#xff0c;还是特斯拉官宣机器人进厂&#xff0c;都赚足了眼球&#xff0c;实力证明了具身智能的火爆。 先不说具身智能是实现AGI的关键环节&#xff0c;也是未来研究的重要方向&#xff0c;我们就从发论文的角度来看&#xff0c;今年的各大顶会&…

【已解决】JS Uncaught DOMException: Failed to construct ‘Worker’ 所有场景

【已解决】JS Uncaught DOMException: Failed to construct ‘Worker’ 所有场景 概述 在JavaScript中&#xff0c;Web Workers允许我们运行后台脚本&#xff0c;这些脚本不会影响到页面的性能。然而&#xff0c;当我们尝试创建一个新的Worker时&#xff0c;有时会遇到“Uncau…

【C++】初识C++模板与STL

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理 本章将简单分享C模板与STL相关知识&#xff0c;与之相关更多知识将留到下次更详细地来分享给大家 &#x1f3…

【微信小程序】全局数据共享 - MobX

1. 什么是全局数据共享 2. 小程序中的全局数据共享方案 3.Mobx的使用 1.npm init -y(根据实际情况选择) 在小程序项目中&#xff0c;可以通过 npm 的方式引入 MobX 。 如果你还没有在小程序中使用过 npm &#xff0c;那先在小程序目录中执行命令&#xff1a; npm init -y2. …

坐牢第三十一天(c++)

一.作业&#xff1a; 使用C手动封装一个顺序表&#xff0c;包含成员数组一个&#xff0c;成员变量N个 #include <iostream> #include <cstring> // 引入cstring以使用memcpy using namespace std; // 类型重命名 using datatype int; // typedef int datatype; s…

Pytorch封装简单RNN模型,进行中文训练及文本预测

简述 使用pytorch封装简单RNN模型&#xff0c;使用单层nn.RNN、nn.Linear等实现&#xff0c;然后做简单的文本预测。 数据集 代码参考李沐&#xff1a;https://zh-v2.d2l.ai/chapter_recurrent-neural-networks/rnn-concise.html&#xff0c;但他使用的是一篇英文小说&#…

通配符证书的简介和申请方法

通配符证书是一种SSL证书&#xff0c;它利用域名字段中的通配符&#xff08;*&#xff09;来指示&#xff0c;允许用户在一个证书中关联多个顶级域名及其子域&#xff0c;从而简化证书管理流程&#xff0c;节省成本和时间。以下是通配符证书的简介和申请方法的详细说明&#xf…

Springsecurity中的Eureka报错:Cannot execute request on any known server

完整报错信息&#xff1a; com.netflix.discovery.shared.transport.TransportException: Cannot execute request on any known server 报错体现&#xff1a; 访问eureka控制面板&#xff1a; 访问测试地址&#xff1a; 控制台报错&#xff1a; 可能的报错原因&#xff…

ZW3D二次开发_UI_ZsCc::OptionRadios控件回调

1.ZW3D中的OptionRadios控件如何实现点击触发回调并且获取点击后的值&#xff1f;如下图 2.教程如下&#xff1a; 1&#xff09;添加OptionRadios控件到表单中 2&#xff09;增加radio按钮 3&#xff09;添加回调 4&#xff09;编写回调函数 int radioCallbackDemo(char* for…

【信息安全】基于CBC的3DES加解密-实验报告

实验运行效果截图 3DES进行加密 3DES进行解密 然后可以选择你想要的操作,继续加密解密或者退出。 基于CBC模式的3DES加解密 一、实验内容 基于3DES加解密算法,编程实现对任意文件实现加解密的软件。 编程实现DES加密和解密算法,并使用DES加解密算法实现3DES加解密算法。选…