前端与HTML ｜青训营笔记

不怎么爱学习的dan

2022-07-24 87 阅读2分钟

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

什么是前端？

前端工程师使用WEB技术栈解决多端图形用户界面交互的工程师

多端包括：PC端、移动端、客户端、小程序等等

前端技术栈有哪些？

HTML（超文本标记语言）
- 负责内容的结构
CSS（层叠样式表）
- 负责内容的样式表现
- 如：大小、颜色、边框、位置等
JavaScript（脚本语言）
- 负责页面的行为
- 如：点击按钮发送请求给后端请求数据，比较复杂的动画等
- 注意：部分动画特效CSS3也可以做到，JS的交互行为更加广泛，不仅仅是视觉上

基础知识

标签

标签分为单标签和双标签
单标签，如：<img/>、<br/>、<hr/>等
双标签，如：<div></div>、<p></p>、<span><span>等
由上面可以看到
  1.单标签一般在标签最后反斜杠结尾，而双标签在第二个标签使用反斜杠结尾
  2.单标签一般需要设置一些属性来显示内容，双标签则直接将内容放在两个标签之间（双标签也可以有属性）

属性

<img src="https://picsum.photos/200" alt="这是一张图片"/>

这里的src和alt是属性名，而后面的链接和文字都是属性值
可以得出属性的书写格式：属性名="属性值"
如果某个属性的值是布尔值（true or false）直接写属性名代表true，不写代表false
注意：属性只能写在开始标签内

html文件的结构解析

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>页面标题</title>
    </head>
    <body>
        <img src="https://picsum.photos/200" alt="这是一张图片"/>
        <p>这是一个段落</p>
    </body>
</html>

<!doctype html>定义文档类型是html5类型进行解析
html标签代表整个文档的根标签
head标签代表网页头信息，里面存放一些不需要直接在页面显示的内容
body标签代表网页的内容，里面存放展示用户看的内容
img标签表示是一张图片
p标签表示一个段落

更多标签推荐MDN去查询：MDN Web Docs