常用的HTML标签

最新推荐文章于 2022-05-11 13:53:27 发布
最新推荐文章于 2022-05-11 13:53:27 发布
阅读量720 收藏
点赞数
分类专栏： JavaWEB 文章标签： java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xue_yun_xiang/article/details/115357954
版权

一、什么是浏览器

浏览器是显示网页的一个工具
一个网页有什么组成的：html css javascript
谷歌（统一使用！！！）

二、什么是html

超文本标记语言（Hyper Text Markup Language）
并不是一门开发语言。咱们的开发语言是java c php python 等
所见即所得
Html 官方的学习网站：https://w3school.com.cn

两种模式：

B/S模式： Browser/Server
​浏览器/服务器模式（接下来要学习的）
​ 1.打开任意一款浏览器
​ 2.在浏览器地址栏中输入一个网址

C/S模式：Client/Server
​ 客户端/服务器模式
​ 维护成本太高了

三、HTML的基本标签

标签：标签是组成html的最小单位
语法格式：
​ 双边标签：<标签名字 属性=“属性值”></标签名字> 成双成对的有开始标签和结束标签
​ 单边标签：<标签名字 属性=“属性值”/>

1、结构标签

结构标签就是组成一个网页最基本的一些固定格式的标签

<html>
	<head>
		<!--这个是注释的写法-->
		<!--meta是一个单边标签，设置当前页面编码集-->
		<meta charset="utf-8"/>
		<!-- 注释的快捷键   ctrl + ? -->
		<!-- title 标签是设置当前标题的，在浏览器的头部显示 -->
		<title>百度一下，你就知道了</title>
	</head>
	<body>
		所见即所得
	</body>
	<!-- 1.html标签都是<>括起来的 -->
	<!-- 2.html不区分大小写，但是一般小写 -->
	<!-- 3.标签分为单边标签和双边标签，记标签的功能 -->
	<!-- 4.标签内可以加属性，一般的标签的属性值是双引号引起来的，一定注意，等号两边尽量不要加空格 -->
	<!-- 5.标签是相互嵌套的，但是一定能够注意缩进  -->
</html>

2、排版标签

1.换行标签br 单边标签
2.分割线标签 hr 单边标签
3.段落标签 p 双边标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>排版标签</title>
	</head>
	<body>
		后宫佳丽三千<br/>
		独宠博哥一人
		<hr>
		<p>如果你是用体力挣钱，你就老实点。如果你是脑力挣钱，你就机灵点。
		如果你用钱在挣钱，你就狠一点。如果你在身边的资源挣钱,要豁达点。</p>
		<p>火锅</p>
		<p>烧烤</p>
		<!-- 段落标签，段与段之间有间隔 -->
	</body>
</html>

3、文本标签

标题标签 h1- h6 双边
文字标签 font 双边

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本标签</title>
	</head>
	<body>
		<!-- 标题标签 -->
		<h1>烤全羊</h1>
		<h2>烤乳猪</h2>
		<h3>烤腰子</h3>
		<h4>酸菜鱼</h4>
		<h5>水煮肉片</h5>
		<h6>毛血旺</h6>
		黄河大鲤鱼
		<!-- font标签可以带一些属性
				size:大小  属性值是1-7  默认是3
				color: 颜色 所有的表示颜色的都可以表示
				face: 字体样式 楷体  宋体  微软雅黑
				
		 -->
		<font size="7" color="pink" face="微软雅黑">黄河大鲤鱼</font>
	</body>
</html>

4、列表标签

1.无序列表（unorder list）
​ ul 和 li(list) 标签结合使用，其中li标签是ul子标签
​ ul标签的属性：
​ type:
​ 属性值：circle 空心的圆 disc 实心的圆（默认的） square 实心的方块

2.有序列表(order list)
​ ol和li标签结合使用，其中li标签是ol标签的子标签
​ ol标签的属性：
​ type:
​ 属性值：1， A, a, I,i
​ start:
​ 属性值:数字 从哪开始

3.自定义列表

<ul type="disc">
			<li>岳云鹏</li>
		</ul>
		<ul type="circle">
			<li>张鹤伦</li>
		</ul>
		<ul type="square">
			<li>秦霄贤</li>
		</ul>
		
		<ol type="1">
			<li>哈哈哈</li>
			<li>哈哈哈</li>
			<li>哈哈哈</li>
		</ol>
		<ol type="A">
			<li>哈哈哈</li>
			<li>哈哈哈</li>
			<li>哈哈哈</li>
		</ol>
		<ol type="I">
			<li>哈哈哈</li>
			<li>哈哈哈</li>
			<li>哈哈哈</li>
		</ol>
		<ol type="a">
			<li>哈哈哈</li>
			<li>哈哈哈</li>
			<li>哈哈哈</li>
		</ol>
		<ol type="i">
			<li>哈哈哈</li>
			<li>哈哈哈</li>
			<li>哈哈哈</li>
		</ol>

5、块标签和行标签

块级标签单独成一行 div 双边标签
行内标签 span 双边标签
无意义的标签，一般结合css和js使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div标签和span标签</title>
	</head>
	<body>
		<!-- 后期结合css和js使用 -->
		<div>伏羲山</div>
		<div>少林寺</div>
		<div>老君山</div>
		<span>雪花</span>
		<span>青岛</span>
		<span>乌苏</span>
		
		<!-- 也是无意义的标签 -->
		<footer>脚部</footer>
		<header>头部</header>
	</body>
</html>

6、图片标签

img 用来显示图片的 单边标签

标签属性：
​ src:图片的路径，可以本地的路径，也可以网络上面的路径
​ 关于路径：相对路径和绝对路径
​ width:宽度 单位是像素 px
​ height:高度 单位也是像素 px
​ 【如果单独设置了宽或者高，图片会等比例缩放】
​ alt:图片的文本描述，当图片加载失败的时候显示该信息。加载成功不显示
​ title:当鼠标移动到图片上的时候，鼠标下面会显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片标签</title>
	</head>
	<body>
		<!-- source -->
		<!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01638d59391481a8012193a3a90931.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619764528&t=dd35658664c0b8854517f0305c74de26"/>
	-->
	<!-- 相对路径和绝对路径一定要多多注意，尽量使用相对路径，绝对路径可能不显示图片 -->
	<img src="1.jpg" height="200px" width="700px" 
	alt="图片加载失败" title="呵呵哒">
	</body> 
</html>

7、超链接标签

链接标签 a 双边标签
​ 属性：
​ href:是对应a标签的地址。可以是本地地址，也可以是网络地址
​ targer:目标，打开目标网页的方式。_self 本窗体打开 _blank 新开一个窗体

<a href="http://www.baidu.com">百度一下</a>
		<a href="入门标签.html" target="_self">在本窗口中跳到指定的页面</a>
		<a href="入门标签.html" target="_blank">新开一个窗体</a>

8、基于a标签的锚点功能

1.跳到哪里
2.做一个标记

<a name="head">这是头部</a>
		<a href="#foot">跳到底部</a>
		<p>听闻远方有你，动辄跋涉千里</p>
		<p>我吹过你吹过的风，这算不算相拥</p>
		<p>听闻远方有你，动辄跋涉千里</p>
		<p>我吹过你吹过的风，这算不算相拥</p>
		<p>听闻远方有你，动辄跋涉千里</p>
		<p>我吹过你吹过的风，这算不算相拥</p>
		<p>听闻远方有你，动辄跋涉千里</p>
		<p>我吹过你吹过的风，这算不算相拥</p>
		<p>听闻远方有你，动辄跋涉千里</p>
		<p>我吹过你吹过的风，这算不算相拥</p>
		<p>听闻远方有你，动辄跋涉千里</p>
		<p>我吹过你吹过的风，这算不算相拥</p>
		<p>听闻远方有你，动辄跋涉千里</p>
		<p>我吹过你吹过的风，这算不算相拥</p>
		<p>听闻远方有你，动辄跋涉千里</p>
		<p>我吹过你吹过的风，这算不算相拥</p>
		<p>听闻远方有你，动辄跋涉千里</p>
		<p>我吹过你吹过的风，这算不算相拥</p>
		<p>听闻远方有你，动辄跋涉千里</p>
		<p>我吹过你吹过的风，这算不算相拥</p>
		<a name="foot">这是尾部</a>
		<a href="#head">跳到头部</a>

9、表格标签

table 双边标签
tr:双边标签 控制行 是table标签的子标签
td:双边标签 控制的是列 td是tr的子标签
caption:表头标签 是对整个表格的一个描述
th:和td标签类似，但是比td字体粗点颜色重点，可以作为表的字段

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>
	<body>
		<!-- table标签的属性 -->
		<!--border 边框的宽度   width  表格的宽度   bordercolor 边框的颜色  -->
		<!-- cellpadding单元格内边距   cellspacing 单元格外边距  -->
		<table border="1px" width="600px" bordercolor="green" 
		cellpadding="30px" cellspacing="1px" align="center">
		
		<caption>这个是表头</caption>
		<!-- tr -->
		<!-- align  行对齐的方式-->
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr align="center">
				<!-- td也有属性 -->
				<!-- rowspan 行合并 -->
				<!-- colspan  列合并 -->
				<td>1</td>
				<td>2</td>
				<td rowspan="2">3</td>
			</tr>
			<tr align="center">
				<td>4</td>
				<td>5</td>
				
			</tr>
			<tr align="center">
				<td colspan="2">7</td>
				
				<td>9</td>
			</tr>
		</table>
	</body>
</html>

10、文本格式化标签

< b > 定义粗体的文本 双边标签
< big > 定义大号字体
< em > 定义着重文字（斜体）
< i > 斜体
< small > 定义小号字体
< strong > 定义加重语气
< sub > 定义下标字
< sup > 定义上标字
< ins > 定义插入字体
< del > 定义删除字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<b>定义粗体的文本</b>
		<br>
		<big>大号字体</big>
		<br>
		<em>着重文字，斜体</em>
		<br>
		<i>斜体</i>
		<br>
		<strong>加重语气</strong>
		<br>
		<sub>下标字</sub>
		<br>
		<sup>上标字</sup>
		<br>
		<ins>插入字体</ins>
		<br>
		<del>删除字体</del>
	</head>
	<body>
	</body>
</html>

11、特殊字符实体

&nbsp ; 空格
&lt ; <
&gt ; >
&amp ; &

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>	
		<p>哈哈&nbsp;&nbsp;哈哈</p>
		<p>&alt;&lt;</p>
		<p>&gt;&gt;</p>
		<p>&amp;&amp;</p>
	</body>
</html>

12、表单标签

form(双边标签)标签 下面有一个子标签input（单边标签）标签
表单一般用于前端发送数据到后端一种形式。
url: https://www.baidu.com:443/index.html?username=goudan&password=123123
组成部分：协议 + 域名+ 端口号+ 文件名字+ 参数

form标签：
​ 属性：
​ action:提交数据到哪？也就是一个网址
​ method:提交方式
​     get:(查询数据)
​         1.不安全
​         2.传输效率高
​         3.数据传输大小是有限制的 2kb
​         4.通过get请求可以看到你的信息
​      post:（增删改）
​          1.假装很安全
​          2.传输慢
​          3.数据大小没有限制的
​          4.看不到，但是程序员可以看到

input:
​    属性：
    ​    name :比较重要，不要忘了写。如果不写无法取到值
        value:值
​        type:
​    属性值：
            text:可视化文本框
            password:密码文本框
            submit:提交按钮
            radio:单选按钮
            checkbox:多选框
            file: 上传文件，需要注意事项
​            date:日期框
​            hidden：隐藏文本框
​            reset：重置按钮

select：下拉框 里面子标签option
textarea:文本编辑框（js富文本编辑器）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://www.baidu.com" method="post" enctype="multipart/form-data">
			<input type="text"  name="username"/><br>
			<input type="password" name="password"/><br>
			
			<br>
			<br>
			<!-- 单选框的value必须写，如果不写就没有值，一直是on -->
			<input type="radio" name="sex" value="0" />男
			<input type="radio" name="sex" value="1" />女
			
			<br>
			<br>
			<!-- 复选框 -->
			<input type="checkbox" name="hobby" value="1" />唱歌
			<input type="checkbox" name="hobby" value="2" />跳舞
			<input type="checkbox" name="hobby" value="3" />游泳
			<input type="checkbox" name="hobby" value="4" />篮球
			<input type="checkbox" name="hobby" value="5" />rap
			
			<br>
			<br>
			<!-- 日期文本 -->
			<input type="date" name="birthday"/>
			
			<br>
			<br>
			<!-- 上传文件，请求方式必须是post 而且form标签属性李必须加上enctype="multipart/form-data" -->
			<input type="file" name="file" />
			
			<br>
			<br>
			<!-- 隐藏文本 -->
			<input type="hidden" name="hid" value="sb" />
			
			<br>
			<br>
			<!-- 下拉列表 -->
			<select name="city">
				<option value ="1">北京</option>
				<option value ="2">上海</option>
				<option value ="3">深圳</option>
			</select>
			
			<br>
			<br>
			<!-- 文本编辑器 -->
			<textarea name="info"></textarea>
			
			<br>
			<br>
			<input type="reset" value="重置" />
			<input type="submit"value="提交" />
		</form>
	</body>
</html>
xue_yun_xiang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML常用标签代码
05-07
在本资源中，我们看到的"HTML常用标签代码"显然是一个帮助初学者或开发者学习和练习HTML标签的资料。下面将详细介绍一些常见的HTML标签及其用法。 1. `<html>`: 这是每个HTML文档的根元素，包含整个网页的代码。...
html怎么隐藏a标签
qf2019的博客
07-13 1万+
html隐藏a标签的方法是，给a标签添加visibility属性，并且设置属性值为hidden即可。visibility属性是专门用来规定元素是否可见的，hidden表示元素不可见。 其实在html中要隐藏a标签并不是很难，因为在css中有一个非常好用的属性visibility，利用这个属性可以轻而易举的实现我们的目的。下面我们先来简单看下这个属性。 visibility 属性规定元素是否可见。 常见属性值： visible 默认值。元素是可见的。 hidden 元素是不可见的。 collapse 当在表格
WEB前端 | HTML基础——(3)a标签、隐藏及浮动
Erosvan的博客
09-06 6711
一、a标签 a标签 /*a的伪类按lvha顺序，顺序不能互换，但可只写某一种状态*/ /*访问之前的状态*/ a:link { color: black; } /*访问之后的状态*/ a:visited { color: green; } /*鼠标放上去的时候*/ a:hover { displ
Html中隐藏a标签
weixin_30337251的博客
12-10 984
<div><a href="#"><span style="visibility:hidden">我的</span></a></div> 转载于:https://www.cnblogs.com/zhujiabin/p/5036999.html
HTML基础标签及案例
Willing卡卡的博客
04-06 646
HTML HTML概述 HTML：Hyper Text Markup Language（超文本标记语言）；是一门用户创建网页文档的标记语言，网页本身是一种文本文件，在文本文件中添加标记符。HTML是用来创建网页的标记语言，HTML标记的内容是用浏览器来解析的；所见即所得！ HTML特点 1、简易性：超文本标记语言的版本升级采用的超集方式，更加方便灵活； 2、可扩展性：超文本标记语言采取的子类元素的...
html中怎么在图片中隐藏文字,html中隐藏A标签的文字并显示背景图片
weixin_33318222的博客
06-03 1483
在前端web的设计中，有时候为了seo需要做一些不合常理的规划，所以在我们这里做SEO的小组经常和做前端的小组干仗的。今天就说一个SEO小组提出的HTML前端设计方案中的一个小需求，给大家参考一下。需求介绍1、给A标签加入背景图片，并显示背景图片2、A标签要正常的写法，在源码中不能改变其代码的格式。3、在浏览器的展示中，要把A标签的文字隐藏掉，只展示背景图片，不展示文字解决方案上面的需求主要就是说...
必须知道的10个不常用HTML标签
09-27
以下就是十个不常被充分利用但非常有用的HTML标签： 1. `<cite>`：此标签用于引用创意作品，如书籍、歌曲或电影名称。浏览器通常会以斜体显示`<cite>`内的内容，但可以通过CSS自定义样式。例如，引用一本书："David...
20.2 HTML 常用标签
最新发布
07-28
了解并熟练掌握这些常用的HTML标签是构建网页的基本功。通过合理地组织和使用它们，我们可以构建出丰富多样的网页内容，为用户提供良好的浏览体验。在实际工作中，还会遇到更多的HTML标签和属性，持续学习和实践是...
HTML常用标签
07-19
接下来详细介绍一些常用的HTML标签及其用途和属性。 1. **`<p>`标签**: 定义段落。 - 属性: `align`可设置段落对齐方式（左对齐、居中、右对齐）。 2. **`<h1>-<h6>`标题标签**: 定义不同级别的标题。 - 属性: ...
HTML中的常用标签
09-18
### HTML中的常用标签知识点详解 #### 一、文档基本结构 HTML文档的基本结构通常由`<html>`标签包裹，内部包含`<head>`和`<body>`两大部分。 1. **`<html>`标签**：定义整个HTML文档的根元素。 2. **`<head>`标签...
隐藏a标签html,a标签显示隐藏 js怎么控制a标签的显示和隐藏
weixin_29421255的博客
06-10 4974
js怎么控制a标签的显示和隐藏将标签放在层里面，控制层的显示和隐藏就可以: show是层的ID名， 隐藏层：document.getElementById("show").style.display = "none"; 显示层：document.getElementById("show").style.display = "block";小编亦算知丑无谓强迫你难道要小编对着你句句要生要死。Html...
html中的a标签点击事件及元素显隐练习
weixin_54957314的博客
05-11 643
html中的a标签点击事件及元素显隐练习
所见即所得的html制作,做一个所见即所得的CSS效果
weixin_28831399的博客
06-24 467
style 也是标签(在非ie内核的浏览器中支持)，我们将style设置成 contenteditable的时候，那么那的内容就可以编辑了。仔细的体验下，如果我们将背景修改成红色的。那么只要书写完，立马呈现。哇靠，这很方便我们以后写那种动态的编辑器效果呢，等有时间的话，我再试试。效果演示提示：你可以随意改变.test_div里的CSS代码，比如把green改成blue，#666什么的。附上我研究的...
div/ a标签的隐藏，显示
热门推荐
weixin_34307464的博客
09-28 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
标签的使用（三）：a标签的使用
LSEC小陆的博客
08-07 1120
标签的使用（三）：a标签的使用1、<a>标签，为一个内容指定一个超链接。具体用法是，<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>,简单而明了，标题，网址等内容一般是放在开始标签里。只要为文本加入a标签后，文字的颜色会自动变为蓝色（被点击过的文本颜色为紫色），颜色可以通过css样式改变。当然<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，又是我们
html实现原理,在线所见即所得HTML编辑器的实现原理浅析
weixin_42522552的博客
05-31 416
在线所见即所得HTML编辑器的实现原理浅析2018-12-31编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了在线所见即所得HTML编辑器的实现原理浅析，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。如今网站开发越来越提倡用户体验，为用户提供便利的工具也越来越多，而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本...
HTML教程：常用HTML标签大全
HTML教程：收集的常用的HTML标签 HTML（HyperText Markup Language）是一种标记语言，用于创建网页的结构和内容。HTML标签是HTML语言的基础单元，用于定义网页的结构、布局和样式。本文将收集和介绍常用的HTML标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值