前端

一、前端是什么

解决GUI人机交互问题
跨终端（PC/移动浏览器、客户端/小程序、 VR/AR等）
Web技术栈（行为：JavaScript、样式：CSS、内容：HTML）

二、前端关注方面

功能、美观、性能、兼容、安全、体验、无障碍

三、前端的边界

微信图片_20230803211139.jpg

四、开发环境

浏览器:

微信图片_20230803211335.jpg 编辑器：

微信图片_20230803211340.jpg

HTML

一、HTML是什么

即HyperText Markup

基本语法

二、标签种类

可去MDN、w3c学习HTML5

1.标题标签

< h1 >-< h6 >

作用：标题加粗、单独一行、一次变大

2.段落换行标签

< p > < /p > 作用：定义段落

< br/ >作用：强制换行

3.文本格式化标签

加粗：< strong >< /strong >或< b >< /b >

倾斜：< em >< /em >或< i >< /i >

删除线：< del >< /del >或< s >< /s >

下划线：< ins >< /ins >或< u >< /u >

盒子：< div >< /div >和< span >< /span >

4.图像标签

< img src="图像URL"/ >

5.超链接标签

< a href >< /a>

6.表格标签

7.列表标签

无序列表< ul >-< li >
有序列表< ol >-< li >
自定义列表< dl >-< dt >-< dd >

8.表单标签

组成：表单信息、表单控件、提示信息

9.引用标签

长引用：< blockquote >< /blockquote >

短引用：< cite >< /cite >

引用代码：< code >< /code >

强调紧急引用：< strong >< /strong >

强调语气引用：< em >< /em >

三、语义化

1.是什么

HTML中的元素、属性及属性值都拥有某些含义 -开发者应该遵循语义来编写HTML

2.使用对象

开发者——修改、维护页面
浏览器——展示页面
搜索引擎——提取关键词、排序
屏幕阅读器——无障碍

3.如何做到

了解每个标签和属性含义
思考什么标签最适合的描述某个内容
不适用可视化工具生成代码

前端与HTML|青训营

前端