前端与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 语法，介绍了语义化的含义和重要性，并指出了如何做到语义化。

前端与HTML笔记 ｜ 青训营