二十、HTML

一、什么是HTML

超文本标记语言,不是一种编程语言,而是一种标记语言,描述网页的语言,HTML使用标签描述网页中图片、文本、音乐、视频、超链接等。

二、常用标签

1、标题标签 <h1>一级标题</h1> 1-6 2、段落标签<p>段落</p> 会换行,比 换行的间距大 3、水平线标签<hr> color:设置水平线的颜色 width: 设置水平线的宽度,值可以是像数值,也可以是百分比(使用浏览器宽度的百分比) size: 设置水平线的粗细 align:设置水平线的对齐方式align:设置水平线的对齐方式,常用值有Left(左对齐)、center(居中对齐、默认值)、right(右对齐) -->

4、斜体 加粗 斜体

<strong>加粗<strong> <b>加粗<b>

二者的不同是:<b>是物理元素 ;<strong>是逻辑元素。 物理元素强调的是一种物理行为。 比如说,把一段文字用b加粗,意思是告诉浏览器应该加粗显示,没有其他作用。 而<strong>可以从字面理解知道它是强调的意思,<strong>是逻辑标签,强调文档逻辑。 -->

5、图像标签 <img >img 图像标签 单标签

src属性:设置图像的路径,可以是相对路径,也可以是绝对路径 width属性:图像的宽度 height:设置图像的高度,一般来说宽度和高度只需要设置一个 title属性:设置鼠标悬停在图像上时显示的内容 alt属性:当图像不能正常加载显示的时候,显示alt属性值内容对图像进行显示 -->

6、超链接标签 <a><!-- a 超链接标签 target属性 _self默认在当前窗口打开 _black在新的窗口打开 -->

<!-- 锚链接 在某一个地方使用id属性或者name属性来标定一个位置 在href后面写一个#再写锚的id 或name的值,就表示要跳转到的位置 -->

三、列表

<body>

    <!-- 无序列表 -->

    <!-- type  设置ul标签的列表项的符号

         = disc 默认 黑色实心圆

         = circle 黑色空心圆

        =square   方形实心圆        -->

<ul> 合肥

<li>大湖名称</li>

<li>创新高地</li>

<li>科教之城</li>

<li>能源之都</li>

<hr>

</ul>

    <!-- 有序列表 ol-->

    <!-- li标签 列表项标签,必须写在ol标签内

    ol标签属性  type:设置列表项符号,常用值有

             数字1:列表项前为数字 默认项目符号 从1开始

             A:列表项前面从大写英文字母,从A开始

             a:小写英文字母 从a开始

             I: 大写罗马数字 从I开始

             i:小写罗马数字 从i开始 -->

 <!--start属性 设置列表符号起始值,该属性值只能是数字  -->

    <ol> 合肥

        <li>大湖名称</li>

        <li>创新高地</li>

        <li>科教之城</li>

        <li>能源之都</li>

        </ol>

        <hr>

        <ol type="I" start="5"> 合肥

            <li>大湖名称</li>

            <li>创新高地</li>

            <li>科教之城</li>

            <li>能源之都</li>

            </ol>

    <!-- 自定义列表 -->

<dl>

<dt>合肥</dt>

<dd>大湖名称</dd>

<dd>创新高地</dd>

<dd>科教之城</dd>

<dd>能源之都</dd>

<dt>合肥</dt>

<dd>大湖名称</dd>

<dd>创新高地</dd>

<dd>科教之城</dd>

<dd>能源之都</dd>

</dl>



 

<!-- 列表标签的嵌套 -->

<ul>

       <li>宝马</li>

              <ol>

                 <li>525</li>

                 <li>530</li>

                 <li>7系</li>

              </ol>

       <li>奥迪</li>

       <ol>

        <li>525</li>

        <li>530</li>

        <li>7系</li>

     </ol>

               

</ul>

</body>

四、表格标签

<!-- tr 行  td、th(黑体居中,一般用于第一行作为表头) 列 -->

<!-- table常用属性

          border属性:设置边框粗细,一般设置为1px

          cellspacing属性:设置单元格边框之间的距离,一般设置为0,去除边框之间的距离

          cellpadding属性:设置单元格内容与左边框的距离

          wight属性:设置表格宽度

          height属性:设置表格高度

          align属性: center 居中 left 默认值  right 右对齐-->

     <!-- thead 标签 头部标签

          tbody 标签 主体标签

          tfoot 标签 底部标签-

          可以省略 不然会自动放到tbody内-->

    <!-- rowspan 行合并,可以讲同一列中相邻的多个单元格合并成一个单元格,再一个单元格上写rowspan属性

         colspan  列合并 -->

五、表单标签

<!--

    form 标签:表单标签,注意不要写成from,常用属性有

       action属性:设置表单数据提交到的后端程序文件,可以是asp、php、jsp、Servlet 等程序

       method属性:设置表单数据的提交方式,常用值有get 和post方法

            get:讲表单数据拼接到URL后面,格式为URL?键名=值&键名=值……

                表单提交的值是明文形式拼接在URL后面 不安全

                get方式提交的数据量有限制,绝大部分浏览器对get方式提交的数据都不能超过4kb

            post方式:讲表达数据写在后台的包中,不会拼接在URL后面

                 表单提交的数据在URL后面是看不到的,更加安全

                 post提交的数据可以是不同形式,甚至包括图片文件等

                 post提交的数据量是比较大的

    input标签:表单控件标签 常用属性有

        type属性:控件类型 常见值有

            text:文本框 输入的是明文

            password:密码 看不见直接数据

            radio:单选按钮,需要多个单选项通过name属性进行互斥,要求name属性值相同

            checkbox:复选框,可以实现多个选项

            submit:提交按钮,会将表单数据提交到action属性值指示的程序中

            image:图片提交按钮,用一个图片替代了submit按钮,效果与submit一样

            reset:重置按钮

            button:普通按钮,点击该按钮没有任何效果,他需要配合JavaScript一起使用

        name属性:设置表单控件名称,后端程序通过这个名称获取表单控件内的数据

        value属性:表单控件中的数据存储在value中(设置控件中的默认值)

        checked属性:在radio 和checkbox中可以通过该属性设置默认选项

    select标签:下拉列表标签

        name属性:设置表单控件名称,后端程序通过这个名称获取表单控件内的数据

        value属性:表单控件中的数据存储在value中(设置控件中的默认值)

    option标签:下拉列表标签,该标签必须写在select标签中

        selected属性:用来设置下拉列表默认选项值

    textarea标签:常用属性值有

        name属性:设置表单控件名称,后端程序通过这个名称获取表单控件内的数据

        value属性:表单控件中的数据存储在value中(设置控件中的默认值)

        cols属性:设置文本域的宽度

        rows属性:设置文本域的高度

                -->

 

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

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

相关文章

Github 2024-03-13 C开源项目日报 Top10

根据Github Trendings的统计,今日(2024-03-13统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目10C++项目1Curl:用于传输数据的命令行工具和库 创建周期:5067 天开发语言:C协议类型:OtherStar数量:32994 个Fork数量:6208 次关注人…

vscode使用npm命令无反应,而终端可以的解决办法

如若你遇到这种情况 使用命令 get-command npm 去下面这个路径把它删掉就可以了

在linux中如何后台运行java项目(详细)

目录 1.查看是否安装有jdk环境 2.将打包好的jar上传到linux服务器上 3.运行java程序 直接运行&#xff1a; 使用 & 使用 nohup & 扩展知识 1.查看是否安装有jdk环境 java -version 如果可以查看到jdk版本 &#xff0c;那就代表环境配置好了 2.将打包好的jar上…

Java JUC 笔记(2)

Java JUC 笔记&#xff08;2&#xff09; 锁框架 JDK5以后增加了Lock接口用来实现锁功能&#xff0c;其提供了与synchronized类似的同步功能&#xff0c;但是在使用时手动的获取和释放锁 Lock和Condition锁 这里的锁与synchronized锁不太一样&#xff0c;我们可以认为是Loc…

【硬件工程师面经整理30_工艺现状】

请描述一下国内的工艺现状 工艺水平&#xff1a;中国的器件工艺水平在不断提高&#xff0c;已经可以制造出高性能、高可靠性的器件产品。在集成电路领域&#xff0c;中国已经具备了一定的制造能力和产业规模&#xff0c;能够生产一些中低端的芯片产品。在光电器件、传感器、功…

【YOLOv9】训练模型权重 YOLOv9.pt 重新参数化轻量转为 YOLOv9-converted.pt

【YOLOv9】训练模型权重 YOLOv9.pt 重新参数化轻量转为 YOLOv9-converted.pt 1. 模型权重准备2. 模型重新参数化2.1 文件准备2.2 参数修改2.3 重新参数化过程 3. 重新参数化后模型推理3.1 推理超参数配置3.2 模型推理及对比 4. onnx 模型导出&#xff08;补充内容&#xff09;4…

Java开发从入门到精通(一):Java 数据库编程

三、Java 数据库编程 JDBC 基础&#xff1a;连接数据库、执行 SQL 查询 使用 JDBC 操作数据库 数据库连接池和事务处理 数据库基础知识&#xff1a; 数据库概念和模型 SQL 语言 关系型数据库架构 JDBC 编程&#xff1a; JDBC 概述和工作原理 连接数据库 执行 SQL 查询和更新 处…

蓝桥杯第1595题——和与乘积

题目描述 给定一个数列 A(a1​,a2​,⋯,an​)&#xff0c;问有多少个区间 [L,R] 满足区间内元素的乘积等于他们的和。 输入描述 输入第一行包含一个整数 n&#xff0c;表示数列的长度。 第二行包含 n 个整数&#xff0c;依次表示数列中的数 a1​,a2​,⋯,an​。 输出描述 …

java面试题(持续更新.. ...)

JDK和JRE和JVM区别 JVM是运行字节码的虚拟机&#xff0c;JRE在JVM的基础上添加了基本的类库&#xff0c;JDK在JRE的基础上添加了一些编译的工具(例如&#xff1a;javac等)… … java和c的区别 java和c都是面向对象都支持继承&#xff0c;但是c是多继承&#xff0c;java是单继承…

【硬件工程师面经整理31_非技术问答(主管面)】

文章目录 为什么要来XX对这个岗位工作的了解你期待一个怎么样的工作环境工作强度大/是否愿意加班&#xff0c;怎么看压力大的时候怎么办&#xff1f;个人优势/性格优缺点。团队协作你觉得最重要的是什么未来有什么职业规划如果都给你发了offer你会怎么选&#xff1f;期待的年薪…

安塔利斯升级php8

1、includes/classes/class.Database.php 255行 multi_query方法加返回类型 :bool query方法加返回类型&#xff1a;: mysqli_result|bool 2、includes/classes/class.Session.php on line 91 Optional parameter $planetID declared before required parameter $dpath is…

漏洞发现-漏扫项目篇NucleiYakitGobyAfrogXrayAwvs联动中转被动

知识点 1、综合类-Burp&Xray&Awvs&Goby 2、特征类-Afrog&Yakit&Nuclei 3、联动类-主动扫描&被动扫描&中转扫描 章节点&#xff1a; 漏洞发现-Web&框架组件&中间件&APP&小程序&系统 扫描项目-综合漏扫&特征漏扫&被动…

遥感云计算的一个拐点

GeoForge&#xff0c;一个值得关注的遥感大数据应用 简介 GeoForge是由Ageospatial公司开发的一个基于大语言模型(GeoLLMs)的地理空间分析平台。GeoForg的目的是使每个人都可以轻松进行地图绘制和地理空间分析&#xff0c;无论您是外行还是专家。 Geo for ChatGPT 作者团队已…

win10 蓝牙耳机连接异常重置

安装修复工具 BluetoothCLTools-1.2.0.56 一直下一步 安装完成后管理员进入powershell 执行 btpair.exe -u此命令是卸载蓝牙设备 然后在蓝牙面板和设备管理中查找蓝牙设备是否还在 重新再识别连接蓝牙即可

Three.js显示光源

在做Three.js开发的时候&#xff0c;它本身是不显示光源的&#xff0c;这就很难受&#xff0c;往往加了光源&#xff0c;找不到它放置的位置。 three.js本身不显示光源&#xff0c;可以通过其他方式显示&#xff0c;在光源的防止位置上加一个球即可 function createLightHelper…

Quartz的分布式功能化设计

Quartz的分布式功能化设计 文章目录 Quartz的分布式功能化设计主体功能实现依赖API例子JOBJob记录表设计java具体代码DateDOOperatorDOSysQuartzJobDOPageDTOQuartzJobDTOQuartzJobPageDTOQuartzJobStatusEnumQuartzJobControllerIQuartzJobServiceQuartzJobServiceImplQuartzJ…

YOLOv9改进 添加新型卷积注意力框架SegNext_Attention

一、SegNext论文 论文地址:2209.08575.pdf (arxiv.org) 二、 SegNext_Attention注意力框架结构 在SegNext_Attention中,注意力机制被引入到编码器和解码器之间的连接中,帮助模型更好地利用全局上下文信息。具体而言,注意力机制通过学习像素级的注意力权重,使得模型可以对…

深度解析react中hooks的底层原理是啥?React架构原理深度解析

1.React Hooks 底层原理 React Hooks 的底层原理是基于 React Fiber 架构的实现。下面是对 React Hooks 底层原理的深度解析: Fiber 架构: React Fiber 是 React 的新的协调引擎,它的设计目标是支持增量式更新、优先级调度、暂停和继续执行等特性。Fiber 架构重新实现了 Re…

FFmpeg开发笔记(十)Linux环境给FFmpeg集成vorbis和amr

FFmpeg内置了aac音频格式&#xff0c;在《FFmpeg开发实战&#xff1a;从零基础到短视频上线》一书的“5.2.2 Linux环境集成mp3lame”又介绍了如何给FFmpeg集成mp3格式&#xff0c;常见的音频文件除了这两种之外&#xff0c;还有ogg和amr两种格式也较常用。其中ogg格式的编解码…

【C++庖丁解牛】vector容器的简易模拟实现(C++实现)(最后附源码)

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言vector容器代码实现内…