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

前端定义（WHAT）

通过使用Web技术令软件在电脑/手机等电子设备对用户的展示窗口，解决GUI人机交互问题。

使用前端三件套：HTML+CSS+JS 层层递进构成展示页面，通过网络协议与服务器交互使得用户可便捷操作。

前端关注的问题

功能（满足需求）、美观、无障碍（涉及WCAG2.0）、安全（xss问题）、兼容（浏览器兼容性问题）、体验

HTML

-Hypertext Markup Language

标签上设置属性

Doctype的作用

标记了当前使用的html文件，是使用的h5版本，浏览器依据这个使用对应的标准。不写的话会用老旧模式。造成页面效果较差。

HTML结构

HTML-文档根标签

head-页面元数据，不用呈现给用户

Body-给用户看

DOM树

浏览器解析html为dom树（渲染过程)

语法

标签和属性推荐使用小写

空标签（空元素），即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；

标签：

1、标题h1-h2

2、列表有序列表（ol）、无序列表(ul)、dvalue列表（dl定义列表+dt描述title+dd具体值description）

3、a链接标签

属性：

href
target

target="blank"：在新的窗口中打开新页面，但是当我们新窗口没有关闭的时候，多次点击该链接，只会刷新已打开的页面（从该连接中点击多少次，只会创建一个新窗口）

target="_blank"：在新的窗口中打开新的页面，无论点击多少次都可以打开新页面（点击多少次，创建多少个窗口）

4、img图片

属性

多媒体在某些情况下不加载图片时用降级方式传达，表示替代性文本。不被加载的时候显示文本

alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。

alt属性保证那些文字确实为那些看不到图像的人提供了说明信息，并且在上下文中有意义。

title

title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。

5、audio

src、controls属性（显示播放控件）

6、输入input

Placeholder 占位符（默认显示），type（设定输入类型数字/范围/日期）

选中和取消

选中一个 checkbox(复选框) 后，再次点击它，即可取消选中
选中一个 radio(单选按钮) 后，再次点击它，不能取消选中

HTML5 有以下新的表单元素:

<datalist> <keygen> <output>

引用标签

q元素 <q>
定义短的引用
浏览器通常会在引用内容的两侧添加引号。

blockquote元素<blockquote>
标签用于简短的行内引用。对于内容比较长的引用

cite元素<cite>
标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等）的标题。

语义化

语义化是什么 WHAT

HTML 元素、属性、属性值都有意义（语义），

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

语义化的面向对象 WHO

开发者- 修改维护页面

浏览器- 向用户展示页面

搜索引擎- 提取关键词、排序

屏幕阅读器- 给盲人阅读页面内容

语义化的好处 WHY

利于开发者维护和修改、用户便于阅读、提升SEO、便于对浏览器、搜索引擎解析

如何做到语义化 HOW

了解标签的属性和含义（MDN）

思考什么标签最合适描述对应内容

前端和HTML | 青训营笔记