HTML与CSS丨青训营笔记

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

• 前端与HTML

一、什么是前端

• 解决GUI人机交互问题
• 跨终端
  • PC/移动浏览器
  • 客户端/小程序
  • VR/AR等
• Web技术栈

二、HTML是什么

graph TD
HTML --> HyperText&nbspMarkup&nbspLanguage

HyperText指图片、标题、链接、表格

Markup Language指< h1>文章标题< /h1>

三、HTML基础框架

• < !DOCTYPE >为文档类型：声明位于文档中的最前面的位置，此标签可告知浏览器文档使用哪种HTML或XHTML规范。
• 页面语言lang：< html lang='en'>指定语言类型，其中en可以换成zh-CN，en定义语言英文，zh-CN定义语言中文。

四、HTML语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如 input、meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，比如 required、readonly

五、常见的标签

• 标题 h1~h6 ：< h1>< /h1>、< h2>< /h2>等
• 链接 href ：< a href="www.juejin.cn/">< /a>
• 图片音频视频：< img src="www.juejin.cn/img.jpg"/> < audio src="/assets/music.ogg" controls>< /audio> < video src="/assets/video.mp4" controls>< /video>
• 输入：< input placeholder=""> < input type="range"> < input type="number" min="1" max="10"> < input type="date" min="2018-02-10"> < textarea>hi< /textarea>
• 复选框：

六、语义化是什么及如何做到语义化

语义化是什么：

• HTML中的元素、属性及属性值都拥有某些含义
• 开发者应遵循语义来编写HTML 如何做到语义化：
• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码

• CSS的了解

一、CSS是如何工作的

二、选择器Selector

• 找出页面中的元素，以便给他们设置样式
• 使用多种方式选择元素

三、伪类（pseudo-classes）

• 不基于标签和属性定位元素
• 几种伪类：状态伪类、结构性伪类

四、组合