学习HTML

最新推荐文章于 2024-11-03 19:27:37 发布

huijie_0716

最新推荐文章于 2024-11-03 19:27:37 发布

阅读量288

点赞数 5

分类专栏： HTML5 文章标签： html 学习 javascript

本文链接：https://blog.csdn.net/huijie_0716/article/details/123090718

版权

HTML5 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、图片属性

1.width 宽度

<img src="02.jpg" alt="这是一张图片" width="300px">

2.height 高度

<img src="02.jpg" alt="这是一张图片" height="300px">

3. title属性

<img src="02.jpg" alt="这是一张图片" height="300px" title="这是一张高度为300px的图片">

title任何标签都可以，鼠标放到标签上的提醒文本

二、标题标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">		
		<title></title>
	</head>
	<body>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
	</body>
</html>

共同点：都加粗，都是块元素
不同点：字号依次减小

三、换行

段落换行

四、水平线

<hr width="" align="" color="">

1.width 宽度

2.align 水平方向对齐

left 居左对齐
center 居中对齐
right 居右对齐

3.color 修改水平线的颜色

五、列表

<ul></ul>

无序列表标记，表示列表所包含的项是没有先后顺序的列表项使用<li>表示

<ol></ol>

有序列表标记，表示列表所包含的项是有先后顺序的列表项使用<li>

<li></li>

列表项标记，只能和<ul>或<ol>结合使用

<dl></dl>

定义列表至少包含一条术语（dt）或一条说明（dd）

<dt></dt>

标明一个术语要说明的对象

<dd></dd>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		无序列表
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
		</ul>
		有序列表
		<ol>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
		</ol>
		<!-- li不能单独使用 -->
		<dl>
			<dt>元宇宙</dt>
			<dd>元宇宙</dd>
		</dl>
	</body>
</html>

六、元素

块级元素

总是在新行上开始，占据一整行
高度，行高以及外边距和内边距都可控制
宽带始终是与浏览器宽度一样，与内容无关
它可以容纳行内（内联）元素和其他块元素

行内元素

和其他元素都在一行上
高，行高及外边距和内边距部分可改变
宽度只与内容有关
行内元素只能容纳文本或者其他行内元素

七、文字排版标记

表现性元素

加粗 内容 和 内容主旨表强调
倾斜 内容 和 内容主旨表强调
定义小字体的文字
上标

下标

        <p>但<strong>元宇宙</strong>的发展<b>是循序渐进的，</b>是在共享的基础设施、<i>标准及协议的支撑下</i>，由众多工具、平台不断融合、<em>进化而最终成形</em>。它基于扩展现实技术提供沉浸式体验，基于数字孪生技术生成...”</p>
		<small>lldkslfjkg</small>
		<br>
		2<sup>10</sup>
		<br>		
		O<sub>2</sub>