学习html的第一天-CSDN博客

本文介绍了HTML的基本元素，包括文档类型声明、语言、字符集、标题、段落、换行、文本格式化、div和span标签、图像和超链接的使用。同时，结合圣诞节的传统，讲述了圣诞老人、圣诞树的由来，以及它们如何融入到HTML的网页展示中。通过注释和特殊字符的讲解，展示了网页制作的细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.头部标签

1.文档类型声明标签

文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页
```
<!DOCTYPE html>
```
这句代码的意思是：当前页面采取的是HTML5版本显示网页

2.lang语言种类

用来定义当前文档显示的语言

en定义语言为英语
zh-CN定义语言为中文

对于文档当说，都一样，对浏览器和搜索引擎是有作用的，例如：翻译

3.字符集

字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字

在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码

<meta charset="UTF-8" />

charset常用的值有：GB2312,BLG5,GBK和UTF-8，其中UTF-8被称为万国码

二.HTML常用标签

1.标题标签

-

标签语义：作为标题使用，并且依据重要性递减

特点：

加了标题的文字会变得加粗，字号也会依次变大
一个标题独占一行

2.段落和换行标签

在HTML标签中，’

'标签用于定义段落，它可以将整个网页分为若干个段落

<p>我是一个段落标签</p>

标签语义：可以把HTML文档分割为若干段落

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间有空隙

在HTML中，一个段落中的文字会从左到右依次排列，知道浏览器窗口的右端，然后才自动换行，如果希望某段文本强制换行显示，就需要使用换行标签

<br/>

标签语义：强制换行

特点：

是个单标签
只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

3.文本格式化标签

在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，是文字以特殊的方式显示

标签语义：突出重要性，比普通文字更重要

4. div 和 span标签

div和span时没有语义的，他们就是一个盒子，用来装内容的

<div>我是一个div标签</div>
<span>我是一个span标签</span>

特点：

div标签用来布局，但是一行只能放一个div。大盒子
span标签用来布局，一行上可以多个span。小盒子

5.图像标签和路径

1.图像标签

在HTML标签中，img标签用于定义HTML页面中的图像

<img src="图像URL"/>

src时img标签的必须属性，它用于指定图像文件的路径和文件名

所谓属性：简单理解就是属于这个图像标签的特性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能时，显示文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

宽度和高度，只修改一个的情况下，会等比例缩放

图像标签注意点：

图像标签可以拥有多个属性，必须写在标签名的后面
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
属性采取键值对的格式，即key=“value”，属性=”属性值“

2.路径

在实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们

目录文件夹：就是普通文件夹，里面只不过存放了我们作业面所需要的相关素材，比如html文件，图片等

根目录：打开目录文件夹的第一层就是根目录

（2）.路径

页面中的图片非常多，通常我们会新建一个文件夹来保存这些图像文件（images），这是再查找图像，就需要采用”路径“的发过誓指定图像文件的位置

路径可分为：

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径，以你所用文件为起点，找寻其他文件
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常时从盘符开始的路径，例如：”D:/web/logo.jpg“或完整的网络地址"https://www.bilibili.com/cheese/play/ss256?spm_id_from=333.337.0.0 "(必须联网)

6.超链接标签

1.链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定连接目标的url地址，（必须属性）当为标签应用href属性时，他就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为再新窗口打开方式

2.连接分类

外部链接：例如

<a href="http://www.baidu.con">百度</a>

内部链接:网站内部页面之间的相互链接，直接连接内部页面名称即可，例如
```
<a href="index.html">首页</a>
```
空连接：
```
<a href="#">公司地址</a>
```
下载链接如果href里面地址是一个文件或者压缩包，会下载这个文件
```
<a href="img.zip">x下载文件</a>
```
网页元素链接：再网页中的各种网页元素，如文本、图像。表格、音频、视频等都可以添加超链接
```
<a href="http://www.baidu.com"><img src="img.jpg"></a>
```
锚点链接：点击链接，可以快速定位到页面中的某个位置
- 在链接文本的href属性中，设置属性值为#名字的形式，如
```
<a href="#two">第二季</a>
```
- 找到目标位置标签，里面添加一个id属性=刚才的名字，如
```
<h3 id="two">第二季介绍</a>
```

三.注释和特殊字符

1.注释

<！-- 注释 --></！-->

快捷键时 ctrl + /

2.特殊字符

四.综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>



    <h1>圣诞节的那些事</h1>


    
    1.圣诞是怎样由来的 <br>
    2. <a href="#oldman">圣诞老人的由来</a> <br>
    3. <a href="#tree">圣诞树的由来</a> <br>
    <h2>圣诞是怎样由来的 </h2>


    <p>圣诞节是基督款世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受讲的双重节日，即上帝通过耶稣向世人显示自己。这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地救会使用的苏书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期(Chitmas Tide )，各地敦会可以根据当地具体情况在这段节期之内庆祝圣诞节。在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月2日圣诞节的主要纪念活动都与耶稣降生的传说有关。</p>
    
    <img src="images/t1.gif" alt="">

    <h2 id="oldman">圣诞老人的由来</h2>

    <img src="" alt="">
    
    <p>圣诞节当然少不了 <a href="oldman.html" target="_blank">圣诞老人</a>    ，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之-呢?</p>

    <img src="images/t2.jpg" alt="">
    
    <p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。</p>
    
    

    <p>到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据河查，以上故事还有下文;当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长抹中。于是，将礼物放在圣诞袜子的送礼方法便传到至今，在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。?
    </p>

    <h2 id="tree">圣诞树的由来</h2>
    
    <p>圣涎一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。</p>
    
    <p>其中一个是说:大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蝠烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们记已经改用粉渔的小灯虑了。
    </p>
    
    <p>另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝播在地上，松枝立即变成一操树，上面都挂满礼物，以答谢农民的好意。</p>
    
    <p>圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。每撰圣诞树上都挂满琳琅满目的装饰品，但每课树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。</p>

    <img src="images/t3.jpg" alt="">

    <p>更多内容可以<a href="http://www.baidu.con" target="_balck">百度一下</a></p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>圣诞老人</h1>

    <p>圣诞老人( Santa Claus )别称Saint Nlick Kkis kringle、Father histmas或Santa (爱尔兰英语的Santy ) ，一位专门在圣诞节前夜时悄悄赠送礼物给小孩子的神秘人物，是节日主题的代表角色之一。他普遍被认为是基督教的圣人圣尼古拉斯( sant Nicholas ) 的衍生形象。传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，换家挨户地从烟进入屋里，然后偷偷把礼物放在好孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头毗红色帽子，大大的自色胡子，一身红色棉衣，脚穿红色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物,所以习惯地称他为“圣诞老人”。
    </p>
    <img src="images/oldman.jpg" alt="">
</body>
</html>

<h1>圣诞节的那些事</h1>


    
    1.圣诞是怎样由来的
    2.圣诞老人的由来
    3.圣诞树的由来
    圣诞是怎样由来的


    圣诞节是基督款世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受讲的双重节日，即上帝通过耶稣向世人显示自己。这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地救会使用的苏书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期(Chitmas Tide )，各地敦会可以根据当地具体情况在这段节期之内庆祝圣诞节。在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月2日圣诞节的主要纪念活动都与耶稣降生的传说有关。
    

    圣诞老人的由来


    
    圣诞节当然少不了圣诞老人，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之-呢?

    
    相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。
    
    
    到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据河查，以上故事还有下文;当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长抹中。于是，将礼物放在圣诞袜子的送礼方法便传到至今，在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。?
    

    圣诞树的由来
    
    圣涎一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。
    
    其中一个是说:大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蝠烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们记已经改用粉渔的小灯虑了。
    
    
    另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝播在地上，松枝立即变成一操树，上面都挂满礼物，以答谢农民的好意。
    
    圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。每撰圣诞树上都挂满琳琅满目的装饰品，但每课树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。更多内容可以百度一下

圣诞老人( Santa Claus )别称Saint Nlick Kkis kringle、Father histmas或Santa (爱尔兰英语的Santy ) ，一位专门在圣诞节前夜时悄悄赠送礼物给小孩子的神秘人物，是节日主题的代表角色之一。他普遍被认为是基督教的圣人圣尼古拉斯( sant Nicholas ) 的衍生形象。传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，换家挨户地从烟进入屋里，然后偷偷把礼物放在好孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头毗红色帽子，大大的自色胡子，一身红色棉衣，脚穿红色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物,所以习惯地称他为“圣诞老人”。