第二章—HTML的自我介绍

最新推荐文章于 2024-04-09 15:54:41 发布

晚上的星星最好看

最新推荐文章于 2024-04-09 15:54:41 发布

阅读量507

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端零基础文章标签： html5 javascript css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_43369218/article/details/131514579

Web前端零基础专栏收录该内容

2 篇文章

订阅专栏

HTML用于构建网页结构，通过标签指示内容类型如标题、段落。浏览器根据这些标记呈现内容。UTF-8编码是国际标准，解决不同国家编码冲突。<head>包含元数据，<body>包含用户可见内容，<title>定义页面标题。

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

HTML

HTML(Hypertext Markup Language)、超文本标记语言；
它负责网页三要素之中的“结构”
HTML使用标签的形式来标识网页中的不同组成成分
超文本则是指超链接，使用超链接可以让我们从一个页面跳转到另一个页面

简单翻译一下：（结构）

超文本标记语言：

文本，就是用纯文本来写的，简单来说，无论你开发系统，还是前端页面，你用电脑自带的，文本文档都可以编写，只不过容易出错，所以有了对应的开发工具，对应的软件，这样也是为了更方便，更快捷的处理好代码文件。

例如：

两张图片，第一张是我用Nodepad++ 写的，文本文档，第二张则是，浏览器打开的样子，（将文本变为浏览器的方法是将后缀 由txt 换成 html）

好了，话说回来图一是我想要的古诗类型，格式，古诗名是名字，作者是作者，一行是一行，但是，图二是浏览器解析的，你可以理解，浏览器么得感情，它不会思考，所以它需要你告知这个行字是什么，它不知道什么是古诗名，什么是作者，所以只能渲染成这个样子

所以，为了让浏览器达到咱们预期的样式， “标记” 就出现了，例如：你给他标记上这是一行，标记上这是标题，浏览器就可以解析成渲染成你想要的样子

<h1>清平调·其一</h1>
    <h2>唐·李白</h2>
    <h2>云想衣裳花想容，</h2>
    <h2>春风拂槛露华浓。</h2>
    <h2>若非群玉山头见，</h2>
    <h2>会向瑶台月下逢。</h2>

那么我们给添加上标签以后，效果就达到了我们预期的效果：、

现在不需要知道标签，什么意思，只需要知道，这么做你预期效果达到了就行

基本格式：

那么写网页可不能就这样，跟考试一样，你得有格式啊，或者说模板，然后里面内容，你还要按要求去写进去；

<html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

问题来了，为什么这样写？

1.<html> </html>:这个是网页的“根标签”前面的html是开始，后面带有 “/” 的是结束，而且都是“成对”出现的，后面会说到“自结束”标签，当然这后面再说，网页中有且只有一个 根标签

2.<meta charset="UTF-8">：这里面的 meta charset ：提供编码信息

UTF-8： 这个是规定编码格式，全球通用，因为在这个之前，美国有一种编码格式，德国也有，中国也有，其他国家自然也应该有自己的编码格式，都是根据自己国家语言指定的自己的编码格式，但是吧，自己解析自己的还行，一旦给对方的拿来解析，好嘛！直接乱码了，一加一你看不出来等于二了，后来为了规范，所以制定了这个编码格式，统一的，想了解更详细的可以自己查查。

3.<head></head>:这里面的内容，是给浏览器看的，不是给我们看的

4.<body></body>：网页里面所有的内容都应该写在body里面，给用户看的

5.<title></title>：是干嘛的，我想看了上图你也应该知道title是控制那里的（标题栏）

到现在，你的网页才算完整，因为你有了框架

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>

在这个格式中，head是html的子标签，同时body也是html的子标签，

Head 和 body是兄弟标签，html则是他们的父辈标签

简单来说就是包裹关系，谁在外边谁大，同级别辈分相同

注：

（文章内容均为自己学习过程中整理出来的，编写文章目的也是为了方便大家学习，所以有不详细的地方欢迎评论指正，看到后会第一时间更正）