前端与HTML|青训营笔记

小小小小菜鸡
64 阅读2分钟

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

兴致勃勃的第一天，冲冲冲！！！

前端

一、什么是前端

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

二、前端技术栈

1.PNG

三、前端应该关注哪些方面

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

四、前端的边界

2.PNG

  • Node.js：开发服务器端应用
  • Electron、React Native：开发客户端应用
  • WebRTC：实时传输、多人在线会议
  • WebGL：开发3D游戏
  • WebASSEMBLY：C++/Rust等多种语言可在浏览器中编辑

五、开发环境

3.PNG

HTML

一、HTML结构

4.PNG

5.PNG 标签

  • <!doctype html>：展示HTML5版本
  • <html> ：文档的跟标签
  • <head>：页面中的元数据（编码、标题等）
  • <body> ：文档的主要内容（图片、文字等）
  • <h1> ：一级标题（某级标题为h某）
  • <p> ：段落内容

二、HTML语法

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

标题h1~h6

6.PNG

列表

7.PNG

8.PNG

  • <ol> ：有序列表
  • <ul> ：无序列表
  • <dl> ：定义列表（dt为主级，dd为次级）

链接

9.PNG

  • a：链接标签
  • href：超链接
  • target：目标（target="_blank"表示为创建一个新的页面）

多媒体

10.PNG

  • <img> ：图片标签
  • src ：图片地址
  • alt ：加载失败的降级显示
  • width ：宽度
  • <audio> ：音频标签
  • controls ：默认播放空间
  • <video> ：视频标签

输入

11.PNG

  • <input> ：输入标签
  • placeholder：未输入时的默认显示
  • type：输入类型
    • range：范围
    • number：数字（min、max为最小最大）
    • date：日期
  • textarea：多行文本

12.PNG

  • checkbox：多选框
  • radio：单选框

13.PNG

  • select：选择输入
  • datalist：手动输入

文本引用

14.PNG

15.PNG

  • <blockquote> ：长文本引用
  • <cite> ：短引用（章节较多）
  • <q> ：引用之前（具体内容较多）
  • <code> ：代码引用
  • <pre><code> ：多行代码引用
  • <strong> ：字体加粗，强调含义
  • <em> ：斜体，强调语气

内容划分

16.PNG

  • header：页头
  • nav：导航
  • main：主体内容
  • article：主要内容
  • aside：侧边提示
  • footer：页尾

三、语义化

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

四、HTML的使用者

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

五、语义化的好处

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

六、如何做到语义化

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