什么是前端 ?
解决GUI人机交互问题
跨终端
pc/移动浏览器
客户端/小程序 vr/ar等
web技术栈
前端应该关注哪些方面？
功能 美观 安全 兼容 体验 性能 无障碍
Html是什么？
HyperText Markup Language
HyperText 图片，链接，标题，表格
Markup Language 用成对出现的标签来表示内容
在标签上设置一些属性
eg:
添加图片
<img src=”photo.jpg” />
scr为属性名，photo.jpg为属性值
eg2:
1行，不写doctype话，浏览器会以一种老旧的的方式渲染页面
2行，<html><html>根标签，所有其他标签都写在这个标签内
3行，<head><head>放一些必要又不需要呈现的信息
6行，<body><body>放需要呈现给用户的内容
标题：
h1~h6,展示的文字从大到小
eg: <h1><h2>
列表：
1.有序列表
<ol>
<li>内容<li>
<li>内容<li>
</ol>
2.无序列表
<ul>
<li><li>
<li><li>
</ul>
3.key,value形式
<dl>定义列表
<dt>a</dt>
<dd>b</dd>
<dl/>
链接1(在现窗口打开）
<a href=”xxxxxx”>
链接名字
</a>
链接2（在新窗口打开）
<a href=”xxxxxx”
targe=”_blank”>
链接名字
</a>
加入多媒体
- 图片
<img
scr=”......”
alt=”......”
Width=”x”
/>
2.音乐
<audio
scr=” “
Controls
></audio>
3.影视
<vido
scr=”/assets/vodeo.mp4”
Controls
></video>
输入
<input placeholder=”yonghui”> 文本框占位
<input type=”range”> 滑动条
<input type=”number” min=”1” max=”10”> 输入数字
<input type=”data” min=”2018-02-10”> 输入日期
<textarea>Hey</textarea> 多行文本框
<input type=”checkbox”> 多选
<input type=”radio” name=”sport” /> 单选
<select>
<option>A</option>
<option>B</option>
</select> 下拉选项
<input list=”name” />
<datalist id=”name”
<option>shangyi</option>
<option>yi</option>
</datalist> 辅助用户输入
引用
<blockquote cite=”网址”>
<p>文字</p>
</blockquote> 长引用
<p>内容<cite>内容</cite>内容</p> 短引用
其他
<code></code> 代码标签
<strong>内容</strong> 强调标签,重要
<em>内容<em> 强调标签，语气
经典的页面布局