第一节前端与HTML｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第1天前端技术简介前端技术栈: HTML

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

前端技术简介

前端技术栈:

HTML（内容）+ CSS（样式）+ JS（行为）

通过网络协议和服务器端进行通信
前端应该关注哪些方面:

功能美观安全性能无障碍兼容性用户体验
前端的边界:

node.js 开发服务器端的应用

electron / react native 开发客户端的应用

WebRTC 做p2p的在线传输，实现多人会议

WebGL 开发3d游戏

WebAssembly 把C++ Rust等语言编译成可以在浏览器运行的代码

前端已经远远超出了页面的范畴，是一个不断发展的领域

前端的开发环境

浏览器: Edge Firefox Chrome Safari 等等

编辑器: VSCode Vim WebStorm 等等

HTML简介

HTML是什么

HyperText Markup Language

HyperText: 不仅有文本的内容，如图片、标题、链接、表格等

Markup Language: 用标签来进行标记，如<button>按钮</button>
标签结构

<!doctype html> 供浏览器参考选择渲染模式，省略则以怪异模式渲染，可能带来渲染问题
<html> 文档根标签
	<head> 页面元数据，不需要直接呈现给用户
		<meta charset="gb2312">
		<title>标题</title>
	</head>
	<body> 呈现给用户的内容
		<p>段落内容</p>
		<img src="test.jpg"/> src属性名，"test.jpg"属性值
	</body>
</html>

DOM树

html文档会解析成一个DOM树，节点称为DOM节点
HTML的语法

标签和属性不区分大小写，推荐小写

空标签可以不闭合，如input meta

属性值推荐用双引号包裹

某些属性值可以省略，比如require readonly
标签

(1) 标题 h1 ~ h6

(2) 列表

有序列表 ol: li 表项
无序列表 ul: li 表项
定义列表 dl: dt 标题 dd 描述

(3) 链接 a (anchor)

属性:
href  当前窗口跳转
target 打开新窗口

(4) 图片

属性:
alt  图片不显示时显示文本，实现降级提供服务

(5) 音频 audio 视频 video

属性:
src  媒体文件地址
controls 显示控件

(6) 输入控件

`input`
        属性:
	placeholder 占位符，无输入时显示的值
	type 选择输入类型
		eg. "range" "number" "datetime-local" "radio"
	list 提供提示的下拉选择
`textarea` 多行文本输入，默认可调整大小
`select` 下拉选择
	option 选项

输入框提示示例：

<input list="cities"/>
<datalist id="cities">
	<option>Beijing</option>
	<option>Shanghai</option>
	<option>Shenzhen</option>
</datalist>

(7) 文本

长引用 blockquote
	属性:
	cite 引用链接
短引用 cite （引用专有名词）
短引用 q （引用文本）
短代码引用 code
长代码引用 code嵌套在pre
	注：代码引用一般使用等宽字体
粗体 strong
斜体 em

(8) 内容划分

header: 页面元数据
nav: 页面导航
main: 页面主体
aside: 页面相关
article: 文章正文
footer: 页面底部，版权、备案等等

6. HTML的语义化

HTML中的元素、属性和属性值都拥有某种含义
开发者应该遵循语义来编写HTML
如：
	有序列表用ol，无序列表用ul
	lang属性表示内容所使用的语言
            
HTML传递内容而不是样式
    
对于开发者：便于修改维护页面，用title而不是div+span
对于浏览器：方便展示页面
对于搜索引擎：方便提取关键词、建立索引和进行相关性排序
对于无障碍性的实现：屏幕阅读器等

7. 如何做到语义化

了解每个标签和属性的含义
	推荐参考资料: MDN w3school 
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

第一节 前端与HTML｜ 青训营笔记

前端技术简介

HTML简介

第一节前端与HTML｜青训营笔记