微信图片_20220727143617.jpg 这是我参与「第四届青训营」笔记创作活动的第1天。

前言

作为一名技术小白，我对前端充满了好奇。经过前两天的学习实践，我对前端html有了基本的理解。接下来我们就跟随着一名小白的角度，浅浅了解下html的基础部分吧！

理解前端

1.什么是前端

简单理解，前端即为网站的前台部分，以界面的方式对呈现给用户。

2. Web标准

1）为什么需要web标准？

使写出的页面更标准、更统一

2）Web标准包括？

结构、表现、行为结构：对网页元素的整理和分类，常见为html

表现：设置网页元素的版式、颜色、大小等外观样式，指css

行为：网页模型的定义及交互的编写，只要指JavaScript

结构（html）类似身体，表现（css）类似外观装饰，行为（JavaScript）类似行为动作

了解HTML

1. 初识html

HTML （超文本标记语言）是一种相当简单的、由不同元素组成的标记语言，它不是编程语言，由一系列的元素组成。

2. html标签

html标签是由尖括号包围的关键词大多数标签是一对组成的，少数为单标签

<html></html>

<开始标签></结束标签>

<br />

双标签关系有两种：并列关系和包含关系

<html lang="en">
<!-- head标签、style标签和body标签是并列关系，body标签和button标签是包含关系-->
<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>这是一个小小的测试网页</title>
</head>
<body>
    <!-- <button class="btn">测试小按钮啦</button>
    <p class="word">来一段文字进行个小学习和测试</p> -->
    <div class="title">
        <h1>我是一级标题标签</h1>
        <h2>我是二级标题标签</h2>
        <h3>我是三级标题标签</h3>
        <h4>我是四级标题标签</h4>
        <h5>我是五级标题标签</h5>
        <h6>我是六级标题标签</h6>
    </div>
</body>

3.html基本结构标签

1）<html></html>

HTML标签，是页面中最大的标签，也称为跟标签

2）<head><head>

文档的头部，在head标签中必须要设置的标签是title

3）<title></title>

标题，让页面拥有一个属于自己本身的网页标题

4）<body></body>

文档的主体，该元素包含文档的所有内容，页面内容基本都是放到body里面的

4. 对vscode工具生成骨架标签代码的理解

先上代码（编译工具：vscode）：

<html lang="en">
<!-- head标签、style标签和body标签是并列关系，body标签和button标签是包含关系-->
<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>这是一个小小的测试网页</title>
</head>
<body>
    <!-- <button class="btn">测试小按钮啦</button>
    <p class="word">来一段文字进行个小学习和测试</p> -->
    <div class="title">
        <h1>我是一级标题标签</h1>
        <h2>我是二级标题标签</h2>
        <h3>我是三级标题标签</h3>
        <h4>我是四级标题标签</h4>
        <h5>我是五级标题标签</h5>
        <h6>我是六级标题标签</h6>
    </div>
</body>
<style>
    .btn{
        padding: 10px;
        background-color: antiquewhite;
        display: flex;
        height: 100px;
        width: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
    }
    .word{
        font-size: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgb(89, 89, 89);
    }
    .title{
        text-align: center;
    }
</style>
</html>

1）<!DOCTYPE>标签

文档类型声明标签，告诉浏览器使用哪种html版本来显示网页

<!DOCTYPE html>：当前页面采取的是html5版本来显示网页

声明必须位于文档中的最前面位置

2）lang（language）语言

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

3）charset字符集

便于计算机能够识别和存储各种文字的内容

可以通过<meta>标签的charset属性来规定html文档应该使用哪种字符编码

UTF-8：万国码，基本包含了全世界所有国家需要用到的字符

5. html常用标签

1）标题标签`<h1> - <h6>`

html有6个等级的网页标题，作为标题使用，并且依据重要性递减

文字加粗一行显示

由大到小标题大小逐步减少

1658902984(1).png

2）段落标签和标题标签

<p></p>定义段落标签，将文字分成若干个段落。此时文本会根据浏览器窗口的大小自动换行，段落和段落之间有空隙

<br />强制换行标签，简单地对文字进行强制换行

文本格式化标签：粗体、斜体、下划线等效果

<strong></strong>或<b></b>实现加粗功能

<em></em>或<i></i>倾斜

<del></del>或<s></s>删除线

<ins></ins>或<u></u>下划线

3）div和span标签

<div>和<span>标签是没有语义的标签，类似于盒子

<div>一行只能用一个div标签，一行可以放多行<span>标签

4）图像标签

<img src=”” />

5）超链接标签

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

href:用于指定链接目标的url地址

target:用于指定链接页面的打开方式，_self为默认值，_blank为在新窗口中打开方式

锚点链接：点击链接定位到页面的某个位置

1）设置属性值：<a href=”#one>第一部分</a>

2）添加id属性：<h3 id=”one”>第一部分</h3>

6）注释标签：快捷键：ctrl+/

<!--

head标签、style标签和body标签是并列关系，

body标签和button标签是包含关系

-->

7）特殊字符

学习总结

以上就是前两天本小白初始HTML的笔记记录啦！有什么错误的地方欢迎大家指正哦~！接下来的学习生活本小白会继续努力哒！

HTML基础 | 青训营笔记

前言