黑马程序员技术交流社区

标题: 前端基础之基础贴 [打印本页]

---

作者: King汀    时间: 2019-6-7 12:20
标题: 前端基础之基础贴

          不知不觉，从5月18预科班开始到现在已经过去半个多月，这期间，在黑马学习到了很多学校里没有学到的东西，收获了很多，下面总结下这半个月的重难点。

一、HTML5

1.HTML是超文本标记语言，不是编程语言。

2.Web标准不是一个标准而是一系列的标准：

          结构标准（html） ---- 搭建页面的结构

          表现标准/样式标准（css）---- 页面样式的美化

          行为标准（javascript）--- 实现页面的交互效果

3.标签主要分为单标签和双标签，其中制作网页比较多的是div标签和span标签。

          div标签布局标签，主要是布局用的大标签，也是主要标签;

              特点：没有语义，独占一行；

          span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标；

              特点：没有语义，一行共存多个。

4.路径分为绝对路径（不推荐使用）和相对路径。相对路径又分为同级路径、下级路径和 上级路径。

          同级路径：文件（html文件和css文件）和目标文件在同一个目录文件下面平级存在，可以直接书写目标文件名称（如果是图片就直接书写图片名称）；

          下级路径：文件（html文件和css文件）和存放目标文件的父级是平级存在，可以先书写目标文件的父级名称+/+目标文件名称；

          上级路径：存放文件（html文件和css文件）的父级和存放目标文件的父级是平级关系，我们可以直接以 ../ 表示上一级去查找目标文件路径；

5.锚点定位可以实现页面内部跳转。

          实现方法：先找到目标，想要跳转到的位置添加id=”id名称”，然后设置锚点按钮，超链接a，<a href=”#id名称”>跳转到目标</a>。

6.表格（table），用于数据处理，展示数据。里面只能嵌套tr和caption标签。

7.列表分为无序列表（ul）、有序列表（ol）和自定义列表（dl）。

8.表单由提示文本、表单、表单域组成，用于搜集用户信息，并提交到后台。

          Input控件属性：

          01、value 默认值，没有交互效果

          02、placeholder占位符 html5的新属性，有交互效果

          03、name给当前的数据起一个名字，让后台工作人员调用

          常见的input表单控件（改变type值实现）

          01、文本框：input的type取值为text；

          02、密码框：input的type取值为password；

          03、单选按钮：type=”radio” ,想要实现单选效果,需要给input标签设置相同的name设置归为一类；

          04、复选按钮：type=”checkbox”，也可以设置同样的name名称，但是不会影响多选的效果；

          单选按钮和复选框的默认选中:checked=”checkde”;

          05、普通按钮：input的type取值为button，必须要自己设置value值；

          06、提交按钮：input的type取值为submit，可以设置自己的value值也可以用默认的；

          07、重置按钮：input的type取值为reset，可以设置自己的value值也可以用默认的；

          08、图片按钮：input的type取值为image，<input type=“image“ src=”图片路径” />必须书写查找图片路径；

          09、文件域：<input type=”file” /> 上传文件使用；

9.label标签：提高用户体验，扩大input表单的可操作性，点击文字可以直接将光标定到输入框，不是表单标签。

          使用方法：

          01、用label直接包括input表单

          02、用for 属性规定 label 与哪个表单元素绑定 ----

          <label for=”man”>男</label>

          <input type=”radio”  name=”sex”  id=”man” />

10. select下拉列表：一对select标签嵌套多对option标签，selected=”selected”表示默认选中。

11. form表单域标签，被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

          默认属性：

          01、action=“url地址” -----  用于指定接收并处理表单数据的服务器程序的url地址。

          02、method=“ 提交方式”  ---- 取值 get/post，get是明文提交，post是密文提交；

          03、name=“名字”  设置不同的取值名称用于后台提交。

二、CSS3

1.引入css样式表的三种方式：行内式（内联样式）、内部样式表（内嵌式）、外部样式表（外联式）。

2.Css选择器分为两类：基础选择器和高级选择器（复合选择器）。

          基础选择器：标签选择器、类选择器、id选择器、通配符选择器。

          复合选择器：后代选择器、子元素选择器、交集选择器、并集选择器、链接伪类选择器。

3.文字控制属性

          文字颜色：color

          文字大小：font-size

          文字字体：font-family  取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；

          字体加粗：font-weight

          字体样式(风格)：font-style

          文本水平居中：text-align: center;

          文本的行高：line-height

          文本首行缩进：text-indent

          文本线条装饰：text-decoration

          font复合属性：font: 是否倾斜 是否加粗 文字大小/行高 字体；

          行高：line-height

4.标签显示模式

          块级元素：自己独占一行，设置宽高能够生效，也可以控制外边距和内边距， 默认的宽度是父级的100%。是一个容器盒子，里面可以放行内或者块元素，p/h/dt这种文字类块级标签，里面尽量不能放其他块级元素。常见的块级元素：div/p/h1-h6/ul/li/dl/dt/dd；

          行内元素：一行可以共存多个，设置宽高不生效，一般宽高是自己本身的内容撑开，行内元素里面最好只放文本或者其他的行内元素，超链接里面不能嵌套超链接。常见的行内元素：span /a/u/s/del/strong/em/i /ins等；

          行内块元素：行内块元素可以一行共存多个，能够设置宽高并且生效； --- 常见的行内块元素： img /input/t'd等。

          将元素转化为块级元素：display:block;

          将元素转化为行内元素：display:inline;

          将元素转化为行内块元素：display:inline-block;

5.background属性

          背景颜色：background-color

          背景图：background-image

          背景平铺：background-repeat

          图片定位：background-position

          背景图片固定：background-attachment:fixed;

          背景颜色半透明：background：rgba(0,0,0,透明度);

          背景的复合写法：background:背景颜色  url()  平铺方式  是否固定  X轴  Y轴；

6.Css的三大特性：层叠性（覆盖性）、继承性、优先级。

7.text-align: center详解

          实际的意思是让文本在父级盒子里居中显示，实际工作中text-align: center;不仅可以让文字居中，也可以让行内元素（a、span、b、strong、u、i、s、em、ins），行内块元素（img、input、button）在父级盒子中居中；

          注意：想要元素利用text-align: center;居中显示，必须要有一个父级盒子；

          让盒子居中的条件

          01、盒子的显示模式必须为块级元素

          02、盒子必须要有固定的宽度

          03、利用margin：上下  auto；/ margin：auto；/ margin-left:auto; margin-right:auto;

          text-align: center;和margin:auto;的区别

          01、margin只能让块级元素居中显示，而且必须要有固定的宽度

          02、text-align: center;本来的意思是让文本居中，实际也可以让行内元素、行内块元素居中显示，如果想要用text-align: center;让行内元素和行内块元素居中，我们必须要有一个父级元素将行内元素和行内块元素包裹起来，然后设置父级盒子的text-align: center;，但是实际工作中我们不建议这么使用；

8.并列垂直外边距合并

          两个盒子如果垂直排列（上下排列），上面的盒子设置了marin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁；解决方案：不要同时设置，只给一个盒子设置即可。

9.嵌套垂直外边距合并

          如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；

          解决方案：

          01、为父级设置上边框（不用）

          02、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；

          03、直接给父级添加overflow:hidden;（常用方法，利用了overflow:hidden;强制区分了父子级关系）

          04、用浮动/固定定位/绝对定位也能解决。

10. 网页布局的三种机制：普通流、浮动、定位。

11. 实际工作中的导航布局：

          01、ul嵌套li嵌套a

          02、给li设置固定的宽高（如果文字不一样多我们可以不设置宽度，用padding撑开

          03、给li设置float:left;让li在一行显示

          04、如果想要鼠标经过a有一些样式，将a用display:block;转化为块元素，设置宽高和li一致；

12. 清除浮动

          01、额外标签法

          在浮动元素的末尾（找到最后浮动的盒子）添加一个空的标签：

          <div style=“clear:both;”></div>（不建议使用）

          02、父级加overflow属性法

          直接给父级添加overflow:hidden;，强制的撑开父级的高度；

          03、after伪元素法（推荐使用）

          /*声明清除浮动的样式*/

          .clearfix:after {

                  content: "";

                  display: block;

                  height: 0;

                  visibility: hidden;

                   clear: both;

            }

          .clearfix {

              *zoom: 1;  /*ie6,7 专门清除浮动的样式*/

          }

          04、双伪元素清除浮动

          /*声明清除浮动的样式*/

          .clearfix:before ,.clearfix:after {

                  content: "";

                  display: table;

          }

          .clearfix:after {

                    clear:both;

          }

          .clearfix {

                    *zoom: 1;  /*ie6,7 专门清除浮动的样式*/

          }

          谁里面有浮动就在谁的开始标签身上添加class=“clearfix”

13. css属性书写顺序

          01、布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）

          02、自身属性：width / height / margin / padding / border / background

          03、文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

          04、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

14. 定位模式分为：相对定位、绝对定位、固定定位。

15. 定位的盒子居中对齐

          问题描述：如果盒子的显示模式为块元素，而且有固定的宽度我们可以直接用margin：auto;让盒子水平居中；如果盒子定位了margin:auto;不会生效，那我们如何让定位的盒子居中显示？

          01、如果用了相对定位position: relative;盒子还是可以同margin: auto;居中；

          02、那么如果用了绝对定位position: absolute;和固定定位position: fixed;盒子就不能使用margin:auto；居中显示：

          解决方案：

          设置定位盒子的left :50%; 设置盒子的margin-left:-自己的宽度的一半，让盒子水平居中；

          设置定位盒子的top :50%; 设置盒子的margin-top:-自己的高度的一半，让盒子垂直居中；

16. banner 滚动图片的布局思路

          一个父级盒子作为总体的大盒子

          01、滚动的图片用ul>li>a实现

          02、两侧箭头用span/div实现（父绝子相）

          03、切换的小圆点用ol>li实现（子绝父相将ol进行定位，然后将里面的li浮动控制外边距）

17. 实现固定定位盒子跟随版心定位

          left：50%;

          margin-left:版心宽度的一半 + 盒子自己的宽度 + 随意的间距值；

18. vertical实现图片和文字垂直对齐

          vertical-align:middle;让行内元素、行内块元素垂直居中,如果不生效,可以直接给父级盒子添加对应行高即可；

19.去除图片底侧空白缝隙

          Html中插入图片的时候由于默认是基线对齐，会出现底部留白的效果，解决方案如下：

          01、直接给图片添加img{vertical-align:middle/top;}属性实现基线对齐；

          02、直接将图片的显示模式更改为块级元素img{display:block;}

20. 溢出的文字省略号显示

          01、让文字强制一行显示white-space:nowrap;

          02、让超出范围的文字隐藏overflow:hidden;

          03、隐藏的内容以省略号显示；text-overflow:ellipsis;

21. 网站优化三大标签： 标题title、关键词keywords、关键描述description。

22. logo的优化做法：

          01、首先放一个h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要；

          02、然后h1里面放一个链接，可以返回首页的， 给链接一个大小、logo 的背景图片，链接里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不能显示出来，要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden;(淘宝)；或者直接用font-size: 0;(京东)就看不到文字了

          03、最后给链接一个 title，这样鼠标放到logo上， 就可以看到提示文字了。

23.tab选项卡布局思路

          一个父级盒子固定宽高，里面嵌套上下两个盒子，上面的盒子放tab的导航，下面的盒子放tab的内容盒子，注意：我们有几个导航内容就有几个内容盒子，然后让内容盒子全部隐藏，但是让其中的一个显示（给它添加一个行内样式style="display: block;"）

24.实体化三属性：宽 width、高 height、背景 background。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2