前端与HTML | 青训营笔记

DDL_Gzm
72 阅读2分钟

“这是我参与「第四届青训营 」笔记创作活动的的第一天

前言

开发软件 : Vsocde[下载点击这里]

建议安装插件 : Live Servier,Auto Rename Tag

前端的介绍

1.前端使用的技术栈

  • *HTML
    主要负责内容的编写,不负责交互以及样式的测试,相当于一个txt文档
  • CSS
    负责设计页面的样式,有非常多的标签
  • JavaScript
    负责管理页面的行为和交互

2.主流的前端技术

  • Node.js
    JavaScript运行时
  • ELECTRON
    桌面应用程序框架
  • React
  • WebRTC
    实时通讯技术
  • WebGL
    Graphics Library 3D绘图协议
  • WebSSEBLY

HTML

推荐使用[MDN请点击这里]进行学习

基本的HTML

代码展示

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>这个是标题</title>
</head>
<body>
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>

结果展示

image.png

显然易见的我们可以抽离出几个部分

  1. html的基本框架
<!DOCTYPE html>
<head>
    这里主要设置各种引用和基础的实则hi
</head>
<body>
    这里写主要内容
</body>
</html>

下面我们简单剖析一下 刚开始给的代码 :

<!DOCTYPE html>
声明文档类型

<HTML></HTML>
这个元素包裹了整个界面是一个根元素

<meta charset="utf-8">
设置文档的字符集编码为utf-8

<title></title>
设置标题

<body></body>
页面内容

HTML结构

image.png

很显然的,这个图正好和上面给出的基本的HTML代码对上了因此不难理解HTML的DOM树结构

HTML学习的扩展

到这里青训的内容就差不多结束了,虽然很短或者内容讲的不够细致 但是前端大多数时间都是自己在查,或者自己学的一个状态。就算课上给你讲完了所有标签但是也记不住,所以这节课只算是一个启发式的课程。

标签的扩展 :

两个容器 :
<div></div>
这是一个通用的流内容容器
<span></span>
这是一个通用的一个行内容容器
两者的主要区别是 是否会自动换行

格式化标签 :
<pre></pre>
如果使用<p></p>段落标签进行编写内容,这个标签会过滤掉你的回车和空格,因此为了保留可以使用这个格式标签

链接标签 :
<a href="">内容</a>
这里的href进行定位需要跳转的资源

初次之外还有很多标签,我这里不进行一一列举,因为网络上有很多wiki可以看,所以也不写的太详细也属于一种启发式的博客了

推荐使用[MDN请点击这里]进行学习
推荐使用[MDN请点击这里]进行学习
推荐使用[MDN请点击这里]进行学习

avatar
文章
阅读
粉丝