HTML入门

WH牛

已于 2024-06-13 11:48:24 修改

阅读量955

点赞数 13

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

于 2024-06-13 11:45:50 首次发布

本文链接：https://blog.csdn.net/WHabc2002/article/details/139645459

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.HTML入门

1.1HTML简介

HTML ： H yper T ext M ark-up L anguage, 超文本标记语言。是用来描述网页的一种标记语言。

名词解释：

1. “ 超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

2. 标记：也就是标签

HTML就是用来描述网页的内容的格式要求的。

网页本质上就是一个文本文件，后缀名一般为htm或者html；

想要修改后缀，前提是你要展示文件扩展名。

如何展示文件扩展名？

浏览器就是解析网页文件的软件。

HTML 语言学习的主要内容，就是标签及其效果。

全部 HTML标签，可以参考： periodic table of the html5 elements (webfrontend.dev)

https://html5.tool.webfrontend.dev/

也可以直接百度html标签参考手册。

1.2第一个HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
      网页内容
</body>
</html>

说明：

1.<!DOCTYPE html> 文档类型声明，作用是告诉浏览器使用哪种 HTML 版本来显示页面

2.<html></html> 是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head> 和主体 <body> 。

3.<head></head> 元素出现在文档的开头部分。 <head> 与 </head> 之间的内容不会在浏览器的文档

窗口显示，但是其间的元素有特殊重要的意义。

4.<title></title> 定义网页标题，在浏览器标题栏显示。

5.<body></body> 之间的文本是用户可见的网页主体内容。

1.3HTML标签规范

1.HTML标签是由尖括号包围的

2. 根据标签的书写形式，分为双标签 ( 闭合标签 ) 和单标签 ( 空标签 )

例如：

双标签：<body></body>

单标签： <img src = "images/pic.jpg" alt = " 图片 " >

3. 标签可以嵌套，不能交叉嵌套

正确：

<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>

错误：

<html lang="en">
  <head>
</html>
  </head>

4. 标签中可以包含属性

<img src = "images/pic.jpg" alt = " 图片 " >

5 . 标签不区分大小写，一般是小写

2.常用的文本标签

2.1标题标签

<body>
   <h1>标题1</h1>
   <h2>标题2</h2>
   <h3>标题3</h3>
   <h4>标题4</h4>
   <h5>标题5</h5>
   <h6>标题6</h6>
</body>

显示效果 ：

我们还可以添加属性：

如：我想要标题1居中：

<h1 align="center">标题1</h1>
<h2>标题2</h2>

显示效果：

2.2 换行标签

不用换行标签时：

<body>
   我是正文1
   我是正文2
</body>

显示效果：

使用换行标签：

<body>
   我是正文1<br>
   我是正文2
</body>

显示效果：

2.3P标签

有行间距，上下默认换行，但标签内不保留换行和空格，字体不变。

<body>
<h1 align="center">两相思</h1>

<p align="center">【宋】李禺</p>
<p>
枯眼望遥山隔水，往来曾见几心知？

壶空怕酌一杯酒，笔下难成和韵诗。

途路阻人离别久，讯音无雁寄回迟。

孤灯夜守长寥寂，夫忆妻兮父忆儿。
</p>
</body>

显示效果：

2.4pre标签

有行间距，上下默认换行，标签内保留换行和空格，字体等宽。

<body>
<h1 align="center">两相思</h1>

<p align="center">【宋】李禺</p>
<pre align="center">
枯眼望遥山隔水，往来曾见几心知？

壶空怕酌一杯酒，笔下难成和韵诗。

途路阻人离别久，讯音无雁寄回迟。

孤灯夜守长寥寂，夫忆妻兮父忆儿。
</pre>
</body>

显示效果：

2.5文本格式化标签

加粗 

 斜体 

 下划线 

<s> 删除 </s>

显示效果：

2.6上角标签和下角标签

下角标签

上角标签

x<sub>1</sub>+y<sup>2</sup>=100

显示效果：

2.7常用的特殊字符

2.8水平分割线

<body>
   天堂
   <hr>
   地狱
</body>

显示效果：

2.9图像标签

<img src="dog.jpg" alt="狗的图片" title="宠物狗" width="200" height="200">

属性采用键值对格式：key = “value”

常用属性：

src: 要显示图片的路径 .

alt: 图片没有加载成功时的提示 .

title: 鼠标悬浮时的提示信息 .

width: 图片的宽，也可以设置为浏览器宽度的百分比

height: 图片的高 ( 宽高两个属性只用一个会自动等比缩放 .)

寻图资源

CC0协议

创作者公开放弃所有权的作品自动进入公有领域。任何人不具有所有权，意味着这些作品可以被自由地复制，修改，分发和演出—— 甚至用于商业目的

知识共享许可协议_百度百科 (baidu.com)https://baike.baidu.com/item/%E7%9F%A5%E8%AF%86%E5%85%B1%E4%BA%AB%E8%AE%B8%E5%8F%AF%E5%8D%8F%E8%AE%AE/23190065?fr=ge_ala可参考的CC0资源网站：

免费素材图片 (pexels.com)https://www.pexels.com/zh-cn/免费正版高清图片素材库超过4.5百万张优质图片和视频素材可供免费使用和下载 - Pixabay - Pixabayhttps://pixabay.com/zh/Beautiful Free Images & Pictures | Unsplashhttps://unsplash.com/Free Stock Photos - SplitShirehttps://www.splitshire.com/图标资源：

iconfont-阿里巴巴矢量图标库https://www.iconfont.cn/网站头像favicon.ico

马上在线制作https://boke112.com/tools/toico/

以上为我个人的小分享，如有问题，欢迎讨论！！！

都看到这了，不如关注一下，给个免费的赞

WH牛

关注

13
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录