前端与 HTML | 青训营笔记

20 阅读2分钟

这是我参与【第五届青训营】伴学笔记创作的第1天。

本节课程围绕“前端要解决的基本问题”及“什么是 HTML ”两个基本问题展开,层层解析前端技术栈的构成,以及作为前端最为基础的技术 - HTML 基础语法和基本功能,在实际研发过程中如何做到 HTML 语义化。

一、本堂课重点内容:

  1. 前端工作的定义
  2. 前端技术栈拆解与分析
  3. HTML 作用解析
  4. HTML 语义化

二、详细知识点介绍:

前端技术栈

image.png

前端的开发环境

image.png

HTML基本标签

image.png

  • 第一行标记了标记了HTML版本,决定了渲染模式
  • html 根标签 body 显示的主体
  • DOM树:树形结构
  • 标签:

    1.标题 h1~h6 依次降低字号

    2.列表 image.png 有序列表
    ol中包含li:自动显示序号,从小至大
    无序列表
    ul中包含li:默认出现⚪
    自定义列表
    dl:定义列表
    dl中包含dt、dd,dt:自定义列表标题 dd:值(描述)——多对多关系

    3.链接 image.png target:打开新页面

    4.图片音乐视频 image.png 图片:img
  • src 属性值
  • alt 可替换文本
  • width 宽

    音乐:audio
  • src 属性值
  • controls 播放控件

    视频:video
  • src 属性值
  • controls 播放控件

    5.输入input image.png 这里插入一个比较全面的input标签介绍 HTML表单标签(input)

    6.单选框radio 分组用name

    7.下拉选择select image.png 8.快捷输入datalist image.png 9.文本类标签
  • 快捷引用
    长引用blockquote image.png 短引用cite(名字章节)q(内容) image.png
  • 代码code(等宽字体展示) image.png pre:多行代码
  • 强调strong(内容重要紧急)em(语气强调) image.png

内容划分

image.png

语义化

  • HTML中的元素、属性及属性值都拥有某些含义。
  • 开发者应该遵循语义来编写HTML
  • 好处: image.png 传达内容,而不是样式

三、参考: