HTML总结（2）

最新推荐文章于 2024-05-05 17:01:45 发布

WildKingxue

最新推荐文章于 2024-05-05 17:01:45 发布

阅读量184

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/wildkingxue/article/details/119618598

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.HTML标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标记</title>
	</head>
	<body>
		<h1>内容的标题标记</h1>
		<h1>通过h1-h6标签进行定义的</h1>
		<h1>h1标题标记</h1>
		<h2>h2标题标记</h2>
		<h3>h3标题标记</h3>
		<h4>h4标题标记</h4>
		<h5>h5标题标记</h5>
		<h6>h6标题标记</h6>
	</body>
</html>

二.HTML 注释

注释--标注解释说明代码的元素

可以将注释插入 HTML 代码中，用于解释说名代码的含义和作用，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html注释</title>
	</head>
	<body>
		<!--<h1>注释--标注解释说明代码的元素</h1>-->
		<h1>注释--标注解释说明代码的元素</h1>
		<h1>&lt;！--注释内容--&gt;</h1>
		<h1>往往出现在被解释代码的上方</h1>
		<h1>注释的内容不会被浏览器解释运行</h1>
		<h1>注释可以帮助我们调试代码</h1>
	</body>
</html>

注释的内容不会被浏览器解释运行

三.如何查看源代码

你是否看过一些网页然后惊叹它是如何实现的。

如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

四.HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平线</title>
	</head>
	<body>
		<h1>HTML水平线</h1>
		<h2>&lt;hr&gt;标签在 HTML 页面中创建水平线。</h2>
		<hr >
		<h3>hr是一个单标记</h3>
		<h4>width属性--设置水平线长短</h4>
		<hr width="50%">
		<h4>color属性--设置水平线颜色</h4>
		<hr color="blue">
		<h4>size属性--设置水平线粗细</h4>
		<hr size="5">
		<h4>align属性--设置水平线水平对齐方式【left center right】</h4>
		<hr align="right" width="30%" color="aqua" size="9">
	</body>
</html>

五.HTML 段落

HTML 可以将文档分割为若干段落。

段落是通过 <p> 标签定义的。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落p</title>
		<style type="text/css">
			.a{
				color: aqua;
			}
			.b{
				color: red;
				
			}
		</style>
	</head>
	<body>
		<p class="a">一不小心，我的故事苍凉了手中的笔。</p>
		<p>我将心念飘逸在红尘中，看相遇惊艳了时光</p>
		<p>在这故事里，我感动，游离。当情缥缈如风</p> 
		<p>人如飞絮，便去留无意，念也很苍白。 </p>
		<p class="b">生命中，有些人事，就如浮云掠过。</p>
		<p>你的飘忽不定，没什么大不了，什么都是浮云!</p>
		<p>有风在，心中不留一丝阴霾。</p>
	</body>
</html>

六.HTML 折行

<br/>可插入一个简单的换行符。

通常情况下，<br> 标签会告诉浏览器立即停止当前的文本流，并在下一行的左边，或者在左对齐的内联图形或表格的右边开始继续输出文本流。

br标签是单独出现的,<br />
当使用br标签时，其后面的所有内容都将在下一行出现

提示和注释：

注释：请使用 <br> 来输入空行，而不是分割段落

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html折行</title>
	</head>
	<body>
		<h1>HTML折行通过&lt;br&gt;强制换行</h1>
		<h2>在html网页中键盘的回车换行是没有效果的，所以使用&lt;br&gt;强制换行</h2>
		<h2>&lt;br&gt;强制换行是一个单标记</h2>
		<h3>春晓</h3>
		春眠不觉晓，
		处处闻啼鸟。
		夜来风雨声，
		花落知多少。
		<h3>春晓</h3>
		春眠不觉晓，<br>
		处处闻啼鸟。<br>
		夜来风雨声，<br>
		花落知多少。
	</body>
</html>

七.HTML 格式化标签

HTML 格式化标签就是为文字添加一些特殊的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html格式化标签</title>
	</head>
	<body>
		<h1>HTML格式化标签就是为文字添加一些特殊的效果</h1>
		格式化标签：<br>
		<b>b标记--定义粗体文字</b><br>
		<em>em标记--定义着重文字【斜体】</em><br>
		<i>i标记--定义斜体文字【斜体】</i><br>
		<small>small标记--定义小号字</small><br>
		<strong>strong标记--加强语气【加粗】</strong><br>
		<sub>sub标记--定义下标</sub><br>
		<sup>sup标记--定义上标</sup><br>
		<ins>ins标记--定义下划线</ins><br>
		<del>del标记--定义删除线</del>
	</body>
</html>

八.HTML 图像

在HTML页面中插入图片需要用到html中的<img>标签. <img src="" alt="">.

img代表“图像”,它是图像在页面上显示。

src代表“来源”它告诉浏览器去哪里找图像，在写代码的时候最好将图片放置在一个文件夹下保存，通过这样的方式可以通过名称前面的子目录名称来调用图片。

alt代表“文字”告诉浏览器如果找不到图像，就只显示该文本，或者将鼠标悬停在图像上就会弹出设置的文字。

1.绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。

绝对路径缺点:

<1>如果图片保存目录太深，图片的操作路径就会很长

<2>当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对路径</title>
	</head>
	<body>
		<h3>绝对路径--从操作系统的指定盘中的目录中开始查找图片资源所形成的路径</h3>
		<img src="C:\Users\14397\Desktop\11.jpg" width="200px" align="200px">
		<img src="F:\xiaomiao\xue\3.jpg"/ width="200px" align="200px">
	</body>
</html>

2 .相对路径--以当前网页为参照、为中心，对外开始查找图片的路径。

<1>图片与当前网页在同一个目录下【src=”图片名称”】

<2>图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】

<3>图片保存在当前网页所在目录的父文件夹中【src=”../子文件夹的名称/图片名称”

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对路径图像</title>
	</head>
	<body>
		<h1>HTML图像通过img标记显示图片</h1>
		<h3>相对路径--以当前网页为参照中心，对外开始查找图片资源所形成的路径。[推荐]</h3>
		<img src="img/1.png" >
		<img src="img/微信图片_20210811180625.jpg" width="100px" height="200px">
		<img src="../WildKingxue/微信图片_20210811180618.jpg" width="200px"  >
	</body>
</html>

3.图片路径还可以是网络地址

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网络路径图像</title>
	</head>
	<body>
		<h4>网络路径就是一个url的网络地址</h4>
		<img src="https://images.pexels.com/photos/7049505/pexels-photo-7049505.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="200px" align="200px">
		<img src="https://tse1-mm.cn.bing.net/th/id/R-C.250f95855aec49c974acb36b3ed32571?rik=BgcOI1PX1fb%2bww&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170120%2f387b1a5181ebeddbec90fd5f19e606ce.jpg&ehk=Feb%2bz1leZKOVuTS20av3z7LKELRP0HH277cc6aSrAeI%3d&risl=&pid=ImgRaw&r=0" 
		width="200px" align="200px">
	</body>
</html>

WildKingxue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML总结（2）

一，HTML标题标题（Heading）是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。例如：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>标题标记</title> </head> <body> &
复制链接

扫一扫