前端技术
来到黑马时间还不是很长,但是却学到了很多的知识,基础班开设了ps学习,HTML,css课程,这些就是学习前端的基石,只有学习好基础,才能学习的更好。
Web标准
由于各个浏览器的内核不同,所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致‘’
结构标准HTML:页面的基本结构的搭建;
表现标准 CSS:页面的样式美化
行为标准 javascript:实现页面的交互
HTML知识:常用的布局标签
一、双标签:有始有终,又开始和结束两个标签组成,结束标签比开始标签多一个/;
1、标题标签(双标签):分为6个档次分别是h1到h6;
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
2、段落标签
P 一般用来盛放一段文字也就是段落
3、图片标签img
img标签通过自身原则性属性src找到我们的图片所在位置,将图片引入到我们的html页面;
4、div和span
div大标签,主要用来做网页的布局,独自占一行;
span小标签,也是用来做布局的,但是一般用来放小图标或者特殊效果的文字,一行可以存在多个;
5、常见的文本修饰标签(小标签)
加粗标签:<b>单纯的加粗</b> <strong>语义化强调</strong>
倾斜标签:<i>单纯的加粗</i> <em>语义化强调</em>
删除线标签:<s>单纯的加粗</s> <del>语义化强调</del>
下划线标签:<u>单纯的加粗</u> <ins>语义化强调</ins>
6、超链接a(重点)
概念
双标签 <a href=”文件路径”></a>
二、单标签: 不需要包含内容,直接在开始标签最后面添加一个结束的符号/;
例如:<br /> <hr /> <img src=””/>
1、base标签:单标签,base标签可以统一设置超链接a的打开方式,书写在<head></head> 之间;
<base target=“_blank”>
常用的特殊符号是:空格 、小于号<、大于号>、版权©;
三、表格
table嵌套tr,tr嵌套多个td,tr表示行,td单元格我们也可以认为是列;
table表示整体,tr表示行,td表示列;
列表
四、列表分为:无序列表,有序列表,自定义列表
无序列表:ul嵌套li,li里面可以放任何标签,ul里面不要嵌套其他标签只放li标签;
默认的列表样式我们在css里处理;
有序列表:ol嵌套li标签;
自定义列表:dl嵌套dt和dd,dt表示我们要描述的标题,dd是描述的内容
五、表单(重点)
作用:搜集用户信息
组成部分:提示文本、表单、表单域(总体的提交数据的标签)组成
文本框 type=”text” <input type="text" >
密码 type=”password” <input type="password">
单选按钮:type=“radio” , <input type="radio" >想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类;
复选按钮:type=“checkbox”,<input type="checkbox" >也可以设置同样的name名称,但是 不会影响多选的效果;
单选按钮 <input type="radio" checked="checkde“ >
复选按钮 <input type="checkbox" checked="checkde" >
提交按钮:<input type=“submit” />;
重置按钮:<input type=“reset” />;
图片按钮:<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径;
文件域名:<input type=“file” /> 上传文件使用;
button标签按钮:<button>我也是按钮</button>
文本域textarea
textarea 双标签,可以控制宽高,自带的两个属性cols和rows不使用,后期我们会使用css进行对应;
select下拉列表:一对select标签嵌套多对的option标签
<select>
<option></option>
<option></option>
</select>
css知识:
Css的引入方式分为3种:行内式,内部样式(内联样式),外部样式Css的引入方式分为3种:行内式,内部样式(内联样式),外部样式。
CSS样式规则(键值对规则)
第一步确定给谁加样式 ---- 选择器
第二部书写 {}
第三步 在{}里面书写css键值对规则 {属性1:属性值1;属性2:属性值2;}
Css选择器可以分为:基础选择器和高级选择器(复合选择器);
基础选择器:标签选择器、类选择器、id选择器
高级选择器(复合选择器):后代选择器、指定标签选择器、并集选择器
链接的伪类
四种状态:
a:link 未访问的链接(访问前)
a:visited 已访问的链接(访问后)
a:hover 鼠标移动到连接上(鼠标经过)
a:active 选定的链接(按下鼠标的时候)
盒子的实体化三属性(重点)
宽 width
高height
背景 background
实际开发中我们只要将实体化三属性设置好就不会出现兼容问题
三种显示模式之间的转换(强制记忆)
通过设置display属性的不同取值实现相互转换:
将元素转化为块级元素:display:block;
将元素转化为行内元素:display:inline;
将元素转化为行内块元素:display:inline-block;
Css的三大特性:
? 层叠性(覆盖性)、继承性、优先级;
层叠性(覆盖性)
层叠性(就近原则):如果一个标签书写的样式重叠冲突了,后写的css样式会把先写的样式覆盖掉,样式不冲突的话就不会层叠;
继承性:
有一些css属性子级是可以继承父级的,一般文在控制属性都会被继承,a标签继承color除外,需要单独设置(因为a独特显示,不会继承父级的color,我们需要单独设置);
能被继承的文字属性:font-size、color、font-weight、font-style、text-indent,text-indent、line-height、text-align: center;、text-decoration:、font-family:
以上就是来到黑马半个月时间学到的知识,基础而又重要,每一个都是写网页会用到的知识点,可以说是比在学校一学期学到的东西都多。学习就像是造楼房,打好基础才能学习到更扎实的知识,才能在这条道路上走的更远。
|
|