A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

随之代码

初级黑马

  • 黑马币:22

  • 帖子:7

  • 精华:0

© 随之代码 初级黑马   /  2019-6-7 13:47  /  739 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

HTML的认识
01、HTML是超文本标记语言,不是编程语言;
02、所有的html标记(标签)都要放在尖括号<>里面
5HTML的结构(重点)
一对html标签里面嵌套一对head标签(给浏览器解析用的)和body标签(用户看的),head标签里面还嵌套了一对titlie标签(用户可以看见的)
Html标签的关系
嵌套关系  --- 后代关系,嵌套关系可以多层嵌套不单是两层;
并列关系  --- 兄弟关系
div和span(重点)
div标签布局标签,主要是布局用的大标签,也是主要标签;
特点:没有语义,独占一行
span标签布局标签,不用来做主要布局,一般放特殊效果的文字或者小图标;
特点:没有语义,一行共存多
图像(图片)标签(重点+记忆)
图像标签 --- img ,单标签
<img />,可以配合src属性将图片引入html页面,<img src=“图片路径” />
图像常见的属性
src        属性值 --- url            图像路径   
        alt        属性值 --- 自定义文本    图像不能正常显示的时候替换文本;
        title       属性值 --- 自定义文本    鼠标移入图片显示提示文本;
        width     属性值 --- 自定义数值    设置图片的宽度;
        height     属性值 --- 自定义数值    设置图片的高度;
        border    属性值 --- 自定义数值    设置图片的描边,一般不使用,后期会使用css进行设置;
超链接a(重点)
超链接:实现页面之间的跳转,a标签,双标签;
<a href=”#”></a>
常用属性(强制记忆)
href用于指定链接目标的url路径地址,必不可少的;
target 用于指定链接页面的打开方式,属性值我们一般选择新窗口打开 _blank; === target="_blank"            
超链接的链接方式(记忆)
    外部链接(在线链接)【href里面引用绝对路径】:直接在href=“http://+要访问的网址”,注意http://必须书写;
    内部链接(href里面引用相对路径)  直接在href=“书写html页面名称”,注意在书写内部链接的时候要书写清楚页面的路径;
空链接:   如果不知道要链接到什么地方,我们就暂时用#代替即可;
其他链接:我们不仅仅能给文字添加链接,我们还可以给其他的网页元素添加链接,例如:图像、表格、音频、视频等;
路径
所谓的路径就是从文件(html文件或css文件)自身出发找目标文件;
常见的路径分为两大类:绝对路径(不推荐使用的)和相对路径(是我们一直要用的)
相对路径(重要)
相对路径又分为:同级路径、下级路径、上级路径
同级路径
文件(html文件和css文件)目标文件同一个目录文件下面平级存在,我们可以直接书写目标文件名称(如果是图片就直接书写图片名称),
下级路径:
文件(html文件和css文件)存放目标文件的父级是平级存在,我们可以先书写目标文件的父级名称+/+目标文件名称
上级级路径:
存放文件(html文件和css文件)的父级存放目标文件的父级是平级关系,我们可以直接以 ../ 表示上一级去查找目标文件路径;
        记忆口诀:
        同级路径:文件和目标文件是同一个父级,平级关系;
    下级路径:从文件出发往里面查找;
        上级路径:从文件出发往外面查找,用 ../ 表示上一级关系;
列表
列表分为:无序列表、有序列表、自定义列表
无序列表(重点一定要记住)
结构ul嵌套li标签,li的个数不定,按照设计稿需求进行设置;
注意01、<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的;
      02、无序列表的所有默认样式我们都不用,后期会用css来进行设置;
有序列表(知道实际工作中不用)
ol嵌套li标签;
<ol>
        <li></li>
        <li></li>
        <li></li>
</ol>
自定义列表
dl嵌套dt和dd标签,dt表示描述标题,dd描述的内容;
自定义列表的使用技巧
   01  一个dl嵌套一个dt和多个dd,相当于中国的一词多义;
   02  一个dl里面可以嵌套多对的dt和dd(实际工作中很少用);
   03  一些图文混排效果可以用dl嵌套dt和dd实现,dt放图片,
注意:所有的列表都有默认的样式,我们在实际开发的时候都要去除,所以现在不必纠结;
input控件
输入的意思,可以更改type属性的属性值来指定不同的控件类型
还有对应的name、valuesize等几个属性;
Input表单属性(死记硬背)
01value 默认值,没有交互效果 --- value=” 请输入您的名字”/、02、placeholder占位符 html5的新属性,有交互效果 --- placeholder="请输入您的名字"
03name   给当前的数据起一个名字,让后台工作人员调用
1Css的作用
Cascading Style Sheets,简称层叠样式表,主要是用来进行页面的版面布局和外观样式的美化;
2、使用css的原理
能够将结构html和样式css分离书写,简化代码,提高可阅读性;
3、css的书写位置
分为3类:行内式、内嵌式(内部样式)、外部链接式
Css属性书写语法
属性:属性值;
Css样式书写格式:
选择器 { 属性1:属性值1;  属性2:属性值2;   …… }
行内式
直接在标签的开始标签身上添加一个 style=“”属性,然后在引号里面书写css属性和属性值即可、。
注意:行内样式没有实现结构和样式分离,尽量不用:
例如:<div style=“color:pink; font-size:16px;”>我是行内样式</div>;
内部样式(内嵌式):
书写在head标签里面,title标签下面,以一对style标签包裹,实现了结构和样式的半分离;
外部链接
使用外部链接的好处实现了结构和样式的完全分离,代码简介,可读性强;
使用外部链接的步骤
01 新建:.css格式的css文件,直接书写选择器以及css样式;
02 引用:利用link标签引入新建的css文件,要配合link的三个属性  rel关系,type文件类型 (可以省略),href文件路径;
外部链接的好处
一个css样式可以共享,如果两个页面的标签样式完全一致,就可以使用同一个css文件,然后分别连接过来即可;
三种链接方式的使用总结
行内样式表:书写方便,权重高。缺点:没有实现样式和结构相分离;
内部样式表:部分结构和样式的分离。缺点:没有彻底分离;
外部样式表:完全实现结构和样式分离,方便各个页面的使用。缺点:需要引入
Css选择器的分类
Css选择器分为两类:基础选择器和高级选择器(复合选择器)
基础选择器:标签选择器(html选择器)、类选择器、ID选择器
复合选择器:后代选择器、并集选择器、指定标签选择器
CSS选择器作用
选择标签的,把想要选择的元素标签选择出来。
类选择器(重点)类选择器定义
类选择器使用有一个过程:
01 定义 css里面用“  .  ”   +  类名称 +{ css键值对 } 进行样式定义;
02 调用:在html里面哪个标签需要,就在开始标签敲空格class=“类名称”进行调用;
类选择器的命名规则:
不能用纯数字、数字开头的、中文命名;
但是可以用数字结束。
类选择器特殊用法(多类名)
一个标签身上只能使用一个class,如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可;
例如:<div class=“red  font100”>一个元素调用多个类名</div>
字体的综合写法 font复合属性
font:是否倾斜   是否加粗   文字大小/ 行高   字体
注意:使用font的综合书写的时候一定要按照顺序书写,属性之间用空格隔开,如果没有的属性可以省略不写,文字大小和字体是必须要书写的,否则不生效
链接伪类选择器链接的伪类四种状态:
     a:link        未访问的链接(访问前)
     a:visited    已访问的链接(访问后)
     a:hover      鼠标移动到连接上(鼠标经过)
     a:active      选定的链接(按下鼠标的时候)
注意:以上的顺序不能颠倒;
实际工作中我们不需要将四个伪类状态都书写,如果4个都要写顺序不能乱;
标签显示模式(重点要理解)
实际开发的时候有的需要独占一行,有的需要一行放多个,所以把标签的显示模式分为以下三种:
    块级元素:自己独占一行; --- 代表标签 div、h标签
     行内元素:一行可以共存多个;--- 代表标签  span a
     行内块元素:一行可以共存多个; --- 代表标签 img input
块级元素(死记硬背)
特点独占一行,设置宽高能够生效,也可以控制外边距和内边距;
       默认的宽度是父级的100%;
       是一个容器盒子,里面可以放行内或者块元素;
注意p标签是块级元素,但是p标签里面不能放div标签;
      同理h标签(标题标签)dt等都是文字类块级标签,里面尽量不能放其他块级元素;
常见的块级元素div/p/h1-h6/ul/li/dl/dt/dd
行内元素(死记硬背)
特点:01一行可以共存多个,设置宽高不生效,一般宽高是自己本身的内容撑开;
02、行内元素里面最好只放文本或者其他的行内元素;
常见的行内元素:a  span  u  s  del  strong   em  i  ins 等;
注意:超链接里面不能嵌套超链接;
      特殊情况a标签里面可以放块级元素,但是最好给a转换成块级模式;
行内块元素:
一行共存多个,默认宽高由内容撑开,但是可以控制固定的宽度和高度和外边距,内边距;
一句话总结:行内块元素可以一行共存多个,能够设置宽高并且生效;
三种显示模式相互转换
将元素转化为块级元素:display:block;
将元素转化为行内元素:display:inline;
将元素转化为行内块元素:display:inline-block;
、实体化三属性(重要滴很)
width
height
背景 background
注意:这三个属性属于我们布局的中流砥柱,只要这三个值设置好了,我们书写的网页就很少出现兼容问题;
背景的复合写法(死记硬背)
background:背景颜色 url()  平铺方式  是否固定 X轴 Y轴;
11、 Css的三大特性
分为:层叠性(覆盖性)、继承性、优先级;
层叠性(覆盖性)
层叠性(就近原则):如果一个标签书写的样式重叠冲突了,后写的css样式会把先写的样式覆盖掉,样式不冲突的话就不会层叠;
继承性
有一些css属性子级是可以继承父级的,一般文字控制属性都会被继承,a标签除外,需要单独设置;
一般文字的属性:下图蓝色的可以被继承,颜色也是可以被继承,只不过超链接a不能继承父级的颜色color;,超链接a的color和线条样式text-decoration需要单独设置;
边框的综合写法
边框的宽度:border-width:3px;
边框的样式:border-style:solid;     
常用的线条样式solid实线   dashed虚线    dotted点线
边框的颜色: border-color:red;
综合写法:border:边框宽度   边框样式   边框颜色;
设置不同方向的边框border-方向英文
如果只写border表示四个方向的边框都有,也可以利用 “  –  方向英文”来设置不同方向的边框: 方向英文:left/right/top/bottom/center
border:3px  solid  #ccc;   四个边框都有
border-left:3px  solid  #ccc;  左边框
border-right:3px  solid  #ccc;  右边框
border-top:3px  solid  #ccc;  上边框
border-bottom:3px  solid  #ccc;  下边框
浮动:浮动布局的原理应用
让元素脱离文档流,进行页面效果的布局;
作用:
让多个盒子水平排列一行显示实现网页布局,盒子左右对齐,最早是用来实现文字环绕文字;
属性:float取值:left  right  none(不浮动默认就是)  浮动的特点浮:
浮动之后的元素脱离了标准流;
漏:
盒子浮动之后脱离的标准流原来的位置就空了,下面的盒子会补上来;
1、浮动之后的盒子的显示模式会更改为行内块元素的特点;
2、浮动之后的元素之间的没有缝隙的,紧贴在一起,顶部对齐;
3、如果父级盒子不够宽装不下浮动的盒子,盒子会掉下来另起一行;
4、常见布局(重点一定要会写)
实际工作中我们最常见的布局就是左右布局和左中右布局
左右布局
方法1一个固定宽高的父级盒子(高度不一定固定)嵌套了左右两个子级盒子,第一个子级盒子左浮动flaot:left;,第二个盒子右浮动float:right;
方法2::一个固定宽高的父级盒子(高度不一定固定)嵌套了左右两个子级盒子,第一个子级盒子左浮动flaot:left;,第二个盒子左浮动float:left;,如果两个盒子之间有距离就直接给第一个盒子添加margin-left即可;
清除浮动本质:
父级盒子因为子级浮动引起内部高度为0的问题,清除浮动之后,父级就会根据浮动的盒子自动检测高度,从而解决影响下面盒子的布局问题;
解决方案
清除浮动的方法:额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法;
方法1:直接飞父级设置固定的高度,但是有时不方便设置高度,这样就不能使用这个方法;
2额外标签法
在浮动元素的末尾(找到最后浮动的盒子)添加一个空的标签:
<div style=“clear:both;”></div>
书写方便,但是会添加许多没有意义的标签,不建议使用
3父级加overflow属性法
直接给父级添加overflow:hidden;,强制的撑开父级的高度;
after伪元素法(会使用一直用)
After伪元素清除浮动法实际开发中推荐使用:
overflow:hidden; 溢出隐藏,将超出固定宽高的盒子的内容隐藏掉;
overflow:auto;  溢出滚动,将超出固定宽高的盒子的内容以滚动条的像是显示
定位属性:position 取值不同实现的效果不同,如下:
静态定位position:static;
相对定位position:relative;
绝对定位position:absolute;
固定定位position:fixed;
相对定位:position:relative;
参照物:自己本身原来的位置,进行位置的偏移;
位置偏移:通过改变方位名词(top/bottom/left/right)的值来设置;
特点:相对于自己原来的位置为参照物进行位移,属于占位定位,盒子仍然在标准流里面;
绝对定位:position:absolute;
注意:绝对定位完全脱离了文档流;
参照物:默认情况下是自己的父级盒子,但是如果绝对定位的父级盒子没有任何定位属性,参照物就以浏览器为参照去进行定位;
绝对定位的参照物选定
绝对定位的参照物默认以父级为主,如果父级没有定位一层一层往上找,如果找不到定位的祖先盒子就以浏览器为参照物;
绝对定位的特点
绝对定位是完全脱离了标准流不占位的,参照物默认以父级为主,如果父级没有定位一层一层往上找,如果找不到定位的祖先盒子就以浏览器为参照定位;
子绝父相的应用
子绝父相:子级绝对,父级相对,父级盒子做了相对定位定位了,但是依然占位,不会影响其他盒子的布局;
注意:其实实际工作中不一定是子绝父相,其实只要父级有了定位属性,子级就会以父级为参照,但是一般用的最多的还是子绝父相;
固定定位: position:fixed;
参照物:电脑屏幕(可视窗口);
注意:固定定位完全脱离了标准流,参照物是可视窗口为准,和父级没任何关系,IE6不支持固定定位,但是我们现在不用管它,直接使用就可以;
CSS精灵技术好处
使用css精灵技术可以减少对服务器的请求次数;
原理
可以将多个小图标合并成一张图片,成为css精灵图或者css雪碧图;
精灵图的使用精髓
• Css精灵图的技术核心:精确测量每一个小图标的大小和位置,然后设置图片定位的X轴和Y轴的位置;
• background:url(图片路径)  no-repeat   -X轴   -Y轴;
• background-position: -X轴   -Y轴;
一句话总结:就是背景图片的定位位置设置

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马