本文详细介绍了HTML的基础知识，包括<head>标签中的<title>、字符集、编码及<meta>标签，强调了前端开发中结构、样式和交互的分离原则。在<body>标签中讲解了<p>段落、<h1>~<h6>标题、<hr>水平线、语义化标签以及<a>链接和锚点标签的用法，同时提到了路径、相对路径和绝对路径的概念。通过实例帮助读者理解并加深印象。
关于HTML
我们终于迎来了正题，开始学习前端基础的第一部分，老师强调前端一般都是结构（HTML）丶样式（CSS）和交互（JavaScript）相分离的。
我们的HTML只负责页面的结构。
一丶<head>标签内容
那么我们从它的头部标签<head>标签说起吧~~
1.<title>标签
作用：
- 它定义了一个HTML文件的标题，这个标题是显示在网页的标题栏中。一个HTML文件中只能有一个
<title>
<head>
<title>这是一个空白网页</title>
</head>
在浏览器显示：
- 收藏网页时，网页的标题会作为默认的内容存在
- 搜索引擎会捕捉到标题中的内容（现在我们浏览的绝大部分网页都是通过百度的搜索引擎来看到的）
2.字符集和编码
字符集：就是我们HTML文件中的英文，中文或者标点符号等其他字符的集合。
<html lang="en"> <!-- 这里写英文写中文都可以 -->
编码：规定了各种字符以什么样的形式储存。
3.<meta />标签
作用：
<meta charset="UFT-8" />
- 更改字符集，规定了浏览器以什么样的编码来解析页面
<meta name="keywords" content="" />
- name属性取keywords值时，content里面要输入页面关键词。为了便于被搜索引擎抓取，更容易被用户浏览到。
可以有多个关键词，每个关键词之间用英文逗号隔开
越重要的关键词要放在最前面
<meta name="description" content="" />
- name属性取description值时，content里面要输入的是对页面的描述。也是为了方便被搜索引擎抓取到。
我来给你们举个例子，下面是京东官网的网页源代码截图：
4.其他标签
当然 头部标签除了上面的标签外，在是当时还可以放以下几个标签：
<script>标签：用来放javascript代码<style>标签：用来定义一些样式<link />标签：设置外部文件的链接标志，确定当前文件与其他文件的关系。最多的是用来引进我们的CSS样式表
那<head>头部标签中的内容已经讲的差不多啦！我们接着学习最最最最重要的<body>标签里面都放什么啦~
二丶<body>标签里的内容
1.<p>段落标签
它用来定义一个段落，我们称它为段落标签
我先来举个例子：
<p>这是一个p</p>
<p>这是一个p</p>
<p>这是一个p</p>
<p>这是一个p</p>
注意：
它会自动在后面创建空白（也就是自动换行）
2.<h1>~<h6>标题标签
先来举个例子：
注意：
- 被标题标签标记的内容会自动换行并且变粗
- 标题标签标记的内容是网页中着重强调的内容，内容的重要程度随着标题标签等级的递增而依次减弱
- 在实际的项目开发中，我们一般只用到
<h1>~<h3> <h1>标签应该每个HTML文件中只使用一次
3.<hr />水平线标签
再来举个例子：
1111111
<hr />
2222222
作用：
定义一条水平线，用来分隔内容
4.语义化标签
<b>这是一个可以让文字加粗的标签</b><br />
<strong>这是一个可以让文字加粗的标签</strong>
<hr />
<i>这是一个可以让文字变成斜体的标签</i><br />
<em>这是一个可以让文字变成斜体的标签</em>
<hr />
<u>这是一个可以给文字加下划线的标签</u><br />
<ins>这是一个可以给文字加下划线的标签</ins>
<hr />
<s>这是一个可以让给文字加删除线的标签</s><br />
<del>这是一个可以让给文字加删除线的标签</del>
<hr />
浏览器显示：
注意：也许你们跟我有一样的迷惑，为什么每个语义化标签都有两种写法，而且一种写法很简单，另一种写法还有点难。我们为什么不以简单的写法作为主要的写法呢？
是因为我们的语义化标签<b><i><u><s>它们只能让标记的内容显型，而<strong><em><ins><del>这些看似复杂的标签不仅可以显型，还能起到强调的作用。
5.相对路径Or绝对路径
这块知识是为下一块知识做铺垫的，为了你们更好懂，所以拿来讲一下
绝对路径
顾名思义就是绝对的路径，就是从头开始计算的路径。
本地路径：
C:\Program Files\Internet Explorer\images
网页路径：
https://www.baidu.com/
相对路径
是相对于当前文件的位置来进行计算的
- 上一级:
../ - 同级：
. - 下一级：
/
6.<a>链接标签
同样来写个例子：
<a href="https://www.baidu.com">百度</a>
在网页中：
当我们点击这两个字时，页面会自动跳转到百度网页，这就是链接。
- Web中的页面都是相互链接组成的，可以点击并且会跳转到另外一个页面的我们叫它链接。
<a>标签的作用是点击标记的内容使页面跳转到指定位置的文档<a>标签中有一个重要的属性是href 它的值为要跳转的页面，也就是URL（可以是绝对路径也可以是相对路径）
关于href属性的一些注意事项：
** 1.URL也可以定义到其他类型的文件上去，比如图片或视频等**
<a href="https://www.baidu.com"><img src="1.jpg" alt="">/a>
这样的话整个图片都会作为链接，点击后即可完成跳转
2.书写路径的时候要注意大小写！
3.href的值不要写本地的绝对路径，因为本地协议file用于访问计算机本地的文件
4.如果href要访问其他网页需要在网页前面加上http://，否则它就找的是文件目录下的值为URL的文件
5.空链接
<a href="#"></a>
target属性：
取_blank值时：在新窗口中打开。
取_self值时：在本窗口中打开（默认）
7.锚点标签
同样先举个例子：
<h2>个人简历</h2>
<a href="#name1">姓名</a><a href="#age">年龄</a><a href="#hight">身高</a><a href="#love">特长</a>
<hr>
<p>
<a name="name1">姓名：皮卡丘</a>
</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p><a name="age">年龄：5岁半</a></p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p><a name="hight">身高：50cm</a></p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p><a name="love">特长：放电</a></p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
<p>皮卡丘</p>
我们可以通过点击链接快速跳转到自己想看到的内容，这就是锚点链接的作用。
要实现锚点链接需要两个步骤！！
1.先划分区块：就是将需要标记的区域用<a>标签标记起来，然后给a标签的name属性赋一个英文名字的值即：
<p><a name="love">特长：放电</a></p>
2.再标记划分好的区块
<a href="#love">特长</a>
注意：
1.标记划分好的区块时一定不要忘了加“#”
2.划分区块时与标记区块时的名称要一致
这样就实现了快速跳转到自己想要的位置
好啦~今天老师就讲啦这么多，每个标签我都有例子，可以多照着练习一下，加深一下印象。那咱们下周一见啦！！
扫一扫
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
