前端与 HTML | 青训营笔记

Flash_1
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 传达内容，而不是样式

三、参考：

avatar
文章
阅读
粉丝