前端与 HTML | 青训营笔记

谨慎谦虚
47 阅读2分钟

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

今日学习内容

  • 前端基础入门
  • HTML相关

本课重点内容

  1. 什么是前端？（前端的定义理解、前端相关技术栈、前端的拓展应用）
  2. HTML基础知识（认识标题、文本、列表、图片、内容划分等常用标签，认识属性的概念）
  3. 语义化相关（定义、应用）

详细知识点介绍

前端定义部分

  • 目的：解决GUI人机交互问题
  • 基础技术栈：前端三件套（HTML、CSS、Javascript）+网络
  • 前端关键词：功能、美观、性能、无障碍、安全……
  • 前端相关边界

image.png

  • 常见开发环境：我个人用的chrome+vscode

HTML相关

HTML用以传达内容信息！

定义

HyperText Markup Language 超文本标记语言

解释：

  • 超文本：不只是局限于文字内容，包括图片、标题、表格、链接等
  • 标记语言：含有头标签和尾标签。例如 <h1>hello world</h1>

属性

标签含有属性名和属性值 例如：

image.png 一般写法属性名="属性值"

有些情况下，属性值可以省略，如require、readonly。

认识网页结构

image.png

第一行：使用版本

html标签包裹部分：HTML整体文件内容

head部分：网页头，不在页面上显示，内容一般是编码格式（如第四行）以及页面标题（如第五行）

body部分：渲染在页面上的信息

展示效果：

image.png

DOM树

image.png

常用标签

  • 标题：<h1>~<h6>

    h1字号最大，数字越大字号越小

  • 列表

    • <ol>&<li>:有序列表，会有自增的数字显示

    应用：排行

    • <ul>&<li>:无序列表，不会有数字显示，一般显示小圆点代表这一项

    应用：清单

    • <dl>&<dt><dd>:类似于键值对形式，<dt>表示键，dd表示值

  • 链接： href里面写跳转网址，target里面写以何种方式跳转

  • 媒体：

    • <img>:图像
    • <audio>：声音
    • <video>：视频

  • 输入：<input>

    • type可选：range（范围）、number（数字）、date（日期）、radio（单选）、checkbox（多选）
    • 可设置max、min属性
    • 可设置提示内容placeholder

  • 内容：

    • header
    • main
    • aside
    • footer

语义化

前排：元素、属性、属性值都有含义！

应用：

  • 开发者
  • 浏览器
  • 搜索引擎提取关键词
  • 盲人的屏幕阅读器

后两者不常见，但的确很实用

语义化优势：

  • 可读
  • 可维护
  • 搜索优化
  • 无障碍化
avatar
文章
阅读
粉丝