HTML标签

最新推荐文章于 2024-09-10 09:55:59 发布
最新推荐文章于 2024-09-10 09:55:59 发布
阅读量261 收藏 1
点赞数
文章标签： 前端 标签 HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42551920/article/details/94546916
版权

目录

概述

HTML（Hyper Text Markup Language ）作为一种标记语言，网页所有的内容均书写在标签内部，标签是组成Html页面的基本元素，因此对标签特性的理解在HTML的学习过程中比较重要

1、HTML

<!DOCTYPE html>
<html>
<head>
	<title>网站标题</title>
</head>
<body>
	内容
</body>
</html>

<html> 最外层的标签 ，表示网页内容的开始–</html>

<head>网页的头部声明标签，不会显示在网页内容中–</head>

<body>网页内容标签，包含网页中所有可见元素–</body>

常用标签

1、h1–h6 一般用来写标题

效果：换行、加粗
效果图在这里插入图片描述

2、p标签 段落标签，呈现段落格式

3、strong标签与em标签；都是强调文本的作用

<!--加粗强调  -->
<strong>文本text</strong>
<br>
<!-- 斜体强调 -->
<em>文本text</em>

效果图：
在这里插入图片描述

4、单闭合标签（单个存在）

br-------换行
img-----显示图片
hr-------水平分割线

5、列表标签

5.1无序列表
<!--unordered 无序列表-->
	<h2>热门要闻</h2>
	<ul>
		<li>新闻1</li>
		<li>新闻2</li>
		<li>新闻3</li>
	</ul>

效果图：
在这里插入图片描述

5.2有序标签
<!--有序列表-->
	<h2>新闻热搜</h2>
	<ol>
		<li>新闻1</li>
		<li>新闻2</li>
		<li>新闻3</li>
	</ol>

效果图：
在这里插入图片描述

5.3、定义标签
	<!--definition list 定义列表-->
	<dl>
		<!-- definition title  定义标题 -->
		<dt>帮助中心</dt>
		<!-- definition description 定义的描述-->
		<dd>账户管理</dd>
		<dd>购物指南</dd>
		<dd>订单操作</dd>
	</dl>

效果图
在这里插入图片描述

6、table标签

<table border="1" cellspacing="0">
		<!-- 表格标题-->
		<caption>商品清单</caption>
		<!-- 行 -->
		<tr>
		<!-- 第一行 -->	<!-- 表头 -->
			<th>产品名称</th>
			<th>品牌</th>
			<th>数量</th>
			<th>入库时间</th>
		</tr>
		<tr>
			<td>电视机</td>
			<td>海尔</td>
			<td>200</td>
			<td>Sep-17</td>
		</tr>
		<tr>
			<td>空调</td>
			<td>美的</td>
			<td>100</td>
			<td>dec-01</td>
		</tr>
	</table>

效果图
在这里插入图片描述
属性一：border =“1”–表示外边框
属性二：cellspacing=“0”–表示单元格的间距

合并单元格

<!-- 横向合并：合并的列数 -->
		<th colspan="2">数量和入库时间</th>
<!-- 纵向合并：合并行数 -->
		<td rowspan="2">美的</td>

7、超链接

<a href="http://www.baidu.com" <!-- 属性1：链接 -->
   title="点击一下，了解更多"<!-- 属性2：超链接提示消息 -->
   target="_self"<!-- 属性3：默认链接在当前页面打开 -->
	=“_blank”--<!-- 属性3：链接在新网页中打开 -->
>百度一下</a>
7.1超链接其他用法

页面内跳转

<!--跳回顶部-->
<p id="top  <!--唯一ID-->></p>

<a href="#top<!--回到跳转ID处-->>标题（回到top）</a>

8、img标签

<img src=“1.jpg” ----属性1：图片路径（相同目录下直接命名表示）
=…\1.jpg --//相对路径，上一级目录
=…\1.jpg --//相对路径，上上级目录
=“E:\sublime\images\1.jpg”–//绝对路径
width=“100” height=“100” --属性2：图片大小 alt=“人物” --属性3：图片显示失败时，显示的提示文本
title=“看什么看” --属性3：图片标题>
显示任意网站任意图片–复制图片地址即可

9、form标签

<form action="http://www.baidu.com" method="get/post">
		<p>
			<label for="username">用户名</label>
			<input type="text" id="username" placeholder="请输入用户名">
		</p>
		<p>
			<input type="password" placeholder="请输入密码">
		</p>
</form>

效果图：
在这里插入图片描述

9.1单选框(radio)
<p>
	男<input type="radio" name="sex" checked="checked">
	<!-- checked表示默认选择 -->
	女<input type="radio" name="sex">
</p>

效果图：
在这里插入图片描述

9.2多选框（checkbox）
<h2>购买课程</h2>
<p>
	web前端<input type="checkbox" name="课程" checked="checked">
	Python开发<input type="checkbox" name="课程">
	Java编程<input type="checkbox" name="课程">
</p>

效果图
在这里插入图片描述

9.3下拉单选框
<h2>下拉框单选</h2>
<p>
	<select>
	<option>JavaScript</option>
	<option selected="selected">HTML</option>
	<option>css</option>
	<option>vue</option>
	</select>
</p>

效果图：
在这里插入图片描述

9.4、下拉多选框
<h2>下拉多选框</h2>
<p>
	<select multiple="multiple">
	<option>JavaScript</option>
	<option selected="selected">HTML</option>
	<option>css</option>
	<option>vue</option>
	</select>
</p>

效果图
在这里插入图片描述

9.5 文本框
<textarea rows="1" cols="1">输入个人描述</textarea>

效果图：
在这里插入图片描述

9.6、按键
<input type="submit" value="注册">
<input type="reset" value="重置">

效果图
在这里插入图片描述
还有一种不常用的按钮button

<button>按钮</button>

10、div标签

表示一片区域、一个容器；

<div>
		<a href="http://">顶部栏目</a>
</div>
<div>
	<a href="http://">购物车</a>
</div>

效果图
在这里插入图片描述

YYQX爱跳舞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
windows 下搭建web服务器
qq_40250760的博客
09-15 2331
打开控制面板，选择并进入“程序”，双击“打开或关闭Windows服务”，在弹出的窗口中选择“Internet信息服务”下面所有地选项，点击确定后，开始更新服务。 更新完成后，打开浏览器，输入“http://localhost/”回车，如果此时出现IIS7欢迎界面，说明Web服务器已经搭建成功。 当web服务器搭建成功后，我们下一步所要做的就是把我
HTML标签详解
Krive~Irving
07-14 4645
html详解
HTML 标签
qq_67413159的博客
03-06 3998
文本是网页的基本元素，在<body> 标签中直接插入文本，即可显示在网页页面中。 例如： 标题段落标签 在网页制作规范中，网页的内容需要用标题来呈现文档结构，标题类似于文章的大纲。标题 是通过 <h1>~</h6> 标签进行定义的， <h1> 用于定义最大级别的标题。<h6> 用于定义最小级别的标题。 HTML 规则中对6级标题段落标签设置了默认样式，，包含加粗、字号、上下间距，每一级的字号和上下间距值如下表所示。运行...
java输出中写html标签,java 输出html标签
weixin_42374582的博客
05-31 2048
java 输出html标签[2021-02-01 07:37:44]简介:php去除nbsp的方法：首先创建一个PHP代码示例文件；然后通过“preg_replace("/(\s|\&nbsp\;|　|\xc2\xa0)/", " ", strip_tags($val));”方法去除所有nbsp即可。推荐：《PHP视频教jquery输出html代码的方法：1、直接输出标签元素，代码为【...
html标签各属性之间用空格隔开对吗,03-HTML标签（二）
weixin_39899691的博客
06-04 4033
一、HTML常用标签1、排版标签排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。1.1、标题标签 h1 ~ h6单词缩写： head 头部. 标题为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题。语义：作为标题使用，并且依据重要性递减语法： 标题文本 标题文本 标题文本 标题文本 标题文...
freemarker解析html标签,【转】Freemarker输出$和html标签等特殊符号
weixin_39970689的博客
06-21 1973
原文：http://blog.csdn.net/achilles12345/article/details/41820507场景：程序员都不喜欢看文档，而更喜欢抄例子。所以，我们把平台组的组件都做成例子供别人参考。我们前端展示层使用的是freemarker，所以遇到这个问题，比如我们要让前端显示freemarker自己的源码时就有问题了(因为我们例子程序的页面也是使用freemarker)。遇到的...
rn html标签,React Native展示富文本（HTML标签）最佳解决方案
weixin_32308101的博客
06-25 2386
需求背景我们最近要做一个React Native的产品详情页，里面有一部分内容展示的是服务端下发的html标签(运营人员编写的，内容不固定，且很随意)。需求点是：1、展示富文本，包括img、span、div等基本html标签；2、控制富文本的整体样式，比如业务配置的图片大小不一，我们要统一已屏幕宽度为基准，高度自适应。第三方组件react-native-htmlview要实现这个需求，我第一想到的...
网页开发 HTML
ultramand的博客
09-06 1191
这个例子中，我使用了多个HTML标签来构建一个包含图像、图表、视频和其他元素的综合页面。// JavaScript代码。
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 563
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
el-popover弹框自定义位置
weixin_47218354的博客
09-05 390
【代码】el-popover弹框自定义位置。
前端文件预览，PDF，word，TXT
致未来的你。的博客
09-06 600
前端文件预览，PDF，word，TXT
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
最新发布
翎风世界
09-10 459
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1056
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
前端技术演进与未来发展趋势探究
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
09-07 1976
本文深入探讨了前端领域的发展历程、主要技术及未来趋势。从前端技术的起源与早期发展，到动态页面的崛起，再到如今各种先进技术的涌现，我们见证了前端技术的不断演进。在发展历程方面，前端从最初的静态网页逐渐发展为复杂的动态交互界面。早期浏览器的竞争推动了技术的进步，而随着互联网的发展，后端框架的出现解决了后台代码庞大臃肿的问题。前端技术也从“网页三剑客”演变为新的“三剑客”，即 HTML、CSS 和 JavaScript，同时各种前端框架不断涌现，大大提高了开发效率和质量。
Vue响应式进阶常用API学习
weixin_44072254的博客
09-06 869
reactive()的浅层浅层响应式，和reactive()不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。readonly()的浅层作用形式,只有根级别是只读不可更改的，根级别以下的可更改，只是视图不会更新，但值改变了。shallowRef是浅层引用,只会跟踪原始对象的引用,不会跟踪原始对象的属性。创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。的副作用，这通常在对浅引用的内部值进行深度变更后使用。代理对象，并返回该代理对象对应的原始对象。
前端vue项目服务器部署(docker)
m0_46122129的博客
09-07 658
将你的nginx-alpine.tar包上传到服务器上。假设路径为 。 2、导入 Nginx Docker 镜像 使用以下命令将 文件加载为 Docker 镜像： 执行后会显示类似如下的输出，表示镜像已成功加载： 3、验证镜像是否加载 确认镜像已经导入成功： 应该可以看到 镜像在列表中。在你的服务器上确保 目录下包含以下内容：- ：Vue 项目构建后的静态文件。- ：自定义的 Nginx 配置文件。- 。确保 目录中有你的 Vue 项目的打包内容。在 下编写或确保已经有如下内容的 ： 3、编写ng
HTML标签属性完全指南
"HTML标签属性大全" HTML（HyperText Markup Language）是用于创建网页的标准标记语言。这个摘要提供了HTML标签的一些基本知识，包括文档结构、文本样式、链接创建、格式排版以及图形元素的使用。 首先，HTML文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值