对于谁在使用我们写的HTML:

开发者-修改、维护页面
浏览器-展示页面
搜索引擎-提取关键字、排序
屏幕阅读器-给盲人读页面内容

JavaScript行为

css传达样式

HTML传达内容

这三个方面构成前端技术栈

前端关注方面:美观，功能，无障碍，安全，性能，兼容性还有体验

前段边界:nodeJS开发服务器端应用，ELECTRON或者React开发客户端的应用，WebGL可以开发游戏

 开发环境包括两个：
 浏览器:IE，火狐，谷歌
 编辑器:VSCode,Vim,WebStorm
 <img src="转存失败，建议直接上传图片文件 " alt="转存失败，建议直接上传图片文件">标签不需要在中间嵌套内容，所以直接在一个开始标签末尾加上/
<html></html>为根标签（顶级元素），所有标签放在这里面
<head></head>包括页面标题和页面编码
<body></body>包括主要内容

所以整个HTML的格式形成一个DOM树，每个节点称为dom节点

HTML语法:

不区分大小写，推荐小写空标签可以不闭合，例如input，meta因为本身里面不放内容，加一个/即可属性值推荐双引号包括某些属性值可以省略，例如required 标题标签h1~h6，一觉标题到六级标题，默认逐渐字体变小

列表标签

有序列表标签

       <ol></ol> ，中间内容用<li></li>

无序列表标签

      <ul></ul>，中间内容使用<li></li>，此外还存在<dl>标签，中间用<dt></dt>，具体内容又用<dd></dd>

链接:

 用<a></a >标签，有一个href属性调用地址，可以插入图片< img src=“图片地址”/> <audio></ausio>音频标签 <video><video>视频标签

输入

  <input placeholder占位符=“”>，type=“date”表示选择日期
  <textarea>文本内容</textarea>，type=“checkbox”表示多选
  <select></select>下拉选择，中间用<option></option>添加选项内容

常用标签

 <p></p >这是一个分段标签
 <code></code>代码标签
 <pre></pre>可以保持代码原样式在网页上呈现出来
 <b></b>粗体字
 <i></i>斜体字
 <ins></ins>插入字
 <del></del>删除字

课程拓展：

作为开发者应该遵循语义来编写HTML

有序列表用ol，无序列表用ul
语义化的好处:代码可读性，可维护性，搜索引擎优化，提升无障碍性
lang属性表示内容所使用的语言

非语义化例如

标签虽然简单，但是逻辑和页面内容不清晰

注：一般中文编码都为utf-8

总结：

前端新手小白个人感觉HTML的标签确实很多，记住常用的吧，感觉大家写得都好规范，第一次写文章，接下来学习CSS和JavaScript，慢慢加油!

HTML基础知识 | 青训营