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

前言

对于前端的学习我早已开始好久，但总是三天打鱼两天晒网，没有什么系统的学习，所以也就借此机会吧，希望自己能够把之前学的都整理整理，并且能坚持下来，让这个寒假变的有意义些~

一、前端

1.1 什么是前端？

解决 GUI 人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈

1.2 前端技术栈

HTML(内容)
CSS(样式)
JavaScript(行为)

1.3 前端应该关注哪些方面

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

二、HTML

HyperText Markup Language(超文本标记语言）

2.1 HTML 语法

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

2.2 HTML 常用标签

2.2.1 标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题标签.png

2.2.2 列表标签

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

自定义标签

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

2.2.3 超链接标签

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

<a href="跳转目标" target="目标窗口的弹出方式">文本、图像或其他内容</a>

属性	作用
`href`	用于指定链接目标的 url 地址，（必须属性）当标签应用 href 属性时，它就具有了超链接的功能
`target`	用于指定链接页面的打开方式，其中 `_self` 在当前页面打开的方式（为默认值），`_blank` 在新窗口中打开的方式

2.2.4 表单标签

<input> 表单元素

在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。

在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本、字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值" />

<input /> 标签为单标签
type 属性设置不同的属性值用来指定不同的控件类型 type 属性的属性值及其描述如下：

属性值	描述
`button`	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
`checkbox`	定义复选框，即：多选框，在一组多选中，要求它们必须拥有相同的 name
`file`	定义输入字段和 “浏览” 按钮，供文件上传
`hidden`	定义隐藏的输入字段
`image`	定义图像形式的提交按钮
`password`	定义密码字段，该字段中的字符被掩码
`radio`	定义单选按钮，在一组单选按钮中，要求它们必须拥有相同的 name
`reset`	定义重置按钮，重置按钮会清除表单中的所有数据
`submit`	定义提交按钮，提交按钮会把表单数据发送到服务器
`text`	定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符

2.3 HTML语义化

2.3.1 语义化是什么

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

2.3.2 语义化的好处

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

2.3.3 如何做到语义化

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

三、总结与思考

其实HTML也比较简单，都是一些语义标签，只需要记忆就好，没什么难点，当然我觉得重点主要是表单那块，因为和以后的表单提交数据关联比较密切，还是得重视一点。

前端与HTML ｜ 青训营笔记

前言

一、 前端