HTML学习笔记：HTML基本标签属性、常用标记

最新推荐文章于 2023-04-02 16:33:58 发布

原创最新推荐文章于 2023-04-02 16:33:58 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

2 篇文章

订阅专栏

本文详细介绍了HTML的基础语法，包括单标记和双标记的用法，以及常用的格式化标记如文字加粗、倾斜等。此外还讲解了图像标记的属性设置方法、超链接标签的使用技巧，并介绍了HTML实体的应用。

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

语法：
单标记：<标记名称属性名称="属性值" />
双标记：<标记名称属性名称="属性值" ></标记名称>

注意：
1. 标记中的属性;
2. 是以名值对的形式出现的;
3. 属性的值必须写在引号内;
4. 双引号或单引号必须是英文符号;
5. 标记与标记之间可以顺序嵌套，双标记必须封死;

<b></b>文字加粗
<i></i> 文字倾斜
<u></u> 下划线
<s></s> 中间线
x<sup>2</sup>  x^2
y<sub>2</sub> 
<br />换行

size:1-7
color: 颜色, rgb('0,100,255')，#000000
face: 字体名

align:left, center, right 左对齐，中间对齐，右对齐

标题h1-7,h1,h3使用比较频繁

size: 数字,百分比
width: 数字,百分比
noshade:noshade 实心线

例：<hr size="20" width="80%" noshade="noshade"/>

src: 图像链接地址
title: 图像解释文字，鼠标悬停在图像上出现文字
alt:图像解释文字，图像未正常显示时，在图像位置处显示文字
width:图像宽度数值，设置图像宽度
height:图像高度数值，设置图像高度
border:图像边框数值，设置图像边框

例:<img id="img1" src="image/head_scroll01.jpg" title="风景图" alt="图片加载失败" 
width="500" height="400" border="2" />

a超链接标签:

超链接标签的属性：

href: 链接地址 target: 跳转方式
_blank 跳转到新的页面
_self 在当前页面实现跳转（默认）
_parent 在父框架集中打开被链接文档
_top 在整个窗口中打开被链接文档
锚点链接

当设置锚点时，href的属性值：# +　图片id

例:<a href="#img1" target="_blank">点击找到风景图</a>

> 大于号
< 小于号
' 单引号
& 连接符
" 双引号
不间断空格
® 注册标
@copy; 版权符

例：实现当点击图片时，跳转到百度页面
<a href="http://www.baidu.com" target="_top">
<img src="image/bd_logo.png" width="200" height="80"/>
</a>