这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
什么是前端
- 解决GUI售货机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
- 前端技术栈
- HTML（内容）
- CSS（样式）
- JavaScript（行为）
前端应该关注哪些方面？
- 产品的功能
- 产品的美观
- 产品无障碍
- 产品的安全
- 产品的性能
- 产品兼容性
前端的边界
开发环境
HTML是什么
HyperText Markup Language 超文本标记语言
DOM树
HTML的语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required reeadonly
html语法
标题
<h1>~<h6>: 一级到六级标题，字体大小粗细依次减小，表示重要性依次减弱
列表
<ol>: 有序列表，列表项通过<li>表示，展示效果前自动补充1. 2. 3.
<ul>: 无序列表，列表项通过<li>表示，展示效果前自动补充·
<dl>: 定义列表,key-value形式，<dt>表示title,<dd>存放具体值。<dt>与<dd>是多对多的关系。
链接
<a>：href属性指定超链接，target属性指定链接的打开位置,title属性指定鼠标悬停在超链接上时显示的文字内容
<img>: src属性指定图片的地址，alt属性指定图片不被加载时显示的内容 <audio> <video>: src属性指定音频/视频内容的地址，controls属性表示需要显示浏览器默认播放控件
输入
<input>: type属性可选range number date text等，number模式可以设定最小值与最大值，date模式可以指定最晚日期与最早日期, file模式可以上传文件,checkbox radio模式可以指定是多选还是单选, placeholder属性指定默认显示内容
<textarea>: 文本域，用户可自由输入.cols属性设置可视高度，rows属性设置可输入文本行数 <select>: 下拉选择,选项写在<option>里
<dataList>: 对<option>里的内容在用户输入时有提示效果，之外的内容用户可自由输入
引用及其他文本内容处理
<blockquote>: 直接引用的较长的一段文字，cite属性表示该段文字来源地址
<cite>: 短引用，常为章节，标题，书名的引用
<q>: 将标签中内容用双引号""引起来
<code>: 代码引用，可以后续给出具体代码
<strong>: 内容重点强调，页面显示字体加粗
<em>: 通常用于英文内容，表示需要重读的部分,斜体
网页布局标签
<nav> 网页的导航
<header> 网页的头部 <main> 网页的主体部分（一般就一个） <article> 网页中的文章内容部分 <aside> 和主体相关的、在侧边显示的内容 <section> 独立的区块 <footer> 网页的底部
eg.
语义化
-
HTML中的元素 属性及属性值都拥有某些含义
-
开发者应该遵循语义来编写HTML
语义化的好处：
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
