前端与 HTML | 青训营笔记

zyczyc70
406 阅读2分钟

前端与 HTML | 青训营笔记

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

1. 什么是前端

  • 解决 GUI 人机交互问题

  • 跨终端

    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR 等

  • Web 技术栈

2.前端技术栈

HTML、CSS、JavaScript和网络协议共同组成了前端最基础的技术栈

屏幕截图 2023-01-15 173441.png

3.前端应该关注哪些方面

  • 功能
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容
  • 体验

4.前端的开发环境

屏幕截图 2023-01-15 174216.png

5.HTML是什么？

HyperText Markup Language

image.png

基本框架

<html> 
 <head>
   <meta charset="UTF-8"> 
   <title>页面标题</title>
 </head> 
 <body> 
   <h1>一级标题</h1> 
   <p>段落内容</p> 
 </body> 
</html>

dom树

image.png

HTML基本语法

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

标题h1~h6

  • 标题（Heading）是通过 h1 - h6 标签进行定义的。

  • h1 定义最大的标题

  • h6 定义最小的标题

关于列表有三种不同的类型

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

无序列表使用 ul 标签

有序列表

有序列表始于 ol 标签。每个列表项始于 li 标签

列表项使用数字来标记

自定义列表

自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。

链接

HTML使用标签 a来设置超文本链接。

在标签a中使用了href属性来描述链接的地址

图片

在 HTML 中，图像由img标签定义。

img是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，需要使用源属性（src）。src 指 "source"。

源属性的值是图像的 URL 地址。

音频

audio

视频

video

输入

多数情况下用到的表单标签是输入标签 input。

输入类型是由 type 属性定义。

语义化是什么？

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

谁在使用我们的HTML语言

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

语义化的好处

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

如何做到语义化

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

个人总结

今天第一天青训营学习了前端与 HTML，感触颇丰。

avatar
文章
阅读
粉丝