前端与HTML | 青训营

2023-08-01 56 阅读2分钟

1.1什么是前端

·解决GUI人机交互问题

·跨终端

```
 PC/移动浏宽器
```
```
 客户端s小程序
```
```
 VR/AR等
```

. web技术栈

1.2前端技术栈

HTML（内容）
CSS（样式）
JavaScript（行为）
网络协议

1.3前端应该关注哪些方面

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

2.1HTML是什么

HyperText Markup Language

2.2HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如 input、meta
属性值推荐使用双引号包裹
某些属性值可以省略，比如 required、readonly

2.3HTML结构

<!DOCTYOE html>放在文档最前面，浏览器会按照HTML5来解析渲染页面
<html>是根元素，包含整个页面的内容
<head>对用户不可见，其中包含如面向搜索引擎的关键字、标题、编码声明等
<body>包含能被用户访问到的内容

3.1标题标签h1~h6

h1~h6标签被用来定义 HTML 标题。 h1定义重要等级最高的标题。h6定义重要等级最低的标题。

3.2`<body>`标签

内联元素

无法修改元素的宽高
只能容纳文本和其他内联元素常见的内联元素有：<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>

块级元素

宽度为父级的宽度，从新的一行开始
能容纳其他块级元素或内联元素
可以控制宽高常用的块级元素：<div> <p> <h1>-<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>

行内块元素

元素在行内排列，不会独占一行
可以设置宽高常见的行内块元素：<img> <input> <td>

4.1语义化是什么

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

4.2谁在使用我们写的HTML

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

4.3语义化的好处

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

4.4如何做到语义化

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