HTML初学者入门学习教程笔记手册第二部分

myzbx 2024-12-01 18:26 60 浏览

<div>层元素
简介: 在页面层元素<div>用来将页面内容分割成各个独立的部分是块级元素。
用途：在每个<div>元素中，不仅可以包含文本内容，也可以包含图片、表单等其它内容，属性：在默认的情况下，<div>元素所包含的内容，将在新的一行显示
总结：块级元素，独占一行

id 标记属性
简介：给元素定义唯一标识
好处：方便在元素中使用行为
扩展：类似class属性的作用，用来调用级联样式表

class 调用样式属性
简介：class属性用来调用层叠样式表，也可以调用使用<link>元素链接外部样式表。
好处：方便使用和更改

实例：


  <!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			.idepy{
				color: sandybrown;
				font-size: 35px;
			}
		</style>
	</head>
	<body>
<p class="idepy">伊迪派</p>
	</body>
</html>

style 样式属性
简介：页面主体元素的样式属性，用来给页面内容定义级联样式表.
用途：包含style属性、class属性
理解：style是样式，想创建那个元素的样式，就写上那个元素的类型进行设置

实例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			body{
				color: red;
				font-size: 55px;
			}
		</style>
	</head>
	<body>
伊迪派
	</body>
</html>

align 对齐属性
简介：对齐属性用来定义内容的水平对齐方式
用途:使用对齐属性，不仅可以控制文本内容的对齐，也可以控制文本中图片等内容的对齐

实例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			body{
				text-align: center;
			}
		</style>
	</head>
	<body>
我会居中显示
	</body>
</html>

<p> 段落元素
简介：用来定义一个段落
用途：可以包含文本、图片，以及用来修饰文本的元素，被<p>元素包含的内容，默认的显示方式是换行显示
理解：块级元素，独占一行

实例:

<p>段落元素</p>
<p>段落元素</p>
<p>段落元素</p>
<p>段落元素</p>

<br> 换行元素
简介：换行元素<br>用来使被分割的文本换行显示

实例：

 换行元素<br>我在下一行

<pre> 保留格式元素
简介：保留格式元素<pre>用来使包含的内容，按照文档源代码的格式显示
用法：因为浏览器的默认显示方式中，将压缩多个空格为一个，同时忽略换行等空白符号

实例：

<pre>
	我是测试文本                                     前面空格被保留
	我不需要换行符
</pre>

<hr> 水平分割线元素
简介：水平分割线元素<hr>用一条一定高度的分割线，分割页面内容
高度属性：水平分割线的厚度属性size，用来定义水平分割线的粗细
宽度属性：水平分割线的宽度属性width，用来定义水平分割线的宽度
注意：style内定义高度宽度属性徐加px

实例：

<hr size="5" width="500">

<b> 加粗元素
简介：用来使包含的文本加粗显示
理解：是一个物理标签，它所包围的字符将被设为bold（粗体）

实例：

<b>加粗元素</b>

<i> 斜体显示元素
简介：用来使包含的文本内容以斜体的方式显示
理解：是一个物理标签，它所包围的字符将被设为Italic(斜体)

实例

<i>斜体显示元素</i>

<em> 斜体强调元素

<em>斜体强调元素</em>

<strong> 加粗强调元素
简介：是一个逻辑标签，它的作用是加强字符的语气一般来说，加强字符的语气是通过将字符变为bold（粗体）来实现的。

实例：

<strong>加粗强调元素</strong>

<big> 放大元素
简介：放大元素<big> 用来使包含的文本增大一号显示
注意：当文本内容已经是最大字号时，将不能继续增大。

实例:

我是没有放大<big>我是被放大一号的<big>

<small> 缩小元素
简介：缩小元素<small> 用来使包含的文本缩小一号显示
注意：当文本内容已经是最小字号时，将不能继续变小。

实例：

我是没有缩小<small>我是被缩小一号的</small>

<sup> 上标元素
简介：用来使包含的文本内容以上标的方式显示
用途：元素中的文本的底部，将在普通文本的一半高度上显示

实例：

上标元素<sup>我是上标部分</sup>

<sub> 下标元素
简介：用来使包含的文本内容以下标的方式显示
用途：元素中的文本的顶部，将在普通文本的一半高度上显示

实例：

下标元素<sub>我是下标部分</sub>

HTML 教程

上一篇：月入35万大佬总结:web前端系统学习的内容(附全套前端教程)
下一篇：2.HTML简介

HTML初学者入门学习教程笔记手册第二部分

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿