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：一直滚下去

HTML基础学习笔记（1）的更多相关文章

  1. 【C#编程基础学习笔记】4---Convert类型转换

    2013/7/24 技术qq交流群:JavaDream:251572072  教程下载,在线交流:创梦IT社区:www.credream.com [C#编程基础学习笔记]4---Convert类型转换 ...

  2. 【C#编程基础学习笔记】6---变量的命名

    2013/7/24 技术qq交流群:JavaDream:251572072  教程下载,在线交流:创梦IT社区:www.credream.com [C#编程基础学习笔记]6---变量的命名 ----- ...

  3. 1.C#基础学习笔记3---C#字符串（转义符和内存存储无关）

    技术qq交流群:JavaDream:251572072  教程下载,在线交流:创梦IT社区:www.credream.com ------------------------------------- ...

  4. Java基础学习笔记总结

    Java基础学习笔记一 Java介绍 Java基础学习笔记二 Java基础语法之变量.数据类型 Java基础学习笔记三 Java基础语法之流程控制语句.循环 Java基础学习笔记四 Java基础语法之 ...

  5. Mysql数据库基础学习笔记

    Mysql数据库基础学习笔记 1.mysql查看当前登录的账户名以及数据库 一.单表查询 1.创建数据库yuzly,创建表fruits 创建表 ) ) ,) NOT NULL,PRIMARY KEY( ...

  6. 0003.5-20180422-自动化第四章-python基础学习笔记--脚本

    0003.5-20180422-自动化第四章-python基础学习笔记--脚本 1-shopping """ v = [ {"name": " ...

  7. Java基础学习笔记（一）

    Java基础学习笔记(一) Hello World 基础代码学习 代码编写基础结构 class :类,一个类即一个java代码,形成一个class文件,写于每个代码的前端(注意无大写字母) XxxYy ...

  8. C#RabbitMQ基础学习笔记

    RabbitMQ基础学习笔记(C#代码示例) 一.定义: MQ是MessageQueue,消息队列的简称(是流行的开源消息队列系统,利用erlang语言开发).MQ是一种应用程序对应用程序的通信方法. ...

  9. handlebars.js基础学习笔记

    最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:h ...

  10. 基础学习笔记之opencv(6)：实现将图片生成视频

    基础学习笔记之opencv(6):实现将图片生成视频 在做实验的过程中.难免会读视频中的图片用来处理,相反将处理好的图片又整理输出为一个视频文件也是非经常常使用的. 以下就来讲讲基于opencv的C+ ...

随机推荐

  1. jianx vtritualbox 虚拟镜像的体积

    https://blog.csdn.net/ganshuyu/article/details/46360271

  2. css：margin和padding的百分之使用

    #app { position: fixed; width: 94%; height: 100%; background: pink; padding: 0px 3% 0px 3%;} 如上代码,最终 ...

  3. 2339 3.1.1 Agri-Net 最短网络

    Description 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助. 约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路共享 ...

  4. Python爬虫示例

    #!/usr/bin/python #coding:utf8 import re import urllib def gethtml(url): page=urllib.urlopen(url) ht ...

  5. $event Object angularjs

    You can pass the $event object as an argument when calling the function. The $event object contains ...

  6. C#保留小数

    四舍五入保留 float a=0.188f; double b=System.Math.Round(a,2);//output: 0.19 直接截取: float f=0.188f; int i=(i ...

  7. Django添加ckeditor富文本编辑器

    源码 https://github.com/django-ckeditor/django-ckeditor 通过pip安装. pip3 install django-ckeditor pip3 ins ...

  8. JAVA字符串格式化-String.format()的使用【转】

    原文地址:https://blog.csdn.net/lonely_fireworks/article/details/7962171 常规类型的格式化 String类的format()方法用于创建格 ...

  9. webpack 中使用 vue-router 注意

    //render 会把el指定的容器中所有的内容都清空把#app也会去掉 都在c(app)其中的app组件中展示 所有router-link router-view要写在app这个组件里面   //A ...

  10. Eclipse 合并GIT分支

    合并GIT分支: 1.  切换到主分支: 2.  右击项目——Team——Merge…: 3.  在弹出的Merge框中选择要合并的分支——Merge: 4.  合并后如果出现冲突,右击项目——Tea ...