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

前言

第一天课程主要讲前端和HTML,提到前端避不可避的便是我们常说的”前端三剑客（HTML、CSS、JavaScript）“，HTML作为其中之一，自然有着非同凡响的地位，通过本节课的学习，对前端有了新的系统性认识，HTML则是查缺补漏，巩固的同时填充之前遗漏的知识点，以下为结合自身所整理出的笔记。

前端

什么是前端？

系统来说可以包括但不限于一下几点：

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

总结：通过Web技术栈解决多端图形用户界面交互问题

前端应该关注那些方面的问题？

主要包括：功能、美观、无障碍、安全、性能、兼容、体验几个方面

做一个好的产品，以上一个方面是一定要考虑的，每一个顾名思义有着对应的作用，任何一个出现问题或者被忽略都奖成为产品往好的方向发展的阻碍。

HTML(超文本标记语言)

结构

<!DOCTYPE html> //标记HTML文件为何种版本，浏览器根据这里来选择渲染模式
<html>  //文档的根标签
<head>  //无需直接呈现给用户
    <meta charset="utf-8">  //编码方式
    <title>页面标题</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

HTML语法小贴士

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

标签查缺补漏

input实现输入提示指定信息

<input list="listname">
<datalist id="listname">
    <option>red</option>
    <option>yellow</option>
</datalist>

块引用（长引用）blockquote

<blovkquote cite="地址链接">    //cite表示引用来源
    <p>一般这里引用其中的一段话</p>
</blockquote>

短引用 cite 一般表示作品名称或章节
```
<cite> 引用内容</cite>
```
段引用 q 一般表示具体的内容
```
<q>内容</q>
```
代码 code标签理解为单行代码
```
<code></code>
```
pre标签包裹code标签多行代码
strong（比较重要的事情）、em（一段话中要重读的某个或某几个词）表示强调标签

语义化

语义化是什么？

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

谁在使用我们写出的HTML

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

个人理解

语义化个人感觉主要是提供统一的、大家都乐于遵守的标准，提高各方面效率，方便自己、方便他人。

前端与HTML篇 | 青训营笔记

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

前言

前端