什么是前端？

前端端是在浏览浏览器的时候，它是网络前台的。解决GUI交互问题，可以实现跨终端如 PC端、客户端小程序、VR/AR等。

前端技术栈

前端3剑客：HTML、CSS、javaScript，这3个是前端入门的基础。再往后学有更多的技术需要掌握如vue、react、node.js等等

HTML主要是网页内容，css负责网页布局和美观也就是样式，js负责行为，就是·对用户的行为作出响应。

前端应该关注哪方面的内容

功能: 客户需求
美观：好的页面使人赏心悦目。
性能：在很多用户还能保持顺畅的使用
安全：不容易被攻击，导致信息泄露
兼容：在各个终端可以顺畅使用
体验：用户体验
无障碍：方便使用

前端的框架

node.js
Electron
vue
React
WebRTC
WebGL
webASSEMBLY ######这些都是前端的框架，但不是全部，如果都学习掌握了，找工作不在话下。

开发环境

各大浏览器

vscode Vim WebStorm

HTM

什么是HTML

HyperText Markup Language 翻译为超文本标记语言超文本指图片、视频、链接、标题等如以下几个标签 <img src="hello.jpg>、<h1>这是一个标题</h1>。这两个分别是图片和标题标签，在标签中除了标签名还有属性值。

html的主要框架

<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>Document</title>
</head>
<body>
   
</body>
</html>

这是主要框架 meta标签一般是定义环境如charset指的是编码，这里是用UTF-8编码。 title就是网页名称，body是内容。

html语法

标签和属性不区分大小写，但推荐小写。
空标签可以不闭合，如 input、meta。
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly

html语义化

html中的元素、属性及属性值都拥有某些含义
开发者应遵循语意来写html

语义化好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

要做到语义化就要熟悉每个标签和属性的含义，思考什么情况适合用什么标签。

<!-- 总共6级标题 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <p>段落标签</p>
    <!-- 图片标签 -->
    <img src="hello.jpg">
    <ol>
        <li>有序列表</li>
    </ol>
    <ol>
        <li>无序列表</li>
    </ol>
    <!-- 表格标签 -->
    <dl>
        <dt>作品：</dt>
        <dd>西游记</dd>
        <dt>主要人物：</dt>
        <dd>孙悟空</dd>
        <dd>猪八戒</dd>
        <dd>唐僧</dd>
      </dl>
    <a href="#">这是一个链接标签</a>
    audio controls="controls">
<audio>>
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
音频标签
</audio>
<video>视频标签</video>
html中最重要的标签，div可以用来布局
<div>常用于布局,通常结合css实现布局</div>

以下是新的布局标签，升级版div

总结

第一次课收获颇丰，今天不是第一天学习html，但是再一次听课是一次很好的复习，也对之前所学有新的理解。

前端与HTM学习day01