这是我参与[第五届青训营]伴学笔记创作活动的第一天
前端与HTML
1 对于前端的定义
- 解决GUI人机交互问题
- 跨终端
- Web技术栈
前端工程师,就是使用Web技术栈实现多端人机交互问题的工程师
2 前端应该关注的方面
- 美观、安全、功能、兼容、性能、无障碍、体验
3 新学的标签
//label标签
<p>
<label><input type="radio" name="sport"/>足球</label>
<label><input type="radio" name="sport"/>篮球</label>
</p>
//下拉框选项
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
//文本类标签
<blockqutoe cite"http://……"></blockqutoe> //长引用文字
<cite></cite> //引用的章节和作品名
<q></q> //引用的内容
<code></code> //代码引用
<pre></pre> //展现原文本
<strong></strong> //语义上的着重表现
<em></em> //语气重音上的加强
4 语义化标签
5 我们写的HTML的使用者
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎 - 提取关键词、排序
- 屏幕阅读器 - 给盲人读页面内容
前端与CSS
1 CSS工作流
2 颜色表示
3 通用字体组
font-family
通用字体族
font-family属性 用以不同设备下的兼容
Web Fonts
在线下载字体包,在使用中文包的时候,如果用不到要进行裁切,在线下载势必会影响性能
字重设置 font-weight
不一定自己的设置会有效果,因为有些字体不一定支持这么大的跨度范围
行高 line-height
空白符 white-space
pre-line 合并空白符,保留换行
pre-wrap 不合并空白符,且换行
nowrap 不换行