前端|HTML基础 day01

最新推荐文章于 2025-12-03 18:49:33 发布

原创最新推荐文章于 2025-12-03 18:49:33 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

本文介绍了前端开发的基础知识，包括前端的作用、主要技术如HTML、CSS和JavaScript，以及HTTP协议在浏览器与服务器间的作用。重点讲解了HTML的基本结构、常用标签，如标题、列表、超链接和输入元素，并强调了语义化在提高代码可读性、维护性和SEO优化等方面的重要性。此外，还提到了前端技术的拓展应用，如Node.js、Electron和WebRTC。

前端HTML|青训营笔记-HTML基础

请添加图片描述

新人第一天请指教

一.什么是前端?

解决*GUI(图形用户界面)*的人机交互问题所做的事情
解决跨终端问题
个人认为前端的意义在于：
1.提高产品的开发效率（前后端分离）
2.提高用户的是用体验

二.前端的技术?

前端会用那些技术？
- 三件套（HTML CSS JavaScript）
- HTTP协议
- 前后端交互技术（ajax Socket）

请添加图片描述

服务器通过HTTP（网络协议）来与浏览器通信交换数据，浏览器可以从服务器获得前端的代码，通过自己的渲染引擎来生成页面

而浏览器也可以把用户在浏览器中填写的内容（像是用户名、密码、文字等）通过HTTP协议传到服务器来进行存储

前端在互联网是发展的很快的领域，技术也在随时的更新，而且前端不止可以来写页面

Node.js: 可以开发服务器端的一些应用
ELECTRON：可以开发客户端的应用
WEBRTC：可以实现在线的传输（可以做一个多人的聊天室）

三.开发环境

请添加图片描述

首先我们需要一个浏览器（毕竟要写页面没浏览器咋成啊！）推荐首选Chrome也就是谷歌浏览器
编辑器的话VSCode WebStorm都行

四. HTML

4.1 HTML是什么

HyperText Markup Language：即超文本标记语言

超文本：字面意思超过文本就是不只有文本还可以是图片链接表格等

请添加图片描述

标记语言：所以说HTML不是编程语言，他用标签来描述网页

在这里插入图片描述

<!doctype html>：声明为 HTML5 文档
<html>：HTML 页面的根元素
<head>：头标签
<title>：文档标题
<body>：页面的内容
<h1>：一级标题
<p>：段落内容

4.2 HTML语法

标签和属性不区分大小写，推荐小写，自定义的标签用大写
HTML 标签通常是成对出现的，比如 <b></b>
空标签可以不闭合，比如input、meta
我们的属性值推荐用双引号包裹
有些属性有默认属性值像是input标签的required属性是一个Boolean值

4.3 HTML一些标签

4.3.1 标题标签： h1~h6 从大到小

4.3.2 列表标签

有序列表<ol> <li></li> </ol>：用的相对较少
无序列表<ul> <li></li> </ul>：用的较多
自定义列表<dl> <dt> <dd></dd> </dt> </dl>:用的相对较少
- dl(defnition list)>dt(definition title)>dd(definition description)

在这里插入图片描述