前端与HTML | 青训营笔记

永夜不坠
513 阅读4分钟

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

一、 本堂课主要内容

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

二、详细知识点介绍

1. 前端

1.1 工作定义

image.png

用web技术栈解决多端图形用户交互界面，就是说用户与浏览器页面交互，看文章，上下滑动，点击按钮等

1.2 技术栈

包括html、css、javascript（js）。其中html负责页面的结构内容等，css负责样式，如颜色、字体大小、背景等，js负责页面的行为，比如用户的点击按钮后该干什么

1.3 应该关注哪些方面

  • 美观：页面要好看，给用户一种舒适的感觉，不能花里胡哨，也不要简陋无比，比如下面这张图和掘金首页相比，一眼就看出来

  • 功能：基本的业务需求，用户体验得保证

  • 安全：安全性，能否抵挡恶意攻击，用户数据的安全是否能得到保障

  • 无障碍：是否所有人都能使用网页，如盲人

  • 性能：要保证用户操作的流畅度，网页响应速度快，动画流畅

  • 兼容：在各大浏览器和客户端等都能正常运行，不要换个设备就出问题了

1.4 前端边界

前端发展得很快，已经不只是做网页，还能干其他的活。比如：

2. HTML

全称为HyperText Markup Language，超文本标记性语言，超文本就是说不只是文本，这还包括图片视频音频等，标记性即HTML 使用标记来注明文本、图片和其他内容，以便于在 Web 浏览器中显示，如<h1>这是一个标题</h1>

2.1 标签

一般来说标签需要闭合，如<h1>这是一个标题</h1>，<h1>为开始标签，</h1>为闭合标签，中间部分则为内容。如果中间无内容，也可以自闭合，即<h1 />，开始标签后面加斜杠。还有一些标签是不需要闭合的，如meta、br

标签还有属性，如下，img标签表明这是一个图片，src为其属性，在这里指的是图片的路径，即什么地方的图片，后面则为属性值，即具体的路径

2.2 HTML结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>这是网页的标题</title>
    </head>
    <body>
        <p>这是一个段落</p>
    </body>
</html>

这是一个简单的html内容

  • DOCTYPE告诉浏览器用标准模式渲染页面（标准模式和怪异模式）
  • html标签，文档的根标签，所有文档的内容都写到这里面
  • head标签，页面需要的信息但不呈现给用户。其中<meta charset="UTF-8" />表明了页面用到编码为utf-8编码
  • body标签，需要呈现给用户的内容放这里

2.3 DOM树

浏览器会把html解析为一棵树，叫做DOM树，没错，就是一个树结构，这样可以方便的找到其上的每一个节点

image.png

2.4 HTML语法

  • 标签名和属性不区分大小写，推荐用小写
  • 标签闭合，<h1></h1>，无内容时也可自闭合，<h1 />，空标签不需要闭合，<input>，<meta>
  • 属性值可以单引号也可双引号，推荐用双引号包裹
  • 某些属性值可省略，因为不需要值，如required，readonly

2.5 常见标签

  • 标题h1 - h6 image.png

  • 列表

    有序列表，列表项使用数字标记。无序列表，使用圆点标记。自定义列表，项目及其注释

    image.png

  • 链接 a，全写为anchor，锚点。<a href="http://baidu.com">掘金</a>，href为链接的地址

  • 输入框input

    image.png

  • 输入提示

    image.png

  • 更多的标签和属性可以去翻看文档。菜鸟教程，或者MDN

2.6 语义化标签

语义化的标签，旨在让标签有自己的含义，有些标签如h1，赋予它包裹着的文本“这个页面中最高级别标题功能“的角色，虽然可以通过一些样式的调整使得div、span展示出同样的效果，但是这却没有了对应的语义。

看到一个div，你能立马想到这是一个一级标题吗，不能，但是看到h1就知道了这是一个一级标题。此外语义化标签还有着以下的优势：

  • 便于开发者开发和维护页面
  • 方便其他设备（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页，提升无障碍性。
  • 有利于搜索引擎优化（SEO）

三、个人总结

简单回顾了一遍html的知识。

还有一些地方如各种标签和属性，语义化的标签有哪些，都有着什么语义，还得自己多看看。

有一些混淆点，如em和strong，前者主要是语气上的强调，后者则是表示内容很重要。

avatar
文章
阅读
粉丝