2.html的6个标签

小阿宁的猫猫

已于 2022-09-14 19:02:03 修改

阅读量312

点赞数 1

分类专栏： # HTML WEB 文章标签： html 前端

于 2022-07-03 18:02:14 首次发布

本文链接：https://blog.csdn.net/dyjkl/article/details/125587166

版权

WEB 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

html的6个标签

1.HTML 属性

属性是 HTML 元素提供的附加信息

属性一般描述于开始标签
属性总是以名称和值成对的形式出现，比如：name=“value”。

比如:

<a href="https://xxxxxx">PHP：从学会到学废</a>
    a的标签就是一个网址

常见属性：

class：为html元素定义一个或多个类名
id：定义元素的唯一id
style：规定元素的行内样式（inline style）
title：描述了元素的额外信息 (作为工具条使用)

HTML属性参考手册：
https://www.runoob.com/tags/ref-standardattributes.html

2.六个HTML标签实例

①HTML 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

②HTML 段落

HTML 段落是通过 <p> 标签定义的。

<p>这是一个段落 </p>
<p>这是另一个段落</p>

HTML 换行
在不产生一个新段落的情况下进行换行（新行）可使用 <br>标签：

<p>这个<br>段落<br>演示了换行的效果</p>

③HTML 链接
通过标签 <a> 来定义：

<a href="https://xxxxxx">点击链接跳转</a>

target 属性：
使用 target 属性，可以使文档在新窗口打开：

<a href="https://xxxxxx" target="_blank">点击链接跳转</a>

④HTML 图像
图像由<img> 标签定义。<img> 是空标签，它只包含属性，并且没有闭合标签。标签中需使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

<img src="url" alt="some_text"

Alt属性：在浏览器无法载入图像时，替换文本告知其相关信息。（假如用户使用无图模式浏览时适用）

设置图像的高度与宽度：
height（高度）与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:

<img src="D:\Huawei Share\OneHop\background.jpg" alt="background" width="300" height="300">

⑤HTML 表格
表格由 <table> 标签来定义。表格中的行由 <tr> 标签定义，每行中的单元格由 <td> 标签定义。td 即指表格内容,td可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本

<thead>:定义表格的页眉
<tbody>:定义表格的主体

⑥HTML 列表
列表不是表格，也不是表单，列表主要用于目录、菜单等可供查看或选项的场景。

无序列表：
使用粗体圆点（小黑圆圈）进行标记的列表，
使用 <ul> 标签定义

<ul>
<li>HTML元素</li>
<li>HTML属性</li>
<li>六个HTML标签实例</li>
</ul>

有序列表：
使用数字进行标记的列表，使用<ol> 标签定义

<ol>
<li>HTML元素</li>
<li>HTML属性</li>
<li>六个HTML标签实例</li>
</ol>

3.补充

①HTML 注释：

显示在源码中的内容，而不显示在程序或页面中。可供查阅和理解。
②HTML 水平线（分割线）：
<hr>

4.演示代码

<html>
	<head>
	<title>
	六个HTML标签实例
	</title>
	
	</head>
	<body>
	
	<!-- H标签的实例 --> 

	<h1>
	六个HTML标签实例
	</h1>
	<h2>
    六个HTML标签实例
	</h2>
	<h3>
    六个HTML标签实例
	</h3>
	<h4>
	六个HTML标签实例
	</h4>
	<h5>
	六个HTML标签实例
	</h5>
	<h6>
	六个HTML标签实例
	</h6>
	
	<!-- a标签的实例 --> 
	<a href="https://xxxxx">点击链接跳转</a>
	<a href="https://xxxxx" target="_blank">点击链接跳转</a>
	
	
	<!-- p标签的实例 --> 
	<p>这是段落一 </p>
	
	
	<!-- hr标签的实例 --> 
	<hr>
	<p>这是段落二</p>
	<p>这个<br>段落<br>演示了换行的效果</p>
	
	
	<!-- 图像标签img标签的实例 --> 
	<img src="D:\桌面\图片\3BBF8E502898FB7366C2DFD7DD5DB579.jpg" alt="background" height="300" width="300" >
	
	
	<!-- table标签的实例 --> 
	<table border = 1>        <!-- 显示出方格 -->
		<thead>
			<td>1-1</td>      
			<td>1-2</td>
		</thead>
		<tbody>
			<td>2-1</td>
			<td>2-2</td>
		</tbody>	
	</table>

	<table>                   <!-- 不显示方格 -->
		<tr>
			<th>1-1</th>      <!-- th可使内容加粗 -->
			<th>1-2</th>
		</tr>
		<tr>
			<td>2-1</td>
			<td>2-2</td>
		</tr>	
	</table>


	<!-- 列表标签的实例 --> 
	<ul>
		<li>无序列表内容1</li>
		<li>无序列表内容2</li>
		<li>无序列表内容3</li>	
	</ul>
	
	<ol>
		<li>有序列表内容1</li>
		<li>有序列表内容2</li>
		<li>有序列表内容3</li>	
	</ol>
	
	
	</body>

</html>