前端与HTML
一.什么是前端？
- 解决GUI人机交互问题
- 跨终端
-
pc/移动浏览器 -
客户端/小程序 -
VR/AR等
-
- Web技术栈
二.前端技术栈
三.前端关注的方面？
- 功能：产品有哪些功能？能解决什么问题？能否满足用户需求？
- 美观：做出的界面是否美观？
- 无障碍：所有人是否都能正常使用网页？
- 安全：能否保证所有用户数据的安全？是否存在漏洞？
- 性能：动画是否流畅？速度是否足够快？
- 兼容性：网页是否可以在各种设备上使用？
四.前端的边界
- 使用
nodejs构建服务器应用 - 使用
Electron开发客户端应用 - 使用
webRTC进行p2p传输 - 使用
webGL开发3d游戏 前端在互联网中是一个发展特别迅速的领域，技术的更新迭代特别快，只有不断的学习才能跟上技术的发展。
五.开发环境
浏览器：各大浏览器（Edge，Chrome，Firefox，Safari）
编辑器：VScode,Vim,WebStorm
六.什么是HTML？
HTML（HyperText Markup Language)
- HyperText 超文本：不只是包含文本，还可以包含图片、标题、链接、表格。
- Markup Language 标记语言：HTML就是使用标记语言来 表示不同格式，也就是标签。
<!doctype html>是HTML的第一行为,用于标识页面的html版本。
<html>是HTML的根标签，所有元素都需要包含在该标签中。<html>中有<head>和<body>，其中<head>存放各类元数据，<body>存放给用户看的内容。
浏览器拿到HTML会将其解析成DOM树
七.HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如
input、mata - 属性值推荐用双引号包裹
- 某些属性值可以省略，比如
required,readonly
八.标签
8.1 标题
从h1~h6,标题大小依次减小
8.2 列表
- 有序列表
<ol>、无序列表<ul>,它们嵌套的子元素都是<li> - 自定义列表
<dl>（定义列表）<dt>用来定义项目/名字<dd>用来描述项目/名字
8.3 链接
语法格式:<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href:必须属性 指定链接目标的url
target:指定链接页面的打开方式，self为默认值_blank为在新窗口打开页面
8.4 多媒体
<img>图片<audio>音频<video>视频
这三个属性都是媒体数据，使用src属性提供数据，可通过controls属性显示播放控件
8.5 输入
常见的<input>标签，使用type指定属性值
type属性的属性值
| 属性值 | 说明 |
|---|---|
| text（默认） | 定义单行输入字段，默认20个字符 |
| button | 定义可点击按钮 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供用户上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段（密码被遮掩） |
| reset | 定义重置按钮（会清除表单中的所有数据） |
| submit | 定义提交按钮 |
除type外的其他常用属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| name | 用户自定义 | 定义input元素名称（用于区分不同的表单元素） |
| value | 用户自定义 | 规定input元素的值 |
| checked | checked | 规定的元素首次加载应当被选中 |
| maxlength | 正整数 | 规定输入字符的最大长度 |
- name和value是每个表单元素都有的属性值，主要给后台人员使用
-要求单选框或复选框有相同的
name值， 一组含相同name值的radio有且只有一个可被选中
几个特殊输入标签
- 可使用
placeholder指定未输入时的文本提示 <textarea>文本域元素：定义多行文本输入（输入terea快捷生成）<Select>多选输入框：定义下拉表单元素
<select>
<option selected="selected">1</option>//定义`selected="selected"`，当前项即为默认选中项
<option>2</option>
<option>3</option>
<option>4</option>
</select>
- 如果想让input输入关键词时有提示，可使用
list属性
8.6 文本格式化标签
| 标签 | 含义 | 属性 |
|---|---|---|
| blockquote | 长引用 | 使用cite属性指定引用源 |
| cite | 短引用 | 无 |
| q | 给文字两头加双引号 | 无 |
| code | 表示代码 | 引用多行代码需在code标签外包裹pre标签 |
| strong/b | 加粗 | 无 |
| em/i | 倾斜 | 无 |
| del | 删除线 | 无 |
| ins | 下划线 | 无 |
8.7 内容划分
| 标签 | 说明 |
|---|---|
| header | 页头 |
| nav | 导航栏 |
| main | 页面主体 |
| article | 列表条目 |
| aside | 侧边栏 |
| footer | 底部导航栏 |
九.原则
HTML要传递的是内容，而不是样式
十.如何做到语义化
- 了解标签和属性的含义
- 思考什么标签最适合描述该内容
- 不使用可视化工具生成代码 具体了解可查阅(学习 Web 开发 | MDN (mozilla.org))
