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

前端与HTML｜青训营笔记

什么是前端

解决图形界面下人机交互的问题
跨终端
- PC/移动浏览器
- 客户端小程序
- VR/AR等
Web技术栈一句话总结前端工程师就是使用Web技术栈解决多端图形界面下交互问题的工程师

前端技术栈

HTML（内容）
CSS（样式）
JavaScript（行为）三者都是运行在浏览器里，而浏览器可以利用Http协议与服务器通信，把前端代码通过协议拿到服务器进行渲染成页面。

前端应该关注哪些方面

功能
美观
无障碍
安全
性能
兼容
体验

前端的边界

前端所做的工作已经远远超过了页面的范畴。比如使用node.js开发服务器端的应用，使用WebGL开发3D游戏等。总之，前端的技术在不断的更新，需要不断学习。

开发环境

浏览器
编辑器

HTML是什么

HyperText Markup Language

<img src="photo.jgp" />标签中设置属性可以简写

最简单的HTML代码：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我是标题</title>
    </head>
    <body>
        <h1>我是一级标题</h1>
        <p>我是段落</p>
    </body>
</html>

浏览器在拿到HTML代码后会进行解析，解析出一个Dom树🌲

HTML语法

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

标题标签🏷️

<h1>一级标题</h1> <h2>二级标题</h2>

列表标签🏷️

有序列表

<ol>
    <li>第一</li>
    <li>第二</li>
</ol>

无序列表

<ul>
    <li>第一</li>
    <li>第二</li>
</ul>

key-value标签

<dl>
    <dt>第一</dt>
    <dd>张三</dd>
    <dt>并列第二</dt>
    <dd>李四</dd>
    <dd>赵四</dd>
</dl>

链接标签🏷️

<a href="https://...">百度</a>

<a href="https://..." target="_blank">百度</a> 表示不是替换现有链接，而是新窗口打开

多媒体标签🏷️

<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"
  width="400"
/>

alt表示当媒体没法展示时显示的问题

<audio 
  src="/assets/music.ogg"
  controls
></audio>

controls表示显示浏览器播放控件

<video
  src="/assets/video.mp4"
  controls
></video>

输入标签🏷️

<input placeholder="请输入用户名">

<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">

<textarea>Hey</textarea>

内容划分

语义化是什么

HTML中的元素、属性、属性值都拥有某些含义
开发者应该遵循语义来编写HTML
- 有序列表使用ol，无序列表使用ul
- lang属性表示内容所使用的语言

语义化的好处

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

如何做到语义化

了解每个标签和属性的含义
思考什么标签最合适描述这个内容
不使用可视化工具生成代码