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>

网页效果

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python的数据库编程基础知识

Python的数据库编程基础知识

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd;如果停止&#xff0c;就是低谷&#xf…
阅读更多...
[HackMyVM]靶场 Zeug

[HackMyVM]靶场 Zeug

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 0a:00:27:00:00:05 (Un…
阅读更多...
力扣hot100：240.搜索二维矩阵II（脑子）

力扣hot100：240.搜索二维矩阵II（脑子）

吉大21级算法分析与设计的一道大题&#xff0c;由于每一行都是排好序的直接逐行二分 可以达到&#xff1a;O(mlogn)。但是这里追求更广的思路可以使用其他方法。 矩阵四分&#xff1a; 在矩阵中用中心点比较&#xff0c;如果target大于中心点的值&#xff0c;则由于升序排列&am…
阅读更多...
排序二叉树

排序二叉树

参考 Binary Search Tree Visualization (usfca.edu) 一、构建排序二叉树 注意引用 tree /*** 构造二叉排序树* param tree* param x*/ void buildTree(BSTree &tree,ElementType &x){if (treeNULL){tree(BSTree) calloc(1, sizeof(BSTNode));tree->datax;//注意ret…
阅读更多...
Python算法题集_搜索二维矩阵

Python算法题集_搜索二维矩阵

Python算法题集_搜索二维矩阵 题51&#xff1a;搜索二维矩阵1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【矩阵展开为列表二分法】2) 改进版一【行*列区间二分法】3) 改进版二【第三方模块】 4. 最优算法5. 相关资源 本文为Python算法题集之…
阅读更多...
bugku-misc隐写

bugku-misc隐写

下载文件&#xff0c;解压得到图片 没看到信息&#xff0c;试着查看图片属性 看到图片宽高不一致&#xff0c;猜测可能需要改变图片长度或者宽度 试着把图片变大&#xff0c;十进制500转16进制 得到1f4 用010打开图片 第二行第一个为宽&#xff0c;第二个为高&#xff0c;A…
阅读更多...
【计网】TCP协议安全与风险：深入探讨网络通信的基石

【计网】TCP协议安全与风险：深入探讨网络通信的基石

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 &#x1f310;前言 &#x1f512;正文 TCP (Transmission Control Protocol): UDP (User Datagram Protocol): HTTP (Hypertext Transfer …
阅读更多...
WordPress建站入门教程：如何创建菜单和设置前端导航菜单？

WordPress建站入门教程：如何创建菜单和设置前端导航菜单？

前面我们跟大家分享了WordPress如何上传安装WordPress主题&#xff0c;但是启用主题后前端没有看到有导航菜单&#xff0c;这是因为我们还没有创建菜单和设置导航菜单。 JianYue主题导航菜单和右上角菜单 今天boke112百科就继续跟大家分享WordPress站点如何创建菜单和设置前端…
阅读更多...
java-抢红包一些简单概念

java-抢红包一些简单概念

抢红包&#xff0c;比如微信中抢红包&#xff0c;红包金额分配使用的是二倍均值算法。 二倍均值拆包&#xff1a; 拆包要求:所有人抢到的金额之和等于红包总额&#xff0c;每个人最少抢到 0.01 元&#xff0c;每个人抢到的红包金额不要相差太大二倍均值法:假设红包总金额是X&…
阅读更多...
2024最新版正规视频影视系统源码/APP+H5视频影视源码

2024最新版正规视频影视系统源码/APP+H5视频影视源码

全新魅思V20正规视频影视系统源码&#xff0c;APPH5视频影视源码。会员花费三千购入的&#xff0c;具体搭建教程放压缩包了&#xff01; 有兴趣的下载自行研究吧&#xff0c;搭建一共要用到3个域名&#xff0c;可以拿二级域名搭建。
阅读更多...
奖励建模（Reward Modeling）实现人类对智能体的反馈

奖励建模（Reward Modeling）实现人类对智能体的反馈

奖励建模&#xff08;Reward Modeling&#xff09;是强化学习中的一个重要概念和技术&#xff0c;它主要用于训练智能体&#xff08;如AI机器人或大型语言模型&#xff09;如何更有效地学习和遵循人类期望的行为。在强化学习环境中&#xff0c;智能体通过尝试不同的行为获得环境…
阅读更多...
4月9日至10日Hack.Summit 2024亚洲首秀：Web3开发者齐聚香港数码港

4月9日至10日Hack.Summit 2024亚洲首秀：Web3开发者齐聚香港数码港

Hack.Summit() 是一系列 Web3 开发者大会。本届活动将于 2024 年 4 月 9 日至 4 月 10 日在香港数码港举行。自十年前首次举办以来&#xff0c;此次会议标志着 Hack.Summit() 首次在亚洲举办&#xff0c;香港被选为首次亚洲主办城市&#xff0c;这对 Hack VC 和该地区都具有重要…
阅读更多...
【Servlet】Servlet 详解（使用+原理）

【Servlet】Servlet 详解（使用+原理）

文章目录 1. Servlet 介绍1.1 什么是 Servlet1.2 Servlet 的主要工作 2. Servlet 程序创建步骤2.1 创建项目2.2 引入依赖2.3 创建目录2.4 编写代码2.5 打包程序2.6 部署程序2.7 验证程序 3. 使用 Smart Tomcat 进行部署3.1 安装 Smart Tomcat3.2 配置 Smart Tomcat3.3 使用 Sma…
阅读更多...
React-Redux中actions

React-Redux中actions

一、同步actions 1.概念 说明&#xff1a;在reducers的同步修改方法中添加action对象参数&#xff0c;在调用actionCreater的时候传递参数&#xff0c;数会被传递到action对象payload属性上。 2.reducers对象 说明&#xff1a;声明函数同时接受参数 const counterStorecre…
阅读更多...
【Python】科研代码学习：三 PreTrainedModel, PretrainedConfig

【Python】科研代码学习：三 PreTrainedModel, PretrainedConfig

【Python】科研代码学习&#xff1a;三 PreTrainedModel, PretrainedConfig 前言Models : PreTrainedModelPreTrainedModel 中重要的方法 tensorflow & pytorch 简单对比Configuration : PretrainedConfigPretrainedConfig 中重要的方法 前言 HF 官网API 本文主要从官网AP…
阅读更多...
乐高EV3硬件编程

乐高EV3硬件编程

文章目录&#xff1a; 一&#xff1a;软件 1.软件下载安装 2.软件的使用 二&#xff1a;乐高EV3电子元器件介绍 1.针对不同的版本 2.组合起来看 3.元器件栏 绿色部分&#xff1a;动作 橙色部分&#xff1a;流程控制 黄色部分&#xff1a;传感器 红色部分&#xff1…
阅读更多...
【PyTorch】进阶学习：探索BCEWithLogitsLoss的正确使用---二元分类问题中的logits与标签形状问题

【PyTorch】进阶学习：探索BCEWithLogitsLoss的正确使用---二元分类问题中的logits与标签形状问题

【PyTorch】进阶学习&#xff1a;探索BCEWithLogitsLoss的正确使用—二元分类问题中的logits与标签形状问题 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、Py…
阅读更多...
Python爬虫——scrapy-4

Python爬虫——scrapy-4

免责声明 本文章仅用于学习交流&#xff0c;无任何商业用途 部分图片来自尚硅谷 meta简介 在Scrapy框架中&#xff0c;可以使用meta属性来传递额外的信息。meta属性可以在不同的组件之间传递数据&#xff0c;包括爬虫、中间件和管道等。 在爬虫中&#xff0c;可以使用meta属…
阅读更多...
储能系统---交流充电桩（三）

储能系统---交流充电桩（三）

一、充电模式及其功能要求 关注公众号 --- 小Q下午茶 新国标在标准 GB/T 18487.1-2015《电动汽车传导充电系统 第1部分&#xff1a;通用要求》中规定了 4 种充电模式&#xff0c;下面将对这 4 种充电模式及其功能要求进行介绍。 1.1 、模式 1 模式 1 是指在充电系统中应使用…
阅读更多...
一次电脑感染Synaptics Pointing Device Driver病毒的经历，分享下经验

一次电脑感染Synaptics Pointing Device Driver病毒的经历，分享下经验

没想到作为使用电脑多年的老司机也会电脑中病毒&#xff0c;周末玩电脑的时候突然电脑很卡&#xff0c;然后自动重启&#xff0c;奇怪&#xff0c;之前没出现这个情况。 重启后电脑开机等了几十秒&#xff0c;打开任务管理器查看开机进程&#xff0c;果然发现有个Synaptics Po…
阅读更多...
最新文章

Copyright @ 2022~2023

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