第六届字节跳动青训营（HTML） ｜ 青训营

尘缘681
118 阅读3分钟

一、什么是前端

1.解决GUI人机交问题

2.跨终端

  • PC / 移动端浏览器
  • 客户端/小程序
  • VR / AR等

3.Web技术栈

二、前端的技术栈

  • HTML(内容)
  • CSS(样式)
  • JavaScript(行为)

三、前端在开发中应该注重那些方面

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

四、什么是HTML

  • HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。
  • HTML 是一种用来开发网页的计算机语言，它通过标签（标记式指令）将文本、音视频、图片、表格、按钮、输入框等内容显示出来。也就是说，HTML 是用来给网页内容进行排版和布局的。

五、HTML 页面的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 页面的基本结构</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <input type="text" placeholder="请输入内容"/>
</body>
</html>

其中

  • <!DOCTYPE html>：这是文档类型声明，用来将文档声明为 HTML 文档（从技术上来说它并不是标签），doctype 声明不区分大小写；
  • <html> </html>：该标签是 HTML 页面的根标签，其他所有的标签都需要在 <html> 和 </html> 标签之间定义；
  • <head> </head>：该标签中用来定义 HTML 文档的一些信息，例如标题、编码格式等等；
  • <meta charset="UTF-8">：用来指明当前网页采用 UTF-8 编码，UTF-8 是全球通用的编码格式，绝大多数网页都采用 UTF-8 编码；
  • <title> </title>：该标签用来定义网页的标题，网页标题会显示在浏览器的标签栏；
  • <body> </body>：该标签用来定义网页中我们能通过浏览器看到的所有内容，例如段落、标题、图片、链接等等；
  • <h1> </h1>：该标签用来定义标题；
  • <p> </p>：该标签用来定义段落；
  • <a> </a>：该标签用来定义链接；
  • <ul> </ul>：该标签用来定义列表；
  • <li> </li>：该标签用来定义列表项；
  • <input type="text" />：用来定义一个输入框。

六、HTML的语法

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

七、HTML的语义化及好处

  1. 什么是语义化
  • HTML语义化就是用合理、正确的标签来展示内容。
  1. 语义化的好处
  • 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
  • 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
  • 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
  • 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
  • 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
avatar
文章
阅读
粉丝