前端与HTML | 青训营

SimplyPanda
76 阅读2分钟

课程简介

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

课程重点

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

什么是前端

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

前端技术栈

  1. HTML
  2. CSS
  3. JavaScript

image.png

前端需要关注哪些方面

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

HTML

  • HTML(HyperText Markup Language)超文本标记语言

image.png

  • 示例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>
  • !DOCTYPE html:标记当前使用html文件是什么html版本，最终浏览器会通过它决定使用哪种渲染模式，一种是怪异模式，一种是标准模式。
  • html :文档根标签
  • meta：会放一些页面的原数据
  • body：放呈现给用户的内容

image.png

DOM树

image.png

HTML语法

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

标题h1~h2

image.png

有序、无序、自定义列表

  • 有序：ol->li
  • 无序：ul->li
  • 自定义：dl->dt->dd image.png

超链接

<a href="#" target="" title="" download="" rel="">
  • href：指定链接所指向的网页地址
  • target：指定链接所打开的方式，默认在当前窗口打开，_blank——新窗口打开
  • title：设置链接提示信息
  • rel：链接与被链接的关系，常用的取值包括noindex、nofollow、noopener等。nofollow可以避免搜索引擎对链接进行索引；noopener可以避免在新窗口中打开的页面访问原始页面的Cookies
  • download：让用户下载被链接的资源

image.png

多媒体元素

image.png

表单

image.png

image.png

文本

image.png

  • blockquote标签：块级引用，一般用于直接引用某一段话，里面的cite属性写的是引用的地址。
  • cite标签：短引用
  • code：表示代码，可长可短

内容划分

image.png

语义化

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循予以来编辑HTML
    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的语言

image.png

总结

  • 基础内容易掌握，但需要多敲代码熟悉熟悉
  • 多看文档
avatar
文章
阅读
粉丝