HTML之开胃小菜：标签与属性

最新推荐文章于 2022-06-27 19:43:43 发布

原创最新推荐文章于 2022-06-27 19:43:43 发布 · 316 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html标签 #html标签属性

前端笔记同时被 2 个专栏收录

13 篇文章

订阅专栏

HTML笔记

9 篇文章

订阅专栏

本文介绍了HTML中的基础标签，包括排版标签、文本格式化标签、图像标签、超链接标签及列表标签等。并讲解了标签的基本属性及其用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上上章讲了html标签分为双标签与单标签，然后再讲一下html具体有哪些标签。

等等等等，在这之前先说下几个不配拥有姓名的点，上节漏掉了，现在安排上！

1 html注释

<--  我是注释 -->
对，就长这样，在编辑器里的快捷键一般是Ctrl+/

2 文档声明

文档声明必须放在第一行，或者说放在第一位，它必须在所有代码的前边

3 编码设置字符集

如果网页出现乱码，就需要在head标签内加上<meta charset="utf-8">

<meta charset="UTF-8" />

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字

BIG5 繁体中文港澳台等用

GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

所以以后最好还是设置编码为utf-8就可以了这样就避免出现字符集不统一而引起乱码的情况了。

emmm,下边进入正题，介绍标签

1 排版标签包括标题标签段落标签水平线标签换行标签

标题标签：

h1 h2 h3 h4 h5 h6 依次从大到小 h1最大，h6最小

标题标签语义：作为标题使用，并且依据重要性递减

<hn>   标题文本   </hn>

注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。一般h1 都是给logo使用，或者页面中最重要标题信息。h1在一个页面只能使用一次,多次使用不利于seo(搜索引擎优化) 自然排名

段落标签：

p 单词缩写： paragraph 段落

<p>  文本内容  </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签：

hr 单词缩写： horizontal 横线

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签

换行标签：

br 单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

2 文本格式化标签：

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

3 图像标签

语法：

<img src="img/btn.png" alt="" title="">

4 超链接标签

a 单词缩写： anchor 的缩写

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

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有self和_blank两种，其中self为默认值，blank为在新窗口中打开方式。

注意：

1.外部链接需要添加 http:// www.baidu.com

2.内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页 </a >

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

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

base 标签基本的

base 可以设置整体链接的打开状态

base 写到 <head> </head> 之间

把所有的连接都默认添加 target="_blank"

163的首页，图像上倒数第二行，<base target="_blank" /> 全局设置，网页内所有的链接打开都是新建一个空白窗口

锚点定位：

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

1.使用相应的id名标注跳转目标的位置。
<h3 id="two">第2集</h3>
2.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）
<a href="#two">

注意不要忘记##########

5 特殊字符标签

6 列表标签

有序列表：

<ol>
	<li>无序列表</li>
	<li>无序列表</li>
	<li>无序列表</li>
</ol>

无序列表：

<ul>
	<li>无序列表</li>
	<li>无序列表</li>
	<li>无序列表</li>
</ul>

自定义列表：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

常用作网站底部链接导航

标签先介绍这些，然后再说一下基本属性

语法：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中，

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

采取键值对的格式 key="value" 的格式

比如:

<hr width="400" />

HTML之开胃小菜：标签与属性

1 排版标签包括标题标签段落标签水平线标签换行标签

标题标签：

段落标签：

水平线标签：

换行标签：

2 文本格式化标签：

3 图像标签

4 超链接标签

5 特殊字符标签

6 列表标签

文字和段落标签：h1-h6 p align 对齐属性

<hr /> 标签的属性：

无序列表 ul li 属性：

有序列表 ol li 属性：

图像标签img img属性

超链接标签 a 属性：

顺便再补充下超链接a：

电子邮件链接：

HTML之开胃小菜：标签与属性

1 排版标签 包括 标题标签 段落标签 水平线标签 换行标签

标题标签：

段落标签：

水平线标签：

换行标签：

2 文本格式化标签：

3 图像标签

4 超链接标签

5 特殊字符标签

6 列表标签

文字和段落标签：h1-h6 p align 对齐属性

<hr /> 标签的属性：

无序列表 ul li 属性：

有序列表 ol li 属性：

图像标签img img属性

超链接标签 a 属性：

顺便再补充下超链接a：

电子邮件链接：

1 排版标签包括标题标签段落标签水平线标签换行标签