走进HTML和CSS

聪桶

已于 2022-07-29 20:24:05 修改

阅读量1.8k

点赞数 1

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

于 2022-07-29 19:32:09 首次发布

本文链接：https://blog.csdn.net/qq_48372659/article/details/126062228

版权

前端html常用标签专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.为什么要学习HTML？

制作精美的电商
门户等静态网页制作网页中的各种交互
动画效果制作网页游戏等

2.什么是HTML：

HTML：超文本标记语言（Hyper Text Markup Language） HTML不是一种编程语言，而是一种标记语言，描述网页的语言 HTML使用标签描述网页中图片、文本、音乐、视频、超链接等
HTML不是一种编程语言，而是一种标记语言，描述网页的语言
HTML使用标签描述网页中图片、文本、音乐、视频、超链接等

3.开发环境及开发工具：

开发环境：windows、linux、Mac OSX

开发工具：Dreamweaver、Eclipse、FrontPage、WebStorm、HBuilder X、VSCode……

4.HTML基本标签：

4.1

HTML由<html <head> </hea <body> </body> <html>这三部分组成，网页代码的书写都是在<body> </body> 标签内完成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		<h1>-<h6>标题标签字体依次减小，<h1>字体最大，<h6>字体最小
		<hr>水平线标签
         <p>…</p>段落标签
		 <br/>换行标签
		 <i>…</i>和<em>…</em>都是斜体标签
         <strong>…</strong>加粗标签
		 <sup>…</sup>上标标签
		 <sub>…</sub>下标标签
		-->
		<h1>静夜思</h1>
		<hr color=blue>
			<p>床前明月光<br/>疑是地上霜</p>
			<em>举头望明月</em>
			<i>举头望明月</i><br />
			<strong>低头思故乡</strong><br />
			x<sup>2</sup>+y<sup>2</sup>=1<br />
			H<sub>2</sub>SO<sub>4</sub>
	</body>
</html>

运行结果：

4.2图像标签：

常见图片格式：jpg、gif、bmp、png，语法如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 src图片路径
		 alt替换文本
		 title鼠标放在图片上显示的文字
		 width 设置图片的宽度
		 -->
		<img src="img/cat.jpg" id="cat" alt="这是一张可爱的喵咪图片" width="360" title="这是一张可爱的喵咪图片"/>
	</body>
</html>

运行结果：

4.3超链接

4.3.1语法格式如下：

4.3.2超链接的应用：

1、页面间链接：A页到B页，网上常见链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="https://www.bilibili.com" target="_blank">bilibili</a>
	</body>
</html>

运行结果：

2、锚链接：跳至自身固定位置，或A页跳到B页固定位置，需锚标记

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>锚链接和功能性链接</title>
	</head>
	<body>
		<!-- 
		 锚链接需要绑定超链接id的值，格式为#id的值
		 -->
		<a href="#down">快速到达底部</a><br />
		<!-- 如果要锚链接其它html文件，通过文件相对的路径加上#以及id的值 -->
		<a href="03图像标签.html#cat" target="_blank">显示喵咪图片</a><br />
		        <!-- 这是功能性连接，会打开电脑上处理邮件的客户端-->
				<a href="mailto:1319866945@qq.com">邮箱联系我们</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#">111111111111111111111111111111</a><br />
				<a href="#" id="down">底部</a><br />
	</body>
</html>

运行结果：

1.快速到达底部：

2.显示喵咪图片：

3、功能性链接：电子邮件、QQ、MSN等链接

5.注释和特殊符号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		今天的不开心到此为止&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明天依然光芒万丈<br />
		如果你的分数&gt;80分，我就答应你一个愿望<br />
		相反你的分数&lt;80分，&quot;周末在家你懂的嘿嘿&quot;<br />
		&copy;2022-2066奕涵北城
	</body>
</html>

运行结果：