【前端学习】——HTML常用标签

柯宝最帅

已于 2023-03-10 20:15:35 修改

阅读量112

点赞数

文章标签：前端 html 学习

于 2023-03-10 19:53:03 首次发布

本文链接：https://blog.csdn.net/weixin_51658186/article/details/129413130

版权

本文介绍了HTML的基本概念，如超文本、标记和标签，以及HTML文档的基本结构，包括头部信息设置和常见标签的使用，如文本、格式化、图片、超链接、表格、表单和多媒体标签。此外，还提到了学习资源来源于bilibili上的拉钩教育视频。

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

学习前端必须知道html，学习视频资源来自bilibili拉钩教育，以下是自己学习过程中的一些笔记：
一、HTML是什么？
HTML即超文本标记语言，超文本即超链接，标记即标签，这种语言由一个个标签组成，有点类似于latex，一个html文档就是一个网页。
在这里插入图片描述

二、html基本结构

<!DOCTYPE html>#版本头部信息
<html lang="en">#语言为英文可以不要
<head>#头
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>#体
    网页显示内容
</body>
</html>

三、html注释
注释是对代码的说明

<!--这就是唯一的一种html注释 -->

四、head头部信息设置

1、设置网页边码   <meta charset="UTF-8">
2、关键字 <meta name="Keywords" content="关键字“/>
3、描述 <meta name="Description" content="简介描述“/>
4、网页标题 <title>网页标题</title>
5、导入CSS文件 <link type="text/css"rel="stylesheet"href="**.css"/>
6、CSS代码 <styletype="text/css">嵌入css样式代码</style>
7、JS文件或代码 <script>。。。</script>
...

五、html常用标签
在浏览每一个网页时，点击鼠标右键点检查或查看源代码，你就会看到熟悉的标签，这些标签组合内容共同构成了一个html文件也即一个网页。

1、文本标签
<hn>...</hn> 其中n为1-6，标题标签（加粗独立行）
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题（引用）
<sub>...</sun> 下标<sup>...</sup> 上标
<del>...</del> 删除线

2、格式化标签
<br/>换行
<p>...</p>换段
<hr/>水平分割线
列表：
	<ul>...</ul>无序列表
	<ol>...</ol>有序列表，其中type类型值：Aali 1 start属性表示起始值
	<li>...</li>列表项
	<dl>...</dl>自定义列表
	<dt>...</dt>自定义列表头
	<dd>...</dd>自定义列表内容
<div>...</div>常用于组合块级元素，以便通过CSS来对这些元素进行格式化
<span>...</span>常用于包含的文本，您可以使用CSS对它定义样式，或者利用Javascript对它进行操作

3、图片标签
<img/>在网页中插入一张图片
属性：
	src：图片名及url地址
	alt：图片加载失败时的提示信息
	title：文字提示属性
	width：图片宽度
	height：图片高度
	border：边框线粗细

4、超链接标签
<a href=" ">...</a>超链接标签，属性如下：
	href：必须，指的是链接跳转地址
	target：表示链接的打开方式
		_blank：新窗口打开
		_parent：父窗口打开
		_self：本窗口（默认）
		_top：顶级窗口
		framename：窗口名
	title：文字提示属性（详情）
锚点链接：
	定义一个锚点：<a id="a1"></a>,以前使用的是<a name="a1"></a>
	使用锚点：<a href="#a1">跳到a1处</a>

5、表格标签
<table>...</table>表格标签：属性：border、width、cellspacing、cellpadding
<caption>...</caption>表格标题
<tr>...</tr>行标签
<th>...</th>列头标签
<td>...</td>列标签：跨行属性：rowspan 跨列属性：colspan
<thead>...</thead>表头
<tbody>...</tbody>表体
<tfoot>...</tfoot>表尾

6、表单标签
<form>...</form>表单标签
<input/>   表单标签input定义输入字段，用户可在其中输入数据，有多种type
<select>...</select>   标签创建下拉列表
<textarea>...</textarea>   多行的文本输入区域
<button>...</button>   标签定义按钮
<fieldset>...</fieldset>   元素可将表单内的相关元素分组
<legend></legend>   标签为<fieldset>、<figure>、<details>元素定义标题
<datalist>html5标签--<datalist>    标签定义可选数据的列表
<optgroup>html5标签--<optgroup>   标签定义选项组，下拉框

7、多媒体标签
<audio>...</audio>   音频标签
<video>...</video>   视频标签
播放Flash的标签
	<embed src="./images/haowan.swf"width="300"height="300"/

在这里插入图片描述
以上基本包含了html所有的常用的常用标签，这对后续网页开发有着莫大意义！
小伙伴们，我们下次再见！

柯宝最帅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端学习】——HTML常用标签

HYTML即超文本标记语言，超文本即超链接，标记即标签，这种语言由一个个标签组成，有点类似于latex，一个html文档就是一个网页。在浏览每一个网页时，点击鼠标右键点检查或查看源代码，你就会看到熟悉的标签，这些标签组合内容共同构成了一个html文件也即一个网页。以上基本包含了html所有的常用的常用标签，这对后续网页开发有着莫大意义！四、head头部信息设置。小伙伴们，我们下次再见！一、HTML是什么？二、html基本结构。五、html常用标签。
复制链接

扫一扫