网页的基本概念
什么是网站？
网站是由一组 网页的集合。
什么是网页
网页是由 html ,css，javascript 组成
什么是HTML
HTML是超文本标记语言，而不是编程语言。
网页的形成
前端工程师编写代码，浏览器解释和渲染代码
常用的浏览器及内核
常用的浏览器
1.谷歌浏览器 Chrome （v8引擎）
2.火狐浏览器 Firefox
3.IE / Edge （微软）
4.Safari （苹果电脑） / iPhone / iPAD
5.欧朋浏览器 Opera
浏览器内核的作用是什么
浏览器 内核 备注 chrome / Opera Blink Blink其实是Webkit的分支 IE Trident IE、猎豹安全、360 极速浏览器、百度浏览器 FireFox Gecko 火狐浏览器内核 Safari webkit 苹果浏览器内核
HTML元素
html由一系列的元素（elements）组成，
html 语法规范
-
双标签和单标签的特点是什么？- 双标签是成对出现的，有开始就有结束 例如 ：
- 单标签不需要结束标签 例如 ：
-
标签的关系有- 包含关系 ：父子
- 并列关系 ：兄弟
前端开发工具
网页常用的开发工具
| 开发工具 | 特点 |
|---|---|
| Dreamweaver | 古董，曾经的网页三剑客之一 |
| Sublime | 速度快，体积小，插件多，插件安装复杂 |
| Webstrom | 功能强大，付费，慢 |
| HBuilder X | 可将 Vue 项目打包成 app |
| Visual Studio Code ☆ | 前端神器，速度快，体积小，插件多 |
DOCTYPE 和 lang 以及字符集的作用
-
<!DOCTYPE html>标签的作用是什么<! DOCTYPE html> 用来告诉浏览器这个是 html页面
不是 html标签，是文档类型的声明标签
-
lang 的作用是什么？lang 用来定义当前文档显示的语言；
en 英语；
zh-CN 中文。
-
charset 字符集应该用哪一个字符集？charset="UTF-8" ；
网页中一定要写，否则有可能会出现乱码的情况；
UTF-8 （万国码）以前常用的字符集；
HTML标签
-
<img> 标签的属性值 及 作用属性 属性值 作用 src 图片路径 指定图像文件的路径 ait 文本 替换文本，图像不显示时显示 title文本 文本 提示文本，鼠标悬停的时候显示 -
锚点链接的作用是什么？ 语法是 href="#id"- 锚点链接的语法是： href=“#id”
- 锚点链接可以实现页面内跳转
- 目标标签 需要增加 id 属性，才能实现锚点跳转，跳转到 目标 id 所在位置 href=“#id”
-
几个特殊符号- 空格   ：no break space
- 大于号 > : greater than
- 小于号: <： less than
- &emsp ：是一个全角的中文空格，在界面布局时有时候非常有用 🙂。
附录
现代社会更重要的是对知识的检索能力，要善于利用工具而不是死记硬背。
骨架标签
| 标签名 | 说明 |
|---|---|
| html | 根标签，页面中最大的标签 |
| head | 设置页面信息，例如网页标题 title 以及告诉浏览器或爬虫的信息 |
| title | 网页的标题，显示在浏览器标签上 |
| body | 内容标签， 写内容 |
常用标签
| 序号 | 标签名 | 说明 |
|---|---|---|
| 1 | h1~ h6 | 标题标签 独占一行 |
| 2 | p | 段落标签 独占一行 段落之间有间距 |
| 3 | br | 换行 直接换行，没有明显的间距 |
| 4 | strong 或 b | 字符加粗, 更推荐 em （语义更强烈 ） |
| 5 | em 或 i | 倾斜，更推荐 de l （语义更强烈 ） |
| 6 | del 或 s | 删除线 更推荐 ins （语义更强烈 ） |
| 7 | ins 或 u | 下划线 更推荐 u （语言更强烈） |
| 8 | div | 大盒子，独占一行 |
| 9 | span | 小盒子，一行可以显示多个 |
| 10 | img | 图片 必须需要 src 属性 |
| 11 | a | 超链接 必须属性 href |
| 12 | ul | 无序列表 |
| 13 | ol | 有序列表 |
| 14 | li | ul、ol 的列表项 |
| 15 | hr | 分隔线 |
表格标签
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | table | 表格 |
| 2 | thead | 表格的头部 |
| 3 | tbody | 表格的身体 |
| 4 | th | 表格头部中的单元格 |
| 5 | td | 表格身体中的单元格 |
| 6 | tr | 表格中的行 |
表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left 、center、right | 对齐方式 |
| border | 度像素值或 "" | 表格默认 无边 框线 |
| cellspacing | 像素值 | 单元格之间的间距，默认 2 像素 |
| cellpadding | 像素值 | 内容与边框之间的距离，默认1像素 |
| rowspan | 值 | 一列跨越多行 |
| colspan | 值 | 一行跨列合并 |
表单标签
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | form | 表单 |
| 2 | input | 输入框 |
| 3 | buttom | 按钮 |
| 4 | lable | 通用与 input表单配合使用、增大点击范围 |
| 5 | textarea | 多行纯文本 输入框 |
| 6 | datalist | 数据列表 |
| 7 | optgroup | 选项组 |
| 8 | select | 选择菜单 |
| 9 | option | 多项选择菜单 |
<label for="genderMale">小帅</label>
<input type="radio" name="gender" value="male" id="genderMale" />
input的属性
| 属性 | 值 | 描述 |
|---|---|---|
| type | 类型名 | 描述 |
| name | text | 名称，用于区分控件 |
| value | text | 值，用于记录或设置控件的值 |
| checked | checked | 默认选中某个单选或复选框 |
| id | text | 控件标识 ，与lab标签联用 |
| maxlength | number | 输入框中允许最长长度 |
| required | required | 表单拥有该属性表示内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在内容将不显示 |
| autofocus | autofocus | 自动聚集属性 |
| autocomplete | on /off | |
| multiple | multiple | 可以多选文件提交 |
input标签 type的常用属性值
| 类型 | 属性值 | 描述 |
|---|---|---|
| 输入 | text | 输入文字 |
| 输入 | password | 输入密码 |
| 选择 | radio | 单选按钮，多选一 |
| 选择 | checkbox | 复选框 （ 打勾 ） |
| 点击选择文件 | file | 上传文件 |
| 点击 | buttom | 按钮 |
| 点击 | image | 按钮 |
| 表单操作 | submit | 提交，会把数据发送给服务器 |
| 表单操作 | reset | 重置，会清空表单所有数据 |
| 输入 | number | 限制用户必须输入数字类型 |
| 输入 | tel | 手机号码 |
| 输入 | search | 搜索框 |
| 输入 | 限制用户必须输入电子邮件类型 | |
| 输入 | url | 限制用户必须输入网址类型 |
| 选择 | date | 限制用户必须输入日期类型 |
| 选择 | time | 限制用户必须输入时间类型 |
| 选择 | month | 限制用户必须输入月类型 |
| 选择 | week | 限制用户必须输入星期类型 |
| 选择 | color | 弹出窗口选择颜色 |
列表
| 列表 | 标签 | 说明 |
|---|---|---|
| 有序列表 | ol | 无序列表 只允许包含多个 li 标签 |
| 无序列表 | ul | 有序列表 只允许包含 多个 li 标签 |
| 自定义列表 | dl | 自定义列表 只包含 dt、dd 老大为dt 、弟弟为dd 所以 dd必须 跟在dt后面 |
内容标签（H5 新增的语义标签）
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | header | 头部标签，通常包含一组介绍性的或是辅助导航的实用元素 |
| 2 | nav | 导航标签，在当前文档或其他文档中提供导航链接 |
| 3 | article | 内容标签，表示文档、页面、应用或网站中的独立结构 |
| 4 | section | 定义文档的某个区域，没有更具体的语义 |
| 5 | aside | 侧边栏标签，表示一个和其余页面内容几乎无关的部分 |
| 6 | footer | 尾部标签，表示页脚 |
媒体标签
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | audio | 音频 |
| 2 | video | 视频 |
VsCode快捷键
| 快捷键 | 作用 |
|---|---|
| ctrl +n | 新建文件 |
| ctrl+ s | 保存文件 |
| ctrl + z | 撤销 |
| ctrl+shift+z | 恢复撤销 |
| ctrl + 加号 / 减号 | 放大 / 缩小 |
| ctrl + c / v | 复制粘贴一行（不能选中文字） |
| ctrl + x | 删除一行（不能选中文字） |
| alt + ↑ / ↓ | 上下移动一行或多行 |
| alt + shift + ↑ / ↓ | 上下复制一行或多行 |
| ctrl + / | 注释 |
| alt + z | 自动换行 |
| ctrl + tab ( ^+ tab ) | 切换选项卡 |
| ctrl + p ( ⌘ + p ) | 转到文件 |
| F12 | 转到定义 |
| alt + F12 | 查看定义 |
| ctrl + J | 显示/隐藏下方控制台/终端 |
| Ctrl + D (一次或多次) | 光标所在单词+和他相同的都会被选中并出现多个光标，可以同时修改 |
高效编码
| HTML | 说明 & 示例 |
|---|---|
！& html:5 | 快速生成Html 文档的基本结构，包括html,head,meta,body标签 |
标签名 div | p: <p></p>, div: <div></div> |
标签,类名 p.className | div.head: <div class='head'></div> |
标签,类名 #id | p: <p></p>, div: <div></div> |
| 标签 { 标签内容 } | h1{标题}：<h1>标题</h1> |
| 标签 [属性=value] | a[href="#"]{标签}: <a href="#">标签 </a>,可以只有属性 |
| 标签 > 嵌套子元素标签 | li > span {item} : <li><span>item</span></li> |
| 标签 + 兄弟元素标签 | h1 + p <h1></h1> <p></P> |
| 括号分组 (emment) | ( p [class='sel']) > h4 : <p class="sel"></p> <h4></4> |
| 标签 * 数量 | 重复生成 n 个,li{item}* 3: <li>item</li> <li>item</li> <li>item</li> |
| $ 递增计数 | li{ item $* 2： <li>item1</li> <li> item2</li>，两位数就两个$$ |
Chrome快捷键
| 快捷键 | 作用 |
|---|---|
| F5 | 刷新页面 |
| ctrl + 加号 / 减号 | 放大 / 缩小 |
| F12 | 打开/关闭控制台 |
| ctrl +alt +i | 打开/关闭 控制台 |
| ctrl+shift+c | 打开控制台并启动选中元素模式 |
| ctrl + alt + j | 打开控制台并开启 Console 窗口 |
| ctrl + shift + D ( ⌘ + shift + D ) | 切换 DevTools 窗口的展示布局 |
「点赞、收藏和评论」
❤️关注+点赞+收藏+评论+转发❤️，鼓励笔者创作更好的文章，谢谢🙏大家。
