这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端技术栈 Html（内容） CSS（样式） JavaScript（行为） 这三者通过网络协议与服务端进行相连
前端应该关注哪些方面？ 美观 功能 无障碍 性能 安全 兼容 体验
前端的边界是无限的
开发环境： 浏览器：edge chrome Firefox Safari 编辑器：VSCode Vim WebStorm
HTML：HyperText Markup Language
HyperText：图片 标题 链接 表格
Markup Language：<h1>文章标题</h1>及标签
在<img src=“...”>中，src表示属性名，后面引号引起的部分是属性值
<!doctype html>/*表示的是一种较新的html版本*/
<html>
<head>
<title>...<\title>
<\head>
<body>
... /*此处是呈现给用户的内容*/
<\body>
<\html>
浏览器对HTML代码进行解析，解析出一个DOM树
HTML语法
标签和属性不区分大小写，推荐小写
空标签可以不闭合，如input、meta
属性值推荐使用双引号包裹
某些属性值可以省略，比如required、readonly
标题h1～h6
列表 有序列表ol、无序列表ul、dl dt dd 层次感列表
<ol>
<li>...</li>
<li>...</li>
</ol>
<ul>
<li>...</li>
<li>...</li>
</ul>
<dl>
<dt>导演:</dt> /*d title 标题*/
<dd>陈凯歌</dd>
<dt>主演</dt>
<dd>张丰毅</dd>
</do>
链接
<a href="...">....</a>
<img src="..." alt="当图片加载失败时描述图片" width="400">
<audio src="..." controls></audio> /*controls 是默认显示浏览器原始控件*/
<video src="..." controls></video>
输入
<input placeholder="...">/*在用户未点击时默认显示的内容*/
<input type="range">/*用户可以选择*/
<input type="number" min="1" max="10">/*此处表示可以输入的数字范围*/
<input type="date" min="2018-02-10">/*表示能够选择的最小日期*/
<textarea>....</textarea>/*输入长文本*/
<p>
<label><input type="checkbox">...</label>/*checkbox表示多选*/
<label><input type="radio">...</label>/*radio表示单选*/
</p>
<p>
<select>
<opiton>...<option>
<opiton>...<option>
<opiton>...<option>/*下拉选择*/
</select>
</p>
<input list="countries" />
<datalist id="countries">
<option>...</option>/*给到一些输入的提示，相当于自动填充*/
</datalist>
文本类标签
<p>
<cite>/*书名*/
<q>/*对其内文字加双引号*/
<code>/*引用代码*/
<pre><code>
... /*引用多行标签*/
</code></pre>
<strong>/*重点强调*/
<em>/*一段话中重读、强调的部分*/
内容划分
nav 导航
main 主要内容。article正文
fotter 放在页尾 参考链接版权信息备案等
语义化: html中的元素、属性及属性值都拥有某些特殊含义 开发者应该遵循语义来编写HTML
谁在使用我们写的HTML? 开发者--修改、维护页面 浏览器--展示界面 搜索引擎--提取关键词、排序 屏幕阅读器--给盲人读页面内容
HTML传达内容，而不是样式
如何做到语义化? 了解每个标签的属性和含义 思考标签最适合描述什么内容 不建议使用可视化工具生成代码
