HTML—常用标签

news/2024/4/15 4:05:25/文章来源:https://blog.csdn.net/2301_77713282/article/details/136565649

常用标签:

标题标签:<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>

网页效果

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

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

相关文章

牛客小白月赛88

E.多重映射 解题思路 对集合进行整体操作&#xff0c;集合大小只增不减&#xff0c;问最后集合标号维护集合&#xff0c;考虑并查集但直接用并差集维护会有以下问题&#xff1a;当前集合变标号&#xff0c;可能会和之前标号相同&#xff0c;则进行并查集操作时&#xff0c;会接…

C++ 智能指针深度剖析

文章目录 1. 前言2. 为什么需要智能指针&#xff1f;3. 内存泄漏3.1 内存泄漏的概念及危害3.2 内存泄漏的分类3.3 如何检测内存泄漏3.4 如何避免内存泄漏 4. 智能指针的使用及原理4.1 RAII思想4.2 智能指针的原理4.3 C智能指针发展历史4.4 std::auto_ptr4.5 std::unique_ptr4.6…

驱动OLED SSD1306的笔记

这里用的OLED模块是SSD1306的 硬件 SSD1306只支持3.3V供电SSD1306支持4中接口&#xff1a;6800、 8080&#xff0c;SPI&#xff0c;IIC通过引脚BS1和BS2接口的模式。如果是IIC模式&#xff0c;SCL对应D0&#xff0c;SDA对应D1,D2(需要把D1和D2连在一起然后接入MCU的SDA) OLED…

AIOPS:Zabbix结合讯飞星火做自动化告警+邮件通知并基于人工智能提供解决方案

目前Zabbix官方已经提供Zabbix+ChatGPT的解决方案 ChatGPT一周年,你充分利用了吗?Zabbix+ChatGPT,轻松化解告警! 但是由于需要魔法等其他因素,比较不稳定,遂决定使用国内模型,这里我挑选的是讯飞星火,基于我之前的文档,在此基础上通过Zabbix的告警脚本实现调用AI模型…

二维码门楼牌管理系统应用场景:推动旅游与文化产业的智慧化升级

文章目录 前言一、二维码门楼牌管理系统在旅游领域的应用二、二维码门楼牌管理系统在文化产业的应用三、结语 前言 随着信息技术的不断发展&#xff0c;二维码门楼牌管理系统作为一种创新的信息化手段&#xff0c;正在逐渐渗透到旅游和文化领域。它通过为文化景点、旅游景点和…

2024 批量下载公众号文章内容/阅读数/在看数/点赞数/留言数/粉丝数导出pdf文章备份(带留言):公众号爱在冰川近3000篇历史文章在线查看,找文章方便了

关于公众号文章批量下载&#xff0c;我之前写过很多文章&#xff1a; 视频更新版&#xff1a;批量下载公众号文章内容/话题/图片/封面/音频/视频&#xff0c;导出html&#xff0c;pdf&#xff0c;excel包含阅读数/点赞数/留言数 2021陶博士2006/caoz的梦呓/刘备我祖/六神读金…

qnx启动中控屏黑屏

bmetrics_service boot metrics service, 用于记录统计启动性能信息,读取/dev/bmetrics可以获取到这些信息 # use memorydump memorydump Sets the debug cookies, copies MMU info into reset_info asinfo, sets the secure monitor(TZ) dump buffer, starts tracelogger Usa…

菜鸟笔记-14散点图标记形状

大家在学习Python科研绘图中&#xff0c;总会涉及散点图标记形状&#xff0c;为了方便大家学习应用&#xff0c;博主通过学习搜集&#xff0c;将这部分技巧总结如下。 14.1默认散点图 14.1.1图像呈现 14.1.2绘图代码 import numpy as np # 导入numpy库&#xff0c;用于处理…

CDN(内容分发网络):加速网站加载与优化用户体验

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

Vue | 基于 vue-admin-template 项目的跨域问题解决方法

目录 一、现存问题 二、解决方法 2.1 修改的第一个地方 2.2 修改的第二个地方 2.3 修改的第三个地方 自存 一、现存问题 报错截图如下&#xff1a; 二、解决方法 2.1 修改的第一个地方 在 .env.development 文件中&#xff1a; # base api # VUE_APP_BASE_API /d…

基于Jupyter快速入门Python,Numpy,Scipy,Matplotlib

文章目录 Jupyter 和 Colab 笔记本PythonPython 版本基础数据类型数字Numbers布尔值Booleans字符串Strings 容器列表List字典Dictionaries集合Sets元组Tuples 函数类 Numpy数组Array数组索引Array indexing数据类型DatatypesArray math广播Broadcasting Scipy图像操作MATLAB文件…

智慧城市中的数字孪生:构建城市管理的未来框架

目录 一、引言 二、数字孪生技术概述 三、数字孪生技术在智慧城市中的应用 1、实时监测与预警 2、模拟与优化 3、智能化决策 4、协同与共享 四、数字孪生技术构建城市管理的未来框架的价值 1、提高管理效率 2、优化资源配置 3、提升公共服务水平 4、增强应对突发事…

耐腐蚀特氟龙塑料材质PFA烧杯超纯试剂反应杯

PFA烧杯在实验过程中可作为储酸容器或涉及强酸强碱类实验的反应容器&#xff0c;用于盛放样品、试剂&#xff0c;也可搭配电热板加热、蒸煮、赶酸用。 外壁均有凸起刻度&#xff0c;直筒设计&#xff0c;带翻边&#xff0c;便于夹持和移动&#xff0c;边沿有嘴&#xff0c;便于…

springboot+xjar加密打包部署教程

需求背景 为了跟上时代的步伐&#xff0c;为了更好的生存。开个玩笑&#xff0c;就是心血来潮&#xff0c;使用xjar加密部署jar包&#xff0c;于是就测试一下。 xjar教程 1-maven配置文件修改 首先找到自己ideal配置的maven文件夹&#xff0c;然后找到apache-maven-3.9.3\co…

C# 多线程(3)——线程池

文章目录 1 定义2 线程池使用3 安全取消线程池中任务 1 定义 线程是计算机宝贵的资源&#xff0c;频繁的创建和销毁线程将会大量的占用计算机资源&#xff08;为每个线程单独分配内存空间&#xff0c;并且多线程下的CPU时间片的切换也会耗费一定的时间&#xff09;。为了充分利…

Supplementary Influence Maximization Problem in Social Networks

本论文发表于 IEEE TRANSACTIONS ON COMPUTATIONAL SOCIAL SYSTEMS, VOL. 11, NO. 1, FEBRUARY 2024 Abstract 由于在病毒式营销中的重要应用&#xff0c;影响力最大化&#xff08;IM&#xff09;已成为一个经过充分研究的问题。它的目的是找到一小部分初始用户&#xff0c;以…

基于Python3的数据结构与算法 - 12 数据结构(列表和栈)

目录 一、引入 二、分类 三、列表 1. C语言中数组的存储方式 2. Python中列表的存储方式 四、栈 1. 栈的应用 -- 括号匹配问题 一、引入 定义&#xff1a;数据结构是指相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成。简单来说&#x…

异常-Exception

文章目录 异常-Exception常见的运行时异常NullPointerException&#xff08;空指针异常&#xff09;ArithmeticException&#xff08;数学运算异常&#xff09;ArrayIndexOutOfBoundsException&#xff08;数组下标越界异常&#xff09;ClassCastException&#xff08;类型转换…

浏览器修改接口返回数据展示在页面上

前端自己调试&#xff0c;想修改接口返回来的数据&#xff0c;然后展示在页面上 举例 接口返回了数据&#xff0c;想要修改此数据 这时就可以修改数据了&#xff0c;修改完成保存 然后刷新页面就会使用本地保存的数据了

Linux第68步_旧字符设备驱动的一般模板

file_operations结构体中的函数就是我们要实现的具体操作函数。 注意&#xff1a; register_chrdev()和 unregister_chrdev()这两个函数是老版本驱动使用的。现在新字符设备驱动已经不再使用这两个函数&#xff0c;而是使用Linux内核推荐的新字符设备驱动API函数。 1、创建C…