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

- [ ] 什么是前端：

 使用web技术栈解决多端用户图形人机交互的工程师

前段技术 ：基础 Html 页面 结构内容

页面中：使用css设置页面样式

JS：定义用户的行为，页面该怎样响应

运行在浏览器中，通过网络协议，从服务器中渲染成用户看到的内容。

HTML CSS JavaScript形成了最基础的一个技术栈。

- [ ] 前段应该关注那些方面

产品有什么功能，满足了用户什么需求，是否美观，用户能够无障碍使用，是否兼容在各种设备中。用户对产品的直接感受。

HTML是什么

Htpertext Markup language

图片标题 链接 表格 文章标题 

文章标题

可以在标签上设置一张图片 

<img src属性名="photo.jpg 属性值"/>不需要嵌套其他内容 

 

＜title>页面标题

放页面原数据 标题 用了什么编码 呈现用户 内容

＜h1>一级标题

＜p>段落内容</p

根标签

浏览器拿到html解析出dom树，包含document文档

Html语法

• 标签和層性不区分大小写，推持小写

• 空标签可以不闭合，比如 input、mota

• 展性值推荐用双引号包豪

• 某些属性位可以省略，比如 required、 readonly

**###

标题级数h1～h6

有序列表 ol

无序列表 ul （展示效果：·）

定义列表 dl (属性名 属性值

如导演： 主演:)

链接 a标签表示 ahref

多媒体标签 图片 img alt替代性文本 没有展示图片时的文字

音频 audio src

**### ****

输入 信息

input  

选项选择 input type 

多个中选择一个 input type =radio

选项中 下拉选择 select 

自由选择 input list 

文本类标签 ：引用 快捷引用

长引用blockquote cite

短引用 cite 

名类引用 q

代码引用 code 

语义化是什么？

•HTML中的元素、属性及属性值都拥有某些含义

·开发者应该遵循语义来编写HTML

•有序列表用 ol；无序列表用 ul

•lang 厲性表示内容所使用的语言

谁在使用我们写的html

。开发者 -修改、维护页面

•浏览器 •展示页面

•搜泰引警 •提取关键词、排序

•屏幕阅读器-给官人读页面内容

语义化的好处

•代码可读性

•可维护性

•搜索引擎优化

•提升无障碍性

传达内容，而不是样式

sp style＝<"font-size:32px:">前城工程师的自我修养</p

如何做到语义化？

•了解每个标签和属性的含义

。思考什么标签最适合描述这个内容

。不使用可视化工具生成代码

第一天学习前端的总结和思考

前端 html想要简单实现好像不难，但想要有更好用户交互，这需要花费很大的精力去完善，这是使得前端困难的点和需要解决应用的地方。第一天的学习其实有点摆烂，单独观看文字内容对我这白痴很晦涩老师讲解的很直白简洁。