前端与HTML ｜ 青训营笔记

行下星暇
47 阅读3分钟

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

本堂课重点内容：

  • 前端工作的定义
  • 前端技术栈拆解与分析
  • HTML 作用解析
  • HTML 语义化

详细知识点介绍

【前端】：

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

前端技术分为三层，行为、样式、内容

image-20230115161320231.png

[前端注意事项]

image-20230115161602284.png

[前端的边界]

image-20230115161748626.png

[前端开发环境]

image-20230115161837826.png

【HTML】

HTML称为HyperText Markup Lauguage

image-20230115162130331.png

[标签]

image-20230115162411114.png

[HTML代码]
  • !doctype标签标记html的版本
  • html标签表示页面全写在这里
  • head标签存放页面需要的信息，但不呈现
  • body标签存放呈现给用户的信息

image-20230115162625782.png

[解析的DOM树]

DOM树有dom节点、标签。

image-20230115163456999.png

[HTML语法]
  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，比如required、readonly
<h1~h6>级别标题：

image-20230115164041075.png

列表：

ol表示有序列表，ul表示无序列表，dl定义列表，dt列表信息标题，dd为具体描述（dd和dt为多对多关系）

image-20230115164231988.png

链接：

文字链接

用a标签表示，href表示目标地址

image-20230115165233122.png

图片链接

用img标签表示，src表示目标地址，alt表示不加载图片时替代文本，audio表示音频，controls表示默认开关设置

image-20230115165659419.png

输入功能：

input标签表示输入，placeholder占位符表示默认内容，type可以定义控件，textarea表示文本框

image-20230115170041173.png

选择功能：

包括lable，select等，select为下拉选择，list列表提示

image-20230115170934560.png image-20230115171017184.png
文本类标签：

引用：blockquote长引用，cite短引用（引用的章节），q短引用（引用具体内容）

const声明只读，code为代码类文本

image-20230115171242577.png

strong为含义强调标签，em重音强调标签

image-20230115171753523.png
[内容划分]
image-20230115172016604.png
[HTML语义化]

语义化定义：

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

image-20230115172128530.png

目的是清晰表达页面结构。

写的HTML的使用：
  • 开发者-修改、维护页面
  • 浏览器-展示页面
  • 搜索引擎-提取关键词、排序
  • 屏幕阅读器-给盲人读页面内容
语义化的益处：
  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性
总体原则：

XML传达内容，而不是样式

image-20230115173009346.png
如何做到语义化：
  • 了解每个标签和属性的含义，可以看MDN文档，W3C规范
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

实践练习例子

<div>
    <input placeholder="请输入">
    <input type="date" min = "2001-01-01">
    <h1>前端与HTML的内容</h1>
    <p>重点内容有：</p>
    <li>前端工作的定义</li>  
    <li>前端技术栈拆解与分析</li>
    <li>HTML 作用解析</li>
    <li>HTML 语义化</li>            
</div>
image.png

课后个人总结

本节课中我了解到了前端的定义和其技术栈，以及对html的各类标签进行了了解，也学习了html的语义化的定义、作用、好处以及方式，对前端和html有了初步了解。

avatar
文章
阅读
粉丝