如何快速掌握HTML超文本标记语言？

最新推荐文章于 2024-07-12 20:49:16 发布

B+Tree

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量387

点赞数

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/weixin_45037429/article/details/106626966

版权

前端基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

一、编写HTML的准备
- （一）什么是HTML？
- （二）编写HTML的环境搭建
二、HTML的标签们

一、编写HTML的准备

（一）什么是HTML？

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。——百度百科
HTML简单的理解就是一门通过一系列标签编写网站页面的语言。

（二）编写HTML的环境搭建

编写环境：编写环境就是编写HTML语言的环境，市面上有各种各样的编写HTML语言的编辑器，常见的有pycharm/webstorm/dw…，最简单编辑器是记事本。不过一般都不会用，毕竟没有提示和报错啥的，检查起来太麻烦了。
执行环境：HTML是被浏览器解析，执行在浏览器上的，但是不同浏览器之间有些样式解析区别，这个大家感兴趣可以自行了解一下。
这里说一下我使用的学习工具，我的编写环境是在pycharm中编写，毕竟这是一个优秀的工具。我用的执行环境是谷歌浏览器。

二、HTML的标签们

（一）标签种类

HTML中的标签分为两种，一种是单标签，另一种是双标签。
单标签样式：<标签名属性=“值”>
双标签样式：<标签名属性=“值”></标签名>
在这里插入图片描述

（二）HTML文件的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
</body>
</html>

上面是一个HTML文件中内容的基本格式；
<!DOCTYPE html>表示文档类型；
<html></html>是根标签；
<head></head>网页头部标签；
<body></body>网页躯体标签；

在这里插入图片描述
<title></title>这个是标题标签，里面的内容就是head标签展示部分中的文字;
<meta charset=“UTF-8”>这是声明文件的编码格式。

（二）HTML的标签介绍

1、文本标签

h标签：h标签一共有六个等级h1~h6
在这里插入图片描述
<p></p>标签，p标签可以存放一行文字，并且内容结束时换行
<span></span>标签，span标签也可以存放一行文字，但是内容结束时不换行。
<br>换行标签。
<hr>独立一行的一条线
 空格代表符号
> 大于号代表符号
< 小于号代表符号
&emsp; tab符代表符号
在这里插入图片描述

文本修饰标签
<i></i>字体倾斜样式
<em></em>字体倾斜样式，有强调作用
<b></b>字体加粗
<strong></strong>字体加粗，强调作用
<u></u>下划线
<del></del>删除线
在这里插入图片描述

2、图片标签

<img src=“图片相对路径/或者是图片网址” alt=“图片加载失败的提示语” title=“鼠标放在图片上的提示”>
在这里插入图片描述

通过img标签，咱们可以展示图片了。

3、超链接标签

<a></a>:单击a标签可以可以进行跳转，可以跳转到其他网址，也可以本地页面跳转。
a标签属性：
href=“跳转的地址或者文件”；
target="_blank"；_blank表示跳转的页面在新窗口打开；_self表示在原窗口打开，这是默认值。
在这里插入图片描述
点击后新窗口打开了百度界面。

4、列表标签

无序列表
基本格式：
<ul>
<li>a</li>
<li>b</li>
</ul>
li表示一行。
无需列表包含type属性，可以设置无需列表样式
在这里插入图片描述
有序列表
基本格式：
<ol>
<li>a</li>
<li>b</li>
</ol>
ol有序列表包含属性start和type，分别控制列表的排序编号和符号

自定义列表
基本格式：
<dl>
<dt>a</dt>
<dd>b</dd>
</dl>

表格标签
<table></table>
在这里插入图片描述

表单标签
<form></form>