这是我参与「第四届青训营」笔记创作活动的的第1天
学习状态：🤨🤔😀

什么是前端?

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

前端工程师使用Web技术栈来解决多种终端图形用户界面下的人机交互问题。

前端技术栈

• HTML，CSS，JavaScript都是运行在浏览器中，浏览器通过HTTP协议和服务器进行通信，将前端的代码通过HTTP协议从服务器拿到，再将其渲染成我们看见的页面。

• 浏览器也可以把用户填写的内容或行为通过HTTP协议提交的服务器端。

前端应该关注哪些问题

产品功能，美观，无障碍，安全，性能，兼容性，用户体验。

前端的开发环境

HTML是什么？

HyperText Markup Language

• HyperText（超文本）：图片，标题，链接，表格等
• Markup Language（标记语言）：以成对标签表示一段内容 <h1>文章标题</h1>

浏览器会对HTML的代码进行解析得到一个DOM树，每一个节点称为DOM节点。

HTML的语法

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

标题

HTML标题通过h1~h6定义（1-6级标题）
<h1>标题</h1>

列表

ol：有序列表(会默认排序)
ul：无序列表
例：

<ul>
    <li>😊</li>
    <li>🥰</li>
</ul>

段落

HTML段落通过标签<p>定义
<p>段落内容</p>

链接

HTML链接通过标签<a>定义
href：超链接的引用地址
target=“_blank”：通过一个新窗口打开

<a href="https://juejin.cn/user/2485359984249591?utm_source=gold_browser_extension">
target="_blank"
</a>

图片，音频，视频

• 图片：用<img>定义

<img src="图片文件路径"
    alt="对图片的描述（可用于图片无法加载时）"
    widt="图片宽度"
/>

• 音频：用<audio>定义
• 视频：用<video>定义音频、视频代码中写controls表示该音频、视频需要默认显示浏览器的播放控件

输入

<input>标签
• placeholder="默认内容":占位符，用户未输入时所显示内容
• type="range/number/date"
textarea：输入多行内容

选项

• 可多选项：input type="checkbox"
• 单选项：input type="radio" name="选项内容应为同一属性"
• 多选项：可用下拉选择标签<select>，在其内将选项写在<option>中
• 自由输入时的提示选项：input list=

文本标签

引用标签：
• 快捷引用（长引用） blockquote cite="来源链接"
• 短引用 cite(如作品标题的引用) / q（对具体内容的再次提出） code标签：引用单行代码
code标签外部包裹一个pre标签：引用多行代码
强调标签：
strong：内容强调
em：语气强调

内容划分

语义化是什么

• HTML中的元素、属性及属性值都值得拥有某些含义
• 开发者应该遵循语义来编写HTML
1.有序列表用ol；无序列表用ul
2.lang属性表示内容所使用的语言

谁在使用我们写的HTML

• 开发者-修改、维护页面
• 浏览器-展示页面
• 搜索引擎-提取关键词、排序
• 屏幕阅读器-给盲人读页面内容

语义化的好处

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性

如何做到语义化

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码

如有错误，欢迎指正🥰

D1.前端与HTML ｜ 青训营笔记