前端第一天

网页组成部分：

文字、图片、音屏、视频.....

1. 认识浏览器：网页显示、前端运行平台
   浏览器渲染页面：渲染引擎（浏览器内核）
   渲染引擎的不同，导致解析相同的代码时的速度、性能、效果也不同
2. web标准：如果浏览器的内核不同，使得代码显示的一致性
   html:网页的结构
   css:网页的表现（样式）
   JavaScript:网页的行为（交互）
3. HTML（Hyper Text Markup Language）:超文本标记语言
   注释：代码的解释说明
   快捷键：command (ctrl) + /
   1. html 标签的结构：
      <开始>内容</结束> --- > 双标签，有开始又结束
   2. html标签与标签之间的关系：
      1. 父子关系《嵌套关系》
         `
         
      ` 2. 兄弟关系《并列关系》 ` `
   3. 排版标签：
      1. 标题标签：h系列 （h1 - h6）
         语义：h1 - h6 逐渐增加
         快捷键：ctrl + b (mac失效)-- > 同时选定
      2. 段落标签：
         
         语义：段落
         特点：
         独站一行
         有空行
      3. 换行标签：
         
         语义：换行
         水平分割线：

         ---

      4. 单标签
         在页面中显示一条水平线
         文本格式化标签
         加粗：b、strong
         下划线：u、ins
         倾斜：i、em
         删除线：s、del
         语义：突出重要性的前调语境 （后者）
      5. 媒体标签
         图片标签
         特点：
         单标签
         img标签需要展示效果就要添加对应的效果，就要在标签中添加属性,属性之间用空格隔开
         src : 图片的路径
         alt : 图片失效后的名称 (替换文本)
         title : 提示文本，在鼠标悬停时候的提示
         width和height 宽度和高度（数值）:这两个属性工作中只需要提供一个，另一个会等比缩放
         注意点；
         1. 如果只设置了width或者height中的一个，另一个没设置的话会自动等比例缩放
         2. 如果同时设置了width和height两个，若设置不当此时图片可能会变形
   4. 路径：页面需要加载图片，需要先找到对应的图片
      1. 绝对路径：
         指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径 （mac和linux是从/开始）
         网址也叫做绝对路径
      2. 相对路径：
         从当前文件开始出发找目标文件的过程
         同级："./" or "文件名"
         上级：上一级文件夹名/目标文件名
         下级：“../”返回上一级
   5. 音频标签 ： <audio src="" controls>
      1. 属性：
         src :音频的路径
         controls:显示播放的控件
         autoplay:自动播放 (部分浏览器不支持)
         loop:循环播放
   6. 视频标签 <video src="">
      1. 属性：
         src : 视频的地址
         controls:显示播放控件
         autoplay:自动播放（谷歌浏览器中要配合muthed静音播放）
         loop：循环播放
   7. 链接标签 <a href=""></a>
      1. 属性：
         href :跳转的地址 【注意：如果不知道跳转地址添加：# （空）】
         target:目标打开的形式
         _self:在原网页直接跳转，覆盖原网页
         _blank: 新开一个网页打开
   8. 列表标签：
      1. 无序列表：没有顺序 （显示圆点标识）
         ul :整个无序列表
         li:填写每个内容，在ul标签里面
         注意事项：
         1. ul标签中只允许包含li标签
         2. li标签可以包含任意内容
      2. 有序列表：有顺序
         ol:整个有序列表
         li:填写每个内容，在ol标签里面
         注意事项：
         1. ol只能包含li标签
         2. li标签里可以包含任意的内容
      3. 自定义列表
         dl：表示自定义列表的整体
         dt:表示自定义列表的主题
         dd：表示自定义列表针对主题的每一项内容
         注意事项：
         1. dd前会默认有一位缩进
         2. dl标签中只允许包含：dt/dd
         3. dd中可以包含任意的内容
   9. 表格标签
      1. table:表格整体，包含tr/td
         tr:表格的每行,包裹td
         td:表格单元格，可以用于包裹内容
         注意事项：table>tr>td
      2. 表格相关的属性：
         border :表格的边框线
         width:表格的宽
         height:表格的高
         注意：实际开发中针对样式的效果推荐使用css设置
      3. 表格标题和表头单元格标签 :表头（加粗效果） :表头标签，在table标签下
      4. 表格的结构标签：让表格的内容结构分组，突出表格不同部分（头，主，底），使得语义更加清晰
         thead:头部
         tbody:主体
         tfoot:底部
      5. 合并单元格
         水平合并一个单元格（跨行合并）
         rowspan：跨列合并，将多余的单元格水平合并
         垂直合并一个单元格（跨列合并）
         colspan : 跨行合并，将多行的单元格垂直合并
         注意事项：只能合并同结构内的单元格
   10. 表单标签：登录、注册、搜索功能使用
       1. input系列标签
          input:可以通过type属性值的不同，展示不同的效果
          type属性值：
          text:文本框，用于输入单行文字
          属性名：placeholder：站位符。提示用户输入内容
          password：密码框
          属性名：placeholder：站位符。提示用户输入内容
          radio：单选框，用于多选一
          name:分组。用于相同name属性的值单选框为一组
          checked：默认选定
          checkbox:多选框，用于多选
          checked:默认选定
          file:文件选择，用于上传文件
          multiple：上传多个文件
   11. 表单域标签：<form action="提交地址"></form> （下述按钮要再表单域标签内）
       1. submit:提交按钮，用于提交
          value:添加按钮提示文字
          reset:重置按钮
          value:添加按钮提示文字
       2. button:普通按钮，默认无功能，之后可以配合js添加功能
          value:添加按钮提示文字
          submit:提交按钮
          reset:重置按钮
          button:普通按钮