HTML学习笔记（1）

1.常用快捷键

  • win+d---返回桌面
  • win+e---我的电脑
  • win+r---打开运行
  • Alt+tab---切换软件
  • ctrl+tab---切换软件文档
  • F2---重命名
  • F5---刷新

2.认识前端

  1. 前端就是将效果图生成网页，利用HTML+CSS+JS
  2. PC端 移动端
  3. 用户体验

2认识网页

  1. 网页由文字、图片、输入框、视频、音频、超链接等组成；
  2. web标准：W3c组织（万维网联盟）制定
  • html 结构标准---人的身体
  • CSS 表现标准---给人化妆、变得更漂亮
  • Js 行为标准---相当于人在唱歌
  1. 基础班课程
  • html 2天
  • css 7天
  • js 3天
  1. 浏览器
  • 浏览器是一个上网的客户端（软件）。
  • IE、火狐、goole、猎豹、Safari浏览器、Opera
  1. 浏览器内核
  • 渲染引擎
  • IE(trident) 谷歌/欧鹏(blink) 火狐(gecko) 苹果(webkit)
  • 渲染引擎是兼容性我呢提出现的根本原因
  1. 浏览器和服务器
  • IIS web服务器 提供网页浏览服务
  1. URL地址
  • 浏览器向服务器发送请求（通过http协议）
  • http协议：超文本传输协议，也就是浏览器和服务器端的网页传输数据的约束和规范
  • url协议:平时我们写的网址就是url地址
  • url协议：规定url地址的格式
  • 协议规定格式： scheme://host.domain:port/path/filename
  • scheme: 定义因特网服务的类型 。常见的就是http
  • host： 定义域主机（http 的默认主机是www）
  • domain: 定义因特网域名 比如：w3school.com.cn
  • :port 定义端口号（网页默认端口 :80）
  • path: 网页所在服务器上的路径
  • filename: 文件名称

4认识HTML

  1. Hyper text markup language
  • 超文本标记语言
  • 超文本：超链接。（实现页面跳转）
  1. HTML结构标准
<!doctype html>    声明文档类型
 <html>             根标签
 <head>             头标签：用户只能看见标题
 <title></title>    标题标签
 </head>
 <body>             主体标签            
 </body>
 </html>
  • 注：html与htm是一样的。后缀名不能决定文件格式，只能决定打开文件的方式。
  1. HTML标签分类
  • 单标签： <!doctype html>
  • 双标签：
  1. HTML标签关系分类
  • 包含（嵌套关系）---
  • 并列关系---
  1. 开发工具：
  • Dw 历史悠久
  • Sublime 轻量级 有很多好用的插件
  • Webstorm 重量级 太智能
  • Sublime常用快捷键
  • html:xt+tab---html结构代码
  • ！+tab --- html5标签结构
  • tab---自动补全
  • ctrl+shift+d---快速复制一行
  • ctrl+shift+k---快速删除一行
  • ctrl+鼠标左键单击---集体输入
  • ctrl+h---查找替换
  • ctrl+f---查找
  • ctrl+/---注释
  • ctrl+k+b---快速打开/隐藏侧边栏（查看选项）
  • ctrl+n---快速创建新文件
  • ctrl+l---快速选中一行
  • ctrl+w---关闭当前页面
  • ctrl+shift+上/下箭头---光标定位行，快速整体移动（上下移动）
  • F11 全屏模式
  • 查看-布局---设置页面中显示文档分布
  • 其他快捷键
  • Ctrl+D 选词 （反复按快捷键，即可继续向下同时选中下一个相同的文本进行同时编辑）
  • Ctrl+G 跳转到相应的行
  • Ctrl+J 合并行（已选择需要合并的多行时）
  • Ctrl+L 选择整行（按住-继续选择下行）
  • Ctrl+M 光标移动至括号内开始或结束的位置
  • Ctrl+T 词互换
  • Ctrl+U 软撤销
  • Ctrl+P 查找当前项目中的文件和快速搜索；输入 @ 查找文件主标题/函数；或者输入 : 跳转到文件某行；
  • Ctrl+R 快速列出/跳转到某个函数
  • Ctrl+K Backspace 从光标处删除至行首
  • Ctrl+K+B 开启/关闭侧边栏
  • Ctrl+KK 从光标处删除至行尾
  • Ctrl+K+T 折叠属性
  • Ctrl+K+U 改为大写
  • Ctrl+K+L 改为小写
  • Ctrl+K+0 展开所有
  • Ctrl+Enter 插入行后（快速换行）
  • Ctrl+Tab 当前窗口中的标签页切换
  • Ctrl+Shift+A 选择光标位置父标签对儿
  • Ctrl+Shift+D 复制光标所在整行，插入在该行之前
  • ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找
  • Ctrl+Shift+K 删除整行
  • Ctrl+Shift+L 鼠标选中多行（按下快捷键），即可同时编辑这些行
  • Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）
  • Ctrl+Shift+P 打开命令面板
  • Ctrl+Shift+/ 注释已选择内容
  • Ctrl+Shift+↑可以移动此行代码，与上行互换
  • Ctrl+Shift+↓可以移动此行代码，与下行互换
  • Ctrl+Shift+[ 折叠代码
  • Ctrl+Shift+] 展开代码
  • Ctrl+Shift+Enter 光标前插入行
  • Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换
  • Ctrl+Z 撤销
  • Ctrl+Y 恢复撤销
  • Ctrl+F2 设置/取消书签
  • Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）
  • Ctrl+鼠标左键 可以同时选择要编辑的多处文本
  • Shift+鼠标右键（或使用鼠标中键）可以用鼠标进行竖向多行选择
  • Shift+F2 上一个书签
  • Shift+Tab 去除缩进
  • Alt+Shift+1（非小键盘）窗口分屏，恢复默认1屏
  • Alt+Shift+2 左右分屏-2列
  • Alt+Shift+3 左右分屏-3列
  • Alt+Shift+4 左右分屏-4列
  • Alt+Shift+5 等分4屏
  • Alt+Shift+8 垂直分屏-2屏
  • Alt+Shift+9 垂直分屏-3屏
  • Ctrl+Shift+分屏序号 将当前焦点页分配到分屏序号页
  • Alt+. 闭合当前标签
  • Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑
  • Tab 缩进 自动完成
  • F2 下一个书签
  • F6 检测语法错误
  • F9 行排序(按a-z)
  1. 设置默认浏览器
  • Chrome

5标签

单标签

  1. 注释标签（ctrl+/）：<!-- <div>3435345</div>> -->
  2. 换行标签：<br />
  3. 水平线标签：<hr />

双标签

  1. 段落标签：<p></p> 特点：上下自动生成空白行。<br />换行没有
  2. 标题标签：<h1></h1>---一个页面里只能出现一次。h变化范围：h1~h6
  3. 文本标签：<font>文本内容</font>
  4. 文本格式化标签：
  • 文本加粗：<strong></strong> <b></b>（少用）
  • 文本倾斜：<em></em> <i></i>（少用）
  • 删除线：<del></del> <s></s>（少用）
  • 下划线：<ins></ins> <u></u>（少用）
  • 注：之所以工作里使用<strong></strong> <em></em><del></del> <ins></ins>，因为更有语义化，可读性更强。
  • <sup></sup> 上标
  • <sub></sub> 下标
  1. 图片标签：
    <img src="" alt="" title="" width="" height="" /> src---图片来源 必写属性
    alt---替换文本 图片不显示的时候显示的文字
    title---提示文本 鼠标放到图片上显示文字
    width---图片宽度
    height---图片高度

6路径

  • 相对路径：相对于文件自身出发，就是相对路径。
    文件和图片（html文档）在同一个目录（文件夹），直接写文件名
    图片（html）在文件的下一级目录，文件夹名称/图片（html）名称
    图片（html）在文件的上一级目录，../图片（html）名称
    图片（html）在文件的上一级的其他目录，../其他目录名/图片（html）名称
    总结：找到下一级目录（文件夹）的图片（文件）用 / ； 跳出当前目录使用../
  • 绝对路径：电脑上绝对路径，一般不用

7超链接

  • <a href="03图片标签.html" title="图片标签" target="_blank">超链接</a> href 去往的路径（跳转的页面） 必写属性
    title 提示文本
    target="_self" 默认值---在在自身页面打开（关闭自身页面，打开链接页面）
    target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）
  1. 锚链接
  • 先定义一个锚点:<p id="sd">
  • 超链接到锚点：<a href="#sd">回到顶部</a>
  1. 空链---不知道链接到那个页面的时候，用空链
    <a href="#">空链</a>
  2. 超链接的优化
  • <base target="_blank"> --- 让所有的超链接都在新窗口打开
  1. 压缩文件下载 不推荐使用
  • <a href="../01-ppt.rar">压缩包</a>

8特殊字符标记

  • ( ) 空格---&nbsp; *
  • < 小于号---&lt; *

大于号---&gt; *

  • & 和号---&amp;
  • ￥ 人民币---&yen;
  • © 版权---&copy;
  • ® 注册商标---&reg;
  • ° 摄氏度---&deg;
  • ± 正负号---&plusmn;
  • × 乘号---&times;
  • ÷ 除号---&divide;
  • ² 平方2(上标2)---&sup2;
  • ³ 立方3(上标3)---&sup3;

9列表

  1. 无序列表
  • <ul><li></li><li></li>……<li></li></ul> 默认为实心小圆圈
  • <ul type="square"><li>今天是星期三</li></ul> 小方块
  • <ul type="disc"><li>今天是星期三</li></ul> 实心小圆圈
  • <ul type="circle"><li>今天是星期三</li></ul> 空心小圆圈
  1. 有序列表
  • <ol type=""><li></li><li></li>……<li></li></ol>
  • type="1,a,A,i,I" 序号类型
  • start="3,c,……" 决定了开始的位置
  1. 自定义列表
<dl>
    <dt></dt>   小标题
    <dd></dd>   解释标题
    <dd></dd>   解释标题
</dl>

10音乐标签

  • <embed src="1.mp3" hidden="true" />
  • src---音乐文件来源
  • hidden="true"/"false"---隐藏显示播放符号

11滚动

  • 页面自动滚动效果之：<marquee>...</marquee>
  • 中间的内容可以为 文字，图片，也可以是由程序生成的文字或图片
  • 属性：height 设置高度 width 设置宽度 bgcolor 设置背景颜色
  • behavior：设定滚动的方式
  • slide--表示一端滚动到另一端，不会重复。
  • scroll： 表示由一端滚动到另一端，会重复。
  • alternate： 表示在两端之间来回滚动。
  • direction： 设置滚动的方向
  • down :向下滚动
  • left:向左滚动
  • right:向右滚动
  • up:向上滚动
  • loop：设置滚动次数，-1：一直滚下去