这是我参与「第四届青训营 」笔记创作活动的的第1天
什么是前端
解决GUI人机交互问题
跨终端
- pc端/移动浏览器
- 客户端/小程序
- VR/AR
Web技术栈
- html（内容）
- css（样式）
颜色、大小、位置
- js（JavaScript行为）
页面响应
标签名+属性
<img src="photo.jpg">
完整html代码块
<!doctype html> 确定html的模式
<html> 文档根标签，填充html代码
<head> 放置不需要呈现的代码，页面的信息
<meta charset="utf-8"> 页面编码方式
<title>页面标题</title>
</head>
<body> 放置显示在页面上的内容
<h1>标题</h1>
<p>段落</p>
</body>
</html>
DOM树
HTML语法
标签和属性不区分大小写，推荐小写
标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略,比如required、readonly
标签
标题（h1-h6）
列表
- 有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
- 无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
</ul>
- 自定义列表
<dl> 创建定义列表
<dt>定义的内容（属性名）</dt>
<dd>对内容进行的解释（属性值）</dd>
<dt>属性名</dt>
<dd>属性值</dd>
<dd>属性值</dd>
<dt>属性名</dt>
<dd>属性值</dd>
</dl>
链接
<a href="链接地址">
图片、音频标签
<img src="图片地址" alt="Metal movable type">
<audio src="音频地址" controls>
<video src="视频地址">
输入
<input type="类型" min="最小值" max="最大值" placeholder="默认显示">
<textarea></textarea> 输入多行标签
<input type="checkbox"/>多选
<input type="radio"/>单选
<select>下拉选择
<option>选择一</option>
<option>选择二</option>
<option>选择三</option>
</select>
<input list="countries"/>带提示输入
<datalist id="countries">输入提示
<option><option>
<option><option>
</datalist>
文本内容
引用
<blockquote>引用内容</blockquote>长引用（快捷引用）
<cite>引用内容</cite> 短引用
<q>引用的话的内容</q>话语引用
<code></code> 短代码（引用长代码用<pre></pre>装code
强调
<strong></strong>强调（严重紧急）
<em></em>（语气）强调
