前端与 HTML | 青训营笔记

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

一、本节课重点内容：

  1. 前端工作的定义
  2. 前端技术栈拆解与分析
  3. HTML作用分析
  4. HTML语义化

二、详细知识点介绍：

1. 什么是前端

前端由和HTML、CSS、JavaScript三部分构成，分别负责网页的内容、样式和行为，在网络协议的联系下，上传至服务器端

2. 前端要关注的方面

包括但不限于功能、安全、无障碍、体验、性能、美观、兼容等方面

3. 前端的边界

node、Electron、React Nation、WebRTC、WebGL、WebASSEMBLY等

4. 开发环境

  • 浏览器：IE/Edge、Chrome、Firefox、Safari等
  • 编辑器：VSCode、Vim、WebStorm等

5. HTML是什么

HTML包括

HyperText(包括图片、标题、链接、表格等多种形式)

Markup Language(一种专门用来标记的语言)

6. DOM树

7. HTML语法

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

8. 常用标签

  • 无序标签
1
2
3
4
5
<ul>
    <li>姓名</li>
    <li>年龄</li>
    ...
</ul>

没有先后顺序，具体样式同笔记中的实心圆点

  • 有序标签
1
2
3
4
5
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

有先后顺序，具体样式同笔记中的空心圆点

  • 其他标签
1
2
3
4
5
6
7
<dl>
    <dt>作者：</dt>
    <dd>张三</dd>
    <dt>作品：</dt>
    <dd>1</dd>
    <dd>2</dd>
</dl>

<dd>标签的内容会空一个tab键的位置再显示内容，一个<dt></dt>标签可以有多个<dd></dd>标签

9. 输入

input即表单类型，可以有多种类型，也有多种属性

常见的类型有：text、number、email、date、password、range、radio等

常见的属性有：value、alt、checked、placeholder、name、list等

10. 语义化

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表ol；无序列表用ul
    • lang属性表示内容所使用的语言
  • 好处
    • 代码可读性
    • 可维护性
    • 搜索引擎优化
    • 提升无障碍性
  • 怎样做
    • 了解每个标签和属性的含义
    • 思考什么标签最适合描述这个内容
    • 不使用可视化工具生成代码

11. 面向对象

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

==传达的是内容，而不是样式==

三、实践练习例子：

1
2
<audio src="/assets/music.ogg" controls></audio>
<video src="/assets/video.mp4" controls></video>
1
2
3
4
5
<input placehoder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>
1
2
3
4
5
6
<input list="countries"/>
<datalist id="countries">
    <option>China</option>
    <option>United Status</option>
    <option>Greece</option>
</datalist>

四、课后个人总结：

前端的知识主要用于网页内容的呈现，包含许多标签，属性，选择器等内容，只有熟练掌握并且灵活应用，才能加上CSS和JavaScript的内容之后有更好的页面效果

五、引用参考：

关于GUI的介绍：https://baike.baidu.com/item/GUI/479966

web开发技术栈总结：https://blog.csdn.net/dreamstone_xiaoqw/article/details/89741263

超文本链接：https://www.w3school.com.cn/tags/tag_term_hypertext.asp

标记语言Markup Language：https://cloud.tencent.com/developer/article/1597638