基础笔记【黑马web前端】

更新时间:2019年07月26日 11时17分30秒来源:黑马程序员论坛

一、网页是由什么构成？
1.网页有图片、链接、文字等元素组成；
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
二、常见浏览器
1.IE浏览器
2.chrome浏览器
3.safari浏览器
4.firefox浏览器
5.opera浏览器
6.Edge浏览器
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
三、浏览器内核包括两部分：渲染引擎和js引擎：
1.IE浏览器 ——Trident
2.firefox浏览器 ——Gecko
3.Safari浏览器 ——webkit
4.chrome浏览器 ——chromium/blink
5.opera浏览器 ——blink

android手机使用率最高是webkit内核
ios/win手机使用自身带的浏览器，safari内核/
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
四、WEB标准
1.展示统一内容
2.web标准三层---- 结构(html)用于对网页元素进行整理和分类、表现(css)用于设置网页元素的版式，颜色，文字等外观样式、行为(js)是指网页模型的定义及交互的编写
3.web标准的好处
1>让web的发展前景更广阔
2>内容能更容易识别
3>更容易被搜索引擎搜索
4>降低网站流量费用
5>使网站更易于维护
6>提高页面浏览速度
——————————————————————————————————————————————————————————————————————————————————————————————————————————
五、认识HTML---(超文本标记语言)
1.html的概念------html是超文本标记(标签)语言
2.html标签分类----- 常规元素(双标签)、空元素(单标签)
3.html标签关系----- 主要针对于双标签的相互关系分为两种：1.嵌套关系 2.并列关系
4.html标签语义化-----所有的html标签都是用<>表示
——————————————————————————————————————————————————————————————————————————————————————————————————————————
六、HTML骨架标签
1.<html>    html标签(根标签)
<head> 文档的头部
<titel></title>  文档的标题
<body></body>  文档的主体
</head>
</html>
2.html标签分类
  2.1.常规元素(双标签)    <标签名></标签名>
  2.2.空元素(单标签) <标签名 />
3.html标签关系 (针对于双标签)
  3.1.嵌套关系 (子元素缩进一列)父子级关系
  3.2.并列关系兄弟关系

!DOCTYPE(语言的版本号) html ------表示html5的版本
lang='en'(英文)  -----指定html 语言种类 lang='zh-CN' (中文)
meta charter='UTF-8' -----字符集/ gb2312(简体中文)/big5(中文繁体)/gbk(中文简体/繁体)/UTF-8(包含世界各国语言)

4.html标签的语义化 ------遵循原则：先确定语义的html，再选合适的css。
目的：根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。
优点：
1.方便代码的阅读和维护
2.同时让浏览器或是网络爬虫可以更好的解析，从而更好分析其中的内容
3.使用语义化标签会具有更好地搜索引擎优化
七、常用标签
1.排版标签
1.1、标题标签<h1></h1>
1.2、段落标签<p></p>
1.3、水平线标签<hr />  (单标签)
1.4、换行标签<br />  (单标签)
1.5、div和span标签 <div></div><span></span> 盒子标签
   1.5.1 div  -----一行只能有一个div标签
   1.5.2 span  ------一行可以有多个span标签
2.文本格式化标签
2.1、<b></b><strong></strong>  --b标签只是加粗，strong标签可以加粗还有强调的意思，语义更强烈(XHTML推荐strong)
2.2、<i></i><em></em> --斜体  (XHTML推荐em)
2.3、<s></s><del></del>  --加删除线  (XHTML推荐del)
2.4、<u></u><ins></ins>  --加下划线  (XHTML推荐ins)
3.标签属性
<标签名属性="属性值"></标签名>
4.图像标签img
<img src="图像URL" />
属性                               属性值                                                       描述
src                               URL                                                          图像的路径
alt                               文本                                                          图像不能显示时的替换文本
title                               文本                                                          鼠标悬停时显示的内容
width                            像素(XHTML不支持%页面百分比)             设置图像的宽度
height                         像素(XHTML不支持%页面百分比)             设置图像的高度
border                         数字                                                          设置图像边框的宽度
————————————————————————————————————————————————————————————————
5.链接标签  <a></a>
属性                               作用
href                         用于指定链接目标的url地址(必须属性)
target                      用于指定链接页面的打开方式，其取值有self和_blank两种，其中self为默认值，_blank为新窗口
5.1外部链接需要添加http://
5.2内部链接直接链接内部页面名称即可比如<a href="index.html">首页</a>
5.3如果当时没有确定链接目标时，通常将链接标签的href属性值定义为"#"(href="#")，表示该链接暂时为一个空链接
5.4不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接
6.注释标签  快捷键ctrl + /或者ctrl+shift+/
作用：说明代码的含义，更好的管理代码的可读性，程式是不会对注释的代码进行解析；
7.路径
7.1绝对路径 ---网络地址http://www.baidu.com
7.2相对路径 ---当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同
————————————————————————————————————————————————————————————————————————————————————————
14.锚点定位
作用：实现页面内部的跳转
14.1使用相应的id名标注跳转目标的位置。
14.2使用<a href="#id名">链接文本</a>创建链接文本。
15.base标签
15.1 语法：<base target="_blank" />
   base标签可以设置整体链接的打开状态
   base标签写到<head></head>之间
   把所有的链接都默认添加target="_blank"
16.预格式化文本pre标签
   16.1<pre>标签可定义预格式化的文本-------被包围在<pre>标签元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
17.特殊字符
   17.1是以运算符&开头，以分号运算符；结尾
   17.2它们不是标签，而是符号
   17.3HTML中不能使用小于号"<"和大于号">"特殊字符，浏览器会将它们作为标签解析，若要正确显示在HTML源代码中使用字符实体
   (<a href="#">more >&gt</a>)
——————————————————————————————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————————————————————————————
八、表格table
1.表格作用：常见显示、展示表格式数据
1.1.存在即是合理的。  表格的现在还是较为常用的一种标签，但不是用来布局。
1.2.因为它可以让数据显示的非常的规整，可读性非常好。
1.3.特别是后台展示数据的时候表格运用是否熟练就显得很重要**，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。
2.创建表格
创建表格的基本语法：
<table>
  <tr>
<td>单元格内的文字</td>
  </tr>
</table>
2.1.table用于定义一个表格标签。
2.2.tr标签用于定义表格中的行，必须嵌套在 table标签中。
2.3.td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
2.4.字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。
总结    - 表格的主要目的是用来显示特殊数据的
         - 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
         - <tr></tr>中只能嵌套<td></td> 类的单元格
         - <td></td>标签，他就像一个容器，可以容纳所有的元素
3.表格属性
属性名                               含义                                                          常用属性值
border                         设置表格边框                                                    像素值
cellspacing                   设置单元格与单元格边框之间的空白间距             像素值(默认2像素)
cellpadding                   设置单元格内容与单元格边框之间的空白间距       像素值(默认1像素)
width                            设置表格宽度                                                    像素值
height                            设置表格高度                                                    像素值
align                            设置表格在网页中水平对齐方式                         left/center/right
4.表头单元格标签th
作用：
一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
语法：
只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。
5.表格标题caption
定义和用法
<table>
<caption>我是表格标题</caption>
</table>
注意：
5.1. caption 元素定义**表格标题**，通常这个标题会被居中且显示于表格之上。
5.2. caption 标签必须紧随 table 标签之后。
5.3. 这个标签只存在表格里面才有意义。
6.合并单元格
  6.1合并单元格2种方式
      - 跨行合并：rowspan="合并单元格的个数"
      - 跨列合并：colspan="合并单元格的个数"
  6.2合并单元格顺序
      -合并的顺序我们按照先上后下    先左  后右的顺序
  6.3合并单元格三步曲
      -先确定是跨行还是跨列合并
      -根据先上后下先左  后右的原则找到目标单元格然后写上合并方式还有要合并的单元格数量  比如： <td colspan="3"> </td>
      -删除多余的单元格单元格
7.总结表格
标签名                            定义                               说明
<table></table>          表格标签                      一个四方的盒子
<tr></tr>                      表格行标签                   行标签要在table标签内部才有意义
<td></td>                   单元格标签                单元格标签是个容器级元素，可以放任何东西
<th></th>                   表头单元格标签             它还是一个单元格，但是里面的文字会居中且加粗
<caption></caption>    表格标题标签                表格的标题，跟着表格一起走，和表格居中对齐
clorspan和rowspan       合并属性                      用来合并单元格
-- 表格提供了HTML 中定义表格式数据的方法。
-- 表格中由行中的单元格组成。
-- 表格中没有列元素，列的个数取决于行的单元格个数。
-- 表格不要纠结于外观，那是CSS 的作用。
-- 表格的学习要求：  能手写表格结构，并且能简单合并单元格。
8.表格划分结构
表格分割成三个部分：题头(thead)、正文(tbody)和脚注(tfoot)
注意：
8.1. <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！
8.2. <tbody></tbody>：用于定义表格的主体。放数据本体。
8.3. <tfoot></tfoot>放表格的脚注之类。
8.4. 以上标签都是放到table标签中。
——————————————————————————————————————————————————————————————————————————————————————————————
————————————————————————————————————————————————————————————————————————————————————————————
九、列表
概念：容器里面装载着结构，样式一致的文字或图表的一种形式；
特点：列表最大的特点就是整齐、整洁、有序，跟表哥类似，但可组合自由度会更高
1.无序列表
语法：
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

1.1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
1.2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
1.3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
2.有序列表
语法：
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>
3.自定义列表
语法：
<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
</dl>
4.列表总结
标签名             定义                                        说明
ul                   无序标签                               里面只能包含li，没有顺序，布局中最常用的列表
ol                   有序列表                               里面只能包含li，有顺序，使用情况较少
dl                   自定义列表                            里面有2个兄弟，dt和dd
————————————————————————————————————————————————————————————————————————————————
————————————————————————————————————————————————————————————————————————————————
十、表单标签
组成：一个完整的表单由提示文本、表单、表单域；
作用：
表单目的是为了收集用户信息、并提交到后台。
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。
如果不定义表单域，表单中的数据就无法传送到后台服务器。
1.input控件
语法：
<input type="属性值" value="你好">
   - input 输入的意思
   - <input />标签为单标签
   - type属性设置不同的属性值用来指定不同的控件类型
   - 除了type属性还有别的属性
常用属性：
占位符：placeholder ------有交互效果
button标签-----按钮标签
属性                         属性值                                              描述
type                         text                                              单行文本输入框
                                 password                                     密码输入框
                                 radio                                           单选框
                                 checkbox                                     复选框
                                 button                                        普通按钮
                                 submit                                        提交按钮
                                 reset                                           重置按钮
                                 image                                           图像形式的提交按钮
                                 file                                              文件域
name                         由用户自定义                               控件的名称
value                         由用户自定义                               input控件中的默认文本值
size                            正整数                                           input控件在页面中的显示宽度
checked                      checked                                        定义选择控件默认被选中的项
maxlength                正整数                                           控件允许输入的最多字符数
1.1.type属性
用户名: <input type="text" />
密  码：<input type="password" />
1.2.value属性值
用户名:<input type="text"  name="username" value="请输入用户名">
1.3.name属性
用户名:<input type="text"  name=“username” />
1.4.checked属性
表示默认选中状态。
1.5.input属性小结
属性                说明                作用
type             表单类型       用来指定不同的控件类型
value             表单值          表单里面默认显示的文本
name             表单名字       页面中的表单很多，name主要作用就是用于区别不同的表单。
checked       默认选中       表示那个单选或者复选按钮一开始就被选中了
2.label标签
目的：为了提高用户体验
概念：label 标签为 input 元素定义标注（标签）。
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
用法：
   ---第一种用法就是用label直接包括input表单。
   <label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>
   ---第二种用法 for 属性规定 label 与哪个表单元素绑定。
   <label for="sex">男</label>
   <input type="radio" name="sex"  id="sex">
3.textarea标签
语法：
<textarea >文本内容</textarea>
作用：
通过textarea控件可以轻松地创建多行文本输入框.
cols="每行中的字符数" rows="显示的行数"  我们实际开发不用
文本框和文本域区别
表单                            名称             区别                         默认值显示                                        用于场景
input type="text"    文本框       只能显示一行文本       单标签，通过value显示默认值       用户名、昵称、密码等
textarea                   文本域       可以显示多行文本       双标签，默认值写到标签中间             留言板

4.select下拉列表标签
目的：
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表.
语法：
<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>
默认selected="selected"
注意：
4.1. select>  中至少包含一对 option
4.2. 在option 中定义selected =" selected "时，当前项即为默认选中项。
4.3. 但是我们实际开发会用的比较少
5.form表单域
收集的用户信息怎么传递给服务器？
通过form表单域
目的：
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
语法：
<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>
常用属性：
属性             属性值                                  作用
action       url地址             用于指定接收并处理表单数据的服务器程序的url地址。
method    get/post          用于设置表单数据的提交方式，其取值为get或post。
name          名称                   用于指定表单的名称，以区分同一个页面中的多个表单。
注意：
每个表单都应该有自己表单域。我们现在做页面，不写看不到效果，但是如果后面学 ajax 后台交互的时候，必须需要 form表单域。

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
结构(html)与样式(css)相分离

十一、CSS层叠样式表
概念：
CSS(Cascading Style Sheets)  ，通常称为CSS样式表或层叠样式表（级联样式表）
作用：
- 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及**版面的布局和外观显示样式。**
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

目的：主要用于设置页面版面布局和外观显示样式

三种引入方式：
1.行内式(内联样式)
概念：
称行内样式、行间样式.
是通过标签的style属性来设置元素的样式
语法：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
注意：
- style其实就是标签的属性
- 样式属性和值中间是`:`
- 多组属性值之间用`;`隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
缺点：
没有实现样式和结构相分离
2.内部样式表(内嵌样式表)
概念：
称内嵌式
是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
语法：
<head>
<style type="text/CSS">
选择器（选择的标签） {
   属性1: 属性值1;
   属性2: 属性值2;
   属性3: 属性值3;
}
</style>
</head>
注意：
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type="text/css"  在html5中可以省略。
- 只能控制当前的页面
缺点：
没有彻底分离
3.外部样式表(外链式)(样式共享)
概念：
称链入式
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中
通过link标签将外部样式表文件链接到HTML文档中
语法：
<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>
注意：
---link 是个单标签
---link标签需要放在head头部标签中，并且指定link标签的三个属性
属性                            作用
rel                   定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type                定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
href                定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
4.三种样式表总结
样式表                      优点                                        缺点                                     使用情况                      控制范围
行内样式表       书写方便，权重高                没有实现样式和结构相分离                   较少                      控制一个标签（少）
内部样式表       部分结构和样式相分离          没有彻底分离                                        较多                   控制一个页面（中）
外部样式表       完全实现结构和样式相分离    需要引入                                              最多，强烈推荐    控制整个站点（多）
5.总结CSS样式规则
具体格式如下：
h1          { color:red; font-size:25px;}
|                   |    |          |          |
选择器       属性值       属性    值
总结:
5.1. 选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
5.2. 属性和属性值以“键值对”的形式出现。
5.3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
5.4. 属性和属性值之间用英文“:”连接。
5.5. 多个“键值对”之间用英文“;”进行区分。
十二、CSS选择器
应用：
能够使用基础选择器给页面元素添加样式
1.CSS选择器作用
找到特定的THML页面元素，选择标签，把想要的标签选择出来
语法：
h3 {
color: red;
}
2.CSS基础选择器
  2.1.标签选择器
概念：
标签选择器（元素选择器）是指用**HTML标签名**称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
作用：
标签选择器可以把某一类标签**全部**选择出来  比如所有的div标签  和所有的 span标签
优点：
是能快速为页面中同类型的标签统一样式
缺点：
不能设计差异化样式。
总结口诀：
标签选择器，
页面同选起。
直接写标签，
全部不放弃。
思考：如果想要差异化选择不同的标签，怎么办呢？就是说我想单独选一个或者某几个标签呢？

  2.2.类选择器
语法：
类名选择器：
.类名  {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
标签：
<p class='类名'></p>
优点：
可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
注意：
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名，尽量使用英文字母来表示。
命名规则：
不要纯数字、中文等命名，尽量使用英文字母来表示

  2.3.类选择器特俗用法---多类名
注意：
- 各个类名中间用空格隔开。
- 多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
语法：
<div class="pink fontWeight font20">亚瑟</div>
  2.4.id选择器
id选择器使用`#`进行标识，后面紧跟id名
基本语法格式：
id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签：
<p id="id名"></p>
id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
总结：
1. a 设置背景左侧，padding撑开合适宽度。
2. span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。
3. 之所以a包含span就是因为整个导航都是可以点击的。
7.1margin负值之美
1). 负边距+定位：水平垂直居中
咱们前面讲过，一个绝对定位的盒子，利用父级盒子的 50%，然后往左(上)走自己宽度的一半，可以实现盒子水平垂直居中。
2). 压住盒子相邻边框
7.2 CSS三角形之美
div {
width: 0;
               height: 0;
               line-height:0；
               font-size: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
}
1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
4. 为了照顾兼容性低版本的浏览器，加上 font-size: 0;  line-height: 0;
拓展知识：
html5发展之路
1993年(IETF)HTML 1.0-->1995年(W3C)HTML 2.0-->1996年(W3C)HTML 3.2
                                                                                                |
2000年(W3C)XHTML 1.0<--1999年(W3C)HTML 4.01<--1997年(W3C)HTML 4.0
|
2001(W3C)XHTML 1.1-->XHTML 2.0?
|
2004年(WHATWG) HTML 5草案-->2008年(合并)HTML 5正式版-->HTML5未来
什么是XHTML
XHTML 是更严格更纯净的 HTML 代码。
- XHTML 指**可扩展超文本标签语言**（EXtensible HyperText Markup Language）。
- XHTML 的目标是取代 HTML。
- XHTML 与 HTML 4.01 几乎是相同的。
- XHTML 是更严格更纯净的 HTML 版本。
- XHTML 是作为一种 XML 应用被重新定义的 HTML。
- XHTML 是一个 W3C 标准。
HTML和 XHTML之间有什么区别?
- XHTML 指的是可扩展超文本标记语言
- XHTML 与 HTML 4.01 几乎是相同的
- XHTML 是更严格更纯净的 HTML 版本
- XHTML 是以 XML 应用的方式定义的 HTML
- XHTML 是 2001 年 1 月发布的 W3C 推荐标准
- XHTML 得到所有主流浏览器的支持
- XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。
表格划分结构
对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注，这样更好的分清表格结构
注意：
1. <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！
2. <tbody></tbody>：用于定义表格的主体。放数据本体。
3. <tfoot></tfoot>放表格的脚注之类。
4. 以上标签都是放到table标签中。
圆角边框(CSS3)
语法：
border-radius:length;
- 其中每一个值可以为数值或百分比的形式。
- 技巧：让一个正方形  变成圆圈
border-radius: 50%;
- 上效果图矩形的圆角，就不要用百分比了，因为百分比会是表示高度和宽度的一半。
- 而我们这里矩形就只用用高度的一半就好了。精确单位。
盒子阴影(CSS3)
语法:
box-shadow:水平阴影垂直阴影模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；
- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 是默认的但是不能写          想要内阴影可以写  inset
7.3.4使用双伪元素清除浮动
使用方法：
.clearfix:before,.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
  *zoom:1;
}
专门用于ie6|7浏览器清除浮动的样式
.clearfix {
      *zoom: 1;
}
子盒子是可以比父盒子宽的！！
图片中心基线对齐：
img {
   vertical-align:middle;
}
margin对浮动元素无效
2.1 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
属性值          描述
default          小白  默认
pointer          小手
move             移动
text                文本
not-allowed 禁止
4. 溢出的文字省略号显示
1.white-space强行转换一行显示
2.text-overflow 文字溢出
3.text-overflow：ellipsis

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

基础笔记【黑马web前端】

相关阅读