html常用的文本标签以及属性

卖不甜枣 · 2025-3-9 04:49:36

HTML标签

HTML通过一系列的标签（也成为元素），来界说文本，图像，链接等等，HTML标签是由尖括号困绕的关键字。
标签通常成对出现，包括开始标签和结束标签（也成为双标签），内容位于两个标签之间，比方：

<p>这是一个段落</p>
<hl>这是一个标题</hl>
<a href="#">这是一个超链接</a>

复制代码

除了双标签，也存在单标签，比方：

<input type="text">
<br>
<hr>

复制代码

区别是：单标签用于没有内容的元素，双标签用于有内容的元素。
HTML的文件结构

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
<meta charset="UTF-8"> //文件编码的形式
<link rel="stylesheet" type="text/css" href="styles.css> //外部样式的标签
<script src="script.js"></script>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<a href="https://www.example.com">这是一个链接</a>
</body>
</html>

复制代码

创建一个文件夹，打开，在文件夹上进入cmd文件，通过code打开当前目录。选择文件，打开文件夹，进行创建html。
直接输入一个！之后，选择一个！按住Tap键，就会出出现基础格式。
标签的形式：有6个标签h1......h6分别表现一级标签到六级标签。输入一个h1，自动有h1标签，按住Tap键tap就有一个标签。

<body>
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
</body>

复制代码

·另有其他的形式：

<p>
<b>字体加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
</p>

复制代码

另有其他形式的：无序列表:<ul> 和有序列表:<ol>

<ul>
<li>无序列表元素1</li>
<li>无序列表元素2</li>
<li>无序列表元素3</li>
</ul>

复制代码

<ol>
<li>有序列表元素</li>
<li>有序列表元素</li>
<li>有序列表元素</li>
</ol>

复制代码

标题标签：

<table>
<tr> //行标签
<th>列标题 1</th>
<th>列标题 2</th>
<th>列标题 3</th>
</tr>
<tr>
<td>元素 1</td>
<td>元素 2</td>
<td>元素 3</td>
</tr>
<tr>
<td>元素 21</td>
<td>元素 22</td>
<td>元素 23</td>
</tr>
</table>

复制代码

可以给表格增加一些边框：<table border="1"> 1,2,3,4都可以。
HTML属性：

属性在html中非常紧张的作用，他们用于界说元素的行为和表面，以及与其他元素的关系。
基本语法：

<开始标签属性名=“属性值”>

复制代码

每个HTML元素可以具有差别的属性

<p id="describe" class="section">这是一个段落标签</p>
<a href="https://www.baidu.com">这是一个超链接</a>

复制代码

s属性名称不区分大小写，属性值对大小写敏感

<img src="example.jpg" alt="">
<img SRC="example.jpg" alt="">
<img src="EXAMPLE.JPG" alt="">

复制代码

class属性：为HTML元素界说一个或多个类名（类名从样式文件引入）
id属性：界说元素唯一的id
style属性：规定元素的行内样式
比方：

<h1 id="title"></h1>
<div class="nav-bar"></div>
<h2 class="nav-bar"></h2>

复制代码

a标签有一个属性，href属性，界说了链接的目的，可以是其他网页，VRL文件路径，电子邮件

<body>
<a href="https://docs.geeksman.com">这是一个超链接</a>
<a href="https://docs.geeksman.com" target="_blank">这是第二个超链接，</a>
</body>

复制代码

可以看到a标签中的是一行的，可以对其进行换行

<a> </a>
<br> //换行
<a> </a>

复制代码

_self ：是以默认值，表现链接在当前窗口
-blank： 表现链接在新窗口大概新的标签页打开
-parent： 表现链接在窗口或父框中打开
-top :表现来凝结在顶层窗口或顶层框架中打开
另外另有：
img： 图片标签，

<img src="logo.png" alt="">

复制代码

可以在网上找照片，把链接复制下来，而且还可以修改图片的大小

<img src="https://img.baidu.com....." alt="" width="200" height="100">

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

html常用的文本标签以及属性

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块