前端与HTML｜青训营什么是前端？解决 GUI 人机交互问题跨终端 ‣ PC/移动浏览器 ‣ 客户端/小程序 ‣

什么是前端？

解决 GUI 人机交互问题
跨终端

‣ PC/移动浏览器
‣ 客户端/小程序
‣ VR/AR 等

Web 技术栈

前端技术栈

前端应该关注哪些方面？

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

HTML是什么？

HyperText ：

图片
标题
链接
表格

Markup Language

```
  <h1>文章标题</h1>
```

HTML包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。

这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标签</h1>
        <p>段落内容</p>
    </body>
</html>

<!DOCTYPE html>声明了这是一个HTML5文档
<html>是整个页面的根元素
<head>包含了所有的头部信息，如标题
<body>包含了所有的主体内容，如标题、段落和图片等。

HTML语法

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

HTML的标签

标题标签

h1~h6

列表标签

<ol> 有序列表</ol>
<li> 列表项</li>
<ul> 无序列表</ul>
<dl> 定义列表 </dl>

dt对dd是多对多的关系

链接

<a>

图片

<img>

视频

<video></video>

音乐

<audio></audio>

输入

<input> 表单
<textarea> 文本域
<selsect>下拉选择</select>

引用

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

内容划分

header nav main aside article footer

HTML语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML

有序列表用ol；无序列表用ul
lang属性表述内容所使用的语言

谁在使用我们写的HTML

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

如何做到语义化？

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

前端与HTML｜ 青训营