前端与HTML | 青训营笔记

用户9608586346079
459 阅读4分钟

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

一、什么是前端？

  • 解决图形化界面下的人机交互问题
  • 跨终端
  • web技术栈

二、前端技术栈

  1. HTML 决定了网页的内容，CSS 决定了网页的样式、JavaScript 决定了网页的行为。

  2. 浏览器通过 Http 协议与服务器进行通信，得到的代码由浏览器渲染为前端页面。

  3. 同时，浏览器还可以将用户填写的信息、进行的操作，反馈给服务器。

    HTML、CSS、JavaScript 与网络协议共同构成了一个最基础的前端技术栈。

三、前端应该关注哪些方面？

  • 功能：在前端开发中最基础的即是实现所需要的功能。

  • 美观 ：在实现功能的基础上，前端界面是直接呈现给用户的，所以界面是否美观也是决定用户体验的一个重要的因素。

  • 性能 ：在用户使用过程中，我们对图片、文字等内容的响应速度也极大情况下决定了用户的体验。

  • 无障碍：我们的界面在美观的前提下，我们还要考虑，我们的交互与信息的提示是否友好。

  • 安全 ：在前端的开发过程中，用户的信息安全也是不容忽视的一个重要的因素。

  • 兼容性 ：我们的界面既要适配我们开发时使用的设备，也要想到用户使用其他设备访问时，也要对其他设备的适配。

  • 体验 ：在保证上述前提的同时，我们还应该增强我们界面的交互、动效等来提升用户的使用体验。

四、什么是 HTML

定义

HTML（ Hyper Text Markup Language ）的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等

Hyper Text 超文本 ： 即除文本之外，还有图片、标题、链接、表格等更多的表现形式。

Markup Language 标记语言 ：使用一个开始标签与结束标签的结构来表现所要呈现的内容。

例如：我们要表示一个 H1 标签 ，代码如下

<h1>要展示的内容</h1>

我们还可以在标签上设置一些属性：

例如：一个 img 标签

<img src = "photo.jpg" />

这里的 src 即代表 属性名 ，那么引号内的内容就叫做 属性值。

五、第一段 HTML 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>示例代码</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>
  • 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

HTML 语法

  1. 标签和属性不区分大小写，推荐小写

  2. 空标签可以不闭合，比如input、meta

  3. 属性值推荐用双引号包裹

  4. 某些属性值可以省略，比如required、readonly

HTML 标签

1.HTML 标题

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

2.HTML 多媒体

<img decoding="async" src="/images/logo.png" width="258" height="39" />
​
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>
​
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

3.HTML 列表

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>
​
<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>
​
<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

六、HTML 的语义化

  • HTML中的元素、属性及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTML

    • 有序列表用ol;无序列表用ul

    • lang属性表示内容所使用的语言

七、谁在使用我们写的 HTML

  • 开发者-修改、维护页面

  • 浏览器-展示页面

  • 搜索引擎-提取关键词、排序

  • 屏幕阅读器·给盲人读页面内容

八、如何做到代码语义化？

  • 了解每个标签和属性的含义

  • 思考什么标签最适合描述这个内容

  • 不使用可视化工具生成代码

九、思考

  1. 我们的开发一定是要遵循HTML的规范而来，如何更好的做到代码的语义化，我们要更好的去思考这个这个内容应该用什么标签来更好的展示。

  2. 思考我们开发时应该关注的点界面的功能、美观等直接影响了用户使用我们网站时的体验。而更好的交互逻辑、友好的报错提示、以及对无障碍、兼容性的适配会让我们的网站的受众会更广。

  3. 前端技术的快速更新迭代，促使我们要不断的学习新的技术。更好的技术便会带来更好的体验，是我们的网站可以被更多的人使用。

十、参考文档

HTML 教程 | 菜鸟教程 (runoob.com)

MDN Web Docs (mozilla.org)

W3C 简介 (w3school.com.cn)

avatar
文章
阅读
粉丝