常用的HTML的标签介绍

最新推荐文章于 2023-01-01 18:00:39 发布

初夏半微凉

最新推荐文章于 2023-01-01 18:00:39 发布

阅读量345

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/chuxialia/article/details/124560877

版权

标题标签

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

为了使网页更具有语义化，我们经常会在页面中使用标签，HTML提供了六个等级的标签，即
h1 h2 h3 h4 h5 h6，是使用的 head 这个单词的首字母 h 作为的标签名
一般我们不常用 h1 因为h1一般是给logo或者title使用的

段落标签

<p></p>
paragraph 段落

为了使文章有条理，结构清楚，都离不开段落标签的使用

水平线标签

<hr />
horizontal 横线，水平线

网页中可以用来分割出两个块，两个区域，两个段落之类的

换行标签

<br />
break 打断，换行

有些时候需要文章强制换行时可以使用这个换行标签
注意：换行标签的两行之间的间距是段落标签两行间距的一半

div标签

<div></div>
divisio 分割、分区

网页中一般用来进行网页布局

sapn标签

<sapn></span>
span 跨度、跨距、范围

span一般也是用来帮助布局的标签

文本格式化标签

<i></i> <em></em> <s></s> <del></del> <b></b> <strong></strong> <u></u> <ins></ins>
文字以斜体方式加删除线方式粗体方式加下划线方式显示

现在更注重标签的语义化，就是要见名知意，所以现在一般用后者标签

图像标签

<img />
image 图像

在网页想要显示图片，就必须使用图像标签

它有几个属性分别是：
图像的路径 src，图像不能显示时的替换文本 alt，鼠标悬停时显示的内容 title，设置图像的宽度 width，设置图像的高度 height，设置图像边框的宽度 borde

一般图片的宽高都是用css来设置

链接标签

<a></a >
anchor 锚，铁锚

网页有许多的链接标签，点击这个链接就能跳转到自己想要看的页面，非常的方便

<a href="跳转目标" target="目标窗口的弹出方式">链接的文本或图像</a>

href：用于指定链接目标的url地址，是Hypertext Reference的缩写，意思是超文本引用。只有使用这个属性，标签才具有链接功能

target：用于指定链接页面的打开方式，其取值有**_self**和 _blank两种，self表示在本窗口中打开链接页面，blank表示在新窗口中打开

链接的分类：

1.外部链接：需要添加**http://**的域名，如 <a href="http://www.baidu.com/">百度</a>

2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称，如<a href="index.html">内部链接</a>

3.空连接：如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”（即href=“#”），表示该链接暂时为一个空链接。

或者设置href属性值为"javascript:;" 两者的区别：前者当页面出现滚动条时，点击会滚动到页面顶部，后者不会

锚点定位

使用方法：
1、在跳转目标的位置添加id名标注
2、使用<a href="#id名">链接文本</a>

必须要使用**#** 不然就没有效果

<!-- 第一种锚点跳转 -->

<body>
	<a href="#case1">test1</a>
		
	<div id="case1">一行白鹭上青天</div><br /><br /><br /><br />
</body>

<!-- 第二种锚点跳转 -->

<body>
    <a href="#name1">HTML</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="name1"></a>
    <h1>HTML</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

base标签

<base / >
base：可以设置整体链接打开的状态是以新窗口打开还是在当前窗口中打开

base标记是一个基链接标记，是一个单标记。

用以改变文件中所有连结标记的参数内定值。它只能应用于标签<head></head>之间
基础的url设置你网页上的所有相对路径在链接时都将在前面加上基链接指向的地址

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <!-- 第一种 -->
		<base target="_blank" />	
        <!-- 第二种 -->
   		<base href="https://sports.sina.com.cn/basketball/nba/2021-03-16/">
	</head>
	<body>
		<a href="http://www.163.com">网易</a>
	</body>
</html>

列表

无序列表
无序列表的各个列表项之间没有顺序级别之分，是并列的

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ……
</ul>

有序列表
有序列表即为排列顺序的列表，其各个列表项按照一定的顺序排列定义

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ……
</ol>

但一般网页中用有序列表用的比较少

表格table

表格是较为常用的一种标签，用来处理、显示表格式数据

table 用于定义一个表格
tr 用于定义表格中的一行，必须嵌套在table标签中，在table标签内有几对tr，就有几行表格
td 用于定义表格中单元格，必须嵌套在标签中，在tr标签内有几对td，就有几个单元格（列）

<table>	
	<tr>
		<td>单元格内的文字</td>
        ...
	</tr>
    ...
</table>

<tr></tr>中只能嵌套<td></td>
<td></td>标签就像一个容器，可以容纳所有的元素

它的属性：
设置表格的边框（默认没有） border，设置单元格与单元格边框之间的空白间距 cellspacing，设置单元格内容与单元格边框之间的空白间距 cellpadding，设置表格的宽度 width，设置表格的高度 height，设置表格在网页中的水平对齐方式 align

注意：border的值不能小于1，如果小于1则等同于0

表单标签

使用input控件来完成

<!-- 文本域 -->
<form>
	First name: <input type="text" name="firstname"><br>
	Last name: <input type="text" name="lastname">
</form>

<!-- 密码字段 -->
<form>
	Password: <input type="password" name="pwd">
</form>

<!-- 单选按钮 -->
<form>
	<input type="radio" name="sex" value="male">Male<br>
	<input type="radio" name="sex" value="female">Female
</form>

<!-- 复选框 -->
<form>
	<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
	<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

<!-- 普通按钮 -->
<form>
	<input type="button" value="点我">
</form>

<!-- 提交按钮 -->
<form>
	Username: <input type="text" name="user"><br />
			 <input type="submit" value="提交">
</form>

<!-- 重置按钮 -->
<form>
    Username: <input type="text" name="user"><br />
    		 <input type="reset" value="重置">
</form>


<!-- 图像按钮 -->
<form>
    <input type="image" src="logo.png">
</form>

<!-- 文本域 -->
<form>
    <input type="file">
</form>


<!-- 多行文本域 -->
<!-- 禁止textarea拉伸： `style="resize:none"`  -->
<textarea cols="每行中的字符数" rows="显示的行数" placeholder="期待你的神评论"></textarea>

<!-- 下拉菜单 -->
<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...		
</select>

<!-- 表单域 -->
<form action="url地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

常用属性：

1.action

在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

2.method

用于设置表单数据的提交方式，取值为get与post。

3.name

用于指定表单的名称，以区分同一个页面上的多个表单。

注意：每个表单都应该有自己的表单域。

初夏半微凉

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
常用的HTML的标签介绍

标题标签<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>为了使网页更具有语义化，我们经常会在页面中使用标签，HTML提供了六个等级的标签，即h1 h2 h3 h4 h5 h6，是使用的 head 这个单词的首字母 h 作为的标签名一般我们不常用 h1 因为h1一般是给logo或者title
复制链接

扫一扫