HTML和CSS | 青训营笔记

40 阅读1分钟

这是我参与[第五届青训营]伴学笔记创作活动的第一天

前端与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 不换行