黑马程序员技术交流社区
标题: 前段基础技术贴 [打印本页]
作者: 张qi 时间: 2019-6-7 14:40
标题: 前段基础技术贴
学习前段也有20多天了，在这里分享一下这几天的学习笔记！Web标准的组成（重点）Web标准不是一个标准是一系列的标准：
结构标准（html） ---- 搭建页面的结构
表现标准/样式标准（css）---- 页面样式的美化
行为标准（javascript）--- 实现页面的交互效果
HTML的结构（重点）一对html标签里面嵌套一对head标签（给浏览器解析用的）和body标签（用户看的），head标签里面还嵌套了一对titlie标签（用户可以看见的）
Html标签的关系• 嵌套关系 --- 后代关系，嵌套关系可以多层嵌套不单是两层；
• 并列关系 --- 兄弟关系
div和span（重点）div标签布局标签，主要是布局用的大标签，也是主要标签;
特点：没有语义，独占一行；
span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标；
特点：没有语义，一行共存多个；
图像（图片）标签图像标签 --- img ，单标签
<img />,可以配合src属性将图片引入html页面，<img src=“图片路径” />
超链接a超链接：实现页面之间的跳转，a标签，双标签；
<a href=”#”></a>
相对路径相对路径又分为：同级路径、下级路径、上级路径
同级路径文件（html文件和css文件）和目标文件在同一个目录文件下面平级存在，我们可以直接书写目标文件名称（如果是图片就直接书写图片名称）
下级路径：文件（html文件和css文件）和存放目标文件的父级是平级存在，我们可以先书写目标文件的父级名称+/+目标文件名称
绝对路径以web站点根目录为参考基础的目录路径，其实一般分为两种情况：
01、带有盘符的路径，坚决不能使用，
例如：“D:\web\log.gif”;
02、完整的网络地址，可以使用，只要网络资源一直存在，
例如： http://www.itcast.cn
锚点定位作用：实现页面内部的跳转
分两步实现锚点链接：
第一步：找目标，想要跳转到的位置添加id=”id名称”
第二步：设置锚点按钮，超链接a，
<a href=”#id名称”>跳转到目标</a>
base标签base标签可以统一设置超链接a的打开方式,书写在<head></head> 之间；
<base target=“_blank”>
表格表格的结构：一对table标签嵌套tr标签，tr标签嵌套td标签；
table表示表格整体，tr表示行，td表示单元格（列）；
列表列表分为：无序列表、有序列表、自定义列表
无序列表结构：ul嵌套li标签，li的个数不定，按照设计稿需求进行设置；
注意：01、<ul></ul>中只能嵌套<li></li>
02、无序列表的所有默认样式我们都不用，后期会用css来进行设置
自定义列表：dl嵌套dt和dd标签，dt表示描述标题，dd描述的内容；
表单完整的表单的组成提示文本、表单、表单域（总体的提交数据的标签）组成
表单的作用搜集用户信息，并且提交到后台
input控件输入的意思，可以更改type属性的属性值来指定不同的控件类型；
还有对应的name、value、size等几个属性；
Input表单属性01、value 默认值，没有交互效果 --- value=” 请输入您的名字”/、02、placeholder占位符 html5的新属性，有交互效果 --- placeholder="请输入您的名字"
03、name 给当前的数据起一个名字，让后台工作人员调用
常见的input表单控件文本框：input的type取值为text
可以设置value属性设置默认的值，<input type=“text” value=“默认值” />
Input按钮组控件普通按钮：<input type=“button” value=“普通按钮” /> 必须要自己设置value值；
提交按钮：<input type=“submit” />； 可以设置自己的value值也可以用默认的；
重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的；
图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径；
文件域：<input type=“file” /> 上传文件使用；
select下拉列表
一对select标签嵌套多对的option标签
如果option有selected=“selected”表示默认选中；
<select>
<option selected="selected">北京</option>
<option>上海</option>
</select>
form表单域标作用在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
默认属性：action=“url地址” ----- 用于指定接收并处理表单数据的服务器程序的url地址。
method=“ 提交方式” ---- 取值 get/post，get是明文提交，post是密文提交；
name=“名字” 设置不同的取值名称用于后台提交；
Css的作用Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；
使用css的原理能够将结构html和样式css分离书写，简化代码，提高可阅读性；
css的书写位置分为3类：行内式、内嵌式（内部样式）、外部链接式
Css属性书写语法属性：属性值；
Css样式书写格式：选择器 { 属性1:属性值1; 属性2:属性值2; …… }
选择器：指定CSS样式作用的HTML对象（要更改样式的标签），花括号内是对该对象设置的具体样式。
行内式直接在标签的开始标签身上添加一个 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选择器分为两类：基础选择器和高级选择器（复合选择器）
基础选择器：标签选择器（html选择器）、类选择器、ID选择器
复合选择器：后代选择器、并集选择器、指定标签选择器
CSS选择器作用选择标签的，把想要选择的元素标签选择出来。
标签选择器：以标签名称命名的选择器，可以把将页面中所有的同类元素全部选中，所以实际工作中标签选择器不推荐大家使用；
类选择器（重点）类选择器定义类选择器使用有一个过程：
01 定义： 在css里面用点“ . ” + 类名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；
类选择器的命名规则：不能用纯数字、数字开头的、中文命名；
但是可以用数字结束。
类选择器特殊用法（多类名）一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
例如：<div class=“red font100”>一个元素调用多个类名</div>
ID选择器（了解）id选择器的定义使用id选择器使用有一个过程：
01 定义： 在css里面用 “ # ” + id名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格id=“id名称”进行调用；
id选择器的命名规则：不能用纯数字、数字开头的、中文命名；
类选择器和id选择器的区别：类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
5、文字控制属性文字颜色 colorColor取值a、直接写英文单词yellow，red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgb（）如rgba（0,0,0,0.5）a为透明度
文字大小 font-size 文字字体 font-family取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
如果是汉语的文字要用引文状态的引号引起来；
字体加粗 font-weight如果要用数字来表示加粗或者不加粗，千万不能书写单位px；
字体样式(风格) font-style实际开发中我们很少让文字倾斜，但是我们会让倾斜的i和em不倾斜；
文本水平居中 text-align: center;text-align文本居中控制，取值：left、right、center；
text-align让文字在父级盒子里面居中显示；
文本的行高 line-height line-height取值为数字+px单位，可以设置文字行与行之间的距离；
如何量取设计稿的行高？从第一行文字的开始到第二行文字的开始就是行高
实际工作中一般只用：font:文字大小 字体；
文本线条装饰 text-decoration text-decoration:none;没有线
text-decoration：underline；下划线
text-align: center; 详解注意：想要元素利用text-align: center;居中显示，必须要有一个父级盒子；
复合选择器复合选择器就是把基础选择器组合起来使用
后代选择器（重点工作中常使用）后代选择器的html结构是有嵌套的后代关系（父子级），css书写的时候 一个空格表示了后代关系
子元素选择器只能选择嵌套关系的父子关系得到元素，也就是嵌套的第一层元素，一个大于号“>”表示选中子级；
通俗说:不管后代嵌套了多少层，我们只选择第一层子级元素；
并集选择器（重点）样式一致的盒子如果单独设置样式需要书写多次，我们可以把样式相同的盒子只写一个样式，用英文的逗号隔开即可；
一个逗号表示并集关系；
好处：使用并集选择器书写代码可以节约代码量，重复的代码只写一遍；
链接伪类选择器链接的伪类四种状态： a:link 未访问的链接（访问前）
a:visited 已访问的链接（访问后）
a:hover 鼠标移动到连接上（鼠标经过）
a:active 选定的链接（按下鼠标的时候）
注意：以上的顺序不能颠倒；
实际工作中我们不需要将四个伪类状态都书写，如果4个都要写顺序不能乱；
实际应用（重点一定要会写）
设置一个总体的a的样式，表示所有状态的样式一致，然后单独设置鼠标经过a:hover 的样式；
标签显示模式（重点要理解）实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：
块级元素：自己独占一行； --- 代表标签 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属性背景颜色background-color：background-color取值是具体的色值
background-color: #0ff;
背景图片background-image：background-image取值是url(图片路径)
background-image: url(img/03.jpeg);
背景平铺background-repeat：background-repeat
取值： 平铺：repeat 不平铺：no-repeat
X轴平铺：repeat-x Y轴平铺：repeat-y
图片定位background-position：background-position:X坐标（水平方向） Y坐标（垂直方向）；
注意：如果使用方向英文只写一个值另外一个值就默认居中，所以两个值建议都写；
精确取值background-position:X坐标（水平方向） Y坐标（垂直方向）
背景图片固定：background-attachment:fixed;
背景图片定位是咩有父级的；
背景的复合写法background:背景颜色 url（） 平铺方式 是否固定 X轴 Y轴；
注意：属性值没有书写顺序，没有的属性可以省略不写；
实际工作中建议大家使用复合写法；
背景颜色半透明background：rgba(0,0,0,透明度);
• R红色 g绿色 b蓝色 a透明度小数点前面的0可以不写；
• 注意：设置了背景颜色透明是不会影响盒子里面的内容的透明度的；
Css的三大特性分为：层叠性（覆盖性）、继承性、优先级；
层叠性（覆盖性）层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠；
继承性有一些css属性子级是可以继承父级的，一般文字控制属性都会被继承，a标签除外，需要单独设置；
注意：除了文字属性，其他属性基本上都不能继承
盒子模型盒子模型组成 内容： 实体化宽高和里面的文字图片等等
边框： border
内边距： padding 拉开内容到盒子边缘的距离；
外边距： margin 拉开盒子与盒子之间的距离；
边框border（死记硬背）边框的综合写法边框的宽度：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; 下边框
Csss设置细线表格（死记硬背）table,th,td{
border:1px #ccc solid;
border-collapse:collapse;
}
border-collapse:collapse;合并相邻的边框
注意：如果整个页面只有一个table我们直接写table样式，如果有多个我们可以给table设置一个父级用后代选择器去书写；
Padding相关设置（不同方向的设置）：margin外边距作用：拉开盒子和盒子之间的距离margin相关设置让盒子居中的条件01 盒子的显示模式必须为块级元素
02 盒子必须要有固定的宽度
03 利用margin：上下 auto；/ margin：auto；/ margin-left:auto; margin-right:auto;
注意：上下的值可以自定义设置，如果没有设置为 margin:0 auto;
浮动：浮动布局的原理应用让元素脱离文档流，进行页面效果的布局；
作用：让多个盒子水平排列一行显示实现网页布局，盒子左右对齐，最早是用来实现文字环绕文字；
属性：float取值：left right none（不浮动默认就是） 浮动的特点浮：浮动之后的元素脱离了标准流；
漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；
特1、浮动之后的盒子的显示模式会更改为行内块元素的特点；
2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；
3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；
4、常见布局（重点一定要会写）CSS精灵技术好处• 使用css精灵技术可以减少对服务器的请求次数；
原理可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图；
精灵图的使用精髓• Css精灵图的技术核心：精确测量每一个小图标的大小和位置，然后设置图片定位的X轴和Y轴的位置；
• background:url(图片路径) no-repeat -X轴 -Y轴；
• background-position: -X轴 -Y轴;
一句话总结：就是背景图片的定位位置设置
由于前段基础班课程还没结束，帖子字数要求上限，因此到这里就结束了！
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |