1-html基础

1. 常用快捷键

• windows + d 返回桌面
• windows + e 我的电脑
• windows + r 打开运行
• alt + table 切换软件
• ctrl+tab 文档之间切换
• F2 重命名
• F5 刷新页面

2. 认识大前端

• 前端就是将效果图生成网页，利用html+css+js
• 目前pc端，移动端成为热门带动前端
• 解决用户体验，前端可以做很好的用户体验

3. 认识网页

• 网页由文字，图片，输入框，视频，音频，超链接等组成
• web标准
  • w3c组织 （万维网联盟）
  • html 结构标准 相当于人的身体 2d
  • css 样式标准 相当于给人化妆 变得更漂亮 7d
  • js 行为标准 相当于人在唱歌 页面变得灵动 3d
• 浏览器
  • 浏览器是上网客户端（软件）。ie，火狐，谷歌，safari，opera
  • 浏览器内核
    • 渲染引擎 渲染引擎决定了浏览器如何显示网页的内容，以及页面的格式信息，渲染引擎不同，导致兼容性问题
  • 浏览器和服务器那点事
    • IIS web服务器（软件） 提供网页浏览服务
• 网址 URL 地址
  • 浏览器向服务器发送请求（通过http协议）
  • http协议： 超文本传输协议，也就是浏览器和服务器端的页面传输数据的约束和规范
  • url协议：平时我们写的网址就是url地址
  • 协议规定格式：
    • scheme://host.domain:port/path/fimename
      • scheme: 定义因特网服务的烈性。常见的就是http
      • host: 定义域主机（http的默认主机是www）
      • domain: 定义因特网域名 比如：w3school.com.cn
      • :port :定义端口号（网页默认端口：80）
      • path：网页所在服务器上的路径
      • filename：文件名称
• 认识html
  • hyper text markup language 超文本标记语言,标准通用标记语言下的一个应用
    • 超文本：就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。
    • 超文本标记语言的结构包括“头”部分和“主体”部分，其中head部分提供关于网页的信息，body部分提供网页的具体内容
  • Html 结构标准

   声明文档类型 
   根标签
       头标签
         标题标签
      
       主体标签 
       
  

后缀名不能决定文件的格式，只能决定打开的方式
* html标签分类
  * 单标签 
  * 双标签   
* html标签关系分类
  * 包含(嵌套关系)  父子
  * 并列  兄弟姐妹
* 开发工具
  * sublime 轻量级 有很多好用的额插件
    * html:xt+tab  html结构性代码
    * tab 补全标签代码
    * ctrl+shift+d 快速复制一行
    * ctrl+shift+k 快速删除一行
    * ctrl+鼠标单击  集体输入
    * ctrl+h  查找和替换
    * ctrl+f  查找
    * ctrl+/ 注释
    * ctrl+l  快速选中一行
    * ctrl+shift+上下箭头 快速上移下移
    * f11 全屏
    * Alt+shift+123 编辑区域显示123列
    * 
  * webstorm 重量级 很智能
* 标签
* 单便签
  * 注释标签 （ctrl+/）
  * 换行标签 
(斜杠有没有都行)
  * 水平线标签 

* 双标签
  * < p>< /p> 段落标签  特点：上下自动生成空白行 < br>换行不会生成空白行
  *  标题标签  h1在一个页面里只能出现一次。
  * 文本内容 文本标签 
  * < strong >鱼缸 < b>< b/> 字体加粗  
  * < em> < i> < /i> 文本倾斜
  * < del>  删除线
  * < ins> < u>ss< /u> 下划线ss标签
  注意：之所以工作中使用< strong>< /strong> < em>< /em> < del> < /del>   < ins>< /ins> 是因为更有语意化  
  * `` 
    * alt：图片不显示的时替代文本，对于残疾人，alt属性是他们了解图片的唯一方式  
    * str:   图片的来源   必写属性
    * title：鼠标在图片上时显示的文本
    * width：设置图片的宽度 如果只设置宽度等比例缩放
    * height：设置图片的高度 只设置高度等比例缩放
* 路径
 * 相对路径
   * 文件和图片在同一个文件夹，直接写文件名即可，如果
   * 文件和图片再下一级目录里，文件夹名称+/+图片名称
   * 文件和图片在上一级，../+图片名称
   * 图片在文件的上一级的其它目录中， ../其它目录/图片名称
 * 绝对路径
* 超链接
 * `` 
    * href：需要调整的页面  必写属性
    * title： 鼠标经过显示的文字 一般不写
    * target: _blank _self  
        * _self为默认值,关闭自身页面，打开连接页面  
        * _blank 自身页面不关闭，打开新页面
    * href="#" 空连接，还会链接到自己本身
    * 压缩包  压缩文件下载
    *  超链接优化写法  让当前页面所有的超链接都在新窗口打开
* 锚连接
* 先定义一个锚点 `
`
* 超链接到锚点 `< a href=@"#sd">`
* 特殊符号
   ![WX20170427-180340.png](http://upload-images.jianshu.io/upload_images/850768-566e788bbe08cb68.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
* 列表
* 无序列表 
```

    

    


```
tpye="square" 小方块
type=“disc‘ 实心小圆圈
type=”sircel“ 空心小圆圈

* 有序列表
  ```

      

      


```
type="a,1,A,I,i" type的值可以为 a,1,A,I,i   start决定了开始的数字
* 自定义列表
```

        

        


```
* 音乐标签
``
* 滚动

![WX20170427-181955.png](http://upload-images.jianshu.io/upload_images/850768-c47d1f5f79fe6c56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)