什么是前端
通俗来说，是解决图形界面下的人机交互问题，即人眼能够看到并能够操作的人机交互页面。
常有：
- PC/浏览器
- 客户端/小程序
- VR/AR
前端技术栈
- HTML(内容)
- CSS(样式)
- JavaScript(行为)
以上工具通过http等协议与服务器进行数据的传输与改变，以此构成了一个基本的前端技术栈。
需要考虑的东西：
- 功能
- 美观
- 安全
- 无障碍
- 性能
- 兼容性
- 体验
HTML
HyperText:图片、视频、链接等各类元素。
Markup Language:标签，即为用标签标记元素，表示有关信息。
主要标签
- <!doctype html>声明页面类型
- <html>根标签，里面即为页面的所有内容
- <head>页面数据，不太重要不用显示的内容
- <body>主要内容
以上内容在浏览器中通过DOM树显示。
其余标签类型
-
标题h1-h6
<h1></h1>
一级标题
<h2></h2>二级标题
<h3></h3>三级标题
<h4></h4>四级标题
<h5></h5>五级标题
<h6></h6>六级标题
-
列表
- 有序列表
<ol><li>元素1</li><li>元素2</li><li>元素3</li></ol> - 无序列表
<ul><li>元素1</li><li>元素2</li><li>元素3</li></ul> - 定义列表，如电影由导演、主演、上映日期
<dl><dt>导演：</dt><dd>陈凯歌</dd></dl>
-
链接
a标签：<a href="https://www.baidu.com/">百度</a>
target属性：在新窗口中打开。
<a href="https://www.baidu.com/" target="_blank">百度</a>
-
多媒体元素
- 图片
<img src="路径" alt="文字信息" width="400"/> - 音频
<audio src="路径" controls></audio> - 视频
<video src="路径" controls></video>
-
输入
<input type="类型" placeholder="默认显示">
多行文字内容：<textarea>多行文字内容</textarea>
选择：<input type="radio" name="选择">
下拉选择：<select><option>下拉选项1</option><option>下拉选项2</option><option>下拉选项3</option></select>
-
引用
块级引用：<blockquote cite="链接"></blockcite>
短引用：<cite></cite>
内容划分
语义化
目的：
清晰的表达内容和结构。
意义：
HTML的使用者有很多，他们需要能够读懂我们所写的代码，因此我们的代码应遵循语义化的原则，让他们能够轻松的读懂并理解我们所写的页面。
如何做到：
了解各个标签和属性的含义，给元素提供合适的标签，同时在创作时规范的遵循给元素添加标签的创造方法，不在创作时关注最后模样。
