前端与HTML | 青训营笔记

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

1.什么是前端？

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

2.前端技术栈：

• HTML负责结构和内容
• CSS负责样式
• JavaScrip负责行为

3.前端应关注的方面：

美观、功能、无障碍、安全、用户体验

4.图像标签

<img src="photo.jpg"> src属性名 "photo.jpg"属性值

5.HTML语法：

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

6.标签：

1. 标题：h1~h6逐渐减小
2. 列表：

• <ol></ol>有序列表——展示出来会有1、2、3
• <ul><li></li></ul>有序列表——展示出来会有小黑点
• <dl><dt><dd></dd></dt></dl>定义列表 dt:标题 dd:具体描述

3. 链接(跳转页面)：

• <a href="https://www.bytedance.com/">
• 多媒体跳转：<img src="https://...." alt="替代性文本"/> <audio src="" controls></audio> <video src="" controls></video> controls显示默认播放控件

4. 文本类标签：

• <input placeholder="提示词" type="range(滑动块)、number(数字)、data（日期）" min="最小值" /> 输入框
• <textarea></textarea>多行文本
• <input type="checkbox"/>复选框
• <input type="radio"/>单选
• 下拉选择

• <blockquote cite="http://..."></blockquote>长引用，cite表示具体的引用位置
• <cite></cite>短引用，引用名字、标题
• <q></q>短引用，引用具体内容
• <code></code>引用代码
• <strong></strong> 重要、紧急的
• <em></em>重读的

7.内容划分

8.语义化：

HTML所有的元素、属性、属性值都有某些特定的含义;语义化好处：代码可读性、可维护性、搜索引擎优化、提升无障碍性 HTML传达的是内容，不是样式