这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

[ 前端与 HTML | 青训营笔记]

本节课主要学习什么是前端，以及一些HTML的基本知识。

什么是前端

前端三件套中的HTML，CSS，javascript。这三个部分构成了前端的基础。HTML主要负责网页所呈现的内容还有网页的结构，比如网页的导航栏或者里面的内容是什么。

导航栏：

css中负责的就是网页一些元素的样式，比如某个内容在网页的位置，大小，以及颜色等等。通过css使得我们的网页更加美观。

JavaScript中负责的就是网页的一些行为，比如用户点击了网页的某个按钮，网页就会做出相应的行为。（表单提交按钮，网页提交表单）

当然这些技术只是前端的基础（基石）。随着前端的不断发展，前端的生态不断完善，前端的任务也不再是简单呈现页面给用户做一些简单的交互。前端越来越庞大，随之也出现了很多技术，比如js的库：jQuery，还有一些前端框架：Vue，react等等。

HTML

HTML就是一种超文本链接语言，那什么是超文本链接语言呢？

就是通过一系列的标签，就文本内容呈现在页面上。

比如要呈现一个一级标题：<h1>我是以及标题</h1>，在标签里面，又会有一些属性。比如img标签：<img src = "图片路径">，其中这个src就是img标签的一个属性，代表这个路片的路径；src等号后面的就是图片的属性值。

一个完整的html结构应该是这样的。

<!DOCTYPE html>


	<head>
    	<meta charset="UTF-8">
    	<title>青训营</title>
	</head>

	<body>
    
	</body>


</html>

我们可以看到在html中，所有的标签，都被一个html标签所包裹着，我们从上往下看：

首先是<head>标签，这个标签里面存放的是一些在网页里面不需要呈现给用户的但是网页又需要的东西。就比如网页的编格式<meta charset="UTF-8">，这里我们设置网页的编码格式为UTF-8,还有网页的标题，<title>青训营</title>网页的标题就是我们在浏览器顶部状态栏里面看见的标题。

HTML中的标题标签

在HTML中标签从一级到六级，字体一级最大最粗，然后依次变小。

例子：

<h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <p>我是普通文本</p>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>

效果图：

HTML中列表标签

在HTML中关于列表的标签有三类：有序列表，无序列表，还有一种列表类似key:value形式。

有序列表：父标签为<ol></ol>,子标签为：<li></li>,一个有序列表只能有一个父标签，可以有多个子标签。最后呈现的效果会在子标签前面根据字标签出现的顺序（从上往下），一次添加上1,2,3,4的序号。
无序列表：父标签为<ul></ul>,子标签为：<li></li>,一个有序列表只能有一个父标签，可以有多个子标签。最后呈现的效果会在子标签前面加上一个小黑点。
最后一种类似于key:value的标签：我们下面用代码演示。

<p>有序列表</p>
    <ol>
        <li>第一个</li>
        <li>第二个</li>
    </ol>
    <p>无序列表</p>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
    </ul>
    <p>第三种列表</p>
    <dl>
        <dt>第一个</dt>
        <dd>qq</dd>
        <dd>ww</dd>
        <dt>第二个</dt>
        <dd>ee</dd>
        <dd>rr</dd>
    </dl>

运行结果：

我们可以看到第三种标签：<dl>是父标签，然后下面有<dt>与<dd>标签。然后<dt>标签又是<dd>标签的标题。

HTML中的链接标签

在HTML中链接我们使用<a>标签。

<a href = "链接地址" target = "打开方式">

标签语义化

在实际的开发过程中，将标签语义化可以更利于SEO，然后对于阅读这个代码的人也更加容易理解。

在HTML5中常用的语义化标签有这些：

页面头部：`
导航栏：<nav></nav>
主体部分： <main></main>
内容部分：<article></article>
侧边栏: <aside></aside>
页面底部： <footer></footer>

这些语义化标签与正常的HTML标签用法是一样的。

总结

在HTML中，我们负责的是页面的内容以及结果，而不是页面的样式，我们要把网页的三部分（结构、样式、行为）给分开，这样更加利于后面的维护。