当前位置: 首页 > news >正文

HTML—常用标签

常用标签:

标题标签:<h1></h1>......<h6></h6>
段落标签:<p></p>
换行标签:<br/>
列表:无序列表<ul><li></li></ul>
           有序列表<ol><li></li></ol>
超链接:<a></a>
图像标签:<img/>

表格:<table></table>

表单:<form></form>

标题标签:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>标题标签<!-- 一共六级标签,每一个标签会独占一行,默认左对齐align可以控制标签的内容在标签体中的水平对齐方式,值有left,right,center,默认是left--><h1 align = "left">一级标题</h1><h2 align = "center">二级标题</h2><h3 align = "right">三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></body>
</html>

网页效果

段落标签:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>段落标签<!-- 标尺线 --><hr/><p>《呐喊》是现代文学家鲁迅的短篇小说集,收录鲁迅于1918年至1922年所作的14篇短篇小说,1923年由北京新潮社出版,现编入《鲁迅全集》第1卷。小说集真实地描绘了从辛亥革命到五四运动时期的社会生活,从革命民主主义出发,抱着启蒙主义目的和人道主义精神,揭示了种种深层次的社会矛盾,对旧时中国的制度及部分陈腐的传统观念进行了深刻的剖析和比较彻底的否定,表现出对民族生存浓重的忧患意识和对社会变革的强烈希望。</p><p>《呐喊》是中国现代小说的开端与成熟的标志,开创了现代现实主义文学的先河。作品通过写实主义、象征主义、浪漫主义等多种手法,以传神的笔触和“画眼睛”、“写灵魂”的艺术技巧,形象生动地塑造了狂人、孔乙己、阿Q等一批不朽的艺术形象,深刻反映了19世纪末到20世纪20年代间中国社会生活的现状,有力揭露和鞭挞了封建旧恶势力,表达了作者渴望变革,为时代呐喊,希望唤醒国民的思想。奠定了鲁迅在中国现代文学史和现代文化史上的地位。 1999年6月,《呐喊》被《亚洲周刊》评选为20世纪中文小说100强之首</p></body>
</html>

网页效果

换行标签:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>换行标签换行标签<br />换行标签换行标签</body>
</html>

网页效果

列表:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><hr/><!-- 列表 --><!-- 无序列表 --><ul><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li><li>无序列表4</li><li>无序列表5</li></ul><!-- 有序列表 --><ol><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li><li>有序列表5</li></ol><!-- 可通过type改变列表序号类型 --><ol type="I"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li><li>有序列表5</li></ol></body>
</html>

网页效果

超链接+图像:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>超链接<!-- href = "网页的地址"target = "_blank" 在新窗口打开网页target = "_self" 在当前窗口打开一个新网页 默认--><a href = "https://www.baidu.com/" target = "_blank">百度</a><a href = "https://www.baidu.com/" target = "_self">百度</a><hr /><!-- 图像也可以是超链接 --><a href = "https://www.baidu.com/" target = "_blank"><img src = "img/nike/1.png" width = "100px" height = "100px" /></a><img src = "img/nike/2.png" border = "1" /></body>
</html>

网页效果

表格:

表格用法介绍:

        table————表格标签
        tr————表格行
        th————单元格(表头 居中 加粗)
        td————普通的单元格
        表格中的内容只能放在单元格
        cellspacing = "0" 取消单元格间的间隔
        cellpadding————设置单元格内容到边框的距离
        align = "center"————居中,水平位置
        valign = "top"————置顶,垂直位置其他值:top,middle,bottom

        合并单元格

                colspan = "4" ————跨多列合并,从哪个合并,就在哪个单元格中添加,

        删除多余的单元格 
                rowspan = "2" ————跨行合并

表格快捷生成方式:

        table>tr*4>td*4————快速生成一个4行4列的表格

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border= "1" width = "400px" cellspacing = "0" cellpadding = "10"><tr height = "50px"><!-- <th></th>表头标签和td功能相同,区别是加粗中心 --><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr><tr><td height = "80" align = "center" valign = "top">张三</td><td>90</td><td>80</td><td>70</td></tr><tr><td>李四</td><td>20</td><td>30</td><td>40</td></tr><tr><td>王五</td><td>60</td><td>70</td><td>80</td></tr></table></body>
</html>

网页效果

合并单元格示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border = "1" width = "400px" height = "300px"><tr><td colspan = "3"></td><td></td></tr><tr><td></td><td></td><td></td><td rowspan = "2"></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table></body>
</html>

网页效果

表单:

表单介绍:

        网页表单中有许多可以输入或选择的组件,用户可以在表单中填写 信息,最终

提交表单,把客户端数据提交至服务器.

表单的使用:

        <form action="" method = ""></form>

                action后端地址;

                method提交方式:一般为post或get方式,post的方法比较安全。

        input 单行输入框
            type = "text"文本
            name = "自定义名称" 向后端提交的键
            value = "" 向后端提交的值
            placeholder = "输入框内的提示信息"
            readonly = "readonly" 只读不能修改,但是可以提交
            disabled = "disabled" 禁用组件不能修改,也不能提交
            
            type = "password" 密码输入框,会自动隐藏输入的密码
            
            type = "radio" 单择框,当多个框的名字相同时只能选择一个,达成互斥的关系
            
            type = "checkbox"多选框
            
            <select name = "一个名字即可">
                <option value = "最终提交到后端的内容">陕西</option>
            </select>下拉式选择框
            
            type = "file" 选择文件
            
            <textarea cols = "列数" rows = "行数"></textarea> 文本域输入框
            
            type = "submit" 提交按钮
            type = "reset" 重置按钮
            type = "button" 普通按钮,需要为该按钮添加事件监听

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action = "" method = "get">账号:<input type = "text" name = "account" placeholder="请输入账号" /><br />密码:<input type = "password" name = "password"/><br /><input type = "radio" name = "gender" value = "男"/>男<input type = "radio" name = "gender" value = "女"/>女<br /><input type = "checkbox" name = "class" value = "java"/>java<input type = "checkbox" name = "class" value = "mysal"/>mysql<input type = "checkbox" name = "class" value = "c"/>c<input type = "checkbox" name = "class" value = "python"/>python<br />籍贯:<select name = "province"><option value = "101">陕西</option><option value = "101">河南</option><option value = "101">湖南</option><option value = "101">四川</option></select><br />地址:<textarea cols = "22" rows = "3"></textarea><br /><input type = "file" name = "file"/><br /><input type = "submit"/><input type = "reset" /><input type = "button" value = "普通按钮" onclick = "alert(12345)"/></form></body>
</html>

网页效果

相关文章:

HTML—常用标签

常用标签&#xff1a; 标题标签&#xff1a;<h1></h1>......<h6></h6>段落标签&#xff1a;<p></p>换行标签&#xff1a;<br/>列表&#xff1a;无序列表<ul><li></li></ul> 有序列表<ol>&…...

Midjourney绘图欣赏系列(七)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子&#xff0c;它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同&#xff0c;Midjourney 是自筹资金且闭源的&#xff0c;因此确切了解其幕后内容尚不…...

深度学习应该如何入门?

深度学习是一门令人着迷的领域&#xff0c;但初学者可能会感到有些困惑。让我们从头开始&#xff0c;用通俗易懂的语言来探讨深度学习的基础知识。 1. 基础知识 深度学习需要一些数学和编程基础。首先&#xff0c;我们要掌握一些数学知识&#xff0c;如线性代数、微积分和概率…...

FreeRtos Queue(五)

本篇主要分析在中断中向队列里发消息xQueueGenericSendFromISR和在中断里从队列中读取消息xQueueReceiveFromISR。 前言: xQueueGenericSendFromISR 和 xQueueReceiveFromISR都是在中断里调用的而不是任务里调用的&#xff0c;所以队列满了或者是队列为空的时候自然就没有把当…...

解决虚拟机静态网址设置后还是变动的的问题

源头就是我的虚拟机静态网址设置好了以后但是网址还是会变动 这是我虚拟机的配置 vi /etc/sysconfig/network-scripts/ifcfg-ens33 这是出现的问题 进入这里 cd /etc/sysconfig/network-scripts/ 然后我去把多余的ens33的文件都删了 然后还不行 后来按照这个图片进行了下 然后…...

【教程】Github环境配置新手指南(超详细)

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 文章目录 一、Github初始设置&#xff08;一&#xff09;登入Github&#xff08;二&#xff09;新建仓库 二、本地Git配置&am…...

突然发现一个很炸裂的平台!

平时小孟会开发很多的项目&#xff0c;很多项目不仅开发的功能比较齐全&#xff0c;而且效果比较炸裂。 今天给大家介绍一个我常用的平台&#xff0c;因含低代码平台&#xff0c;开发相当的快。 1&#xff0c;什么是低代码 低代码包括两种&#xff0c;一种低代码&#xff0c;…...

安卓开发面试题

安卓开发面试题 解释一下 Android 中的四大组件。 答&#xff1a;Android 中的四大组件是 Activity、Service、BroadcastReceiver 和 ContentProvider。其中&#xff0c;Activity 负责界面展示和与用户交互&#xff1b;Service 负责后台服务处理&#xff1b;BroadcastReceiver …...

es6面试题

ES6面试题 var、let、const区别 共同点&#xff1a;都是可以声明变量 区别&#xff1a; 1、var具有变量提升机制&#xff0c;let和const没有 2、var 声明的变量是函数作用域或全局作用域&#xff0c;而 const 和 let 声明的变量是块级作用域。 3、var可以多次声明同一个变量&a…...

Kafka MQ 生产者和消费者

Kafka MQ 生产者和消费者 Kafka 的客户端就是 Kafka 系统的用户&#xff0c;它们被分为两种基本类型:生产者和消费者。除 此之外&#xff0c;还有其他高级客户端 API——用于数据集成的 Kafka Connect API 和用于流式处理 的 Kafka Streams。这些高级客户端 API 使用生产者和消…...

tomcat优化与部署(三)------nignx优化与nginx +tomcat 部署

在目前流行的互联网架构中&#xff0c;Tomcat在目前的网络编程中是举足轻重的&#xff0c;由于Tomcat的运行依赖于JVM&#xff0c;从虚拟机的角度把Tomcat的调整分为外部环境调优 JVM 和 Tomcat 自身调优两部分 Tomcat 是一个流行的开源 Java 服务器&#xff0c;用于托管 Java …...

一个用libcurl多线程下载断言错误问题的排查

某数据下载程序&#xff0c;相同版本的代码&#xff0c;在64位系统中运行正常&#xff0c;但在32位系统中概率性出现断言错误。一旦出现&#xff0c;程序无法正常继续&#xff0c;即使重启亦不行。从年前会上领导提出要追到根&#xff0c;跟到底&#xff0c;到年后的今天&#…...

Docker的安装及MySQL的部署(CentOS版)

目录 1 前言 2 Docker安装步骤 2.1 卸载可能存在的旧版Docker 2.2 配置Docker的yum库 2.2.1 安装yum工具 2.2.2 配置Docker的yum源 2.3 安装Docker 2.4 启动和校验 2.5 配置镜像加速(使用阿里云) 2.5.1 进入控制台 2.5.2 进入容器镜像服务 2.5.3 获取指令并粘贴到…...

css 背景图片居中显示

background 简写 background: #ffffff url(https://profile-avatar.csdnimg.cn/b9abdd57de464582860bf8ade52373b6_misnice.jpg) center center / 100% no-repeat;效果如图&#xff1a;...

Python编程-如何轻松开启一个Web服务?

目录 前言 Flask&#xff1a;轻量级 Django&#xff1a;高级 Bottle&#xff1a;轻量级 Pyramid&#xff1a;灵活且可扩展 Tornado&#xff1a;可扩展、非阻塞 CherryPy&#xff1a;微型 轻量级的Web框架的选择 前言 在Python中开启一个Web服务有多种方法&#xff0c;选…...

鸡肋的Git

1.前言 对于大多数开发人员来说&#xff0c;我们大多数在学习或者工作过程中只关注核心部分&#xff0c;比如说学习Java&#xff0c;可能对于大多数人而言一开始都是从Java基础学起&#xff0c;然后408&#xff0c;Spring&#xff0c;中间件等&#xff0c;当你发现很多高深的技…...

iOS 中的 UITextField 如何设置才能只输入数字和小数点?

刚接触 iOS不久&#xff0c;接到一个iOS项目&#xff0c;其中有一个需求就是在一个 UITextField中只能输入数字和小数点&#xff0c;这个需求在Android中非常容易&#xff0c;只需要设置 <EditTextandroid:id"id/id_et_price"android:layout_width"match_par…...

阿珊详解Vue Router的守卫机制

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

python淘宝网页爬虫数据保存到 csv和mysql(selenium)

数据库连接设置&#xff08;表和字段要提前在数据库中建好&#xff09; # 数据库中要插入的表 MYSQL_TABLE goods# MySQL 数据库连接配置,根据自己的本地数据库修改 db_config {host: localhost,port: 3306,user: root,password: ma*****6,database: may2024,charset: utf8mb…...

云计算中仲裁节点和仲裁可用区介绍

在云计算中&#xff0c;仲裁是指当多个节点或实例之间发生争议或冲突时&#xff0c;由一个独立的第三方机构或节点来解决争议或冲突的过程。仲裁通常用于解决云计算中的资源分配、数据一致性、服务质量等问题。 仲裁的作用主要有以下几点&#xff1a; 1. 保证资源分配的公平性…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...