Html+css
sublime 常用快捷键的使用：
自动生成先写head 再摁tab键 自动生成标签
Ctrl+p查找文件（尤其在项目中查找更为方便）
Ctrl+r要文件中查找函数，如果输入:则查找行号
Ctrl+L选择整行(按住-继续选择下行)
Ctrl+/单行注释
Ctrl+Shift+/块注释
Ctrl+M光标移动至括号内开始或结束的位置
Ctrl+Shift+[折叠代码
Ctrl+Shift+]展开代码
Tab缩进
Shift+Tab去除缩进
Ctrl+Z撤销当前操作
ctrl+shift+d 快速复制当前行代码并插入到下一行
Alt+shift+2分屏 +1关闭
Html:
标签：
一对标签，只能有一个
告诉搜索
引擎爬虫，我们的网站是关于什么内容 en = 英文 zh =中文结构化标签：思想
人看不到的
设置中文字典
(字符集，识别各个国家的语言) >
不然会乱码！
淘宝网 ，呸! - 锐客网 [点击并拖拽以移动]
人能看到的
Life is shift！！！（美好的生活！）（不识别）段落标签 成段落this is paragraph!!!
标题：标题1到6逐次减小 加粗字体
加粗
斜体又加粗又斜体：一个套一个
举个例子
50 （50）划掉
容器：绑定操作
举例：a
b
c
d
e将属性提取到容器 简化操作，捆绑作用a
b
c
d
e
重点：div 容器 可换行 ，span 容器 不可换行
标签：
有序列表;
- marvel
- 速8
- 返老还童
文章图片
有序列表;
- marvel
- 速8
- 返老还童
文章图片
五种序号：type=i I 1 a A
type = 1 reversed = "reversed"倒着排序
从某个数开始排序 type = "1" start="2"
无序列表 unorder list
抽屉 父子结构很好 做导航栏 所有功能子项构成一个大功能
"square"方块 "circle"
- 草莓
- 苹果
文章图片
单标签 加入图片
文章图片
alt="这是范爷" title="this is xxx">
alt 图片占位符
title 图片提示符
1.网上url 鼠标右键 在新标签打开图片 图片的地址
2.本地的绝对路径：src = "D:/a/b/c/123.jpg ";
D:/a/b/c/123.jpg
3.本地的相对路径:直接写123.jpg
D:/a/b/lesson.html
D:/a/b/123.jpg
在一个路径下
a标签：anchor
1.超链接
target="blank"(在新标签打开此网址)>www.baidu.com
文章图片
放图片 被引用
a标签里面的东西给顾客看的
a标签里面可以放图片和网址
2.锚点
锚 记住位置 回到标记位置
3.打电话：用页面模式打电话
打电话
4.协议限定符
1)双标签
<标签名> 内容 该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
| 1 |
比如 <body>我是文字 |
<标签名 />单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。
| 1 |
比如<br /> |
1)嵌套关系
| 1 |
<head><title> |
文章图片
2)并列关系
| 1 2 |
<head> |
文章图片
例题：
请问下列哪个标签是错误的？ A B C - 锐客网 D建议： 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。
在页面中输入 以下2种单词中的一种
1. html: 5
2. !
在sublime里面然后按下tab键盘即可生成HTML骨架
1.3 文档类型
| 1 |
|
标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。
?注意： 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。
1.4 字符集
| 1 |
<meta charset="UTF-8"> |
gb2312 简单中文 包括6763个汉字
BIG5 繁体中文 港澳台等用
GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符
记住一点，以后我们统统使用 UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。
1.5 HTML标签的语义化 所谓标签语义化，就是指标签的含义。
为什么要有语义化标签?
- 方便代码的阅读和维护
- 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
- 使用语义化标签会具有更好地搜索引擎优化
语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
不管是谁都能看懂这块内容是什么。
遵循的原则：先确定语义的HTML ，再选合适的CSS。
2 HTML标签 首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。
HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。
2.1排版标签 排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。
1)标题标签 (熟记)
单词缩写： head 头部. 标题
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即
| 1 |
<h1>、<h2>、<h3>、<h4>、<h5>和<h6> |
其基本语法格式如下：n为1~6
| 1 |
<hn>标题文本 |
2)段落标签( 熟记)
单词缩写： paragraph 段落
在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是
| 1 |
<p> 文本内容 |
3)水平线标签(认识)
单词缩写： horizontal 横线
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，就是创建横跨网页水平线的标签。其基本语法格式如下：
| 1 |
<hr />是单标签 |
例题： 新闻页面
文章图片
4)换行标签(熟记)
单词缩写： break 打断 ,换行
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
| 1 |
<br /> |
5)div span标签(重点)
div span 是没有语义的 是我们网页布局主要的2个盒子
div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。
span, 跨度，跨距；范围
语法格式：
| 1 |
<div> 这是头部 |
文章图片
文章图片
b i s u 只有使用 没有 强调的意思 strong em del ins 语义更强烈
2.3 标签属性 属性就是特性 比如 手机的颜色 手机的尺寸 ，总结就是手机的。。
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：
| 1 |
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 |
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。
采取 键值对 的格式 key="value" 的格式
比如:
| 1 |
<hr width="400" /> |
值 是 400
建议： 尽量不使用 样式属性。
2.4 图像标签img (重点) 单词缩写： image 图像
HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签
文章图片
文章图片
注意要复制图片的地址带.jpg
文章图片
文章图片
2.5 链接标签(重点) 单词缩写： anchor 的缩写 。基本解释 锚, 铁锚 的
在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：
| 1 |
<a href="https://www.it610.com/article/跳转目标" target="目标窗口的弹出方式">文本或图像 |
target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
文章图片
注意：
1.外部链接 需要添加 http:// www.baidu.com
2.内部链接 直接链接内部页面名称即可 比如 < a href="https://www.it610.com/article/index.html"> 首页
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="https://www.it610.com/article/#")，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
1)锚点定位 （难点） 通过创建锚点链接，用户能够快速定位到目标内容。 创建锚点链接分为两步：
1.使用“a href=https://www.it610.com/article/”#id名>“链接文本"创建链接文本。
?
2.使用相应的id名标注跳转目标的位置。
文章图片
打电话：
文章图片
2)base 标签
base 可以设置整体链接的打开状态
base 写到之间
文章图片
2.6 特殊字符标签 （理解）
文章图片
2.7 注释标签 在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下： ?
| 1 |
|
注释重要性：
文章图片
2.8 form标签： form表单 form是一个复杂的系统标签，其内部又可包含很多的一些输入标签 例如input 输入文本标签checkbox 多选标签等等 form表单有几个属性我们需要注意一下 1：action属性，里面写的是url链接，接就是表单提交的地址 2：method属性，里面写的是数据提交的方式，可以写入get或者post 3：enctype属性，提交数据的编码格式 form表单中的标签的前后台交互 form表单被我们应用在前后台交互的环节的，里面的值可以在后台通过某些key取出来
下面就来讲解不同标签取值的方法
1. input 标签
input标签我们最为常见，里面有三个属性比较重要
a. type 他是代表input的类型
b. name 他就是后台取值的依据(key)
c. val 他是我们输入的值，也是后台需要的值
然后我们根据type的类型，又可以把input进行细分
a. text 表示普通的文本，明文输入
b. password 输入的也是文本，密文输入
c. number 输入的是数字，不是数字不让输入
d. submit 提交按钮，提交form表单的内容
e. button 普通的按钮
f. radio 单选框，我们需要注意的是单选框的所有的name值必须相同
如果name不相同，就说明不在同一个选择方位，也就不存在单选，然后想要在后台取到他的值，
你必须在定义的时候给附上一个值给value，这样才能取到值
g. checkbox 复选框，内容和单选框一样
h. file 选择文件，可以选择文件提交给后台
type="image"：图像按钮
以上基本是input的所有类型，需要注意几个点
1.取值都是通过name进行取值，所以必须给name赋值
2.文本类型想要附上初始值，直接在value中加入值就可以
3.选择框如果想要默认选中谁，那就在谁的标签中加入checked属性
文章图片
2. select 标签
select标签是一个下拉框的形式让用户进行选择选项
所以select标签中必须包含option标签才能显示属性
形式为：
然后select中有全局属性name，这个name是后台又来进行取值的
每个option标签的文本内容是显示给用户看的，我们需要取的是option标签中的value属性，所以在开始必须给option的value赋值
后台通过select的name取值，直接取到的就是对应option的value
如果我们向让他默认选择某个option，可以在option标签中加入selected属性，如果都不加，默认是显示第一个
文章图片
3. button 按钮标签
新出的标签，与input中type为button的按钮一样
4. textarea 文本框标签
与input中的text一样都是输入文本的，但是textarea标签没有字数的限制，并且输入框可以拖拉。
method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。
单选框：
1.贝克汉姆
2.莱昂纳多
让名字为同样的，这样才是同一个题，两个符合单选关系，不然两个多能选
文章图片
有名，有值才能发送 form：发送数据 能不能提交？ 不能
发送数据：数据名称（数据主题），数据值（数据内容），
文章图片
文章图片
提交后，浏览器发生改变
文章图片
头文件：里面写告诉浏览器的信息
文章图片
css:
文章图片
主流浏览器必须有独立研发的内核 shell部分内核
IE 主流浏览器 Firefox Google chrome
文章图片
引入css方式 1.
行间样式：（相当于纹身）优先级高
在div <属性位置 style（样式）= “css代码”>css代码可以放进style
2.
页面级
文章图片
3.外部css文件 实用！最重要建立一个新文件 css文件在head中引入link标签 href 放地址 外部css文件 实用！最重要建立一个新文件 css文件在head中引入link标签 href 放地址
id选择器：一个元素只能有一个id值 一一对应！身份证！一人只有一个
先写#+id值 {
写css代码
}
文章图片
class 选择器 名字不能是数字 .class名{
}
id选择器是一一对应 但是class是多对多
文章图片
也可以1对多：
文章图片
标签选择器 :
div都有这个效果特点 全部！
文章图片
权值：
文章图片
256进制
文章图片
谁的权值大用谁的方法
文章图片
父子选择器 不用必须用标签,用class或者id都行
文章图片
文章图片
直接子元素选择器：
div>em下一级的em标签
并列选择器： div.demo{
}
文章图片
css代码： 格式：属性名:属性值+分号
字体： font-size 字体大小 设置的字体的高
font-weight:宽，bold（加粗）100 200 300 400 。。900
font-style:italic(斜体)
font-family:(字体) arial（乔布斯）通用字体
color（设置字体颜色）
1.纯英文单词 开发不行
color：green
2.颜色代码
color：#f40
文章图片
如果每两位是重复的，可以化简为三位
比如ff4400 简写：f40
3.颜色函数
rgb（0-255,0-255,0-255） transparent 透明色
border： border给一个容器加一个盒子，一个外边框 复合属性
border：（1px）粗细 （solid）展示形式 （black）颜色
border：border-width border-style border-color
文章图片
文章图片
文章图片
文章图片
定位em的方法有
文章图片
简化代码的方式：
文章图片
文章图片
从左向右，还是从右向左快： 从右向左找，快
文章图片
text-align :center; 文本居中显示
left：right左右显示
line-height：30px 行间距 单行文本所占高度
如果等于 16 无空隙
单行文本水平垂直居中：容器高度等于文本高度（line-height=height）
文章图片
文章图片
text-indent: 2em（一个字节） 首行缩进
tex-decoration：line-through 划线
underline 下划线
cursor（光标定位置：让光标变样式）：放在什么位置有什么的样子有小手，pointer小问号 help
文章图片
伪类选择器
a:hover{
当鼠标移动到它的范围内，才会加入css样式
background-color：orange
}
文章图片
文章图片
标签归类： 行内元素：
标签可定义锚
表示一个缩写形式
定义只取首字母缩写
字体加粗
可覆盖默认的文本方向
大号字体加粗
换行
引用进行定义
定义计算机代码文本
定义一个定义项目
定义为强调的内容
斜体文本效果
文章图片
文章图片
开发经验：
可以先构造方法，先写css 再写thml
先定义功能
好处：自己定义完，别人也能用
可以引入无数的css文件
文章图片
文章图片
标签可以自定义：
文章图片
文章图片
标签选择器（初始化元素）：
文章图片
通配符：初始化所有标签
因为所有的标签在出生时都会带padding和margin
而通配符会将其全部整没
*{
maigin：0；
padding：0；
}
文章图片
文章图片
文章图片
盒子模型：
文章图片
文章图片
四个的 ：上右下左
三个的：上左右下
两个的：上下左右
盒模型的计算问题：
不加margin
文章图片
文章图片
文章图片
定位：
定位技术：层模型
position：absolute；
lest：100px；坐标
top：100px；
小特点：
脱离原来位置进行定位
relative定位：保留原来位置进行定位
absolute是相对于最近的父级定位（ab，re），如果没有，相对于文档进行定位
文章图片
文章图片
文章图片
原因：absolute是绝对定位，脱离了原来位置的层，到达了一个更高的层，原先位置真空了，所以绿色块能够过去
relative是相对定位：relative是相对于自己的出生位置定位
保留原来位置进行定位，不在原来的层，但是原来的位置不给别人
文章图片
文章图片
文章图片
增加ab绝对定位：
文章图片
绝对定位：
文章图片
相对定位：
文章图片
用relative做参照物，用abl作为定位
因为如果用ab做参照物，其他图片的位置会改变
body标签自带8px
fixde定位技术：随着滚动条动，内容不动（广告）
文章图片
居中
文章图片
z-index：0,1，2,3 谁靠近你
圆：
文章图片
BUG：
父子关系中垂直方向的margin会取最大值，父子粘合在一起
文章图片
解决：bfc
overflow:hidden 溢出部分不显示
改变了渲染规则，让父级触发bfs，改变了margin塌陷问题：
文章图片
浮动模型：float ：left/right
应用： 
文章图片
文章图片
文章图片
问题：
文章图片
文章图片
按理说子级内容大于父级，会将父级撑开，但是现在产生了浮动流，撑不开，可以给父级加上空间，但是不能每次都加的精准且浪费时间，让子级撑开是简单的
文章图片
解决 父级产生浮动流 包不住子集元素 边框包元素，加一个p标签，里面加clear
clear专门用来清除浮动流，只能用p标签
文章图片
文章图片
这种方法不好，因为一般不改html的框架
解决方法二：
文章图片
文章图片
文章图片
细节：
大于容器宽度，...表示
文章图片
文章图片
设置背景图片：
文章图片
将a标签用背景图片展示：
文章图片
文章图片
大公司的网站策略：
当网速不好时，css加载不出来，但是该有的功能必须好使
padding上面可以加背景颜色和图片
文章图片
方法1：
文章图片
方法2：
文章图片
行级元素可以嵌套行级元素
块级可以嵌套任何元素
p标签不可以套块级元素
在一行先是要浮动 然后清除浮动
实操：
一：实现两栏布局
文章图片
文章图片
细节：要将右面黑框让出来一些（margin-right）
文章图片
二：五环 
文章图片
文章图片
三：淘宝栏
文章图片
文章图片
四：淘宝
文章图片
在一行先是要浮动 然后清除浮动
文章图片
文章图片
文章图片
文章图片
同行加小标签
文章图片
文章图片
文章图片
利用浮动构造板块
文章图片
margin：0 auto自适应
摁钮 button
圆角设置 ：border - radious 上右下左 顺时针 20%;
渐变色：
background-image:linear-gradient();
沿着直线 方向参数 （to right）
开始的颜色（#ff9000）结束颜色（ff000）；
加粗：font-weight ：bold
【Html+css】
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 数组常用方法一
- python-安装sublime遇到异常
- 常用git命令总结
- java|java 常用知识点链接
- c#常用网址记录
- 5|5 个 PPT 常用快捷键带你从此走向高效
- Python|Win10下 Python开发环境搭建(PyCharm + Anaconda) && 环境变量配置 && 常用工具安装配置
- iOS常用第三方库
- linux笔记|linux 常用命令汇总（面向面试）