前端与HTML

用户2785999270931

2023-08-10 174 阅读2分钟

HTML 基础

安装浏览器：选择chrome浏览器
安装编译器：选择vscode编译器

关于http协议

HTTP 协议（HyperText Transfer Protocol）超文本传输协议，是互联网数据传输的常见协议
一次 HTTP 事物由 “HTTP 请求” 和 “HTTP 响应” 构成网址前的http://就表示用http协议请求页面，https://表示用https加密协议请求页面，比http://更安全
HTTP请求：用户通过输入网址对服务器发起访问请求的形式，叫做HTTP请求
HTTP响应：服务器接收HTTP请求，处理后响应给用户的流程，叫做HTTP响应

交互基本流程

用户发送 HTTP 请求
在服务器上：后端语言程序运行时执行数据库“增删查改” 等业务
服务器返回 HTTP 响应
在浏览器中，前端语言程序将运行，执行页面结构渲染、美化、交互效果等业务

前端技术栈

JavaScript（行为）
css（样式）
html（内容）

html是什么

超文本标记语言（HyperText Markup Language），HTML是用于创建和结构化网页内容的标准标记语言。

<html>
<head>
    <title>页面标题</title>
</head>
<body>
    页面内容
</body>
</html>

<!DOCTYPE html>：声明文档类型和版本。
<html>：HTML文档的根元素。
<head>：包含文档的元信息，如字符集、样式和脚本。
<title>：定义浏览器标签页的标题。
<body>：包含网页的可见内容。

常见html元素

标题：<h1>, <h2>, ... , <h6>
段落：<p>
链接：<a>
列表：
- 有序列表：<ol>, 列表项：<li>
- 无序列表：<ul>, 列表项：<li>
图片：<img src="image.jpg" alt="图片描述">

内容划分

这就是页面呈现布局

语义化是什么

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

谁在使用我们写的HTML

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

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

总结

本节课介绍了什么是前端，前端与 HTML 的关系，介绍了 HTML 语法，语义化的含义和重要性，并指出了如何做到语义化。