这是我参与「第四届青训营 」笔记创作活动的的第一天
学习前端已经有一段时间了，希望通过这个训练营对自己之前不熟悉，没掌握的知识做一个整体的查缺补漏。
什么是前端？
- 解决GUI人机交互
- 跨终端展示
- PC/移动浏览器
- 客户端/小程序
- VR/AR
- Web技术
前端三件套
内容--- HTML
样式--- CSS <---网络协议---> 服务器端
行为--- JavaScript
HTML是什么？
HTML:HyperText Markup Language (超文本标记语言)
超文本：图片、标题、链接、表格
标记语言： <h1>文章标题<h1>
一个标准HTML页面如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
从上到下依次为
--文档声明头--
--页面语言-- en：英语 zh-CN:中文
--头标签-- 表示的是页面相关配置：字符集、关键词、页面描述、页面标题、视口等等
--body标签--
上述html生成DOM树
HTML语法
- 标签和属性不区分大小写，一般用小写。
- 空标签可以不闭合， 比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，如required、readonly
常用标签
排版标签
h1、p、hr、br、div、span、center、pre
字体标签和超链接
特殊字符
超链接 a
img和a标签的区别
图片标签img
属性：width、height
Alt：当图片不可用时，代替显示的内容
title：悬停文本
align:图片和周围文字的位置
其他标签
列表标签: ul、ol、dl(dt,dd)
表格标签: table
表单标签: form
输入标签：input
下拉列表：select
多行文本输入框：textarea
label标签：让label标签的for属性值与input标签的id属性值相同，即可绑定单选按钮与文字
网页内容划分
语义化是什么？
- HTML中的元素、属性和属性值都拥有某些含义
- 应该遵循语义来编写HTML
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
