前端 与 HTML | 青训营笔记

凤之兮原
109 阅读3分钟

前端 与 HTML | 青训营笔记

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

1. 前端

1.1 什么是前端

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

  • 解决 GUI 人机交互的问题
  • 跨终端
    • PC / 移动浏览器
    • 客户端 / 小程序
    • VR / AR 等
  • web 技术栈

1.2 前端应该关注哪些方面？

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

1.3 前端的开发环境

  • 浏览器
    • IE / Edge（一届毒瘤）
    • Chrome（主流）
    • FireFox
    • Safari
  • 编辑器
    • VsCode（轻量级）
    • Vim
    • WebStorm（比较吃内存）

2. HTML

2.1 什么是 HTML ?

HTML 即 HyperText Markup Language， 超文本标识语言

HyperText（超文本）: 包括了 图片，标题，链接以及表格等

Markup Language（标记语言）: 包括 <h1>文章标题</h1>

2.2 HTML 中的 属性名、属性值 是什么 ?

例如

<img src = "photo.jpg" />

其中，src 是 属性名， photo.jpg 是 属性值

2.3 一个简单的 HTML 文件

<!-- 这里的 DOCTYPE 用来告诉 web 浏览器页面使用了哪种 HTML 版本，这里是 HTML5 -->
<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8" />
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

注释:

head：所有头部元素的容器，包括了 脚本，样式， meta 信息以及其他更多的信息

  • meta：元数据（Metadata）是数据的数据信息。它提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。charset 用来定义文档的字符编码
  • title：定义文档的标题，在所有 HTML 文档中是必需的。

body：定义文档的主体，包含文档的所有内容，这里就是我们需要编写标签代码的地方（比如文本、超链接、图像、表格和列表等等）。

代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>页面标题</title>
</head>

<body>
  <h1>h1 标签</h1>
  <h2>h2 标签</h2>
  <h3>h3 标签</h3>
  <h4>h4 标签</h4>
  <h5>h5 标签</h5>
  <h6>h6 标签</h6>
  <!-- # 代表的是空链接 -->
  <a href="#">a 标签</a>
  <p>p 标签</p>
  <div>div 标签</div>
  <span>span 标签</span>
  <q>q 标签</q>
  <i>i 标签</i>
</body>

</html>

页面展示效果：

image.png

2.4 HTML 语法

  • 标签和属性不区分大小写，但是推荐小写
    • <div></div> 与 <DIV></DIV>
  • 空标签可以不闭合，比如 input 、meta
    • <input type="text" /> 与 <input type="text">
  • 属性值推荐使用 双引号 包裹
    • <img src="photo.jpg" />
  • 某些属性值可以省略，比如 required、readonly，不加默认值 相当于 required = "true"
    • <input type="text" required />

2.5 关于 HTML5 的语义化

  • HTML 中的元素、属性以及属性值都拥有某些含义
  • 开发者应该遵循语义来编写 HTML
    • 有序列表用 ol; 无序列表 用 ul
    • lang 属性表示内容所使用的语言

一些语义化的标签：

header：头部标签

nav：一般是导航栏标签

main：主体（内容）标签

aside：侧边（内容）标签

footer：底部标签

article：文章标签

可以看如下的示意图增强对语义化的理解：

image-20220724111706558.png

扩展阅读

之前做过一个关于 HTML5 中新增的标签的题，正好在这里整理一下

其他一些 HTML5 中 新增 的标签与一些 不常用 的标签

新增：HTML5 中新加的

非新增：之前就有的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 5 新增表单元素</title>
</head>

<body>
  <h1>Keygen：新增</h1>
  <form action="demo_keygen.asp" method="get">
    Username: <input type="text" name="usr_name">
    Encryption: <keygen name="security">
    <input type="submit">
  </form>

  <h1>datalist：新增</h1>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>


  <h1>output：新增</h1>
  <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
  </form>

  <h1>fieldset + legend: 非新增</h1>
  <form>
    <fieldset>
      <legend>Personalia:</legend>
      Name: <input type="text"><br>
      Email: <input type="text"><br>
      Date of birth: <input type="text">
    </fieldset>
  </form>

  <h1>optgroup: 非新增</h1>
  <select>
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
</body>

</html>

结果如下：

image.png

总结

我们在进行 HTML 开发的时候，要考虑程序的可阅读性以及扩展能力，因此，我们尽可能的使用 语义化的标签 来进行项目开发，这样在后期维护的时候也不用花大量时间去阅读 html 代码了。

avatar
文章
阅读
粉丝