李洪强和你一起学习前端之(1)Html基础

1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试)

Ctrl + c 复制

Ctrl + v 粘贴

Ctrl + a 全选

Ctrl + x 剪切

Ctrl + s 保存

Ctrl + z 返回上一步

Alt +tab 切换软件

Ctrl +tab 内部的切换

Windows +d 返回桌面

Windows + r(notepad) 运行窗口

Windows + e 打开本地磁盘

2 认识大前端

2.1解决用户体验

2.2Web(网页) 移动端

2.3态度

多做练习

3 认识网页

3.1网页的组成

文字,图片,按钮,输入框,视频....元素组成

3.2Web标准

W3c(万维网联盟)

结构标准 html

表现标准 Css

行为标准 js

3.3 浏览器介绍

浏览器就是用来浏览网页的软件

360,百度

内核: 渲染引擎

3.4浏览器和服务器之间的那点事

Http: 浏览器和服务器之间传输消息的一种规范

https: 加密处理

Url地址:

url协议: 平时我们写的地址就是url地址

url协议: 规定url地址的格式

协议规定格式: scheme://host.domain.port/path/filename

scheme: 定义因特网服务的类型,常见的就是http

host: 定义域主机(http的默认主机是www)

dimain: 定义因特网域名,比如: w3school.com.cn

port : 定义端口号(网页默认端口: 80)

path: 网页所在服务器上的路径

filename: 文件名称

4 认识 html

4.1概念

Hyper text markup language(超文本标记语言)

超文本: 能够实现网页跳转的文本(超链接)

标记:html中的标签

4.2 Html结构

-----------------------------------

<!Doctype　　html>

<html>　　根标签

　　<head>

　　</head>

</html>

-----------------------------------

<!Doctype　　html>　　文档类型

<head></head>　　　　html文档的头部分

<title></title>　　　　　网页的标题

<body></body>　　　　html结构的主题部分

Htm

Html

后缀名决定文件的打开方式

4.3 标签的分类

单标签: 只有开始标签没有结束标签

例如: <!Doctype　　html>

双标签:有开始标签和有结束标签

例如: <body></body>

4.4 标签关系分类

并列关系(兄弟)

嵌套关系(包含)

<head>

</head>

目前主流的开发工具

4.5显示代码结构:

新建文件

4.5常用的快捷键介绍

Ctrl + shift + D　　快速复制

Ctrl + L　　　　　　快速选中

Ctrl + 鼠标左键　　集体输入

Ctrl + h　　　　　查找替换

Ctrl +f 　　　　　　标签查找

Ctrl + shift + 上箭头(下箭头)　　整体移动

------------------------------------------------------------

Sublime 快捷键

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)

F11 全屏模式

5 Html标签介绍

5.1 单标签

5.1文本注释标签

Ctrl + /

文本换行标签

天青色等烟雨<br>而我在等你

横线标签

<hr>

5.2双标签

段落标签

<p>

　　这是一行文字

</p>

<p>

　　这是一行文字

</p>

标题标签

注意: 标题标签只能取到数字 1-6

<h1>这是一个标题</h1>

<h2>这是一个标题</h2>

<h3>这是一个标题</h3>

<h4>这是一个标题</h4>

<h5>这是一个标题</h5>

<h6>这是一个标题</h6>

文本标签

<font size = "10" color = "red">优美的文字</font>

文字格式化标签

文字加粗提示:

　　该减肥了

</strong>

文字斜体:

文字删除线

文字下划线标签

5.3图片标签

<img>

属性:

Src: 设置显示图片(图片名称或者图片路径)

Title: 用来设置鼠标放到图片上显示的文字

Alt: 当图盘无法正常显示的时候,对图片的描述

Width: 用来设置图片宽度

Height: 用来设置图片高度

5.4相对路径

当图片和文件(html)在同一文件夹中

Src属性直接写上图片名称即可

当图片在文件的下一级目录中

Src属性中写上图片所在文件夹名 + "/" + 图片名称

当图片在文件(html)的上一级目录中

Src属性中写../图片所在文件夹名 + "/" + 图片名称

5.5绝对路径

凡是带有磁盘路径的,都是绝对路径或者带有网站地址的也是绝对路径

例如: D:\a\1.png　　　　　　　　www.baidu.com/images/1.png

5.6超链接(a)

页面跳转:

属性:

Title: 当鼠标放在超链接上显示的文字

target = "_self" 默认值网页在当前页面中打开

target = "_blank"网页在新窗口中打开

优化的写法:

<head>

</head>

5.7

任何一个标签设置id属性,并取值

给a标签设置href属性"#id名称"

文字和图片都可以设置超链接

5.8简单的下载功能

a标签中给href属性设置一个压缩文件,即可实现下载功能

5.9超链接不跳到转任何页面

5.10 特殊字符

　　　　　　空格符　　　　　　 &nbsp

<　　　　　　小于号　　　　　　&lt　　　　　　

>　　　　　　大于号　　　　　　&gt

&　　　　　　和号　　　　　　　&amp

￥　　　　　　人民币　　　　　　&yen

®　　　　　　注册商标　　　　 &reg

℃　　　　　　摄氏度　　　　　 &deg　

+-　　　　　　正负号　　　　　&plusmn

X 　　　　　　乘号　　　　　　&times

➗　　　　　　除号　　　　　　 &divide

2　　　　　　平方号2　　　　　&sup2

3　　　　　　平方3　　　　　　&sup3　

6 列表

6.1 无序列表(ul)

<ul>

</ul>

属性介绍:

type = "square"　　　　　　小方块显示

type = "circle"　　　　　　　　小圆圈

6.2 有序列表(ol)

<ol>

</ol>

属性:

type = "a" start = "3"

type a A i I

start　　表示显示从第几个开始

6.3自定义列表

<dl>

　　<dt></dt>小标题

　　<dd><dd>列表项

</dl>

<dl>

</dl>

播放音乐:

页面自动滚动效果之 <marquee>...</marquee>

<marquee

behavior = "slide"

direction = "up"

width = "100"

height = "100"

bgcolor = "red"

</marquee>

中间的文字可以是文字或者图片,或者是由程序生成的图片或者文字

属性的介绍:

width 设置宽度

height 设置高度

bgcolor 设置背景颜色

behavior 设置滚动的方式{

alternate : 表示在两端之间来回滚动

scroll 表示从一端滚动到另一端,会重复

slide 表示从一端滚动到另一端,不会重复

}

dircection: 设置滚动的方向{

down 向下滚动

up　　向上滚动

left 　　向左滚动

right　　向右滚动

loop 设置滚动次数 (-1 代表一直滚下去)

}

附: 图片在html上下模型

好了,亲爱的们,今天的学习就到这里了,这些是最基础的,相信,千里之行,始于足下,只要

我们不断的坚持,早晚会成为大牛的.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　李洪强

　　　　　　　　　　　　　　　　　　　　　　　　2017年3月13日 19:59:55 北京

李洪强和你一起学习前端之(1)Html基础的更多相关文章

李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距复习昨天的知识 1.1css书写位置: 内嵌式写法外联式写法 <link href = "1.css" rel = ...
李洪强和你一起学习前端之(5)css书写位置优先级和伪类
亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...
李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素作 ...
李洪强和你一起学习前端之(8)CSS复习
今天是2017年3月24日周五每一天都是余生当中最好的一天,珍惜当下. CSS基础复习 1 复习 1.1Css第一天 css层叠样式表基础选择器标签选择器 p{属性: 值;} 类选择器 .自定义 ...
李洪强和你一起学习前端之(7)定位盒子 css可见性滑动门案例
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
李洪强和你一起学习前端之(4)HTML5介绍
1.1认识HTML5 html的版本: html4 Xhtml1.0 目前: html5是最高的版本再怎么变化,无非是多了一些标签而已,但是不单单是提供了一些标签比如: 开发网页游戏我们可以开发 ...
李洪强iOS开发之-环信03_集成 SDK 基础功能
李洪强iOS开发之-环信03_集成 SDK 基础功能集成 SDK 基础功能在您阅读此文档时,我们假定您已经具备了基础的 iOS 应用开发经验,并能够理解相关基础概念. SDK 同步/异步方法区分 ...
李洪强iOS经典面试题144-数据存储
李洪强iOS经典面试题144-数据存储数据存储 sqlite中插入特殊字符的方法和接收到处理方法. 除'其他的都是在特殊字符前面加"/",而 ' -> '' .方法:k ...

随机推荐

Android-25种开源炫酷动画框架
前言忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮助,此博文介绍的都是UI上面的框架,接下来会有 ...
Object.keys()的简单理解
1.对象的话返回属性名 var obj = {'a':'123','b':'345'}; console.log(Object.keys(obj)); //['a','b'] var obj1 = { ...
关于weblogic server对docker的支持
Docker是目前比较热门的一个技术话题,WebLogic Server从12.1.3版本支持Docker,但对于操作系统和内核有一定的要求,具体参考下表我曾在ubuntu,Oracle Enter ...
15.同步类容器Vector
同步类容器1 1.线程都是安全的. 2.在某些场景下需要加锁来保护“复合操作” a.迭代:反复去访问元素.遍历完容器所有的元素 b.跳转:根据下标制定去访问查找元素 c.条件运算 3.复合操作在多线程 ...
Tomcat9 访问 Manager App
1.介绍在配置好Tomcat,我们往往需要访问Tomcat的Manager以及Host Manager.就需要在tomcat-users.xml中配置用户角色来实现.在地址栏输入:localhost ...
利用squid配置代理服务器-Fedora 19
我的系统: x86_64位Feodra 18 # yum install squid 不需要用户名密码认证的配置方式 edit /etc/squid/squid.conf # # Recommend ...
[Functional Programming Monad] Combine Stateful Computations Using Composition
We explore a means to represent the combination of our stateful computations using familiar composit ...
在weblogic上配置数据源
转自:http://blog.csdn.net/weijie_search/article/details/2756585 旁白这是在weblogic9.0+mysql5.1的环境下配置的数据源.其 ...
记一次MySQL找回用户数据
事情经过有天,我们公司外区的一个销售C说他8月3号以前的工作流记录找不到了.问清缘由,原来是更新了微信号(我们公司的工作流是基于企业微信开发的).经过分析,微信号和流程数据并没什么关系,所以初步得出 ...
c# 句柄数不断攀升的解决方案
句柄只是用来标识应用程序中的不同对象和同类中的不同的实例的一个数字,通常情况下,句柄值对普通用户毫无用处,但是句柄数量却可以间接反映出一个程序里产生的对象实例的多少.句柄数越多,代表程序里new 出来 ...

李洪强和你一起学习前端之(1)Html基础

李洪强和你一起学习前端之(1)Html基础的更多相关文章

随机推荐

热门专题