# 前端与 HTML

# 什么是前端？

解决 GUI 人机交互问题
跨终端
- PC / 移动浏览器
- 客户端小程序
- VR/AR 等
Web 技术栈

# 前端应该关注那些方面

功能（核心：要解决用户需求）
美观
安全
性能
无障碍
兼容性
用户体验

# 前端的边界

前端领域发展迅速，技术更新快。

# 开发环境

只需浏览器和编辑器，易于入门

# HTML 是什么？

HTML 全称为 HyperText Markup Language

HyperText 指图片、标题、连接、表格等内容，Markup Language 为以两个或一个尖括号组成的标签

可以在标签上设置属性

<img src="photo.jpg" />

其中 src 为属性

	<!-- 标记浏览器渲染模式 -->
	<!doctype html>
	<!-- 文档的根标签 -->
	<html>
	<!-- 元数据，不展示给用户 -->
	<head>
	<meta charset="UTF-8">
	<title>页面标题</title>
	</head>
	<!-- 呈现给用户的内容 -->
	<body>
	<h1>一级标题</h1>
	<p>段落内容</p>
	</body>
	</html>

# DOM 树

浏览器拿到 html 后解析出一个 DOM 树。

# HTML 语法

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

# 标题 h1~h6

<h1>< /h1>< h2>< /h2 > 以此类推…

# 列表

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

# 链接

<a href="https://www.xxx.com">

# 图片

<img src="xxx.png" alt="xxx" width="400">

# 音频

<audio src="xxx.ogg" controls></audio>

# 视频

<video src="xxx.ogg" controls></video>

# 输入

<input placeorder="请输入"> 输入框

<input type="range"> 可拖动的范围条

<inupt type="number" min="1" max="10"> 输入给定范围数字

<input type="date" min="2018-01-10"> 日期选择框

<textarea>Hey</textarea> 可输入文本区域

<input type="checkbox /> <input type="checkbox" checked /> 多选

<input type="radio" name="sport" /> <input type="radio" name="sport" /> 单选

	<select>
	<option>g</option>
	<option>_</option>`
	</select>
	<!-下拉选择->

# 文本类标签

块级引用 <blockquote></blockquote>

短引用 <cite></cite> <q></q>

代码 <code></code>

强调 <strong></strong>

斜体 <em></em>

# 内容划分

以上是一个经典的页面布局。

# 语义化

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

# 谁在使用我们写的 HTML

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

# 语义化的好处

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

# 如何做到语义化

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

# 总结

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

前端