前端与HTML | 青训营笔记

Frank星子
129 阅读6分钟

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

1. 什么是前端

使用 Web 技术栈解决多端图形用户界面交互问题

  • 解决 GUI 人机交互问题

  • 跨终端

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

  • Web 技术栈

image.png

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

  • 功能

    解决问题，满足用户的需求

  • 美观

    界面是否好看

  • 无障碍 assesbility

    网站是不是对所有人都可用，比如有色盲症的人

  • 安全

    保证用户数据的安全

  • 性能

    速度是否足够快，动画是否流畅，用户体验是否足够好

  • 兼容性

    能否在各种设备，比如手机和电脑上使用

  • 体验

    直观的用户感受是否良好

3.前端的边界

前端远远超出了页面的范畴。例如：

image.png

  • Node.js：服务器端应用
  • ELECTRON、React Native：客户端应用
  • WebRTC：点对点在线传输（多人聊天室）
  • WebGL：3D游戏
  • WebASSEMBLY：使C++/Rust等语言代码可以在浏览器运行

4. 前端的开发环境

image.png

5. HTML是什么

HyperText（超文本）Markup Language（标记语言）

image.png

浏览器接受到HTML后会将其解析成 DOM树 ，是树形结构，如下图

image.png

6. HTML 语法

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

7. HTML标签

7.1 标题<h1>-<h6>

image.png

7.2 列表

image.png

7.3 链接

image.png

第一个是在当前页面打开，第二个是在新窗口打开

7.4 多媒体

image.png

7.5 输入

image.png

placehoder：占位符

range：输入范围

number：输入数字，可设置最小值和最大值

date：输入日期，可设置最小值和最大值

textarea：输入框

image.png

type="checkbox"：复选框，可多选，checked表示默认勾选

type="radio"：单选框，需要设置为相同的name

select：下拉选择

input设置list属性：可下拉选择的输入框，需要设置 datalist 并且 id 和 list 的值相同

7.6 文本

image.png

引用：

  • blockquote：长引用，引用外部的一段文字，在 cite 属性中标注引用的文字的来源。
  • cite：短引用，通常用于引用书记或参考文献的标题，引用的文本以斜体展示
  • q：短引用，通常用于引用具体的内容，引用的文本前后会显示双引号

code：表示代码，可长可短，字体与普通文本有所不同

strong：加粗

em：斜体

8. 内容划分

按照下图划分

image.png

  • <header>：页头
  • <nav>：导航
  • <main>：主体
  • <article>：文章
  • <aside>：侧边栏
  • <footer>：页尾

9. 语义化

9.1 什么是语义化

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

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

    • 有序列表用ol；无序列表用ul
    • lang 属性表示内容所使用的语言

9.2 谁在使用我们写的HTML

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

使用语义化标签可以使上述过程更方便清晰

9.3 语义化的好处

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

9.4 传达内容，而不是样式

image.png

9.5 如何做到语义化

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

10. 总结

主根元素

元素描述
<html>HTML <html> 元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。

文档元数据

元素描述
<base>HTML 元素 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 元素。
<head>HTML head 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
<link>HTML 外部资源链接元素 ( <link> ) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标 (比如 PC 端的 “favicon” 图标和移动设备上用以显示在主屏幕的图标) 。
<meta>HTML <meta> 元素表示那些不能由其它 HTML 元相关（meta-related）元素（(base、link, script、style 或 title）之一表示的任何Metadata信息。
<style>HTML 的 <style> 元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。
<title>HTML <title> 元素 定义文档的标题，显示在Browser的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

分区根元素

元素描述
<body>HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。

内容分区

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉（header）、页脚（footer）、导航（nav）和标题（h1~h6）等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。

元素描述
<address>HTML <address> 元素 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。
<article>HTML <article> 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
<aside>HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。
<footer>HTML 元素表示最近一个 章节内容 或者 根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<header>HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>HTML <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。
<main>HTML <main> 元素呈现了文档的 body 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
<nav>HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
<section>HTML <section> 元素表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

11. MDN文档

学习更多HTML的内容可以查看MDN文档。这是MDN文档的链接

avatar
文章
阅读
粉丝