HTML基础篇之第一弹学完你就是<html大神!>咱们一点也不虎你!</学完你就是html大神!>

最新推荐文章于 2026-08-23 08:15:00 发布

原创最新推荐文章于 2026-08-23 08:15:00 发布 · 566 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

原创

本文专注于HTML基础知识，讲解了HTML的基本结构、背景设置、空格特殊符号、列表、段落和图片标签，以及超链接和滚动效果。通过学习，初学者能对HTML有更深入的理解。

今天不说别的(其中包括不扯淡),单纯的聊聊HTML基础!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题</title>
	</head>
	<body>
	（写在body里面就是页面的内容）
	</body>
</html>

上面的东西大家不陌生吧?新建一个HTML文件就会出来的东西
在这里插入图片描述注意：<!DOCTYPE> 标签没有结束标签！
head[（头部部分）]
body[（主体部分）]

其中中有属性:
bgcolor=颜色（页面的背景颜色）
background=图片路径[路径包括相对路径绝对路径]（页面的背景图片）

<h1></h1>标题标签,标题标签有h1-h6
<font></font>标签（该标签用来设置文字属性）例如:
<font size="字体大小" color = "字体颜色" face='"字体样式">文字</font>

在这里插入图片描述 ps:大部分标签都是以一对出现,例如<h1></h1>,<div></div>等当然不是所有的都是如此例如<hr />,<br />
既然提到就介绍一下这个吧

[换行标签<br />;  
水平线<hr  size="厚度"  width="宽度"  color="颜色"> 
在排版的时候可以用的上!小本本记下来哦!]

标签有很多,分享的也有很多我不会一个个全部都说但是会说一些重要的常用的!别着急,慢慢看!

有些朋友可能遇到这种情况,输入了很多空格可是在页面中死活没有在这里插入图片描述太气人了
其实在html中它是不识别你输入的空格的因为它的空格需要特殊符号来表示,不要问为什么因为它没你聪明!!!你是最胖的!
特殊符号有很多,我不发了,就解决郁闷的小伙伴的问题!
空格的特殊符号  

在这里插入图片描述另外注意实体名称对大小写敏感

附赠一个网站吧html特殊符号对照表

在这里插入图片描述
上面都是小东西,接下来说的一定注意
网站啥最多?你看网站看啥?

文字图片呀!!!
对了!!!
下面就是段落标签p

<p align="left" (左对齐)/ "right" (右对齐)/ "center" (居中)>(段落的对其方式)

图片标签img

<img  src="图片地址" width="图片宽度" height="图片高度"  alt="图片的提示文字"  
align="top/bottom/middle/left/right" [这里对应的英语解释分别就是上,下,中,左,右] border="图片的边框宽度">
(align是用于调整图片相对于周围文本的对其方式)
宽高单位是px

文字图片有了自然而然就需要把这些放的好看一点啦?
我觉得最简单做出效果的就是表格了,但是我今天就是不讲,我是不是可气人了?

我先介绍列表!!!
列表常见的有,有序列表,无序列表两种

有序列表的语法

<ol>
	<li>填写信息</li>
	<li>填写信息</li>
	<li>填写信息</li>
</ol>

无序列表语法

<ul  type="序号类型">
	<li>所写内容<li>
</ul>

不管是ol还是ul里面的都只能用li标签,两种列表大同小异
但是有一点不同就是 ol和ul的type属性
先说说ol的type属性也就是序号类型:（序号类型有：1、a、A、ⅰ、I）可以自己动手试一试!,不妨猜测一下,如果type="1"是不是会是按照123456789的顺序拍下去?因为这是有序列表呀
再说说ul的序号类型有：disc(默认值,实心圆点)、circle(空心圆环)、square(空心正方形),那这个就没有顺序的说法了吧?所以就是开头会有样式
li可以写很多很多个并不是像我写的,就一个或者三个而是有很多很多,使用多少根据需求!

好了差不多就这么多但是我不过瘾在打算说几个!!!目的就是为了让自己显得很大佬! 在这里插入图片描述

刚刚说空格的问题
那么怎么用html告诉别人,你的空格使用啥代码写出来的?
这就引申出一个高端大气上档次的问题
通过浏览器怎么秀给大家看,你写的代码?

<pre> 把代码放进来就好啦&nbsp;这样浏览器看到的就是源代码</pre>

超链接的用法:
链接到其他页面:<a href=“链接地址”>连接标志 </a>

例如<a  href=“http://www.baidu.com”>点击进入百度 </a>`

链接到本页面:首先创建一个锚链接的锚记点：<a href=“#锚记点名称”>名称</a>
然后在具体要链接到的地方设置name:<a name=“锚记点名称”>名称</a>
（锚记点前面要加上#号,#号就可以简单的理解成当前页面）

<a href="#lname">我点击这里</a>

<ul>
	<li>dsfds</li>
	<li>dsfds</li>
	<li>dsfds</li>
</ul>

<a name="name">就会跳到这里</a>

<a  href=“mailto：970505556@qq.com”>跳转到电子邮件链接主要就是依靠href中填写mailto</a>

好了我累了,最后说这么一个高级的玩意!!!

滚动
在这里插入图片描述
滚动的标签是marquee

<marquee  
scrolldelay=滚动延迟时间  
direction=up/down/left/right(滚动方向/选择一个填写,你总不能让他同时上下滚吧?!!!?!?)  
onmouseover="this.stop()"(当鼠标指在上面时停止滚动)  
onmouseout="his.start()"(当鼠标离开时继续滚动) >
滚动的文字和图像
</marquee>