HTML基础知识入门大全

最新推荐文章于 2025-02-28 09:37:15 发布

HTDiiii

最新推荐文章于 2025-02-28 09:37:15 发布

阅读量3.4k

点赞数 4

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

本文链接：https://blog.youkuaiyun.com/HTDiiii/article/details/141340542

版权

HTML

什么是 HTML

HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。

HTML 标签/元素

在这里插入图片描述

HTML 属性

在这里插入图片描述

第一个 HTML

<!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
<!DOCTYPE html>
<!-- 根标签 -->
<html>
	<!-- 头标签 -->
	<head>
		<!-- 字符集 utf-8/utf-16/GBK/GB2312-->
		<meta charset="utf-8">
		<!-- 标题标签 -->
		<title>这是我的HTML页面</title>
		<!-- 页面内的CSS和JS -->
	</head>
	<body>
		<!-- 页面中也显示的内容 -->
		这是我的第一个页面
	</body>
</html>

段落标签

<!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
<!DOCTYPE html>
<!-- 根标签 -->
<html>
	<!-- 头标签 -->
	<head>
		<!-- 字符集 utf-8/utf-16/GBK/GB2312-->
		<meta charset="utf-8">
		<!-- 标题标签 -->
		<title>这是我的HTML页面</title>
		<!-- 页面内的CSS和JS -->
	</head>
	<body>
		<!-- 页面中也显示的内容 -->
		这是我的第一个页面<br>
		春晓<br/>
		<p>唐·孟浩然
		<p>春眠不觉晓，
		<p>处处闻啼鸟。</p>
		<p>夜来风雨声，</p>
		花落知多少。
	</body>
</html>

在这里插入图片描述

处理字体效果

春晓<br/>
<p>唐·孟浩然
<p>春眠不觉晓，
<p>处处闻啼鸟。</p>
<p style="color: blue;font-family: 楷体;">夜来风雨声，</p>
花落知多少。

图片标签

<img src="./imgs/bj.png" width="300px" title="雪山"/>

在这里插入图片描述

标题标签

<!-- 标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

在这里插入图片描述

水平线/垂直线

<!-- 水平线 -->
<hr />
<!-- 垂直线 -->
<!-- 将水平线旋转90度 -->
<!-- <hr style="transform: rotate(90deg);"/> -->
<hr style="width: 1px; height: 100px;"/>

上标标签/下标标签

<!-- 上标标签/下标标签 -->
H<sub>2</sub>O
2<sup>6</sup>
<!-- 商标实体 -->
&copy;
&copysr;
&reg;

在这里插入图片描述

列表标签

1.1、有序列表

...................

默认情况下是 1~N 的表示形式。 type 属性改变有序的显示效果 start 属性起始点

<!-- 有序列表 -->
		Javaweb前端技术
		<!-- start起始点值,都是数值 -->
		<ol start="6">
			<li>HTML5</li>
			<li>CSS3</li>
			<li>JavaScript</li>
			<li>JQuery</li>
			<li>BootStrap</li>
			<li>LayUI</li>
			<li>Vue</li>
		</ol>
		<!-- type指定有序类型 -->
		<ol type="A" start="6">
			<li>HTML5</li>
			<li>CSS3</li>
			<li>JavaScript</li>
			<li>JQuery</li>
			<li>BootStrap</li>
			<li>LayUI</li>
			<li>Vue</li>
		</ol>
		<ol type="i">
			<li>HTML5</li>
			<li>CSS3</li>
			<li>JavaScript</li>
			<li>JQuery</li>
			<li>BootStrap</li>

最低0.47元/天解锁文章