前端与 HTML | 青训营笔记

94 阅读2分钟

一、前端基础知识

前端技术栈

前端技术栈主要分为三层,分别是HTML(内容)、CSS(样式)与JavaScript(行为)。我们通常将这些内容存放在服务器端,再通过HTTP等协议获取并渲染于浏览器当中。同时我们还可以将用户的行为通过HTTP协议发送至服务器端,并等待接受服务器处理返回的结果再加以展示

前端关注面

美观,功能,无障碍,安全,性能,兼容,体验这是前端最为关注的几个点,前端人员是面向用户的,直接和用户打交道的,因此在前端的工作中,对于前述几个点都需要有很好的把握和关注才能创造一个较为满意的前端产品。

HTML标签

作为一种超文本标记语言,它的工作就是将各种资源连接起来形成一个整体,组成资源骨架。通过一系列的标签将不同区域的internet资源进行加载到一起这就是HTML的核心。因此学习HTML本质就是学习标签语法的过程。

v2-405b555935eb390612b1378c2e02654f_r.jpg

DOM树

image.png

前端包含的技术

  • 三件套(HTML CSS JavaScript)
  • HTTP协议
  • 前后端交互技术(ajax Socket)

声明

    • <!doctype html>:声明为 HTML5 文档
  • <html>:HTML 页面的根元素
  • <head>:头标签
  • <title>:文档标题
  • <body>:页面的内容
  • <h1>:一级标题
  • <p>:段落内容

示例

`

青训营笔记 ` ## HTML语法 - 标签和属性不区分大小写,推荐**小写**,自定义的标签用**大写**
  • HTML 标签通常是成对出现的,比如 <b></b>

  • 空标签可以不闭合,比如inputmeta

  • 我们的属性值推荐用双引号包裹

  • 有些属性有默认属性值像是input标签的required属性是一个Boolean值

列表标签

  • 有序列表<ol> <li></li> </ol>:用的相对较少
  • 无序列表<ul> <li></li> </ul>:用的较多
  • 自定义列表<dl> <dt> <dd></dd> </dt> </dl>:用的相对较少

超链接标签

<a href="https://www.baidu.com/" target="_blank">百度</a>

  • href:超链接引用地址(把网址直接填上,点击a标签跳转到href里的网站)
  • target:可以理解为在哪里打开网站,_self是在当前页面跳转_blank是新建一个页面,在新建的页面访问网站

input标签

- input 标签的`type`属性值(如下图):`checkbox`:多选框、`date`:日期.......

image.png

面向对象

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

参考资料

菜鸟教程 link.juejin.cn/?target=htt…