这是我参与「第五届青训营」伴学笔记创作活动的第 1 天
课上讲了什么？
关于前端
- 什么是前端
- 前端解决的是GUI人机交互问题
- 前端需要处理多终端问题
- 前端使用web技术栈
- 技术栈
- HTML：内容
- css：样式
- javaScript：行为
- 通过网络协议和服务器通信，渲染网页实现功能
- 前端要关注什么
- 解决功能需求
- 界面是否好看：美观
- accessibility无障碍
- 安全性
- 性能：加载速度等
- 兼容性：多端的正常流畅使用
- 体验：因为前端是用户感受最直观的
- 前端现在已经远不只是网页开发了，发展速度极快
- 开发环境：使用编辑器编辑代码，浏览器运行，入门门槛低
关于HTML
- 什么是HTML：超文本标记语言
<!doctype html>如果不写，浏览器会使用怪异模式渲染页面<html></html>文档的根标签<head></head>元数据<body></body>显示在页面上的元素- DOM树：HTML代码转化成的树形结构，单个节点叫做DOM节点
- 关于HTML语法
- 标签属性不区分大小写，推荐小写
- 空标签可以不闭合如
<input>，标签闭合的另一种方式<img /> - 属性推荐使用双引号
- 属性值为布尔的，可以不写属性值，有就是
true
HTML标签
- 标题：h1~h6
- 列表
- 有序列表
<ol></ol>，列表元素<li></li> - 无序列表
<ul></ul>，列表元素<li></li> - 键值对列表（定义列表）
<dl></dl>，key（定义名称）<dt></dt>，value（定义描述）<dd></dd>
- 有序列表
- 链接：
<a></a>，href为地址，target='blank'新窗口打开 - 图片：
<img />，src为地址，alt替换文字 - 音视频：
<audio />，src为地址，controls='true'显示控件 - 表单
- 输入框
<input>，可以设置提示文本placeholder，输入类型``type`（缺省文本，range滑块，number数字，date日期，复选checkbox，单选radio），数据的最小/最大值 - 下拉选择
<select></select>，选项写在<option></option>里面 <input>和<datalist></datalist>一起使用，可以构造有备选项的输入框
- 输入框
- 文本类标签
<blockquote></blockquote>块级引用<cite></cite>短引用（inline，用于名称）<q></q>短引用（inline，用于内容）<code></code>代码（inline，可长可短，样式会是等宽字体）<strong></strong>重要内容（inline，加粗）<em></em>语气强调（inline，斜体）
- 内容划分的标签
<!--顶栏-->
<header>
<nav>
</nav>
</header>
<!--侧边栏-->
<aside>
</aside>
<!--主要部分（每个页面只能有一个）-->
<main>
<article>
</article>
<!--...-->
</main>
<!--底边栏-->
<footer>
</footer>
HTML语义化
- HTML元素、属性和属性值都有自己的含义
- 代码被各种各样的平台（浏览器、搜索引擎、屏幕阅读器）和人（合作开发者）使用，需要有较强的可读性
- 一个总体原则：传达内容，而不是样式
- 了解标签和属性的含义（MDN&W3C），思考合适的标签，避免用可视化工具
Lecture小结
主要内容
- 前端和HTML的概念
- HTML常见标签的介绍
- HTML语义化及其实现
课后练习&实验
如果页面不加<!doctype html>会怎样？
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>一个标题</h1>
<p>一个段落</p>
</body>
</html>
浏览器控制台报警告
三种列表的使用
<!DOCTYPE html>
<html>
<body>
<!--有序列表-->
<ol>
<li>ordered entry #1</li>
<li>ordered entry #2</li>
<li>ordered entry #3</li>
</ol>
<!--无序列表-->
<ul>
<li>entry #1</li>
<li>entry #2</li>
<li>entry #3</li>
</ul>
<!--键值对列表-->
<dl>
<dt>key #1</dt>
<dd>value #1.1</dd>
<dd>value #1.2</dd>
<dt>key #2</dt>
<dd>value #2.1</dd>
</dl>
</body>
</html>
