【HTML+CSS】HTML常用标签

咕啾啾

已于 2022-03-09 12:56:32 修改

阅读量544

点赞数 1

分类专栏：前端文章标签： css html 前端 html5

于 2022-02-25 11:59:40 首次发布

本文链接：https://blog.csdn.net/qq_30148319/article/details/123127081

版权

这篇博客详细介绍了HTML的基础标签，包括标题标签、段落、文本格式化、<div>和<span>、图像、超链接、注释、特殊字符、表格、列表以及表单元素，帮助读者掌握HTML的基本结构和布局。

摘要由CSDN通过智能技术生成

学习视频及知识点来源：https://www.bilibili.com/video/BV14J4114768?p=12&spm_id_from=pageDriver

一、标题标签<h1>-<h6>

标签语义：作为标题使用，并且依据重要性递减。
单词 head 的缩写，意为头部、标题。
特点：①加了标题的文字会变的加粗，字号也会依次变大。②一个标题独占一行。

<h1> 我是一级标题 </h1>

二、段落和换行标签

标签语义：可以把 HTML 文档分割为若干段落。
单词 paragraph [ ˈ pær ə græf] 的缩写，意为段落。
特点：① 文本在一个段落中会根据浏览器窗口的大小自动换行。②段落和段落之间保有空隙。

<p> 我是一个段落标签 </p>

三、文本格式化标签

标签语义 : 突出重要性, 比普通文字更重要。

语义	标签
加粗	<strong></strong>
倾斜	<em></em>
删除线	<del></del>
下划线	<ins></ins>

四、<div> 和<span>标签

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。

<div> 这是头部 </div> 
<span> 今日价格 </span>

区别：

1、<div> 标签用来布局，但是现在一行只能放一个<div>。【大盒子】

2、<span> 标签用来布局，一行上可以多个 <span>。【小盒子】

五、图像标签和路径

1、图像标签

src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

<img src="图像URL" />

2、图像标签其他属性

属性	属性值	说明
src	图片路径	必须具有的属性
alt	文本	替换文本 -> 当图片不能显示时显示的文字。
title	文本	提示文本 -> 鼠标放在图像上显示的文字。
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

<!-- 事例 -->
<body>
    <h4>图像标签的使用：</h4>
    <img src="img.jpg"/>
    <h4>alt 替换文本(图像不能显示时出现的文字)的使用：</h4>
    <img src="img1.jpg" alt="This is an image."/>
    <h4>titlt 提示文本(鼠标放在图像上, 显示的文字)的使用：</h4>
    <img src="img.jpg" title="The image is ..."/>
    <h4>width 设置图像的宽度</h4>
    <img src="img.jpg" width="100" />
    <h4>width 设置图像的高度</h4>
    <img src="img.jpg" height="100" />
    <h4>border 设置图像的边框粗细</h4>
    <img src="img.jpg" border="10" />
</body>