前端与 HTML | 青训营笔记——第一课

一、前端技术栈

• JavaScript（行为）
• CSS（样式）
• HTML（内容）

二、前端应该关注哪些方面？

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

三、HTML是什么？

HyperText---图片、标题、链接、表格

Markup Language---

文章标题

四、DOM树

document——、

包括、 包括、 五、HTML语法

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

• 标题h1~h6

• 列表

<ol>---</ol>有序列表

<ul>---</ul>无序列表

<dl>---</dl>定义列表：<dt>---</dt>标题、<dd>---</dd>具体描述（换行）

• 链接

      <a href="">---</a>

• 图片

• 输入、

  <blockquote>快捷引用=长引用
  

  <cite>短引用 <q>
  

  <code>、<pre>代码标签
  <strong>（严重性）、<em>（语气）强调标签
  

六、内容整体划分

• header页头，比如导航
• nav主题
• aside
• main
• article文章
• footer页尾，比如版权信息

七、语义化是什么？

• HTML中的元素、属性及属性值都拥有某些含义

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

  • 有序列表用ol；无序列表用ul
  • lang属性表示内容所使用的语言

语义本意指所有元素属性或元素属性值都有特定的含义，这些含义遵循html语义

八、谁在使用我们写的HTML

• 开发者-修改、维护页面
• 浏览器-展示页面
• 搜素引擎-提取关键词、排序（权重不一样）
• 屏幕阅读器-给盲人读页面内容

九、语义化的好处

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

十、总体原则

传达内容，而不是样式

<p style="font-size:32px">前端工程师的自我修养</p>
<h1>前端工程师的自我修养</h1>

十一、如何做到语义化？

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