前端&HTML | 青训营笔记

327
51 阅读4分钟

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

前端

前端分为Web前端开发和前端设计。前者的主要内容就是制作可以在PC端与移动端的浏览器上运行的网页；后者可以理解是网站的视觉设计。

前端开发——是什么？

  • 解决GUI（图形用户界面-Graphical User Interface）人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈：HTML、CSS、JS

1658743059142.jpg

前端工程师：使用web技术栈解决多端下面的图形界面的交互的工程师

前端开发——关注核心

  • 功能（最核心）：是否满足用户需求
  • 美观（前端设计核心）：整体排版与色调是否好看
  • 无障碍：网站是否对所有人可用，如老年人观看可将字体放大、盲人可听取机器阅读等
  • 安全性：用户数据安全
  • 性能：网页速度运行是否够快、动画播放是否流畅、用户体验是否足够好等
  • 兼容性：网页是否在各种设备上可使用，如电脑、手机等

前端开发——边界

1658736107511.png

前端开发——开发环境

1658736146247.png

开发方式：使用编辑器如VSCode编写HTML、CSS、JS等代码，编写完成后保存为html格式，在浏览器中运行该文件即能查看效果

HTML

HTML全称为:HyperText Markup Language

HyperText翻译为超文本，超文本可包含图片、标题、链接、表格

Markup Language翻译为标记语言，用一个开始标签和一个结束标签（成对出现的标签）来表示一个内容的格式。如：<h1>文章标题 </h1>，表示将"文章标题"这一内容用一级标题格式显示出来

HTML——页面声明

<!DOCTYPE html>该声明是html5标准网页声明。该标签标记了当前使用的html文件所使用的html版本，浏览器可根据该标签决定选择一种符合的渲染模式

DOCTYPE的作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

  • BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

  • CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat。

HTML——基本格式

一个简单的网页由html、head、body三个标签组成，缺少某一个标签都不是一个正常的网页。

<!doctype html>
<html>//根标签
	<head>//头部标签，页面源数据
		<meta charset="UTF-8">//编码语言
		<title>页面标题</title>
	</head>
	<body>//呈现的内容
		<h1>一级标题</h1>
		<p>段落内容</p>
	</body>
</html>

1658739614284.png

HTML——语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如：input、meta
  • 属性值推荐用双引号包裹,比如：<img src="photo.jpg" />
  • 某些属性值可以省略，比如：required、readonly

注意：当标签里面不需要再嵌套内容时，可在开始标签的最后加斜杆（"/"）来结束标签。比如： <img src="photo.jpg" />

HTML——常用标签

  • 标题标签：<h1~6>一~六级标题</h1~6>

  • font标签：定义文字大小

  • p标签：段落标签

  • b / strong：定义加粗标签，strong还具有强调效果

  • br：换行标签，中间不空行

  • hr：水平线标签

  • img：图片标签

  • audio：背景音乐

  • video：视频

  • a：超链接标签

  • 列表标签

    //有序列表
<ol>
	<li>列表项</li>
</ol>

    //无序列表
<ul>
	<li>列表项</li>
</ul>

    //自定义列表
<dl>//外围标签
	<dt>列表的标题标签</dt>
		<dd>设置列表的具体列表项</dd>
</dl>

  • HTML——语义化

1658740922403.png

语义化的好处：

  • 代码可读性

  • 可维护性

  • 搜索引擎优化

  • 提示无障碍性

做到语义化的方式：

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

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

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

  • HTML——使用者

    • 开发者——修改、维护界面
    • 浏览器——展示页面
    • 搜索引擎——提取关键词、排序
    • 屏幕阅读器——给盲人读页面内容

总结

​ 前端与后端有所不同。后端人员的常用语言有C语言、JAVA、Node.js、PHP、Python、Go等，但没有一种语言是后端人员所必须掌握的，而前端人员则必须掌握HTML语言。HTML语言是前端人员最开始接触的最基本的编程语言，因此想要往前端方向发展，需要掌握HTML这一基本语言，了解HTML中每个标签和属性的含义，遵循语义来编写HTML。在网页设计当中，因尽量的使网页美化，整体看起来简约，使观看者有一种舒适的感觉。同时，在这一大数据时代，网页的安全性是重中之重的，因此在上线前要多次测试，降低数据外泄的风险，保障用户数据安全。

avatar
文章
阅读
粉丝