前端与 HTML | 青训营笔记前端与 HTML|青训营笔记的重点内容：前端工作的定义、前端技术栈拆解与分析、HTML

这是我参与「第五届青训营」伴学笔记创作活动的第1天，学习的是关于前端与HTML。

本堂课重点内容

前端工作的定义
前端技术栈拆解与分析
HTML 作用解析与语义化

- 前端工程师

是使用Web技术栈解决多端图形界面下的人机交互问题的工程师。

- 前端技术栈

- HTML

HyperText（超文本）：如图片、标题、链接、表格等

MarKup Language（标记语言）

- DOM树

浏览器把HTML代码转换为树形结构，每个节点称为DOM节点

- HTML语法

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

- HTML标签

1. 标题：六个级别（由大到小）

<h1>樊振东的个人简介</h1>
<h2>基本情况</h2>

2. 列表

- 有序列表

<ol>            
  <li>2022-12-11：2022年乒超联赛男子MVP</li>
  <li>2022-3-20：2022年WTT新加坡大满贯赛男单冠军</li>
  <li>2022-1-22：WTT澳门冠军赛混双亚军</li>	
</ol>

- 无序列表

 <ul>
   <li>2016年8月，樊振东里约奥运会以P卡选手身份出征奥运会，但没有出场比赛。</li>
   <li>2020年1月4日，樊振东在“血战到底”模式中分别战胜周启豪和许昕，以两战全胜的战绩夺得男单冠军。</li>
 </ul>

- 定义列表

<dl>
  <dt>别名：</dt><dd>小胖、暴力熊猫、花季老将</dd>
  <dt>出生日期：</dt><dd>1997年1月22日</dd>      
  <dt>专业特点：</dt><dd>右手横板、两面反胶</dd>
  <dt>主管教练：</dt><dd>王皓</dd>
</dl>

- 链接

<a herf="链接地址"></a>

- 图片

 <img scr="图片地址"
  alt="Metal movable type"
  width="400"
 />

当图片加载失败：alt="Metal movable type"

- 视频/音频

<video/audio src="地址"
 controls></video/audio>

- 输入

1.表单类：让用户提供信息

placeholder(占位符)：用户没有输入内容时显示
type="range"：范围滑动条
textarge：输入内容较多时

<input placeholder="请输入你喜欢的数字">
<input type="range">
<input type="number" min="1" max="100">
<input type="date" min="2000-1-1>
<textarea>other</textarea>

2.选择类

选择一个：type="radio"

选择多个：type="checkbox"

<p>
<label><input type="checkbox"/>😊</label>
<label><input type="checkbox"/>😟</label>
</p>
<p>
<label><input type="radio" name="fruit"/>🍎</label>
<label><input type="radio" name="fruit"/>🍌</label>  
</p>

- 文本

长（块级）引用：blockquote
短引用：cite标签（标题、章节名）、q标签（具体的内容）
引用代码：code
强调：strong（事情重要）、em（语气的强调）

<p>我最近看的一部电视剧是<cite>在你的冬夜里闪耀</cite>。里面主人公的台词给我很大的触动：
 <blockquote>女主角说<strong><q>梦里发生了什么，不重要，重要的是，我们要将梦里的人，永远记在心里。</q></strong></blockquote>
</p>

- 内容划分标签

- 语义化

HTML中的元素、属性及属性值有特定的含义
开发者应遵循语义来编写HTML：有序列表用ol；无序列表用ul。lang属性表示内容所使用的语言。

- 语义化的优点

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

- 如何做到语义化

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

个人总结

通过对前端与HTML的学习，我了解到前端的边界已经超出了传统的页面范畴，渗透到了互联网的许多领域，像客户端、服务器端等。同时前端的入门比较简单，只需要浏览器与编辑器就能实现相应的操作。前端关注的问题主要是用户的直观感受和体验，包括产品功能、性能、流畅度、用户需求、美观程度等，还兼顾多方用户的需求，实现大多数用户的无障碍阅读。除此以外，也注重产品的安全问题与兼容性，保证它能在各种设备中正常使用。但在进行相应的前端工作时，我们需要遵循一个重要的原则：内容为主，样式为辅。最主要的目的仍然是准确地传达信息，在条件允许的情况下，可以调整样式提升用户体验感。

前端与 HTML | 青训营笔记