前端与 HTML | 青训营笔记「第五届青训营」伴学笔记创作活动的第 1 天学习内容： 1、前端的概念 2、HTML

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

一、前端与HTML

前端工程师
- 使用WEB技术栈，解决多端图形交互界面问题的工程师
前端技术栈
- 三层
  - HTML：页面结构、内容
  - css：页面样式
  - JavaScript：页面行为
- 通过网络协议与服务器进行数据交互
前端关注
- 功能、美观、无障碍、安全、性能、兼容、体验
前端还能做什么
- nodeJS开发服务器端应用
- electron、React Native开发客户端应用
- webRTC开发在线传输
- webGL开发3D游戏
- webAssembly将其他语言转换成浏览器可以显示的格式

HTML 超文本标记语言

!<doctype html>		#标记当前HTML文件的版本，浏览器根据版本渲染页面

<html>
    <head>
        #页面的元数据，不需要呈现
    </head>
    <body>
        #呈现给用户的内容
    </body>
</html>

浏览器拿到HTML代码后，会解析成一个DOM树，树形结构
HTML语法
- 标签和属性不区分大小写，推荐小写，自定义标签用大写
- 空标签可以不闭合
- 属性值推荐使用双引号包裹
- 某些属性值可以省略

HTML标签

标题
- h1~h6，六级标题

列表

有序列表
- ```
<ol></ol>
```
无序列表
- ```
<ul></ul>
```

key-value列表(多对多的关系)

<dl>
    <dt>
    	<dd></dd>
    </dt>
</dl>

链接

标签a

<a href="www.baidu.com">百度官网</a>
<a href="www.baidu.com" target="_blank">百度官网</a>	#新窗口打开

多媒体

<img src="xxx" alt="xxx" width="xxx" />	#alt加载失败时显示文字
<audio src="xxx" controls></audio>	#controls是显示浏览器自己的音频控件
<video src="xxx" controls></video>

输入

<input placeholder="xxx">	#placeholder占位符，没输入时显示的内容
<input type="range">	#页面显示滑动快，用户进行滑动
<input type="number" min="1" max="10">
<input type="date" min="2023-01-15">
<textarea>Hey</textarea>	#多行的输入
#选择项多选
<label><input type="checkbox">APPLE</label>
<label><input type="checkbox">ORANGE</label>
#选择项单选，一个name只能选一种
<label><input type="radio" name="xxx">APPLE</label>
<label><input type="radio" name="xxx">ORANGE</label>
#下拉框
<select>
    <option>APPLE</option>
    <option>ORANGE</option>
</select>
#有提示的输入
<input list="xxx">
<datalist id="xxx">
	<option>xx1</option>
    <option>xx2</option>
</datalist>

引用

1.<blockquote>content</blockquote>
2.<cite>content</cite>	#短引用
3.<q></q>

页面划分标签

页面划分.jpg

HTML语义化
- 是什么
  - HTML中元素、属性、属性值都拥有某些含义
  - 开发者应该遵循语义来编写HTML
    - 比如有序列表用ol等等
- 如何做到
  - 了解每个标签和属性的含义
  - 思考什么标签最适合描述这个内容
  - 不适用可视化工具生成代码

总结
- 第一次学习前端的课程，我对前端工程师的任务有了一个大致了解的认识。在HTML的学习上，跟随着课程了解学习HTML的大致框架和一些简单用法，体验不错，明天继续。