这是我参与【第四届青训营】笔记创作活动的第一天
前端笔记1
1、什么是前端？
1、解决GUI人机交互问题
2、跨终端：PC、移动浏览器、客户端、小程序、vr/ar等
3、web技术栈
2、前端工程师：
使用web技术栈解决多端图形用户界面交互问题的工程师
3、前端的技术：
1、HTML内容：负责页面、结构、内容
2、CSS：设置页面中样式如位置大小颜色
3、 javascript(定义网页的行为）：比如用户点了一个按钮该怎么响应
前3 个和网络协议构成了前端的一个最基础的技术栈
4、前端应该关注哪些方面？
前端要解决的根本问题是：图形界面下的一个人机交互问题
功能（满足用户某些方面的需求）、美观（界面美观）、无障碍（比如 色盲）、安全（用户数据安全）、性能（网站速度足够快、动画流畅、用户体验足够好）、兼容性 （在各种各样的设备上正常使用）、用户体验
HTML（HyperText Markup Language)
1、解释
HyperText(超文本）；图片、标题、连接、表格
Markup language(标记语言）：<h1>文章标题</h1> 前后的分别表示开始标签和结束标签这个是一级标题
2、例题
1、部分例题解释
列如：<img src="photo.jpg"/>用img标签表示图片，src属性名图片的uil，“”里面是属性值,img里面不需要在里面再嵌套什么类型了可以省略后面标签的img。
2、完整的简单的列题解释
<!doctype html> #标记当前使用的html文件是一个什么版本，浏览器会根据这个选择使用哪一种渲染模式
<html> #文档的跟标签，都是写在doctype里面的
<head> #页面的原数据，页面上需要的信息但不需要呈现在用户面前的
<meta charset="UTF-8"> #页面的编码
<title>页面标题</title> #页面的标题
</head>
<body> #需要呈现给用户的真正的内容
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
3、DOM树
浏览器拿到这个html后会对代码进行一个解析，解析出一个DOM树
4、HTML语法
1、标签和属性不区分大小写，推荐小写
2、空标签可以不闭合，比如inout/meta
3.属性值推荐用双引号包裹
4、某些属性值可以省略，比如required、readoly
5、一些常用的标签表示
1、标题
h1到h6， 如：h1表示一级标题字也大一些
2、列表
<ol> 表示有序列表里面默认的加数字1、2、3在里面每个内容用<li>
<ul> 无序列表（展示效果是前面有一个黑点在里面每个内容用<li>
<dl> key和value的组合（比如字典）
在里面key用的是<dt>,value用的是<dd>
3、链接
用标签<a>表示
例题：
<a href="https://www.bytedance.com/"> #href赋给了一个链接 点击链接可以跳转到字节跳动官网
target="_blank"> #在新窗口打开这个页面，如果没有的话就是顶替原来的页面
字节跳动官网
</a>
4、多媒体
1、图片 <img
src=" 这里面写图片的地址"
alt="Metal movable type" #替代性的文本 如当这张图片加载失败时或者因为一些原因不被加载的时候会显示这个文字
width="400" #图片展示多宽
/>
2、音频<audio
scr="/assets/muic.ogg"
controls #默认显示浏览器里面的一个显示空间 如进度条空间
></audio>
3、<video
src="/assets/video.mp4"
controls
></video>
4、输入
<input placeholder="请输入用户名”> #placeholder表示一个默认的占位符即没有输入时显示的内容
<input type="range"> #选择一个范围
<textarea>Hey</textarea> #可以在里面输入多行的标签
5、选择
1、多选checkbox
2、单选 type="radio" 互斥是用name="sport"这个来是现的
3、下拉式选择是select来实现的
4、自由输入 下面会有一些快捷的提示方式
6、文本类的标签
1、长引用
例题：
<blockquote cite="http://t.cn/RfjKO0F"> #biockquote快级引用表示长的引用 cite属性表示引用的来源
<p>天才---天才。</p>
</blockquote>
2、短引用（引用书名，人物等）
<p>我最--是<cite>小王子</cite>。</p> #cite标签 短的引用 表示引用了一个名字 这里表示引用一个书的名字
3、短引用（引用短的句子）
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变变量</q>。</p> #q 也是一个内容的引用
4、code表示一个代码的引用
<p><code>const</code>声明创造一个只读的常数
</p>
5、引用长的代码 外面包裹一个pre标签
<pre><code>
const add=(a,b)=>a+b:
const multiply = (a,b)=>a*b:
</code><pre>
6、强调标签
<p>在投资之前，<strong>有风险</strong>。</p> #strong 涵义上非常重要
<p>cat<em>are</em>cut animals.</p> #语气的一个重读
6、内容划分
header:页头如logo、
nav:导航
main:放主题的位置,一般只有一个
aside:相关的，但不是直接属于这个页面的内容（比如相关的推荐）
articla:表示文章，可以没有，有的话可以有多个，比如在这放多个博客
footer:页面尾部 参考链接，版权哇等
7、语义化是什么
8、谁在使用我们写的HTML
9、语义化的好处
10、如何做到语义化
mdn
