【html】初识html

1024A

已于 2022-07-28 17:01:21 修改

阅读量315

点赞数

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

于 2022-07-09 10:02:04 首次发布

本文链接：https://blog.csdn.net/qq_58309844/article/details/125685656

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML到底是啥呢？

超文本标记语言（简称：HTML）
是一种用于创建网页的标准标记语言。
HTML是一种基础技术，网页浏览器可以读取HTML文件，
并将其渲染成可视化网页。
HTML是一种标记语言而非编程语言。

注意：是一种标记语言！“标记”就是使用标签对应一个构建网页的基本元素，从而最后能展现给用户！

好啦，了解了HTML是什么，现在让我们一起来学习吧！

初识HTML

HTML基本结构

代码如下（示例）：

<html>
	<head>
		<title>标题</title>
	</head>
	<body>
		这是第一个网页
	</body>
</html>

小tip：使用编程软件（HBuilder X 或者VScode等）可自动生成框架，快捷键ctrl+! 按tab键即可。

学习HTML最常用标签

h1,h2,h3,h4,h5,h6标题

h1表示一级标题，往后依次递减，大小也是依次递减，一共有6级。

在这里插入图片描述
展现效果（如下）：

p段落

段落标签独占一行

在这里插入图片描述
展现效果（如下）：

hr水平分割线

hr 水平分割线单标签

在这里插入图片描述
展现效果（如下）：

br换行

br换行标签单标签

在这里插入图片描述
展现效果（如下）：

span块

span 块大小根据多少内容决定是行内标签，不会自动换行
在这里插入图片描述
展现效果（如下）：

img图片

这里要提一下src：

src：图片路径
绝对路径:从盘符开始
相对路径:相对于当前编辑的文件寻找图片
		  1、先跳到能看得到图片所属的文件位置
 		  2、再进到图片所属路径
 ./：同级目录
../：回到上一级

img标签里面的其他属性：

title:鼠标悬浮时的提示文字
alt:图片未加载时的代替文字
width:图片宽度
height:图片高度

在这里插入图片描述
展现效果（如下）：

a超链接

a是一个超链接通过a标签可以去到你想去的地方！

href=“https://www.baidu.com” 要链接的地址
target="_self" 在当前页面打开
target="_blank" 在新的页面打开

在这里插入图片描述

ul li列表

ul表示使用列表 li表示具体的列表项
在这里插入图片描述
展现效果（如下）：

在这里插入图片描述

好啦，基本标签学的差不多了，现在我们一起来写一个小案例，综合练习一下，
让你快乐走上前端之路！

综合小案例

一起来看看成品！
在这里插入图片描述
代码如下：

完结撒花，敬请期待

恭喜你 👏🏼 👏🏼 👏🏼，写下你的第一个网页，期待后续的教程……

在这里插入图片描述

1024A

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【html】初识html

10分钟学会写一个网页！一起来看看吧！
复制链接

扫一扫

专栏目录