从HTML开始重新认识前端 | 青训营笔记

KONKON
117 阅读2分钟

前言

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

关于前端

前端能做什么？

  1. 显示给用户看的内容（html）
  2. 显示更好看的样式（css）
  3. 与用户交互（JavaScript）

前端应该关注哪些方面？

  • 美观
  • 功能
  • 安全
  • 兼容
  • 性能
  • 用户体验

前端的边界

随着前端的飞速发展，对于前端的定义也越来越广泛，我们可以使用前端实现的功能也越来越多。我们可以使用nodejs编写代码实现后端的功能；ELECTRON可以用来开始桌面应用；React Native可以用来开发手机app；WebRTC可是实现P2P的视频音频传输；WebGL可以拓展前端数据可视化。随着前端的这些工具越来越广阔，前端正在变得强大。

image.png

关于HTML

HTML是什么？

HTML是HyperText Markup Language的缩写，超文本标记语言。那么什么是超文本呢？我们在页面上显示和定义的不止是文本，还可以是图片、标题、链接、表格等。什么是“标记”？在HTML中，我们会给每一个元素一个标签，来定义这个元素是什么。

For example：

    <h1> This is a header</h1>

HTML的语法

  1. 标签和属性不区分大小写，但是推荐用小写
  2. 空标签可以不闭合， 如input、meta

什么是空标签？

两个标签中间没有内容，如<div>这不是空标签</div>

  1. 属性值推荐用双引号包裹
  2. 某些属性值可以省略，比如required、readonly

HTML的一些标签

h1-h6

HTML内部帮助我们设置了6种标题，分比是h1到h6，这些标题标签内置了区分的样式，我们调用。

    <h1>This is h1</h1>
    <h2>This is h2</h2>
    <h3>This is h3</h3>
    <h4>This is h4</h4>
    <h5>This is h5</h5>
    <h6>This is h6</h6>

这是效果： image.png

link

    <a href="https://www.bytedance.com/" target="_blank">
      字节跳动官网
     </a>

这里的target="_blank"代表我们点击之后在新的标签页打开这个链接页面

input

    <input placeholder="请输入用户名">

    <input type="range">

    <input type="number" min="1" max="10">

    <input type="date" min="2018-02-10">

    <textarea>Hey</textarea>

image.png input标签有很多种type，默认是text，我们可以选择不同的样式设置不同的参数。 更多的type可以参考MDN：developer.mozilla.org/zh-CN/docs/…

HTML语义化

什么是语义化

HTML中的元素、属性和属性值都拥有某些含义，开发者应该遵循语义来编写HTML，如

  • 有序列表用ol，无序列表用ul
  • lang属性表示内容所使用的语言

为什么需要语义化

  1. 提高代码的可维护性，可读性
  2. 搜索引擎会根据页面的html提取关键词，语义化可以帮助搜索引擎优化
  3. 屏幕阅读器也会根据html操作，语义化可以提升无障碍性

浏览器如何识别HTML

这里是一段简单的html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>This is title</title>
  </head>
  <body>
    <h1>header</h1>
    <p>content</p>
  </body>
</html>

浏览器会将html的代码解析成DOM树然后再进行进一步的渲染。

image.png

参考资料

MDN：developer.mozilla.org/zh-CN/

avatar
文章
阅读
粉丝